Merge pull request #378 from cofacts/hide-user-link

Make profile page accessible for editors themselves only
cofacts · Jan 21, 2021 · 3ed70bb · 3ed70bb
2 parents f5c7395 + 13ef4ef
commit 3ed70bb
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 68 deletions.
diff --git a/components/ArticleReply/ArticleReply.js b/components/ArticleReply/ArticleReply.js
@@ -153,7 +153,10 @@ const ArticleReply = React.memo(
     return (
       <>
         <Box component="header" display="flex" alignItems="center">
-          <Avatar user={articleReply.user} className={classes.avatar} hasLink />
+          <Avatar
+            user={articleReply.user}
+            className={classes.avatar} /*hasLink*/
+          />
           <Box flexGrow={1}>
             <ArticleReplySummary articleReply={articleReply} />
             <ReplyInfo reply={reply} articleReplyCreatedAt={createdAt} />

diff --git a/components/ArticleReplyFeedbackControl/Feedback.js b/components/ArticleReplyFeedbackControl/Feedback.js
@@ -22,7 +22,7 @@ function Feedback({ feedback }) {
 
   return (
     <div className={classes.root}>
-      <Avatar user={feedback.user} size={48} hasLink />
+      <Avatar user={feedback.user} size={48} /*hasLink*/ />
       <Box px={2}>
         <div className={classes.name}>{feedback.user?.name}</div>
         <div>{feedback.comment}</div>

diff --git a/components/ArticleReplySummary.js b/components/ArticleReplySummary.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { t, jt } from 'ttag';
 import gql from 'graphql-tag';
-import ProfileLink from 'components/ProfileLink';
+import { ProfileTooltip } from 'components/ProfileLink';
 import cx from 'clsx';
 import { TYPE_NAME } from 'constants/replyType';
 import { makeStyles } from '@material-ui/core/styles';
@@ -33,9 +33,9 @@ function ArticleReplySummary({ articleReply, className, ...props }) {
   const classes = useStyles({ replyType });
 
   const authorElem = (
-    <ProfileLink key="editor" user={user} hasTooltip>
+    <ProfileTooltip key="editor" user={user}>
       <span>{user?.name || t`Someone`}</span>
-    </ProfileLink>
+    </ProfileTooltip>
   );
 
   return (
@@ -51,9 +51,10 @@ ArticleReplySummary.fragments = {
       replyType
       user {
         name
-        ...ProfileLinkUserData
+        ...ProfileTooltipUserData
       }
     }
+    ${ProfileTooltip.fragments.ProfileTooltipUserData}
   `,
 };
 

diff --git a/components/ProfileLink.js b/components/ProfileLink.js
@@ -4,6 +4,27 @@ import Link from 'next/link';
 import levelNames from '../constants/levelNames';
 import Tooltip from './Tooltip';
 
+export function ProfileTooltip({ user, children }) {
+  if (!user) {
+    return children;
+  }
+
+  const levelName = levelNames[user.level];
+  return (
+    <Tooltip title={t`Lv.${user.level} ${levelName}`} placement="top">
+      {children}
+    </Tooltip>
+  );
+}
+
+ProfileTooltip.fragments = {
+  ProfileTooltipUserData: gql`
+    fragment ProfileTooltipUserData on User {
+      level
+    }
+  `,
+};
+
 export default function ProfileLink({
   user,
   children,
@@ -19,7 +40,6 @@ export default function ProfileLink({
     return children;
   }
 
-  const levelName = levelNames[user.level];
   const linkProps = user.slug
     ? {
         href: '/user/[slug]',
@@ -33,9 +53,7 @@ export default function ProfileLink({
     <Link {...linkProps}>
       <a style={{ color: 'inherit' }} {...otherProps}>
         {hasTooltip ? (
-          <Tooltip title={t`Lv.${user.level} ${levelName}`} placement="top">
-            {children}
-          </Tooltip>
+          <ProfileTooltip user={user}>{children}</ProfileTooltip>
         ) : (
           children
         )}
@@ -49,7 +67,8 @@ ProfileLink.fragments = {
     fragment ProfileLinkUserData on User {
       id
       slug
-      level
+      ...ProfileTooltipUserData
     }
+    ${ProfileTooltip.fragments.ProfileTooltipUserData}
   `,
 };
diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
@@ -127,7 +127,11 @@ function ArticleReply({ articleReply }) {
         style={{ gap: '16px' }}
       >
         {user && (
-          <Avatar size={40} user={user} className={classes.avatar} hasLink />
+          <Avatar
+            size={40}
+            user={user}
+            className={classes.avatar} /*hasLink*/
+          />
         )}
         <Box flexGrow={1}>
           <ArticleReplySummary articleReply={articleReply} />

diff --git a/components/__snapshots__/ArticleReplySummary.stories.storyshot b/components/__snapshots__/ArticleReplySummary.stories.storyshot
@@ -16,8 +16,7 @@ exports[`Storyshots ArticleReplySummary Different Reply Types 1`] = `
   <div
     className="makeStyles-replyType makeStyles-replyType"
   >
-    <ProfileLink
-      hasTooltip={true}
+    <ProfileTooltip
       key="editor"
       user={
         Object {
@@ -27,40 +26,25 @@ exports[`Storyshots ArticleReplySummary Different Reply Types 1`] = `
         }
       }
     >
-      <Link
-        href="/user?id=test-user"
+      <Tooltip
+        placement="top"
+        title="Lv.10 闢謠天行者"
       >
-        <a
-          href="/user?id=test-user"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          style={
-            Object {
-              "color": "inherit",
-            }
-          }
+        <span
+          aria-describedby={null}
+          className=""
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseOver={[Function]}
+          onTouchEnd={[Function]}
+          onTouchStart={[Function]}
+          title="Lv.10 闢謠天行者"
         >
-          <Tooltip
-            placement="top"
-            title="Lv.10 闢謠天行者"
-          >
-            <span
-              aria-describedby={null}
-              className=""
-              onBlur={[Function]}
-              onFocus={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
-              title="Lv.10 闢謠天行者"
-            >
-              The user
-            </span>
-          </Tooltip>
-        </a>
-      </Link>
-    </ProfileLink>
+          The user
+        </span>
+      </Tooltip>
+    </ProfileTooltip>
      mark this message 
     invalid request
   </div>
@@ -79,15 +63,14 @@ exports[`Storyshots ArticleReplySummary No Valid User 1`] = `
   <div
     className="makeStyles-replyType makeStyles-replyType"
   >
-    <ProfileLink
-      hasTooltip={true}
+    <ProfileTooltip
       key="editor"
       user={null}
     >
       <span>
         Someone
       </span>
-    </ProfileLink>
+    </ProfileTooltip>
      mark this message 
     contains true information
   </div>

diff --git a/components/__snapshots__/ProfileLink.stories.storyshot b/components/__snapshots__/ProfileLink.stories.storyshot
@@ -25,24 +25,34 @@ exports[`Storyshots ProfileLink All Props 1`] = `
         }
       }
     >
-      <Tooltip
-        placement="top"
-        title="Lv.10 闢謠天行者"
+      <ProfileTooltip
+        user={
+          Object {
+            "id": "123",
+            "level": 10,
+            "slug": "slug123",
+          }
+        }
       >
-        <span
-          aria-describedby={null}
-          className=""
-          onBlur={[Function]}
-          onFocus={[Function]}
-          onMouseLeave={[Function]}
-          onMouseOver={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <Tooltip
+          placement="top"
           title="Lv.10 闢謠天行者"
         >
-          Child
-        </span>
-      </Tooltip>
+          <span
+            aria-describedby={null}
+            className=""
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+            title="Lv.10 闢謠天行者"
+          >
+            Child
+          </span>
+        </Tooltip>
+      </ProfileTooltip>
     </a>
   </Link>
 </ProfileLink>

diff --git a/pages/reply/[id].js b/pages/reply/[id].js
@@ -18,7 +18,7 @@ import ExpandableText from 'components/ExpandableText';
 import AppLayout from 'components/AppLayout';
 import ArticleReply from 'components/ArticleReply';
 import { Card, CardHeader, CardContent } from 'components/Card';
-import ProfileLink from 'components/ProfileLink';
+import { ProfileTooltip } from 'components/ProfileLink';
 import Infos, { TimeInfo } from 'components/Infos';
 import {
   SideSection,
@@ -93,7 +93,7 @@ const LOAD_REPLY = gql`
     }
   }
   ${ArticleReply.fragments.ArticleReplyData}
-  ${ProfileLink.fragments.ProfileLinkUserData}
+  ${ProfileTooltip.fragments.ProfileTooltipUserData}
 `;
 
 const LOAD_REPLY_FOR_USER = gql`
@@ -283,9 +283,9 @@ function ReplyPage() {
             </CardContent>
             {otherArticleReplies.map(ar => {
               const editorElem = (
-                <ProfileLink key="editor" user={ar.user} hasTooltip>
+                <ProfileTooltip key="editor" user={ar.user}>
                   <span>{ar?.user?.name || t`someone`}</span>
-                </ProfileLink>
+                </ProfileTooltip>
               );
 
               return (