Merge branch 'feat/ui-0.5.0' into 'test'

Feat/ui 0.5.0

See merge request opensource/answer!286

i18n/en_US.yaml

@@ -1235,7 +1235,8 @@ ui:
     title: "History for"
     show_votes: "Show votes"
     n_or_a: N/A
-    title_for: "Timeline for"
+    title_for_question: "Timeline for"
+    title_for_answer: "Timeline for answers to {{ title }} by {{ author }}"
     title_for_tag: "Title for tag"
     datetime: Datetime
     type: Type

ui/src/common/interface.ts

@@ -406,6 +406,7 @@ export interface TimelineObject {
   question_id: string;
   answer_id: string;
   main_tag_slug_name?: string;
+  username?: string;
 }
 
 export interface TimelineRes {

ui/src/components/DiffContent/index.tsx

@@ -102,7 +102,7 @@ const Index: FC<Props> = ({
         dangerouslySetInnerHTML={{
           __html: diffText(newData.original_text, oldData?.original_text),
         }}
-        className="pre-line text-break font-monospace"
+        className="pre-line text-break font-monospace fs-14"
       />
     </div>
   );

ui/src/pages/Timeline/components/Item/index.tsx

@@ -70,7 +70,8 @@ const Index: FC<Props> = ({ data, isAdmin, objectInfo, revisionList }) => {
             </Button>
           )}
           {data.activity_type === 'accept' && (
-            <Link to={`/questions/${objectInfo.question_id}`}>
+            <Link
+              to={`/questions/${objectInfo.question_id}/${data?.object_id}`}>
               {t(data.activity_type)}
             </Link>
           )}

ui/src/pages/Timeline/index.tsx

@@ -1,11 +1,12 @@
-import { FC, useState } from 'react';
+import { FC, useState, useEffect } from 'react';
 import { Container, Row, Col, Form, Table } from 'react-bootstrap';
 import { Link, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { loggedUserInfoStore } from '@/stores';
-import { useTimelineData } from '@/services';
+import { getTimelineData } from '@/services';
 import { PageTitle, Empty } from '@/components';
+import * as Type from '@/common/interface';
 
 import HistoryItem from './components/Item';
 
@@ -14,23 +15,45 @@ const Index: FC = () => {
   const { qid = '', aid = '', tid = '' } = useParams();
   const { is_admin } = loggedUserInfoStore((state) => state.user);
   const [showVotes, setShowVotes] = useState(false);
+  const [isLoading, setLoading] = useState(false);
+  const [timelineData, setTimelineData] = useState<Type.TimelineRes>();
 
-  const { data: timelineData, isLoading } = useTimelineData({
-    object_id: tid || aid || qid,
-    show_vote: showVotes,
-  });
+  const getPageData = () => {
+    setLoading(true);
+    getTimelineData({
+      object_id: tid || aid || qid,
+      show_vote: showVotes,
+    })
+      .then((res) => {
+        setTimelineData(res);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
 
   const handleSwitch = (bol: boolean) => {
     setShowVotes(bol);
+    getPageData();
   };
 
+  useEffect(() => {
+    getPageData();
+  }, []);
+
   let linkUrl = '';
+  let pageTitle = '';
   if (timelineData?.object_info.object_type === 'question') {
     linkUrl = `/questions/${timelineData?.object_info.question_id}`;
+    pageTitle = `${t('title_for_question')} ${timelineData?.object_info.title}`;
   }
 
   if (timelineData?.object_info.object_type === 'answer') {
     linkUrl = `/questions/${timelineData?.object_info.question_id}/${timelineData?.object_info.answer_id}`;
+    pageTitle = `${t('title_for_answer', {
+      title: timelineData?.object_info.title,
+      author: timelineData?.object_info.username,
+    })}`;
   }
 
   if (timelineData?.object_info.object_type === 'tag') {
@@ -38,6 +61,7 @@ const Index: FC = () => {
       timelineData?.object_info.main_tag_slug_name ||
       timelineData?.object_info.title
     }`;
+    pageTitle = `${t('title_for_tag')} ${timelineData?.object_info.title}`;
   }
 
   const revisionList =
@@ -45,13 +69,7 @@ const Index: FC = () => {
 
   return (
     <Container className="py-3">
-      <PageTitle
-        title={
-          timelineData?.object_info.object_type === 'tag'
-            ? `${t('title_for_tag')} ${timelineData?.object_info.title}`
-            : `${t('title_for')} ${timelineData?.object_info.title}`
-        }
-      />
+      <PageTitle title={pageTitle} />
       <Row className="py-3 justify-content-center">
         <Col xxl={10}>
           <h5 className="mb-4">

ui/src/services/client/timeline.ts

@@ -1,21 +1,28 @@
-import useSWR from 'swr';
 import qs from 'qs';
 
 import request from '@/utils/request';
 import type * as Type from '@/common/interface';
 
-export const useTimelineData = (params: Type.TimelineReq) => {
-  const apiUrl = '/answer/api/v1/activity/timeline';
-  const { data, error, mutate } = useSWR<Type.TimelineRes, Error>(
-    `${apiUrl}?${qs.stringify(params, { skipNulls: true })}`,
-    request.instance.get,
+// export const useTimelineData = (params: Type.TimelineReq) => {
+//   const apiUrl = '/answer/api/v1/activity/timeline';
+//   const { data, error, mutate } = useSWR<Type.TimelineRes, Error>(
+//     `${apiUrl}?${qs.stringify(params, { skipNulls: true })}`,
+//     request.instance.get,
+//   );
+//   return {
+//     data,
+//     isLoading: !data && !error,
+//     error,
+//     mutate,
+//   };
+// };
+
+export const getTimelineData = (params: Type.TimelineReq) => {
+  return request.get<Type.TimelineRes>(
+    `/answer/api/v1/activity/timeline?${qs.stringify(params, {
+      skipNulls: true,
+    })}`,
   );
-  return {
-    data,
-    isLoading: !data && !error,
-    error,
-    mutate,
-  };
 };
 
 export const getTimelineDetail = (params: {