diff --git a/components/ArticleReply/ArticleReply.js b/components/ArticleReply/ArticleReply.js index 7b8393c5..4abe4fdb 100644 --- a/components/ArticleReply/ArticleReply.js +++ b/components/ArticleReply/ArticleReply.js @@ -153,7 +153,10 @@ const ArticleReply = React.memo( return ( <> - + diff --git a/components/ArticleReplyFeedbackControl/Feedback.js b/components/ArticleReplyFeedbackControl/Feedback.js index b206967d..4dbab608 100644 --- a/components/ArticleReplyFeedbackControl/Feedback.js +++ b/components/ArticleReplyFeedbackControl/Feedback.js @@ -22,7 +22,7 @@ function Feedback({ feedback }) { return (
- +
{feedback.user?.name}
{feedback.comment}
diff --git a/components/ArticleReplySummary.js b/components/ArticleReplySummary.js index 5d8d7729..7d01261c 100644 --- 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 = ( - + {user?.name || t`Someone`} - + ); 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 index b088805d..0e5e5f7a 100644 --- 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 ( + + {children} + + ); +} + +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({ {hasTooltip ? ( - - {children} - + {children} ) : ( 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 index 4e5d9e51..d165a4c1 100644 --- a/components/ProfilePage/RepliedArticleTab.js +++ b/components/ProfilePage/RepliedArticleTab.js @@ -127,7 +127,11 @@ function ArticleReply({ articleReply }) { style={{ gap: '16px' }} > {user && ( - + )} diff --git a/components/__snapshots__/ArticleReplySummary.stories.storyshot b/components/__snapshots__/ArticleReplySummary.stories.storyshot index c6c8039f..646d921b 100644 --- a/components/__snapshots__/ArticleReplySummary.stories.storyshot +++ b/components/__snapshots__/ArticleReplySummary.stories.storyshot @@ -16,8 +16,7 @@ exports[`Storyshots ArticleReplySummary Different Reply Types 1`] = `
- - - - - - The user - - - - - + The user + + + mark this message invalid request
@@ -79,15 +63,14 @@ exports[`Storyshots ArticleReplySummary No Valid User 1`] = `
- Someone - + mark this message contains true information
diff --git a/components/__snapshots__/ProfileLink.stories.storyshot b/components/__snapshots__/ProfileLink.stories.storyshot index 6cfd3d57..bebeb663 100644 --- a/components/__snapshots__/ProfileLink.stories.storyshot +++ b/components/__snapshots__/ProfileLink.stories.storyshot @@ -25,24 +25,34 @@ exports[`Storyshots ProfileLink All Props 1`] = ` } } > - - - Child - - + + Child + + + diff --git a/pages/reply/[id].js b/pages/reply/[id].js index 67b0b1a6..2580f684 100644 --- 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() { {otherArticleReplies.map(ar => { const editorElem = ( - + {ar?.user?.name || t`someone`} - + ); return (