From 6f680b35d35b5330278e50a23434d52222dd5bd7 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:06:32 +0800
Subject: [PATCH 1/7] Init impl for CommentTab

---
 components/ProfilePage/CommentTab.js | 232 +++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 components/ProfilePage/CommentTab.js

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
new file mode 100644
index 00000000..98f7c82a
--- /dev/null
+++ b/components/ProfilePage/CommentTab.js
@@ -0,0 +1,232 @@
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+import { useRouter } from 'next/router';
+import { t, ngettext, msgid } from 'ttag';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Tools,
+  TimeRange,
+  SortInput,
+  LoadMore,
+} from 'components/ListPageControls';
+import { CardHeader, CardContent } from 'components/Card';
+import Infos from 'components/Infos';
+import TimeInfo from 'components/Infos/TimeInfo';
+import ExpandableText from 'components/ExpandableText';
+import ReplyRequestReason from 'components/ReplyRequestReason';
+import Thumbnail from 'components/Thumbnail';
+
+const COMMENTS_ORDER = [
+  {
+    value: 'createdAt',
+    label: t`Commented at`,
+  },
+];
+const DEFAULT_ORDER = COMMENTS_ORDER[0].value;
+
+const LOAD_USER_COMMENTS = gql`
+  query LoadUserComments(
+    $filter: ListReplyRequestFilter!
+    $orderBy: [ListReplyRequestOrderBy]
+    $after: String
+  ) {
+    ListReplyRequests(
+      filter: $filter
+      orderBy: $orderBy
+      after: $after
+      first: 15
+    ) {
+      edges {
+        node {
+          id
+          ...ReplyRequestInfo
+          article {
+            id
+            replyRequestCount
+            createdAt
+            text
+            ...ThumbnailArticleData
+          }
+        }
+        ...LoadMoreEdge
+      }
+    }
+  }
+  ${ReplyRequestReason.fragments.ReplyRequestInfo}
+  ${LoadMore.fragments.LoadMoreEdge}
+  ${Thumbnail.fragments.ThumbnailArticleData}
+`;
+
+const LOAD_USER_COMMENTS_STAT = gql`
+  query LoadUserCommentsStat(
+    $filter: ListReplyRequestFilter!
+    $orderBy: [ListReplyRequestOrderBy]
+  ) {
+    ListReplyRequests(filter: $filter, orderBy: $orderBy) {
+      totalCount
+      ...LoadMoreConnectionForStats
+    }
+  }
+  ${LoadMore.fragments.LoadMoreConnectionForStats}
+`;
+
+const useStyles = makeStyles(theme => ({
+  tools: {
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: 'var(--card-px)',
+      marginRight: 'var(--card-px)',
+    },
+  },
+  divider: {
+    border: 0,
+    margin: '16px 0',
+    borderBottom: `1px dashed ${theme.palette.secondary[100]}`,
+  },
+  infos: {
+    marginBottom: 4,
+    [theme.breakpoints.up('md')]: {
+      marginBottom: 12,
+    },
+  },
+}));
+
+/**
+ * @param {object} urlQuery - URL query object and urserId
+ * @param {string} userId - The author ID of article reply to look for
+ * @returns {object} ListArticleFilter
+ */
+function urlQuery2Filter(query = {}, userId) {
+  const filterObj = { userId };
+
+  const [start, end] = TimeRange.getValues(query);
+
+  if (start) {
+    filterObj.createdAt = {
+      ...filterObj.createdAt,
+      GTE: start,
+    };
+  }
+  if (end) {
+    filterObj.createdAt = {
+      ...filterObj.createdAt,
+      LTE: end,
+    };
+  }
+
+  return filterObj;
+}
+
+function CommentTab({ userId }) {
+  const classes = useStyles();
+  const { query } = useRouter();
+
+  const listQueryVars = {
+    filter: urlQuery2Filter(query, userId),
+    orderBy: [{ [SortInput.getValue(query) || DEFAULT_ORDER]: 'DESC' }],
+  };
+
+  const {
+    loading,
+    fetchMore,
+    data: listCommentsData,
+    error: listCommentsError,
+  } = useQuery(LOAD_USER_COMMENTS, {
+    skip: !userId,
+    variables: listQueryVars,
+    notifyOnNetworkStatusChange: true, // Make loading true on `fetchMore`
+  });
+
+  // Separate these stats query so that it will be cached by apollo-client and sends no network request
+  // on page change, but still works when filter options are updated.
+  //
+  const { data: listStatData } = useQuery(LOAD_USER_COMMENTS_STAT, {
+    skip: !userId,
+    variables: listQueryVars,
+  });
+
+  // List data
+  const commentEdges = listCommentsData?.ListReplyReqeusts?.edges || [];
+  const statsData = listStatData?.ListReplyReqeusts || {};
+  const totalCount = statsData?.totalCount;
+
+  if (!userId) {
+    return null;
+  }
+
+  return (
+    <>
+      <Tools className={classes.tools}>
+        <TimeRange />
+        <SortInput defaultOrderBy={DEFAULT_ORDER} options={COMMENTS_ORDER} />
+      </Tools>
+      {loading && !totalCount ? (
+        <CardContent>{t`Loading...`}</CardContent>
+      ) : listCommentsError ? (
+        <CardContent>{listCommentsError.toString()}</CardContent>
+      ) : totalCount === 0 ? (
+        <CardContent>{t`This user does not provide comments to any message.`}</CardContent>
+      ) : (
+        <>
+          <CardHeader>
+            {ngettext(
+              msgid`${totalCount} comment matching criteria`,
+              `${totalCount} comments matching criteria`,
+              totalCount
+            )}
+          </CardHeader>
+          {commentEdges.map(({ node: { article, ...comment } }) => (
+            <CardContent key={comment.id}>
+              <Infos className={classes.infos}>
+                <>
+                  {ngettext(
+                    msgid`${article.replyRequestCount} occurrence`,
+                    `${article.replyRequestCount} occurrences`,
+                    article.replyRequestCount
+                  )}
+                </>
+                <TimeInfo time={article.createdAt}>
+                  {timeAgo => t`First reported ${timeAgo}`}
+                </TimeInfo>
+              </Infos>
+              <Thumbnail article={article} />
+              {article.text && (
+                <ExpandableText lineClamp={3}>{article.text}</ExpandableText>
+              )}
+
+              <hr className={classes.divider} />
+
+              <ReplyRequestReason
+                articleId={article.id}
+                replyRequest={comment}
+              />
+            </CardContent>
+          ))}
+
+          <LoadMore
+            edges={commentEdges}
+            pageInfo={statsData?.pageInfo}
+            loading={loading}
+            onMoreRequest={args =>
+              fetchMore({
+                variables: args,
+                updateQuery(prev, { fetchMoreResult }) {
+                  if (!fetchMoreResult) return prev;
+                  const newCommentData = fetchMoreResult?.ListReplyRequests;
+                  return {
+                    ...prev,
+                    ListArticles: {
+                      ...newCommentData,
+                      edges: [...commentEdges, ...newCommentData.edges],
+                    },
+                  };
+                },
+              })
+            }
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export default CommentTab;

From f4bd274ac4fac0f7f512f343bab7f344f73e91cb Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:26:47 +0800
Subject: [PATCH 2/7] Add comments tab

---
 components/ProfilePage/CommentTab.js  | 10 +++++-----
 components/ProfilePage/ProfilePage.js |  9 +++++++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index 98f7c82a..7a5128af 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -79,7 +79,7 @@ const useStyles = makeStyles(theme => ({
   },
   divider: {
     border: 0,
-    margin: '16px 0',
+    margin: '16px 0 0',
     borderBottom: `1px dashed ${theme.palette.secondary[100]}`,
   },
   infos: {
@@ -145,8 +145,8 @@ function CommentTab({ userId }) {
   });
 
   // List data
-  const commentEdges = listCommentsData?.ListReplyReqeusts?.edges || [];
-  const statsData = listStatData?.ListReplyReqeusts || {};
+  const commentEdges = listCommentsData?.ListReplyRequests?.edges || [];
+  const statsData = listStatData?.ListReplyRequests || {};
   const totalCount = statsData?.totalCount;
 
   if (!userId) {
@@ -164,7 +164,7 @@ function CommentTab({ userId }) {
       ) : listCommentsError ? (
         <CardContent>{listCommentsError.toString()}</CardContent>
       ) : totalCount === 0 ? (
-        <CardContent>{t`This user does not provide comments to any message.`}</CardContent>
+        <CardContent>{t`This user does not provide comments to any message in the specified date range.`}</CardContent>
       ) : (
         <>
           <CardHeader>
@@ -175,7 +175,7 @@ function CommentTab({ userId }) {
             )}
           </CardHeader>
           {commentEdges.map(({ node: { article, ...comment } }) => (
-            <CardContent key={comment.id}>
+            <CardContent key={comment.id} style={{ paddingBottom: 0 }}>
               <Infos className={classes.infos}>
                 <>
                   {ngettext(
diff --git a/components/ProfilePage/ProfilePage.js b/components/ProfilePage/ProfilePage.js
index e1a3917b..e4766858 100644
--- a/components/ProfilePage/ProfilePage.js
+++ b/components/ProfilePage/ProfilePage.js
@@ -14,6 +14,7 @@ import AppLayout from 'components/AppLayout';
 import { Card } from 'components/Card';
 import UserPageHeader from './UserPageHeader';
 import RepliedArticleTab from './RepliedArticleTab';
+import CommentTab from './CommentTab';
 import ContributionChart from 'components/ContributionChart';
 import { startOfWeek, subDays, format } from 'date-fns';
 
@@ -123,8 +124,11 @@ function ProfilePage({ id, slug }) {
   let contentElem = null;
   switch (tab) {
     case 'replies':
-    default:
       contentElem = <RepliedArticleTab userId={data?.GetUser?.id} />;
+      break;
+    case 'comments':
+      contentElem = <CommentTab userId={data?.GetUser?.id} />;
+      break;
   }
   const today = format(new Date(), 'yyyy-MM-dd');
   const aYearAgo = format(
@@ -159,10 +163,11 @@ function ProfilePage({ id, slug }) {
             indicatorColor="primary"
             textColor="primary"
             onChange={(e, tab) => {
-              router.push({ query: { tab } });
+              router.push({ query: { tab, id, slug } });
             }}
           >
             <Tab value="replies" label={t`Replied messages`} />
+            <Tab value="comments" label={t`Comments`} />
           </Tabs>
           {contentElem}
         </Card>

From 9ec733a59bee4699b83cc814bb8f9ecfd42dbf9f Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:34:20 +0800
Subject: [PATCH 3/7] Add comment stat to profile page header

---
 components/ProfilePage/ProfilePage.js    | 5 +++++
 components/ProfilePage/Stats.js          | 1 +
 components/ProfilePage/UserPageHeader.js | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/ProfilePage/ProfilePage.js b/components/ProfilePage/ProfilePage.js
index e4766858..4f1c4b52 100644
--- a/components/ProfilePage/ProfilePage.js
+++ b/components/ProfilePage/ProfilePage.js
@@ -64,6 +64,9 @@ const LOAD_CONTRIBUTION = gql`
     commentedReplies: ListArticleReplyFeedbacks(filter: { userId: $id }) {
       totalCount
     }
+    comments: ListReplyRequests(filter: { userId: $id }) {
+      totalCount
+    }
   }
 `;
 
@@ -76,6 +79,7 @@ function ProfilePage({ id, slug }) {
   const { data: contributionData } = useQuery(LOAD_CONTRIBUTION, {
     variables: { id: data?.GetUser?.id },
     skip: !data?.GetUser?.id,
+    ssr: false, // Speed up SSR
   });
 
   const isSelf = currentUser && data?.GetUser?.id === currentUser.id;
@@ -148,6 +152,7 @@ function ProfilePage({ id, slug }) {
           stats={{
             repliedArticles: contributionData?.repliedArticles?.totalCount,
             commentedReplies: contributionData?.commentedReplies?.totalCount,
+            comments: contributionData?.comments?.totalCount,
           }}
         />
         <ContributionChart
diff --git a/components/ProfilePage/Stats.js b/components/ProfilePage/Stats.js
index c00e4ba1..8e3e7826 100644
--- a/components/ProfilePage/Stats.js
+++ b/components/ProfilePage/Stats.js
@@ -58,6 +58,7 @@ function Stats({ stats }) {
   return (
     <ul className={classes.root}>
       <Stat label={t`replied messages`} value={stats?.repliedArticles} />
+      <Stat label={t`comments`} value={stats?.comments} />
       <Stat label={t`voted replies`} value={stats?.commentedReplies} />
     </ul>
   );
diff --git a/components/ProfilePage/UserPageHeader.js b/components/ProfilePage/UserPageHeader.js
index a31f70b2..6b6fe4c4 100644
--- a/components/ProfilePage/UserPageHeader.js
+++ b/components/ProfilePage/UserPageHeader.js
@@ -179,7 +179,7 @@ const useStyles = makeStyles(theme => ({
  *
  * @param {object} props.user
  * @param {boolean} props.isSelf - If the current user is the one in `user` prop
- * @param {{repliedArticles: number, commentedReplies: number}} props.stats
+ * @param {{repliedArticles: number, commentedReplies: number, comments: number}} props.stats
  */
 function UserPageHeader({ user, isSelf, stats }) {
   const classes = useStyles();

From 2f1c9ff4bf43a1fa9bbd6392095506425b7e5daa Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 09:40:15 +0800
Subject: [PATCH 4/7] [ProfilePage] add link from profile to article

---
 components/ProfilePage/CommentTab.js        | 7 ++++++-
 components/ProfilePage/RepliedArticleTab.js | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index 7a5128af..bf6ee79c 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import { t, ngettext, msgid } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -185,7 +186,11 @@ function CommentTab({ userId }) {
                   )}
                 </>
                 <TimeInfo time={article.createdAt}>
-                  {timeAgo => t`First reported ${timeAgo}`}
+                  {timeAgo => (
+                    <Link href="/article/[id]" as={`/article/${article.id}`}>
+                      {t`First reported ${timeAgo}`}
+                    </Link>
+                  )}
                 </TimeInfo>
               </Infos>
               <Thumbnail article={article} />
diff --git a/components/ProfilePage/RepliedArticleTab.js b/components/ProfilePage/RepliedArticleTab.js
index 6fddebac..ef9ce286 100644
--- a/components/ProfilePage/RepliedArticleTab.js
+++ b/components/ProfilePage/RepliedArticleTab.js
@@ -1,6 +1,7 @@
 import gql from 'graphql-tag';
 import { useQuery } from '@apollo/react-hooks';
 import { useRouter } from 'next/router';
+import Link from 'next/link';
 import { t, ngettext, msgid } from 'ttag';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -272,7 +273,11 @@ function RepliedArticleTab({ userId }) {
                   )}
                 </>
                 <TimeInfo time={article.createdAt}>
-                  {timeAgo => t`First reported ${timeAgo}`}
+                  {timeAgo => (
+                    <Link href="/article/[id]" as={`/article/${article.id}`}>
+                      {t`First reported ${timeAgo}`}
+                    </Link>
+                  )}
                 </TimeInfo>
               </Infos>
               <Thumbnail article={article} />

From 57b87e907faedfd25d2d92bc1ac1d5a0caeaca76 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 10:02:16 +0800
Subject: [PATCH 5/7] Translate strings for comment tab in profile page

---
 i18n/zh_TW.po | 55 ++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
index 8e82aacc..0937db1a 100644
--- a/i18n/zh_TW.po
+++ b/i18n/zh_TW.po
@@ -51,19 +51,19 @@ msgstr[0] "${ replyCount } 份回應"
 msgid "Sort by"
 msgstr "排序方式"
 
-#: components/ProfilePage/RepliedArticleTab.js:35
+#: components/ProfilePage/RepliedArticleTab.js:36
 #: pages/articles.js:166
 #: pages/replies.js:143
 msgid "Most recently asked"
 msgstr "最近被查詢"
 
-#: components/ProfilePage/RepliedArticleTab.js:32
+#: components/ProfilePage/RepliedArticleTab.js:33
 #: pages/articles.js:168
 #: pages/replies.js:142
 msgid "Most recently replied"
 msgstr "最近被回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:36
+#: components/ProfilePage/RepliedArticleTab.js:37
 #: pages/articles.js:167
 #: pages/replies.js:144
 msgid "Most asked"
@@ -234,7 +234,7 @@ msgid ""
 "fighting mis/disinformation in Taiwan."
 msgstr "一起來幫網路上的可疑訊息寫查核回應、共同教導聊天機器人回話，將多元的闢謠資訊傳遞給在 LINE 上收到謠言的人。"
 
-#: components/ProfilePage/ProfilePage.js:98
+#: components/ProfilePage/ProfilePage.js:103
 #: pages/article/[id].js:300
 #: pages/article/[id].js:304
 #: pages/reply/[id].js:167
@@ -444,7 +444,8 @@ msgid "Why do you think it is not useful?"
 msgstr "您認為沒有幫助的理由是什麼呢？"
 
 #: components/LandingPage/SectionArticles.js:153
-#: components/ProfilePage/RepliedArticleTab.js:250
+#: components/ProfilePage/CommentTab.js:164
+#: components/ProfilePage/RepliedArticleTab.js:251
 #: pages/articles.js:181
 #: pages/hoax-for-you.js:133
 #: pages/replies.js:246
@@ -701,7 +702,8 @@ msgid "Total Visit: ${ totalVisits }"
 msgstr "${ totalVisits } 次瀏覽"
 
 #: components/ListPageDisplays/ReplySearchItem.js:103
-#: components/ProfilePage/RepliedArticleTab.js:268
+#: components/ProfilePage/CommentTab.js:182
+#: components/ProfilePage/RepliedArticleTab.js:269
 #: pages/replies.js:256
 #, javascript-format
 msgid "${ article.replyRequestCount } occurrence"
@@ -924,19 +926,19 @@ msgstr "你的個人頁面網址會變成 ${ profileURL }"
 msgid "Bio"
 msgstr "自我介紹"
 
-#: components/ProfilePage/ProfilePage.js:111
+#: components/ProfilePage/ProfilePage.js:116
 msgid "User not found"
 msgstr "找不到使用者"
 
-#: components/ProfilePage/ProfilePage.js:114
+#: components/ProfilePage/ProfilePage.js:119
 msgid "The user does not exist"
 msgstr "此使用者不存在"
 
-#: components/ProfilePage/ProfilePage.js:165
+#: components/ProfilePage/ProfilePage.js:174
 msgid "Replied messages"
 msgstr "查核回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:254
+#: components/ProfilePage/RepliedArticleTab.js:255
 msgid "No replied messages."
 msgstr "無查核回應"
 
@@ -944,7 +946,7 @@ msgstr "無查核回應"
 msgid "replied messages"
 msgstr "查核回應"
 
-#: components/ProfilePage/Stats.js:61
+#: components/ProfilePage/Stats.js:62
 msgid "voted replies"
 msgstr "評價回應"
 
@@ -2295,7 +2297,8 @@ msgstr "目前已經存有4萬5千筆以上查證過的資訊，透過投入資
 
 #: components/ListPageDisplays/ArticleCard.js:111
 #: components/ListPageDisplays/ReplySearchItem.js:112
-#: components/ProfilePage/RepliedArticleTab.js:275
+#: components/ProfilePage/CommentTab.js:191
+#: components/ProfilePage/RepliedArticleTab.js:278
 #: pages/article/[id].js:370
 #: pages/replies.js:263
 msgid "First reported ${ timeAgo }"
@@ -2385,11 +2388,11 @@ msgstr "注意：這裏不是討論區！請針對上面的「可疑訊息」撰
 msgid "Comments from people reporting this message"
 msgstr "網友回報補充"
 
-#: components/ProfilePage/RepliedArticleTab.js:34
+#: components/ProfilePage/RepliedArticleTab.js:35
 msgid "Most recently replied by any user"
 msgstr "最近有人回應"
 
-#: components/ProfilePage/RepliedArticleTab.js:258
+#: components/ProfilePage/RepliedArticleTab.js:259
 #, javascript-format
 msgid "${ totalCount } message matching criteria"
 msgid_plural "${ totalCount } messages matching criteria"
@@ -2440,6 +2443,30 @@ msgstr "語音訊息"
 msgid "Format"
 msgstr "格式"
 
+#: components/ProfilePage/CommentTab.js:23
+msgid "Commented at"
+msgstr "補充於"
+
+#: components/ProfilePage/CommentTab.js:168
+msgid ""
+"This user does not provide comments to any message in the specified date "
+"range."
+msgstr "這名使用者在指定日期範圍內沒有提供任何回報補充"
+
+#: components/ProfilePage/CommentTab.js:172
+#, javascript-format
+msgid "${ totalCount } comment matching criteria"
+msgid_plural "${ totalCount } comments matching criteria"
+msgstr[0] "${ totalCount } 份符合篩選條件的回報補充"
+
+#: components/ProfilePage/ProfilePage.js:175
+msgid "Comments"
+msgstr "回報補充"
+
+#: components/ProfilePage/Stats.js:61
+msgid "comments"
+msgstr "回報補充"
+
 #: pages/index.js:29
 msgctxt "site title"
 msgid "Cofacts"

From f401bf73105f62eb644f5981601dd595fa203625 Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 10:15:25 +0800
Subject: [PATCH 6/7] [ProfilePage] add reply count in comment tab

---
 components/ProfilePage/CommentTab.js | 10 ++++++++++
 i18n/zh_TW.po                        | 15 ++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index bf6ee79c..1c94fca3 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -44,6 +44,7 @@ const LOAD_USER_COMMENTS = gql`
           article {
             id
             replyRequestCount
+            replyCount
             createdAt
             text
             ...ThumbnailArticleData
@@ -192,6 +193,15 @@ function CommentTab({ userId }) {
                     </Link>
                   )}
                 </TimeInfo>
+                {article.replyCount > 0 && (
+                  <>
+                    {ngettext(
+                      msgid`${article.replyCount} reply`,
+                      `${article.replyCount} replies`,
+                      article.replyCount
+                    )}
+                  </>
+                )}
               </Infos>
               <Thumbnail article={article} />
               {article.text && (
diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
index 0937db1a..39450b51 100644
--- a/i18n/zh_TW.po
+++ b/i18n/zh_TW.po
@@ -444,7 +444,7 @@ msgid "Why do you think it is not useful?"
 msgstr "您認為沒有幫助的理由是什麼呢？"
 
 #: components/LandingPage/SectionArticles.js:153
-#: components/ProfilePage/CommentTab.js:164
+#: components/ProfilePage/CommentTab.js:165
 #: components/ProfilePage/RepliedArticleTab.js:251
 #: pages/articles.js:181
 #: pages/hoax-for-you.js:133
@@ -702,7 +702,7 @@ msgid "Total Visit: ${ totalVisits }"
 msgstr "${ totalVisits } 次瀏覽"
 
 #: components/ListPageDisplays/ReplySearchItem.js:103
-#: components/ProfilePage/CommentTab.js:182
+#: components/ProfilePage/CommentTab.js:183
 #: components/ProfilePage/RepliedArticleTab.js:269
 #: pages/replies.js:256
 #, javascript-format
@@ -2297,7 +2297,7 @@ msgstr "目前已經存有4萬5千筆以上查證過的資訊，透過投入資
 
 #: components/ListPageDisplays/ArticleCard.js:111
 #: components/ListPageDisplays/ReplySearchItem.js:112
-#: components/ProfilePage/CommentTab.js:191
+#: components/ProfilePage/CommentTab.js:192
 #: components/ProfilePage/RepliedArticleTab.js:278
 #: pages/article/[id].js:370
 #: pages/replies.js:263
@@ -2447,13 +2447,13 @@ msgstr "格式"
 msgid "Commented at"
 msgstr "補充於"
 
-#: components/ProfilePage/CommentTab.js:168
+#: components/ProfilePage/CommentTab.js:169
 msgid ""
 "This user does not provide comments to any message in the specified date "
 "range."
 msgstr "這名使用者在指定日期範圍內沒有提供任何回報補充"
 
-#: components/ProfilePage/CommentTab.js:172
+#: components/ProfilePage/CommentTab.js:173
 #, javascript-format
 msgid "${ totalCount } comment matching criteria"
 msgid_plural "${ totalCount } comments matching criteria"
@@ -2467,6 +2467,11 @@ msgstr "回報補充"
 msgid "comments"
 msgstr "回報補充"
 
+#: components/ProfilePage/CommentTab.js:198
+msgid "${ article.replyCount } reply"
+msgid_plural "${ article.replyCount } replies"
+msgstr[0] "${ article.replyCount } 則回應"
+
 #: pages/index.js:29
 msgctxt "site title"
 msgid "Cofacts"

From 757035ac97af96f6e4fea695c32a70acc606493b Mon Sep 17 00:00:00 2001
From: MrOrz <johnsonliang7@gmail.com>
Date: Mon, 10 Oct 2022 10:33:58 +0800
Subject: [PATCH 7/7] [Profile] Removes sort in Comment tab Because there is no
 other way to sort

---
 components/ProfilePage/CommentTab.js | 18 ++----------------
 i18n/zh_TW.po                        | 16 ++++++----------
 2 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/components/ProfilePage/CommentTab.js b/components/ProfilePage/CommentTab.js
index 1c94fca3..02601ed2 100644
--- a/components/ProfilePage/CommentTab.js
+++ b/components/ProfilePage/CommentTab.js
@@ -4,12 +4,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import { t, ngettext, msgid } from 'ttag';
 import { makeStyles } from '@material-ui/core/styles';
-import {
-  Tools,
-  TimeRange,
-  SortInput,
-  LoadMore,
-} from 'components/ListPageControls';
+import { Tools, TimeRange, LoadMore } from 'components/ListPageControls';
 import { CardHeader, CardContent } from 'components/Card';
 import Infos from 'components/Infos';
 import TimeInfo from 'components/Infos/TimeInfo';
@@ -17,14 +12,6 @@ import ExpandableText from 'components/ExpandableText';
 import ReplyRequestReason from 'components/ReplyRequestReason';
 import Thumbnail from 'components/Thumbnail';
 
-const COMMENTS_ORDER = [
-  {
-    value: 'createdAt',
-    label: t`Commented at`,
-  },
-];
-const DEFAULT_ORDER = COMMENTS_ORDER[0].value;
-
 const LOAD_USER_COMMENTS = gql`
   query LoadUserComments(
     $filter: ListReplyRequestFilter!
@@ -124,7 +111,7 @@ function CommentTab({ userId }) {
 
   const listQueryVars = {
     filter: urlQuery2Filter(query, userId),
-    orderBy: [{ [SortInput.getValue(query) || DEFAULT_ORDER]: 'DESC' }],
+    orderBy: [{ createdAt: 'DESC' }],
   };
 
   const {
@@ -159,7 +146,6 @@ function CommentTab({ userId }) {
     <>
       <Tools className={classes.tools}>
         <TimeRange />
-        <SortInput defaultOrderBy={DEFAULT_ORDER} options={COMMENTS_ORDER} />
       </Tools>
       {loading && !totalCount ? (
         <CardContent>{t`Loading...`}</CardContent>
diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
index 39450b51..252e27cf 100644
--- a/i18n/zh_TW.po
+++ b/i18n/zh_TW.po
@@ -444,7 +444,7 @@ msgid "Why do you think it is not useful?"
 msgstr "您認為沒有幫助的理由是什麼呢？"
 
 #: components/LandingPage/SectionArticles.js:153
-#: components/ProfilePage/CommentTab.js:165
+#: components/ProfilePage/CommentTab.js:151
 #: components/ProfilePage/RepliedArticleTab.js:251
 #: pages/articles.js:181
 #: pages/hoax-for-you.js:133
@@ -702,7 +702,7 @@ msgid "Total Visit: ${ totalVisits }"
 msgstr "${ totalVisits } 次瀏覽"
 
 #: components/ListPageDisplays/ReplySearchItem.js:103
-#: components/ProfilePage/CommentTab.js:183
+#: components/ProfilePage/CommentTab.js:169
 #: components/ProfilePage/RepliedArticleTab.js:269
 #: pages/replies.js:256
 #, javascript-format
@@ -2297,7 +2297,7 @@ msgstr "目前已經存有4萬5千筆以上查證過的資訊，透過投入資
 
 #: components/ListPageDisplays/ArticleCard.js:111
 #: components/ListPageDisplays/ReplySearchItem.js:112
-#: components/ProfilePage/CommentTab.js:192
+#: components/ProfilePage/CommentTab.js:178
 #: components/ProfilePage/RepliedArticleTab.js:278
 #: pages/article/[id].js:370
 #: pages/replies.js:263
@@ -2443,17 +2443,13 @@ msgstr "語音訊息"
 msgid "Format"
 msgstr "格式"
 
-#: components/ProfilePage/CommentTab.js:23
-msgid "Commented at"
-msgstr "補充於"
-
-#: components/ProfilePage/CommentTab.js:169
+#: components/ProfilePage/CommentTab.js:155
 msgid ""
 "This user does not provide comments to any message in the specified date "
 "range."
 msgstr "這名使用者在指定日期範圍內沒有提供任何回報補充"
 
-#: components/ProfilePage/CommentTab.js:173
+#: components/ProfilePage/CommentTab.js:159
 #, javascript-format
 msgid "${ totalCount } comment matching criteria"
 msgid_plural "${ totalCount } comments matching criteria"
@@ -2467,7 +2463,7 @@ msgstr "回報補充"
 msgid "comments"
 msgstr "回報補充"
 
-#: components/ProfilePage/CommentTab.js:198
+#: components/ProfilePage/CommentTab.js:184
 msgid "${ article.replyCount } reply"
 msgid_plural "${ article.replyCount } replies"
 msgstr[0] "${ article.replyCount } 則回應"