fix: show avatars in profile search and fix IDs in mentions

.github/workflows/private-trigger.yml

@@ -51,7 +51,7 @@ jobs:
         run: npm install
 
       - name: Clean Code
-        run: npx prettier --write . 
+        run: npx prettier --write .
 
       - name: Run tests
         run: npm test

src/components/ui/Tab.tsx

@@ -17,11 +17,11 @@ export default function Tab({
     <div
       data-testid={testId || `${text.toLowerCase().replace(/\s+/g, '-')}-tab`}
       onClick={() => onClick(id)}
-      className="flex flex-1 flex-col h-full items-center justify-center px-4 relative hover:cursor-pointer hover:bg-white/12"
+      className="flex flex-1 flex-col h-full items-center justify-center px-4 relative hover:cursor-pointer hover:bg-white/12 "
     >
       <div className="relative flex flex-col items-center h-full justify-center">
         <span
-          className={`text-center text-l font-bold ${selected ? 'text-text-active' : 'text-text-inactive'}`}
+          className={`text-center text-l font-bold whitespace-nowrap ${selected ? 'text-text-active' : 'text-text-inactive'}`}
         >
           {text}
         </span>

src/features/layout/components/LayoutWrapper.tsx

@@ -33,7 +33,7 @@ export default function LayoutWrapper({
       )}
 
       <main className="flex flex-1 flex-row min-h-screen max-w-[1100px] w-full">
-        <div className="border-x-border border-x sm:w-[560px] w-full flex-1 min-w-0">
+        <div className="border-x-border border-x sm:w-[560px] w-full flex-1 min-w-0 overflow-hidden">
           {children}
         </div>
 

src/features/profile/store/profileStore.ts

@@ -33,6 +33,17 @@ export const useProfileStore = create<ProfileStore>()(
           selectTab: (tab) => {
             set({ selectedTab: tab });
           },
+          setBlockedFlag: (flag) =>
+            set((state) =>
+              state.currentProfile
+                ? {
+                    currentProfile: {
+                      ...state.currentProfile,
+                      is_blocked_by_me: flag,
+                    },
+                  }
+                : { currentProfile: state.currentProfile }
+            ),
         },
       }),
       {

src/features/profile/types/store.ts

@@ -14,5 +14,6 @@ export interface ProfileStore {
   clearProfile: () => void;
   actions: {
     selectTab: (tab: string) => void;
+    setBlockedFlag: (flag: boolean) => void;
   };
 }

src/features/timeline/components/Mention.tsx

@@ -66,7 +66,7 @@ export default function Mention() {
             if (totalProfiles && pages) {
               //   setMention(pages[0].data[0].User.username + '');
               setIsDone(
-                pages[0].data[0].User.username + ' ' + pages[0].data[0].id
+                pages[0].data[0].User.username + ' ' + pages[0].data[0]
               );
 
               console.log(pages[0].data[0].User.username);
@@ -82,8 +82,8 @@ export default function Mention() {
               const profile = pages[page].data[index];
               console.log(profile);
               //   setMention(profile.User.username + '');
-              console.log(profile.User.username + ' ' + profile.id);
-              setIsDone(profile.User.username + ' ' + profile.id);
+              console.log(profile.User.username + ' ' + profile.user_id);
+              setIsDone(profile.User.username + ' ' + profile.user_id);
               console.log(profile.User.username);
               // set user name with profile
             }
@@ -122,15 +122,15 @@ export default function Mention() {
     <React.Fragment key={i}>
       {group.data.map((profile, indx) => (
         <div
-          key={profile.id}
+          key={profile.user_id}
           className={`flex w-full  ${profile.is_followed_by_me ? 'h-20' : ' h-16'} p-3 ${selectedTab === i * group.metadata.limit + indx && 'bg-white/12'} hover:cursor-pointer hover:bg-white/12`}
           // className={`flex w-full ${profile.is_followed_by_me ? 'h-20' : ' h-16'} p-3  hover:cursor-pointer hover:bg-white/12`}
           onClick={() => {
             // setMention(profile.User.username + '');
             console.log(profile.User.username);
             setIsOpen(false);
             // setIsDone(true);
-            setIsDone(profile.User.username + ' ' + profile.id);
+            setIsDone(profile.User.username + ' ' + profile.user_id);
           }}
           // onKeyDown={(e: React.KeyboardEvent) => {
           //   e.preventDefault();
@@ -139,11 +139,12 @@ export default function Mention() {
         >
           <UserCard
             name={profile.name}
-            userId={profile.id}
+            userId={profile.user_id}
             handle={'@' + profile.User.username}
             verified={profile.User.is_verified}
             isFollowed={profile.is_followed_by_me}
             fontSize="text-base"
+            avatarUrl={profile.profile_image_url}
           ></UserCard>
         </div>
       ))}

src/features/timeline/components/Reply.tsx

@@ -3,32 +3,56 @@ import { TimelineFeed, TimelineTweet } from '../types/api';
 import { ADD_TWEET } from '../constants/tweetConstants';
 import Tweet from '@/features/tweets/components/Tweet';
 import { useTweetById } from '@/features/tweets/hooks/tweetQueries';
+import DeletedTweet from '@/features/tweets/components/DeletedTweet';
 
 export default function Reply({
   data,
   inProfile = false,
+  withoutOriginal = false,
 }: {
   data: TimelineFeed;
   inProfile?: boolean;
+  withoutOriginal?: boolean;
 }) {
   const tweetData = {
     ...(data.originalPostData as TimelineTweet),
     isRepost: data.originalPostData?.isRepost ?? false,
     isQuote: data.originalPostData?.isQuote ?? false,
   } as TimelineFeed;
-
+  const showUpperColumn =
+    data.originalPostData && data.originalPostData.isDeleted;
   return (
     <div>
-      {data.originalPostData && (
-        <Tweet
-          showBorder={false}
-          data-testid={`${tweetData.postId}${tweetData.userId}${tweetData.isQuote ? 1 : 0}`}
-          data={tweetData}
-          inProfile={inProfile}
-          key={`${data.postId}${data.userId}${data.date}`}
-        />
+      {data.originalPostData && data.originalPostData.isDeleted ? (
+        <div className="flex p-3">
+          <DeletedTweet id={data.originalPostData.postId} />
+        </div>
+      ) : (
+        data.originalPostData &&
+        (data.originalPostData.type !== ADD_TWEET.REPLY ? (
+          <Tweet
+            showColumn={true}
+            showBorder={false}
+            data-testid={`${tweetData.postId}${tweetData.userId}${tweetData.isQuote ? 1 : 0}`}
+            data={tweetData}
+            inProfile={inProfile}
+            key={`${tweetData.postId}${tweetData.userId}${tweetData.date}`}
+          />
+        ) : (
+          <Reply
+            withoutOriginal={true}
+            data-testid={`${tweetData.postId}${tweetData.userId}${tweetData.isRepost ? 1 : 0}${tweetData.isQuote ? 1 : 0}`}
+            data={tweetData}
+            inProfile={inProfile}
+            key={`${tweetData.isRepost ? (tweetData.originalPostData ? tweetData.originalPostData.postId : tweetData.postId) : tweetData.postId}${tweetData.userId}${tweetData.isRepost ? 1 : 0}${tweetData.date}`}
+          />
+        ))
       )}
+
       <Tweet
+        showBorder={!withoutOriginal}
+        showColumn={withoutOriginal}
+        showUpperColumn={showUpperColumn}
         data-testid={`${data.postId}${data.userId}${data.isQuote ? 1 : 0}`}
         data={data}
         inProfile={inProfile}

src/features/timeline/components/SearchProfile.tsx

@@ -168,7 +168,7 @@ export default function SearchProfile() {
     <React.Fragment key={i}>
       {group.data.map((profile, indx) => (
         <div
-          key={profile.id}
+          key={profile.user_id}
           className={`flex w-full ${profile.is_followed_by_me ? 'h-20' : ' h-16'} p-3 ${selectedTab === i * group.metadata.limit + (indx + 2) && 'bg-white/12'} hover:cursor-pointer hover:bg-white/12`}
           onClick={() => {
             setIsOpen(false);
@@ -179,11 +179,12 @@ export default function SearchProfile() {
         >
           <UserCard
             name={profile.name}
-            userId={profile.id}
+            userId={profile.user_id}
             handle={'@' + profile.User.username}
             verified={profile.User.is_verified}
             isFollowed={profile.is_followed_by_me}
             fontSize="text-base"
+            avatarUrl={profile.profile_image_url}
           ></UserCard>
         </div>
       ))}