Feat: profile page post report functionality and moderation

ui/hooks/src/use-posts.ts

@@ -296,6 +296,7 @@ const usePosts = (props: UsePostsProps): [PostsState, PostsActions] => {
                 // remove the entry from posts object
                 delete posts[res.contentId];
               } else {
+                // update entry in posts object
                 posts[res.contentId] = {
                   ...target,
                   delisted: res.delisted,
@@ -474,7 +475,7 @@ const usePosts = (props: UsePostsProps): [PostsState, PostsActions] => {
       const userPostsCall = postsService.entries.entriesByAuthor(req);
       const ipfsGatewayCall = ipfsService.getSettings({});
 
-      combineLatest([ipfsGatewayCall, userPostsCall]).subscribe((responses: [any, any]) => {
+      combineLatest([ipfsGatewayCall, userPostsCall]).subscribe(async (responses: [any, any]) => {
         const [ipfsGatewayResp, userPostsResp] = responses;
         const {
           results,
@@ -486,22 +487,78 @@ const usePosts = (props: UsePostsProps): [PostsState, PostsActions] => {
           total: number;
         } = userPostsResp.data.getPostsByAuthor;
         const newIds: string[] = [];
+        const newQuoteIds: string[] = [];
         const posts = results
           .filter(excludeNonSlateContent)
           .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) {
+              newQuoteIds.push(entry.quotes[0]._id);
+            }
             return mapEntry(entry, ipfsGatewayResp.data, logger);
           })
           .reduce((obj, post) => ({ ...obj, [post.entryId]: post }), {});
 
-        setPostsState(prev => ({
-          ...prev,
-          postIds: prev.postIds.concat(newIds),
-          postsData: { ...prev.postsData, ...posts },
-          nextPostIndex: nextIndex,
-          isFetchingPosts: false,
-          totalItems: total,
-        }));
+        try {
+          const status = await moderationRequest.checkStatus(true, { user, contentIds: newIds });
+          const quotestatus =
+            !!newQuoteIds.length &&
+            (await moderationRequest.checkStatus(true, { user, contentIds: newQuoteIds }));
+          if (status && status.constructor === Array) {
+            status.forEach((res: any) => {
+              const target = posts[res.contentId];
+              let quote: any;
+
+              if (target.quote) {
+                const { reported, delisted, moderated } = quotestatus.find(
+                  (el: any) => el.contentId === target.quote.entryId,
+                );
+                quote = {
+                  ...target.quote,
+                  // if moderated, bypass value of reported for the user
+                  reported: moderated ? false : reported,
+                  delisted: delisted,
+                };
+              }
+
+              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 {
+                // update entry in posts object
+                posts[res.contentId] = {
+                  ...target,
+                  delisted: res.delisted,
+                  // if moderated, bypass value of reported for the user
+                  reported: res.moderated ? false : res.reported,
+                  quote: quote,
+                };
+              }
+            });
+          }
+          setPostsState(prev => ({
+            ...prev,
+            nextPostIndex: nextIndex,
+            postsData: { ...prev.postsData, ...posts },
+            postIds: prev.postIds.concat(newIds),
+            isFetchingPosts: false,
+            totalItems: total,
+          }));
+        } catch (err) {
+          newIds.forEach(id => {
+            createErrorHandler(
+              `${id}`,
+              false,
+              onError,
+            )(new Error(`Failed to fetch moderated content. ${err.message}`));
+          });
+        }
       }, createErrorHandler('usePosts.getUserPosts', false, onError));
     },
     updatePostsState: (updatedEntry: any) => {

ui/plugins/profile/src/components/routes/index.tsx

@@ -8,7 +8,7 @@ import { RootComponentProps } from '@akashaproject/ui-awf-typings';
 import { useLoginState, useModalState, useErrors, useProfile } from '@akashaproject/ui-awf-hooks';
 import { MODAL_NAMES } from '@akashaproject/ui-awf-hooks/lib/use-modal-state';
 
-const { Box, LoginModal } = DS;
+const { Box, LoginModal, ViewportSizeProvider } = DS;
 
 const Routes: React.FC<RootComponentProps> = props => {
   const { activeWhen, logger } = props;
@@ -30,6 +30,22 @@ const Routes: React.FC<RootComponentProps> = props => {
     onError: errorActions.createError,
   });
 
+  const [reportModalOpen, setReportModalOpen] = React.useState(false);
+  const [flagged, setFlagged] = React.useState('');
+
+  const showLoginModal = () => {
+    modalStateActions.show(MODAL_NAMES.LOGIN);
+  };
+
+  React.useEffect(() => {
+    if (loginState.ethAddress) {
+      hideLoginModal();
+      if (!!flagged.length) {
+        setReportModalOpen(true);
+      }
+    }
+  }, [loginState.ethAddress]);
+
   React.useEffect(() => {
     if (loginState.pubKey) {
       loggedProfileActions.getProfileData({ pubKey: loginState.pubKey });
@@ -59,34 +75,41 @@ const Routes: React.FC<RootComponentProps> = props => {
   };
 
   return (
-    <Router>
-      <Box>
-        <Switch>
-          <Route path={`${rootRoute}/list`} render={() => <>A list of profiles</>} />
-          <Route path={[`${path}/:pubKey`, menuRoute[MY_PROFILE]]}>
-            <ProfilePage
-              {...props}
-              ethAddress={loginState.ethAddress}
-              loginActions={loginActions}
-              modalActions={modalStateActions}
-              modalState={modalState}
-              loggedProfileData={loggedProfileData}
-            />
-          </Route>
-          <Route render={() => <div>{t('Oops, Profile not found!')}</div>} />
-        </Switch>
-      </Box>
-      <LoginModal
-        showModal={modalState[MODAL_NAMES.LOGIN]}
-        slotId={props.layout.app.modalSlotId}
-        onLogin={loginActions.login}
-        onModalClose={hideLoginModal}
-        titleLabel={t('Connect a wallet')}
-        metamaskModalHeadline={t('Connecting')}
-        metamaskModalMessage={t('Please complete the process in your wallet')}
-        error={loginErrors}
-      />
-    </Router>
+    <ViewportSizeProvider>
+      <Router>
+        <Box>
+          <Switch>
+            <Route path={`${rootRoute}/list`} render={() => <>A list of profiles</>} />
+            <Route path={[`${path}/:pubKey`, menuRoute[MY_PROFILE]]}>
+              <ProfilePage
+                {...props}
+                ethAddress={loginState.ethAddress}
+                loginActions={loginActions}
+                modalActions={modalStateActions}
+                modalState={modalState}
+                loggedProfileData={loggedProfileData}
+                flagged={flagged}
+                reportModalOpen={reportModalOpen}
+                setFlagged={setFlagged}
+                showLoginModal={showLoginModal}
+                setReportModalOpen={setReportModalOpen}
+              />
+            </Route>
+            <Route render={() => <div>{t('Oops, Profile not found!')}</div>} />
+          </Switch>
+        </Box>
+        <LoginModal
+          showModal={modalState[MODAL_NAMES.LOGIN]}
+          slotId={props.layout.app.modalSlotId}
+          onLogin={loginActions.login}
+          onModalClose={hideLoginModal}
+          titleLabel={t('Connect a wallet')}
+          metamaskModalHeadline={t('Connecting')}
+          metamaskModalMessage={t('Please complete the process in your wallet')}
+          error={loginErrors}
+        />
+      </Router>
+    </ViewportSizeProvider>
   );
 };