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

Feat/ui 0.5.0

See merge request opensource/answer!288

ui/src/common/interface.ts

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

ui/src/components/Comment/index.tsx

@@ -24,7 +24,7 @@ import { Form, ActionBar, Reply } from './components';
 
 import './index.scss';
 
-const Comment = ({ objectId, mode }) => {
+const Comment = ({ objectId, mode, commentId }) => {
   const pageUsers = usePageUsers();
   const [pageIndex, setPageIndex] = useState(0);
   const [comments, setComments] = useState<any>([]);
@@ -32,6 +32,7 @@ const Comment = ({ objectId, mode }) => {
   const pageSize = pageIndex === 0 ? 3 : 15;
   const { data, mutate } = useQueryComments({
     object_id: objectId,
+    comment_id: commentId,
     page: pageIndex,
     page_size: pageSize,
   });

ui/src/components/DiffContent/index.tsx

@@ -87,7 +87,7 @@ const Index: FC<Props> = ({
         </div>
       )}
       {objectType === 'tag' && opts?.showTagUrlSlug && (
-        <div className="mb-4">
+        <div className="mb-4 fs-14 font-monospace">
           {`/tags/${
             newData?.main_tag_slug_name
               ? diffText(

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -1,7 +1,7 @@
 import { memo, FC, useEffect, useRef } from 'react';
 import { Row, Col, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import {
   Actions,
@@ -37,6 +37,7 @@ const Index: FC<Props> = ({
   const { t } = useTranslation('translation', {
     keyPrefix: 'question_detail',
   });
+  const [searchParams] = useSearchParams();
   const answerRef = useRef<HTMLDivElement>(null);
   const acceptAnswer = () => {
     acceptanceAnswer({
@@ -152,7 +153,11 @@ const Index: FC<Props> = ({
         </Col>
       </Row>
 
-      <Comment objectId={data.id} mode="answer" />
+      <Comment
+        objectId={data.id}
+        mode="answer"
+        commentId={searchParams.get('commentId')}
+      />
     </div>
   );
 };

ui/src/pages/Questions/Detail/components/Question/index.tsx

@@ -1,5 +1,5 @@
 import { memo, FC, useState, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Row, Col, Button } from 'react-bootstrap';
 
@@ -26,6 +26,7 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'question_detail',
   });
+  const [searchParams] = useSearchParams();
   const [followed, setFollowed] = useState(data?.is_followed);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -164,7 +165,11 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
         </Col>
       </Row>
 
-      <Comment objectId={data?.id} mode="question" />
+      <Comment
+        objectId={data?.id}
+        mode="question"
+        commentId={searchParams.get('commentId')}
+      />
     </div>
   );
 };

ui/src/pages/Timeline/index.tsx

@@ -52,7 +52,7 @@ const Index: FC = () => {
     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,
+      author: timelineData?.object_info.display_name,
     })}`;
   }
 

ui/src/services/common.ts

@@ -38,6 +38,9 @@ export const useQueryComments = (params) => {
   if (params.page === 0) {
     params.query_cond = 'vote';
     params.page = 1;
+  } else {
+    // only first page need commentId
+    delete params.comment_id;
   }
   return useSWR<Type.ListResult>(
     `/answer/api/v1/comment/page?${qs.stringify(params, {

ui/src/utils/request.ts

@@ -48,7 +48,7 @@ class Request {
         return data;
       },
       (error) => {
-        const { status, data: respData, msg: respMsg } = error.response || {};
+        const { status, data: respData } = error.response || {};
         const { data = {}, msg = '' } = respData || {};
         if (status === 400) {
           // show error message
@@ -121,12 +121,19 @@ class Request {
             });
             return Promise.reject(false);
           }
+
+          if (msg) {
+            toastStore.getState().show({
+              msg,
+              variant: 'danger',
+            });
+          }
+          return Promise.reject(false);
         }
-        if (respMsg) {
-          toastStore.getState().show({
-            msg: `statusCode: ${status}; ${respMsg || ''}`,
-            variant: 'danger',
-          });
+        if (status >= 500) {
+          console.error(
+            `Request failed with status code ${status}, ${msg || ''}`,
+          );
         }
         return Promise.reject(false);
       },