Merge pull request #579 from cofacts/block-reply-detail

Reply detail and article detail revamp for blocked content
cofacts · Oct 1, 2024 · 17038be · 17038be
2 parents d476eeb + fd8d6d6
commit 17038be
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 82 deletions.
diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -378,6 +378,42 @@ function ArticlePage() {
     element => element.user && currentUser && element.user.id === currentUser.id
   );
 
+  const headerElem = (
+    <header className={classes.textHeader}>
+      <Ribbon className={classes.title}>
+        {ngettext(
+          msgid`${replyRequestCount} person report this message`,
+          `${replyRequestCount} people report this message`,
+          replyRequestCount
+        )}
+      </Ribbon>
+      <Infos>
+        <TimeInfo time={article.createdAt}>
+          {timeAgo => t`First reported ${timeAgo}`}
+        </TimeInfo>
+      </Infos>
+    </header>
+  );
+
+  if (article.status === 'BLOCKED' && !currentUser) {
+    return (
+      <AppLayout>
+        <Head>
+          <title>{t`Cofacts`}</title>
+          <meta name="robots" content="noindex, nofollow" />
+        </Head>
+        <div className={classes.root}>
+          <div className={classes.main}>
+            <Card>
+              {headerElem}
+              <CardContent>{t`Log in to view content`}</CardContent>
+            </Card>
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
   return (
     <AppLayout>
       <Head>
@@ -390,85 +426,66 @@ function ArticlePage() {
       <div className={classes.root}>
         <div className={classes.main}>
           <Card>
-            <header className={classes.textHeader}>
-              <Ribbon className={classes.title}>
-                {ngettext(
-                  msgid`${replyRequestCount} person report this message`,
-                  `${replyRequestCount} people report this message`,
-                  replyRequestCount
-                )}
-              </Ribbon>
-              <Infos>
-                <TimeInfo time={article.createdAt}>
-                  {timeAgo => t`First reported ${timeAgo}`}
-                </TimeInfo>
-              </Infos>
-            </header>
+            {headerElem}
             <CardContent>
-              {article.status === 'BLOCKED' && !currentUser ? (
-                t`Log in to view content`
-              ) : (
-                <>
-                  {(() => {
-                    switch (articleType) {
-                      case 'IMAGE':
-                        return !originalAttachmentUrl ? (
-                          <img
-                            className={classes.attachment}
-                            src={attachmentUrl}
-                            alt="image"
-                          />
-                        ) : (
-                          <a
-                            href={originalAttachmentUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            <img
-                              className={classes.attachment}
-                              src={attachmentUrl}
-                              alt="image"
-                            />
-                          </a>
-                        );
-                      case 'VIDEO':
-                        return !originalAttachmentUrl ? (
-                          t`Log in to view video content`
-                        ) : (
-                          <video
-                            className={classes.attachment}
-                            src={originalAttachmentUrl}
-                            controls
-                          />
-                        );
-                      case 'AUDIO':
-                        return !originalAttachmentUrl ? (
-                          t`Log in to view audio content`
-                        ) : (
-                          <audio src={originalAttachmentUrl} controls />
-                        );
-                      default:
-                        return (
-                          <>
-                            {text &&
-                              nl2br(
-                                linkify(text, {
-                                  props: {
-                                    target: '_blank',
-                                    rel: 'ugc nofollow',
-                                  },
-                                })
-                              )}
-                            <Hyperlinks
-                              hyperlinks={hyperlinks}
-                              rel="ugc nofollow"
-                            />
-                          </>
-                        );
-                    }
-                  })()}
-                </>
-              )}
+              {(() => {
+                switch (articleType) {
+                  case 'IMAGE':
+                    return !originalAttachmentUrl ? (
+                      <img
+                        className={classes.attachment}
+                        src={attachmentUrl}
+                        alt="image"
+                      />
+                    ) : (
+                      <a
+                        href={originalAttachmentUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <img
+                          className={classes.attachment}
+                          src={attachmentUrl}
+                          alt="image"
+                        />
+                      </a>
+                    );
+                  case 'VIDEO':
+                    return !originalAttachmentUrl ? (
+                      t`Log in to view video content`
+                    ) : (
+                      <video
+                        className={classes.attachment}
+                        src={originalAttachmentUrl}
+                        controls
+                      />
+                    );
+                  case 'AUDIO':
+                    return !originalAttachmentUrl ? (
+                      t`Log in to view audio content`
+                    ) : (
+                      <audio src={originalAttachmentUrl} controls />
+                    );
+                  default:
+                    return (
+                      <>
+                        {text &&
+                          nl2br(
+                            linkify(text, {
+                              props: {
+                                target: '_blank',
+                                rel: 'ugc nofollow',
+                              },
+                            })
+                          )}
+                        <Hyperlinks
+                          hyperlinks={hyperlinks}
+                          rel="ugc nofollow"
+                        />
+                      </>
+                    );
+                }
+              })()}
               {articleType !== 'TEXT' ? (
                 <CollabEditor article={article} />
               ) : null}

diff --git a/pages/reply/[id].js b/pages/reply/[id].js
@@ -206,15 +206,15 @@ function ReplyPage() {
     return (
       <AppLayout>
         <Head>
-          <title>
-            {ellipsis(reply.text, { wordCount: 100 })} | {t`Cofacts`}
-          </title>
+          <title>{t`Cofacts`}</title>
           <meta name="robots" content="noindex" />
         </Head>
         <div className={classes.root}>
           <Card>
             <CardHeader>{t`This reply`}</CardHeader>
-            <CardContent>{reply.text}</CardContent>
+            <CardContent>
+              {!currentUser ? t`Log in to view content` : reply.text}
+            </CardContent>
           </Card>
         </div>
       </AppLayout>