Fix/1.2.0/userprofile (#661)

ui/src/pages/Users/Personal/index.tsx

@@ -17,19 +17,21 @@
  * under the License.
  */
 
-import { FC } from 'react';
+import { FC, useState, useEffect } from 'react';
 import { Row, Col } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams, Link } from 'react-router-dom';
 
-import { usePageTags } from '@/hooks';
-import { Pagination, FormatTime, Empty } from '@/components';
-import { loggedUserInfoStore } from '@/stores';
 import {
   usePersonalInfoByName,
   usePersonalTop,
   usePersonalListByTabName,
+  questionDetail,
+  getAnswers,
 } from '@/services';
+import { usePageTags } from '@/hooks';
+import { Pagination, FormatTime, Empty } from '@/components';
+import { loggedUserInfoStore } from '@/stores';
 import type { UserInfoRes } from '@/common/interface';
 
 import {
@@ -53,7 +55,8 @@ const Personal: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'personal' });
   const sessionUser = loggedUserInfoStore((state) => state.user);
   const isSelf = sessionUser?.username === username;
-
+  const currentUserId = sessionUser?.id;
+  const roleId = sessionUser?.role_id;
   const { data: userInfo } = usePersonalInfoByName(username);
   const { data: topData } = usePersonalTop(username, tabName);
 
@@ -66,7 +69,127 @@ const Personal: FC = () => {
     },
     tabName,
   );
-  const { count = 0, list = [] } = listData?.[tabName] || {};
+  const getFullQuestionInfo = async (list) => {
+    const promises = list.map((item) => {
+      const questionId = item.question_id;
+      return questionDetail(questionId)
+        .then((questionInfo) => ({ ...item, questionInfo }))
+        .catch((error) => {
+          console.error(`error_ID: ${questionId}`, error);
+          return null;
+        });
+    });
+    const completedList = await Promise.all(promises);
+    return completedList;
+  };
+
+  const getAnswersUserId = async (list) => {
+    const promises = list.map((item) =>
+      getAnswers({
+        order: order === 'updated' ? order : 'default',
+        question_id: item.question_id,
+        page: 1,
+        page_size: 999,
+      })
+        .then((res) => ({
+          questionId: item.question_id,
+          user_ids: res.list.map((answer) => answer.user_info.id),
+        }))
+        .catch((error) => {
+          console.error(
+            `Error fetching answers for question ID: ${item.question_id}`,
+            error,
+          );
+          return { questionId: item.question_id, user_ids: [] };
+        }),
+    );
+
+    const results = await Promise.all(promises);
+    const answersMap = new Map();
+    results.forEach(({ questionId, user_ids }) =>
+      answersMap.set(questionId, user_ids),
+    );
+    return answersMap;
+  };
+  const getFiltered = (completedList, answersMap) => {
+    const filtered = completedList.filter((item) => {
+      if (!item) return false;
+      const userId = item.questionInfo?.user_info?.id;
+      const showValue = item.questionInfo?.show;
+      const userAnswered = answersMap
+        .get(item.question_id)
+        ?.includes(currentUserId);
+      return showValue !== 2 || userId === currentUserId || userAnswered;
+    });
+    return filtered;
+  };
+  const { list = [] } = listData?.[tabName] || {};
+  const top = topData ?? { answer: [], question: [] };
+  console.log('top data', topData);
+  console.log('list data', list);
+  const [filteredList, setFilteredList] = useState<any[]>([]);
+  const [filteredTop, setFilteredTop] = useState<{
+    answer: any[];
+    question: any[];
+  }>({ answer: [], question: [] });
+  useEffect(() => {
+    const fetchTop = async () => {
+      if (roleId === 2) {
+        setFilteredTop(top);
+        return;
+      }
+      const completedAnswers = await getFullQuestionInfo(top.answer);
+      const completedQuestion = await getFullQuestionInfo(top.question);
+      const answersAnswerMap = await getAnswersUserId(completedAnswers);
+      const questionsAnswerMap = await getAnswersUserId(completedQuestion);
+      const filteredAnswer = getFiltered(completedAnswers, answersAnswerMap);
+      const filteredQuestion = getFiltered(
+        completedQuestion,
+        questionsAnswerMap,
+      );
+      const answerQuestionIds = filteredAnswer.map((answer) => {
+        return answer.question_id;
+      });
+      const questionQuestionIds = filteredQuestion.map((question) => {
+        return question.question_id;
+      });
+      const filtered = {
+        answer: top.answer.filter((answer) =>
+          answerQuestionIds.includes(answer.question_id),
+        ),
+        question: top.question.filter((question) =>
+          questionQuestionIds.includes(question.question_id),
+        ),
+      };
+      setFilteredTop(filtered);
+    };
+    if (top.answer.length || top.question.length) {
+      fetchTop();
+    }
+  }, [top, currentUserId, roleId]);
+  useEffect(() => {
+    const fetchQuestionDetails = async () => {
+      if (roleId === 2) {
+        setFilteredList(list);
+        return;
+      }
+      let completedList;
+      if (tabName === 'bookmarks') {
+        completedList = list.map((item) => ({ ...item, questionInfo: item }));
+      } else {
+        completedList = await getFullQuestionInfo(list);
+      }
+      const answersMap = await getAnswersUserId(completedList);
+      const filtered = getFiltered(completedList, answersMap);
+      setFilteredList(filtered);
+    };
+
+    if (list.length) {
+      fetchQuestionDetails();
+    }
+  }, [list, currentUserId, tabName, roleId]);
+
+  const count = filteredList.length;
 
   let pageTitle = '';
   if (userInfo?.username) {
@@ -107,23 +230,23 @@ const Personal: FC = () => {
           <Overview
             visible={tabName === 'overview'}
             introduction={userInfo?.bio_html || ''}
-            data={topData}
+            data={filteredTop}
           />
           <ListHead
             count={tabName === 'reputation' ? Number(userInfo?.rank) : count}
             sort={order}
             visible={tabName !== 'overview'}
             tabName={tabName}
           />
-          <Answers data={list} visible={tabName === 'answers'} />
+          <Answers data={filteredList} visible={tabName === 'answers'} />
           <DefaultList
-            data={list}
+            data={filteredList}
             tabName={tabName}
             visible={tabName === 'questions' || tabName === 'bookmarks'}
           />
-          <Reputation data={list} visible={tabName === 'reputation'} />
-          <Comments data={list} visible={tabName === 'comments'} />
-          <Votes data={list} visible={tabName === 'votes'} />
+          <Reputation data={filteredList} visible={tabName === 'reputation'} />
+          <Comments data={filteredList} visible={tabName === 'comments'} />
+          <Votes data={filteredList} visible={tabName === 'votes'} />
           {!list?.length && !isLoading && <Empty />}
 
           {count > 0 && (