From 7e4304923dd6aab8ef917e43687157ce0dbf9c67 Mon Sep 17 00:00:00 2001 From: shuai Date: Thu, 16 Mar 2023 11:35:58 +0800 Subject: [PATCH] fix: tag list add excerpt --- ui/src/components/QuestionList/index.tsx | 24 +++++------------ ui/src/components/index.ts | 4 +++ ui/src/pages/Questions/index.tsx | 23 ++++++++++++---- ui/src/pages/Tags/Detail/index.tsx | 34 +++++++++++++++++++----- ui/src/pages/Tags/index.tsx | 4 +-- 5 files changed, 58 insertions(+), 31 deletions(-) diff --git a/ui/src/components/QuestionList/index.tsx b/ui/src/components/QuestionList/index.tsx index d0e216c3..c8473d88 100644 --- a/ui/src/components/QuestionList/index.tsx +++ b/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 = ({ source }) => { +const QuestionList: FC = ({ 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 (
@@ -68,7 +56,7 @@ const QuestionList: FC = ({ source }) => { {isLoading ? ( ) : ( - listData?.list?.map((li) => { + data?.list?.map((li) => { return ( { 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 = () => { - + {!loggedUser.access_token && ( diff --git a/ui/src/pages/Tags/Detail/index.tsx b/ui/src/pages/Tags/Detail/index.tsx index c58db892..8e5ffc0a 100644 --- a/ui/src/pages/Tags/Detail/index.tsx +++ b/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({}); const [tagFollow, setTagFollow] = useState(); 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 = () => { - {isLoading ? ( + {isLoading || listLoading ? (

{

)} - + diff --git a/ui/src/pages/Tags/index.tsx b/ui/src/pages/Tags/index.tsx index 57663e77..d20b4b0b 100644 --- a/ui/src/pages/Tags/index.tsx +++ b/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 = () => {
- {htmlToReact(tag.parsed_text)} + {escapeRemove(tag.excerpt)}