top eight edit modal fixes, profile fixes

ethereumfollowprotocol · Feb 19, 2025 · 6dced3d · 6dced3d
1 parent 02ea335
commit 6dced3d
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 21 deletions.
diff --git a/src/app/leaderboard/page.tsx b/src/app/leaderboard/page.tsx
@@ -1,10 +1,11 @@
+import Image from 'next/image'
+import { Suspense } from 'react'
 import type { Metadata } from 'next'
+
 import LeaderboardTable from './components/table.tsx'
-import Image from 'next/image'
 import CloudLeft from 'public/assets/art/cloud-left.png'
-import CloudMiddle from 'public/assets/art/cloud-middle.png'
 import CloudRight from 'public/assets/art/cloud-right.png'
-import { Suspense } from 'react'
+import CloudMiddle from 'public/assets/art/cloud-middle.png'
 
 export const metadata: Metadata = {
   title: 'Leaderboard | EFP',

diff --git a/src/components/profile-page-table/components/table-headers.tsx b/src/components/profile-page-table/components/table-headers.tsx
@@ -28,6 +28,7 @@ interface TableHeaderProps {
   setSort: (option: FollowSortType) => void
   toggleSelectedTags: (title: ProfileTableTitleType, tag: string) => void
   isShowingBlocked?: boolean
+  isTopEight?: boolean
   setActiveTab?: (tab: ProfileTableTitleType) => void
 }
 
@@ -44,6 +45,7 @@ const TableHeader: React.FC<TableHeaderProps> = ({
   sort,
   setSort,
   isShowingBlocked,
+  isTopEight,
   setActiveTab,
 }) => {
   const [showSort, setShowSort] = useState(false)
@@ -66,10 +68,8 @@ const TableHeader: React.FC<TableHeaderProps> = ({
       <div className='flex w-full justify-between'>
         <div className='flex w-full flex-wrap items-center justify-between gap-3 sm:flex-nowrap sm:justify-start'>
           <div className='flex w-full items-center gap-3 sm:w-fit'>
-            {BLOCKED_MUTED_TABS.includes(title) ? (
-              <h2 className='hidden py-2 pl-2 text-lg font-bold text-nowrap capitalize sm:text-xl xl:block'>
-                {t(title)}
-              </h2>
+            {BLOCKED_MUTED_TABS.includes(title) || isTopEight ? (
+              <h2 className='py-2 pl-2 text-lg font-bold text-nowrap capitalize sm:text-xl'>{t(title)}</h2>
             ) : (
               <div className='bg-grey relative flex w-full items-center rounded-sm sm:w-fit'>
                 <div

diff --git a/src/components/profile-page-table/index.tsx b/src/components/profile-page-table/index.tsx
@@ -148,6 +148,7 @@ const UserProfilePageTable = forwardRef<HTMLDivElement, UserProfilePageTableProp
             selectedTags={selectedTags}
             sort={sort}
             setSort={setSort}
+            isTopEight={isTopEight}
             toggleSelectedTags={toggleSelectedTags}
             isShowingBlocked={isShowingBlocked}
           />
@@ -176,7 +177,13 @@ const UserProfilePageTable = forwardRef<HTMLDivElement, UserProfilePageTableProp
           />
           {!isLoading && <div ref={loadMoreRef} className='mb-4 h-px w-full' />}
           {isFollowingTable && isProfile && (lists?.lists?.length || 0) === 0 && (
-            <Recommendations limit={40} endpoint='recommended' header={t('recommendations')} className='py-2' />
+            <Recommendations
+              limit={40}
+              endpoint='recommended'
+              header={t('recommendations')}
+              className='py-2'
+              isTopEight={isTopEight}
+            />
           )}
         </div>
       </div>

diff --git a/src/components/recommendations.tsx b/src/components/recommendations.tsx
@@ -16,9 +16,10 @@ interface RecommendationsProps {
   className?: string
   limit?: number
   endpoint: 'discover' | 'recommended'
+  isTopEight?: boolean
 }
 
-const Recommendations = ({ header, className, limit = 10, endpoint }: RecommendationsProps) => {
+const Recommendations = ({ header, className, limit = 10, endpoint, isTopEight = false }: RecommendationsProps) => {
   const [page, setPage] = useState(1)
   const { selectedList } = useEFPProfile()
   const { address: userAddress } = useAccount()
@@ -107,6 +108,7 @@ const Recommendations = ({ header, className, limit = 10, endpoint }: Recommenda
         }))}
         showFollowsYouBadges={true}
         showTags={false}
+        isTopEight={isTopEight}
       />
       {!(isLoading || isFetchingNextPage || isFetchingPreviousPage) &&
         (displayedProfiles?.length === 0 || !displayedProfiles) && (

diff --git a/src/components/top-eight/components/edit-modal.tsx b/src/components/top-eight/components/edit-modal.tsx
@@ -27,12 +27,15 @@ const EditModal: React.FC<EditModalProps> = ({ profiles, onClose, followingListP
 
   return (
     <Modal onCancel={onClose} className='items-start md:pt-[12.5vh]'>
-      <div className='flex w-full max-w-[1280px] flex-col items-center gap-6 pt-2 sm:p-2'>
+      <div className='flex w-full max-w-[800px] flex-col items-center gap-6 pt-2 sm:p-2 xl:max-w-[1280px]'>
         <h2 className='text-2xl font-bold'>{t('top eight title')}</h2>
         <div className='flex w-full flex-col-reverse gap-4 xl:flex-row'>
           <div
             className='flex w-full flex-col gap-4 xl:overflow-auto xl:px-2'
-            style={{ maxHeight: window.innerWidth > 1280 ? `${120 + maxListHeight * 186}px` : 'fit-content' }}
+            style={{
+              maxHeight: window.innerWidth > 1280 ? `${120 + maxListHeight * 186}px` : 'fit-content',
+              minHeight: '400px',
+            }}
           >
             <div className='flex w-full flex-col items-center gap-4 sm:flex-row'>
               <div className='relative w-full'>
@@ -62,9 +65,12 @@ const EditModal: React.FC<EditModalProps> = ({ profiles, onClose, followingListP
             </div>
             <UserProfilePageTable {...followingListProps} isTopEight={true} />
           </div>
-          <div className='flex min-h-[430px] w-full flex-wrap items-start justify-evenly gap-2 rounded-sm sm:justify-start'>
+          <div className='flex min-h-[400px] w-full flex-wrap gap-2 rounded-sm'>
             <p
-              className={cn('w-full py-2 text-center font-semibold', isTopEightFull ? 'text-red-400' : 'text-text/40')}
+              className={cn(
+                'w-full py-2 text-center text-[15px] font-semibold',
+                isTopEightFull ? 'text-red-400' : 'text-text/40'
+              )}
             >
               {t(isTopEightFull ? 'top eight limit' : 'top eight description')}
             </p>
@@ -74,9 +80,12 @@ const EditModal: React.FC<EditModalProps> = ({ profiles, onClose, followingListP
             {new Array(loadingItems).fill(1).map((_, i) => (
               <TopEightLoadingProfile key={i} isEditing={true} />
             ))}
-            {editedProfiles.length === 0 && <p className='text-text/40 font-semibold italic'>{t('no top eight')}</p>}
+            {editedProfiles.length === 0 && (
+              <p className='text-text/90 bg-nav-item flex h-[280px] w-full items-center justify-center rounded-sm font-semibold italic'>
+                {t('no top eight')}
+              </p>
+            )}
             <div className='mt-4 flex w-full items-center justify-between'>
-              {/* <CancelButton onClick={onClose} /> */}
               <PrimaryButton
                 // disabled={isTopEightFull}
                 onClick={() => {

diff --git a/src/components/top-eight/hooks/use-edit-top-eight.ts b/src/components/top-eight/hooks/use-edit-top-eight.ts
@@ -44,7 +44,9 @@ export const useEditTopEight = (profiles: TopEightProfileType[]) => {
   const isTopEightFull = currentTopEightLength >= 8
 
   useEffect(() => {
-    setEditedProfiles([...profiles, ...topEightInCart])
+    if (topEightInCart.length >= 0) {
+      setEditedProfiles([...profiles, ...topEightInCart])
+    }
   }, [topEightInCart])
 
   const getFollowingState = async (address: Address) => {

diff --git a/src/components/top-eight/index.tsx b/src/components/top-eight/index.tsx
@@ -5,10 +5,10 @@ import { cn } from '#/lib/utilities'
 import EditModal from './components/edit-modal'
 import { useTopEight } from './hooks/use-top-eight'
 import Edit from 'public/assets/icons/ui/edit.svg'
-import TopEightProfile from './components/top-eight-profile'
 import ArrowDown from 'public/assets/icons/ui/arrow-down.svg'
 import type { UserProfilePageTableProps } from '../profile-page-table'
 import TopEightLoadingProfile from './components/top-eight-loading-profile'
+import TopEightProfile from './components/top-eight-profile'
 
 interface TopEightProps {
   user: Address | string
@@ -50,7 +50,7 @@ const TopEight: React.FC<TopEightProps> = ({ user, isConnectedUserProfile, follo
           )}
         </div>
         {isTopEightEmpty && (
-          <p className='bg-neutral shadow-medium w-full rounded-sm py-20 text-center text-lg font-medium italic'>
+          <p className='bg-neutral shadow-medium w-full rounded-sm py-[76px] text-center text-lg font-medium italic'>
             {t('no top eight')}
           </p>
         )}

diff --git a/src/components/user-profile/components/loading.tsx b/src/components/user-profile/components/loading.tsx
@@ -4,7 +4,7 @@ import LoadingCell from '../../loaders/loading-cell'
 const Loading = () => {
   return (
     <div className='relative w-full px-4 pt-12 pb-36 xl:px-8'>
-      <LoadingCell className='absolute top-0 left-0 h-full w-full' />
+      <LoadingCell className='absolute top-0 left-0 -z-10 h-full w-full' />
       <div className='absolute top-6 right-8 flex gap-2'>
         <LoadingCell className='h-7 w-14 rounded-sm' />
         <LoadingCell className='h-7 w-7 rounded-sm' />

diff --git a/src/components/user-profile/components/more-options.tsx b/src/components/user-profile/components/more-options.tsx
@@ -42,7 +42,7 @@ const MoreOptions: React.FC<MoreOptionsProps> = ({
 
   return (
     <div className='absolute top-4 right-8 flex gap-2 lg:top-6'>
-      {profileList !== Number(primaryList) && (
+      {profileList && profileList !== Number(primaryList) && (
         <div ref={clickAwayCardTooltip} className='group relative z-50 cursor-help'>
           <p
             onClick={() => setCardTooltipOpen(!cardTooltipOpen)}
@@ -59,7 +59,9 @@ const MoreOptions: React.FC<MoreOptionsProps> = ({
           </div>
         </div>
       )}
-      <p className='bg-nav-item rounded-sm px-2 py-[3px] text-sm font-semibold sm:text-sm'>#{profileList}</p>
+      {profileList && (
+        <p className='bg-nav-item rounded-sm px-2 py-[3px] text-sm font-semibold sm:text-sm'>#{profileList}</p>
+      )}
       <button
         onClick={refetchData}
         className='bg-nav-item rounded-sm p-1 transition-all hover:scale-110 hover:opacity-60'