Fix: useEffect logic

apps/moderation/src/components/content-card/content-card.tsx

@@ -41,23 +41,23 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
   } = props;
 
   const [entryData, setEntryData] = React.useState<any>(null);
-  const [profileState, profileActions] = useProfile({
+  const [profile, profileActions] = useProfile({
     onError: error => {
       props.logger.error('[content-card.tsx]: useProfile err %j', error.error || '');
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
   });
 
-  const [reporterProfileState, reporterProfileActions] = useProfile({
+  const [reporterProfile, reporterProfileActions] = useProfile({
     onError: error => {
       props.logger.error('[content-card.tsx]: useProfile err %j', error.error || '');
     },
     ipfsService: props.sdkModules.commons.ipfsService,
     profileService: props.sdkModules.profiles.profileService,
   });
 
-  const [moderatorProfileState, moderatorProfileActions] = useProfile({
+  const [moderatorProfile, moderatorProfileActions] = useProfile({
     onError: error => {
       props.logger.error('[content-card.tsx]: useProfile err %j', error.error || '');
     },
@@ -81,11 +81,8 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
     }
     if (contentType === 'profile') {
       profileActions.getProfileData({ ethAddress: entryId });
-      if (profileState) {
-        setEntryData(profileState);
-      }
     }
-  }, [entryId, profileState]);
+  }, [entryId]);
 
   React.useEffect(() => {
     if (reporter) {
@@ -105,7 +102,7 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
         <Content
           isPending={isPending}
           locale={locale}
-          entryData={entryData}
+          entryData={contentType === 'profile' ? profile : entryData}
           showExplanationsLabel={showExplanationsLabel}
           hideExplanationsLabel={hideExplanationsLabel}
           determinationLabel={determinationLabel}
@@ -119,16 +116,16 @@ const ContentCard: React.FC<Omit<IContentProps, 'entryData'>> = props => {
           entryId={entryId}
           reasons={reasons}
           reporter={reporter}
-          reporterAvatar={reporterProfileState.avatar}
-          reporterName={reporterProfileState.name}
-          reporterENSName={reporterProfileState.userName}
+          reporterAvatar={reporterProfile.avatar}
+          reporterName={reporterProfile.name}
+          reporterENSName={reporterProfile.userName}
           otherReporters={otherReporters}
           reportedOnLabel={reportedOnLabel}
           reportedDateTime={reportedDateTime}
           moderatorDecision={moderatorDecision}
           moderator={moderator}
-          moderatorName={moderatorProfileState.name}
-          moderatorENSName={moderatorProfileState.userName}
+          moderatorName={moderatorProfile.name}
+          moderatorENSName={moderatorProfile.userName}
           moderatedByLabel={moderatedByLabel}
           moderatedOnLabel={moderatedOnLabel}
           evaluationDateTime={evaluationDateTime}

ui/design/src/components/VirtualList/card-renderer.tsx

@@ -68,14 +68,9 @@ const CardRenderer = (props: IRenderItemProps) => {
       {!shouldLoadData && <EntryLoadingPlaceholder height={averageItemHeight} />}
       {itemData &&
         shouldLoadData &&
-        !itemData.delisted &&
         !itemData.reported &&
         React.cloneElement(itemCard, { itemId, itemData })}
-      {itemData &&
-        shouldLoadData &&
-        !itemData.delisted &&
-        itemData.reported &&
-        itemCardAlt(itemData)}
+      {itemData && shouldLoadData && itemData.reported && itemCardAlt(itemData)}
 
       {afterEntities.map((entityObj, idx) => {
         return entityObj.getComponent({

ui/hooks/src/use-posts.ts

@@ -199,7 +199,7 @@ const usePosts = (props: UsePostsProps): [PostsState, PostsActions] => {
           .map(entry => {
             newIds.push(entry._id);
             // check if entry has quote and id of such quote is not yet in the list
-            if (entry.quotes.length > 0 && newQuoteIds.indexOf(entry.quotes[0]._id) === -1) {
+            if (entry.quotes?.length > 0 && newQuoteIds.indexOf(entry.quotes[0]._id) === -1) {
               newQuoteIds.push(entry.quotes[0]._id);
             }
             return mapEntry(entry, ipfsGateway, logger);
@@ -227,12 +227,22 @@ const usePosts = (props: UsePostsProps): [PostsState, PostsActions] => {
               };
             }
 
-            posts[res.contentId] = {
-              ...target,
-              delisted: res.delisted,
-              reported: res.reported,
-              quote: quote,
-            };
+            if (res.delisted) {
+              const index = newIds.indexOf(res.contentId);
+              if (index > -1) {
+                // remove the entry id from newIds
+                newIds.splice(index, 1);
+              }
+              // remove the entry from posts object
+              delete posts[res.contentId];
+            } else {
+              posts[res.contentId] = {
+                ...target,
+                delisted: res.delisted,
+                reported: res.reported,
+                quote: quote,
+              };
+            }
           });
         }