Merge pull request #261 from answerdev/feat/1.0.7/ui

fix: tag list add excerpt

ui/src/components/QuestionList/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ListGroup } from 'react-bootstrap';
-import { NavLink, useParams, useSearchParams } from 'react-router-dom';
+import { NavLink, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { pathFactory } from '@/router/pathFactory';
@@ -15,7 +15,6 @@ import {
   QuestionListLoader,
   Counts,
 } from '@/components';
-import { useQuestionList } from '@/services';
 
 const QuestionOrderKeys: Type.QuestionOrderBy[] = [
   'newest',
@@ -27,28 +26,17 @@ const QuestionOrderKeys: Type.QuestionOrderBy[] = [
 
 interface Props {
   source: 'questions' | 'tag';
+  data;
+  isLoading: boolean;
 }
 
-const QuestionList: FC<Props> = ({ source }) => {
+const QuestionList: FC<Props> = ({ source, data, isLoading = false }) => {
   const { t } = useTranslation('translation', { keyPrefix: 'question' });
-  const { tagName = '' } = useParams();
   const [urlSearchParams] = useSearchParams();
   const curOrder = urlSearchParams.get('order') || QuestionOrderKeys[0];
   const curPage = Number(urlSearchParams.get('page')) || 1;
   const pageSize = 20;
-  const reqParams: Type.QueryQuestionsReq = {
-    page_size: pageSize,
-    page: curPage,
-    order: curOrder as Type.QuestionOrderBy,
-    tag: tagName,
-  };
-
-  if (source === 'questions') {
-    delete reqParams.tag;
-  }
-  const { data: listData, isLoading } = useQuestionList(reqParams);
-  const count = listData?.count || 0;
-
+  const count = data?.count || 0;
   return (
     <div>
       <div className="mb-3 d-flex flex-wrap justify-content-between">
@@ -68,7 +56,7 @@ const QuestionList: FC<Props> = ({ source }) => {
         {isLoading ? (
           <QuestionListLoader />
         ) : (
-          listData?.list?.map((li) => {
+          data?.list?.map((li) => {
             return (
               <ListGroup.Item
                 key={li.id}

ui/src/components/index.ts

@@ -33,6 +33,8 @@ import PageTags from './PageTags';
 import QuestionListLoader from './QuestionListLoader';
 import TagsLoader from './TagsLoader';
 import Counts from './Counts';
+import QuestionList from './QuestionList';
+import HotQuestions from './HotQuestions';
 
 export {
   Avatar,
@@ -72,5 +74,7 @@ export {
   QuestionListLoader,
   TagsLoader,
   Counts,
+  QuestionList,
+  HotQuestions,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/pages/Questions/index.tsx

@@ -1,17 +1,26 @@
 import { FC } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
-import { useMatch, Link } from 'react-router-dom';
+import { useMatch, Link, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
-import { FollowingTags } from '@/components';
-import QuestionList from '@/components/QuestionList';
-import HotQuestions from '@/components/HotQuestions';
+import { FollowingTags, QuestionList, HotQuestions } from '@/components';
 import { siteInfoStore, loggedUserInfoStore } from '@/stores';
+import { useQuestionList } from '@/services';
+import * as Type from '@/common/interface';
 
 const Questions: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'question' });
   const { user: loggedUser } = loggedUserInfoStore((_) => _);
+  const [urlSearchParams] = useSearchParams();
+  const curPage = Number(urlSearchParams.get('page')) || 1;
+  const curOrder = urlSearchParams.get('order') || 'newest';
+  const reqParams: Type.QueryQuestionsReq = {
+    page_size: 20,
+    page: curPage,
+    order: curOrder as Type.QuestionOrderBy,
+  };
+  const { data: listData, isLoading: listLoading } = useQuestionList(reqParams);
   const isIndexPage = useMatch('/');
   let pageTitle = t('questions', { keyPrefix: 'page_title' });
   let slogan = '';
@@ -26,7 +35,11 @@ const Questions: FC = () => {
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
         <Col xxl={7} lg={8} sm={12}>
-          <QuestionList source="questions" />
+          <QuestionList
+            source="questions"
+            data={listData}
+            isLoading={listLoading}
+          />
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
           {!loggedUser.access_token && (

ui/src/pages/Tags/Detail/index.tsx

@@ -1,12 +1,22 @@
 import { FC, useEffect, useState } from 'react';
 import { Container, Row, Col, Button } from 'react-bootstrap';
-import { useParams, Link, useNavigate } from 'react-router-dom';
+import {
+  useParams,
+  Link,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import * as Type from '@/common/interface';
 import { FollowingTags } from '@/components';
-import { useTagInfo, useFollow, useQuerySynonymsTags } from '@/services';
+import {
+  useTagInfo,
+  useFollow,
+  useQuerySynonymsTags,
+  useQuestionList,
+} from '@/services';
 import QuestionList from '@/components/QuestionList';
 import HotQuestions from '@/components/HotQuestions';
 import { escapeRemove, guard } from '@/utils';
@@ -17,9 +27,19 @@ const Questions: FC = () => {
   const navigate = useNavigate();
   const routeParams = useParams();
   const curTagName = routeParams.tagName || '';
+  const [urlSearchParams] = useSearchParams();
+  const curOrder = urlSearchParams.get('order') || 'newest';
+  const curPage = Number(urlSearchParams.get('page')) || 1;
+  const reqParams: Type.QueryQuestionsReq = {
+    page_size: 20,
+    page: curPage,
+    order: curOrder as Type.QuestionOrderBy,
+    tag: routeParams.tagName,
+  };
   const [tagInfo, setTagInfo] = useState<any>({});
   const [tagFollow, setTagFollow] = useState<Type.FollowParams>();
   const { data: tagResp, isLoading } = useTagInfo({ name: curTagName });
+  const { data: listData, isLoading: listLoading } = useQuestionList(reqParams);
   const { data: followResp } = useFollow(tagFollow);
   const { data: synonymsRes } = useQuerySynonymsTags(tagInfo?.tag_id);
   const toggleFollow = () => {
@@ -33,8 +53,10 @@ const Questions: FC = () => {
   };
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [curTagName]);
+    if (!listLoading) {
+      window.scrollTo(0, 0);
+    }
+  }, [listLoading]);
 
   useEffect(() => {
     if (tagResp) {
@@ -81,7 +103,7 @@ const Questions: FC = () => {
     <Container className="pt-4 mt-2 mb-5">
       <Row className="justify-content-center">
         <Col xxl={7} lg={8} sm={12}>
-          {isLoading ? (
+          {isLoading || listLoading ? (
             <div className="tag-box mb-5 placeholder-glow">
               <div className="mb-3 h3 placeholder" style={{ width: '120px' }} />
               <p
@@ -127,7 +149,7 @@ const Questions: FC = () => {
               </div>
             </div>
           )}
-          <QuestionList source="tag" />
+          <QuestionList source="tag" data={listData} isLoading={listLoading} />
         </Col>
         <Col xxl={3} lg={4} sm={12} className="mt-5 mt-lg-0">
           <FollowingTags />

ui/src/pages/Tags/index.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import { Tag, Pagination, QueryGroup, TagsLoader } from '@/components';
-import { formatCount, htmlToReact } from '@/utils';
+import { formatCount, escapeRemove } from '@/utils';
 import { tryNormalLogged } from '@/utils/guard';
 import { useQueryTags, following } from '@/services';
 import { loggedUserInfoStore } from '@/stores';
@@ -112,7 +112,7 @@ const Tags = () => {
                       <Tag className="mb-3" data={tag} />
 
                       <div className="fs-14 flex-fill text-break text-wrap text-truncate-3 reset-p mb-3">
-                        {htmlToReact(tag.parsed_text)}
+                        {escapeRemove(tag.excerpt)}
                       </div>
                       <div className="d-flex align-items-center">
                         <Button