Fix: useEffect logic (#743)

* fix(apps): fix useEffect logic * fix(ui): remove delisted items from posts object * fix(ui): nullish coalescing * refactor(apps, ui): consolidate itemCardAlt prop * Merge branch 'master' of github.com:AKASHAorg/akasha-world-framework into fix/moderation-app * fix(ui): remove redundant prop
AKASHAorg · Feb 16, 2021 · 00086a0 · 00086a0
1 parent 92d0d8b
commit 00086a0
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 62 deletions.
diff --git a/apps/akasha/src/components/feed-page/entry-card-renderer.tsx b/apps/akasha/src/components/feed-page/entry-card-renderer.tsx
@@ -5,7 +5,7 @@ import { useFollow } from '@akashaproject/ui-awf-hooks';
 import { IAkashaError } from '@akashaproject/ui-awf-typings';
 import { IBookmarkState } from '@akashaproject/ui-awf-hooks/lib/use-entry-bookmark';
 
-const { ErrorInfoCard, ErrorLoader, EntryCard, EntryCardLoading } = DS;
+const { ErrorInfoCard, ErrorLoader, EntryCard, EntryCardHidden, EntryCardLoading } = DS;
 
 export interface IEntryCardRendererProps {
   sdkModules: any;
@@ -97,6 +97,17 @@ const EntryCardRenderer = (props: IEntryCardRendererProps) => {
   };
 
   const isFollowing = followedProfiles.includes(itemData.author.ethAddress);
+
+  if (itemData.reported) {
+    return (
+      <EntryCardHidden
+        awaitingModerationLabel={awaitingModerationLabel}
+        ctaLabel={ctaLabel}
+        handleFlipCard={handleFlipCard && handleFlipCard(itemData, false)}
+      />
+    );
+  }
+
   return (
     <ErrorInfoCard errors={{}}>
       {(errorMessages: any, hasCriticalErrors: boolean) => (

diff --git a/apps/akasha/src/components/feed-page/feed-page.tsx b/apps/akasha/src/components/feed-page/feed-page.tsx
@@ -27,7 +27,6 @@ const {
   useViewportSize,
   EditorModal,
   EditorPlaceholder,
-  EntryCardHidden,
 } = DS;
 
 export interface FeedPageProps {
@@ -349,13 +348,6 @@ const FeedPage: React.FC<FeedPageProps & RootComponentProps> = props => {
             handleFlipCard={handleFlipCard}
           />
         }
-        itemCardAlt={(entry: any) => (
-          <EntryCardHidden
-            awaitingModerationLabel={t('You have reported this post. It is awaiting moderation.')}
-            ctaLabel={t('See it anyway')}
-            handleFlipCard={handleFlipCard(entry, false)}
-          />
-        )}
         customEntities={getFeedCustomEntities({
           sdkModules,
           logger,

diff --git a/apps/akasha/src/components/post-page/post-page.tsx b/apps/akasha/src/components/post-page/post-page.tsx
@@ -486,15 +486,9 @@ const PostPage: React.FC<IPostPage & RootComponentProps> = props => {
             onShare={handleEntryShare}
             onAvatarClick={handleAvatarClick}
             onMentionClick={handleMentionClick}
+            handleFlipCard={handleListFlipCard}
           />
         }
-        itemCardAlt={(entry: any) => (
-          <EntryCardHidden
-            awaitingModerationLabel={t('You have reported this post. It is awaiting moderation.')}
-            ctaLabel={t('See it anyway')}
-            handleFlipCard={handleListFlipCard(entry, false)}
-          />
-        )}
         customEntities={getPendingComments({
           logger,
           globalChannel,

diff --git a/apps/akasha/src/components/post-page/post-renderer.tsx b/apps/akasha/src/components/post-page/post-renderer.tsx
@@ -5,7 +5,7 @@ import { useFollow } from '@akashaproject/ui-awf-hooks';
 import { IAkashaError } from '@akashaproject/ui-awf-typings';
 import { IBookmarkState } from '@akashaproject/ui-awf-hooks/lib/use-entry-bookmark';
 
-const { ErrorInfoCard, ErrorLoader, EntryBox, Box, EntryCardLoading } = DS;
+const { ErrorInfoCard, ErrorLoader, EntryCardHidden, EntryBox, Box, EntryCardLoading } = DS;
 
 export interface PostRendererProps {
   sdkModules: any;
@@ -28,6 +28,7 @@ export interface PostRendererProps {
   style?: React.CSSProperties;
   contentClickable?: boolean;
   hidePublishTime?: boolean;
+  handleFlipCard?: (entry: any, isQuote: boolean) => () => void;
 }
 
 const PostRenderer = (props: PostRendererProps) => {
@@ -41,6 +42,7 @@ const PostRenderer = (props: PostRendererProps) => {
     contentClickable,
     bookmarkState,
     hidePublishTime,
+    handleFlipCard,
   } = props;
 
   const { t } = useTranslation();
@@ -85,6 +87,17 @@ const PostRenderer = (props: PostRendererProps) => {
 
   const isFollowing = followedProfiles.includes(itemData.author.ethAddress);
 
+  if (itemData.reported) {
+    return (
+      <EntryCardHidden
+        awaitingModerationLabel={t('You have reported this post. It is awaiting moderation.')}
+        moderatedContentLabel={t('This content has been moderated')}
+        ctaLabel={t('See it anyway')}
+        handleFlipCard={handleFlipCard && handleFlipCard(itemData, false)}
+      />
+    );
+  }
+
   return (
     <ErrorInfoCard errors={{}}>
       {(errorMessages: any, hasCriticalErrors: boolean) => (

diff --git a/apps/moderation/src/components/content-card/content-card.tsx b/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}

diff --git a/ui/design/src/components/VirtualList/card-renderer.tsx b/ui/design/src/components/VirtualList/card-renderer.tsx
@@ -10,7 +10,6 @@ const CardRenderer = (props: IRenderItemProps) => {
     itemSpacing,
     customEntities,
     itemCard,
-    itemCardAlt,
     itemRect,
     updateRef,
     averageItemHeight,
@@ -66,16 +65,7 @@ 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 && React.cloneElement(itemCard, { itemId, itemData })}
 
       {afterEntities.map((entityObj, idx) => {
         return entityObj.getComponent({

diff --git a/ui/design/src/components/VirtualList/interfaces.ts b/ui/design/src/components/VirtualList/interfaces.ts
@@ -36,7 +36,6 @@ export interface IVirtualListProps {
   loadMore: (payload: ILoadItemsPayload) => void;
   loadItemData?: (payload: ILoadItemDataPayload) => void;
   itemCard: React.ReactElement;
-  itemCardAlt: (entry: any) => React.ReactElement;
   listHeader?: React.ReactElement;
   /* spacing between items (bottom) */
   itemSpacing?: number;
@@ -102,7 +101,6 @@ export interface IListViewportProps {
   itemsData: { [key: string]: any };
   itemRects: Map<string, IItemStateRect>;
   itemCard: React.ReactElement;
-  itemCardAlt: IVirtualListProps['itemCardAlt'];
   loadItemData: IVirtualListProps['loadItemData'];
   itemSpacing: number;
   customEntities?: IVirtualListProps['customEntities'];
@@ -122,7 +120,6 @@ export interface IRenderItemProps {
   itemSpacing: IVirtualListProps['itemSpacing'];
   customEntities: IListCustomEntity[];
   itemCard: IVirtualListProps['itemCard'];
-  itemCardAlt: IVirtualListProps['itemCardAlt'];
   updateRef?: IListViewportProps['updateRef'];
   itemRect?: IItemStateRect;
   prevRect?: IItemStateRect | null;

diff --git a/ui/design/src/components/VirtualList/list-viewport.tsx b/ui/design/src/components/VirtualList/list-viewport.tsx
@@ -31,7 +31,6 @@ const ListViewport: React.FC<IListViewportProps> = props => {
             itemIndex={itemRects.get(itemId)?.index}
             itemId={itemId}
             itemCard={props.itemCard}
-            itemCardAlt={props.itemCardAlt}
             loadItemData={props.loadItemData}
             itemData={itemsData[itemId]}
             customEntities={customEntities}

diff --git a/ui/design/src/components/VirtualList/virtual-list.tsx b/ui/design/src/components/VirtualList/virtual-list.tsx
@@ -344,7 +344,6 @@ const VirtualScroll = (props: IVirtualListProps, ref: any) => {
         itemRects={itemPositions.rects}
         itemsData={itemsData}
         itemCard={itemCard}
-        itemCardAlt={props.itemCardAlt}
         listHeight={itemPositions.listHeight}
         loadItemData={loadItemData}
         itemSpacing={itemSpacing}

diff --git a/ui/hooks/src/use-posts.ts b/ui/hooks/src/use-posts.ts
@@ -212,7 +212,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);
@@ -240,12 +240,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,
+              };
+            }
           });
         }
 

diff --git a/ui/plugins/bookmarks/src/components/bookmarks-page.tsx b/ui/plugins/bookmarks/src/components/bookmarks-page.tsx
@@ -11,7 +11,7 @@ import {
 import { useTranslation } from 'react-i18next';
 import EntryCardRenderer from './entry-renderer';
 
-const { VirtualList, EntryCardHidden, ErrorInfoCard, ErrorLoader, Spinner } = DS;
+const { VirtualList, ErrorInfoCard, ErrorLoader, Spinner } = DS;
 
 const BookmarksPage = (props: RootComponentProps) => {
   const { globalChannel, sdkModules, logger } = props;
@@ -182,17 +182,14 @@ const BookmarksPage = (props: RootComponentProps) => {
                         onMentionClick={handleMentionClick}
                         contentClickable={true}
                         disableReposting={true}
-                      />
-                    }
-                    itemCardAlt={(entry: any) => (
-                      <EntryCardHidden
                         awaitingModerationLabel={t(
                           'You have reported this post. It is awaiting moderation.',
                         )}
+                        moderatedContentLabel={t('This content has been moderated')}
                         ctaLabel={t('See it anyway')}
-                        handleFlipCard={handleFlipCard(entry)}
+                        handleFlipCard={handleFlipCard}
                       />
-                    )}
+                    }
                   />
                 )}
               </>

diff --git a/ui/plugins/bookmarks/src/components/entry-renderer.tsx b/ui/plugins/bookmarks/src/components/entry-renderer.tsx
@@ -5,7 +5,7 @@ import { useFollow } from '@akashaproject/ui-awf-hooks';
 import { IAkashaError } from '@akashaproject/ui-awf-typings';
 import { BookmarkTypes, IBookmarkState } from '@akashaproject/ui-awf-hooks/lib/use-entry-bookmark';
 
-const { ErrorInfoCard, ErrorLoader, EntryCard, EntryCardLoading } = DS;
+const { ErrorInfoCard, ErrorLoader, EntryCard, EntryCardHidden, EntryCardLoading } = DS;
 
 export interface NavigationDetails {
   authorEthAddress: string;
@@ -37,6 +37,10 @@ export interface IEntryCardRendererProps {
   style?: React.CSSProperties;
   contentClickable?: boolean;
   disableReposting?: boolean;
+  moderatedContentLabel?: string;
+  awaitingModerationLabel?: string;
+  ctaLabel?: string;
+  handleFlipCard?: (entry: any, isQuote: boolean) => () => void;
 }
 
 const EntryCardRenderer = (props: IEntryCardRendererProps) => {
@@ -52,6 +56,10 @@ const EntryCardRenderer = (props: IEntryCardRendererProps) => {
     globalChannel,
     contentClickable,
     disableReposting,
+    moderatedContentLabel,
+    awaitingModerationLabel,
+    ctaLabel,
+    handleFlipCard,
   } = props;
 
   const isBookmarked = React.useMemo(() => {
@@ -95,6 +103,17 @@ const EntryCardRenderer = (props: IEntryCardRendererProps) => {
 
   const isFollowing = followedProfiles.includes(itemData.author.ethAddress);
 
+  if (itemData.reported) {
+    return (
+      <EntryCardHidden
+        awaitingModerationLabel={awaitingModerationLabel}
+        moderatedContentLabel={moderatedContentLabel}
+        ctaLabel={ctaLabel}
+        handleFlipCard={handleFlipCard && handleFlipCard(itemData, false)}
+      />
+    );
+  }
+
   return (
     <ErrorInfoCard errors={{}}>
       {(errorMessages: any, hasCriticalErrors: boolean) => (

diff --git a/ui/widgets/feed/src/components/entry-feed.tsx b/ui/widgets/feed/src/components/entry-feed.tsx
@@ -176,7 +176,6 @@ const EntryFeed = (props: IFeedWidgetProps) => {
                   onRepost={handleRepost}
                 />
               }
-              itemCardAlt={() => <></>}
             />
           )}
         </>