(incubator-answer) 09/09: perf: optimize question linked display processing

[linkinstar]

This is an automated email from the ASF dual-hosted git repository.

linkinstar pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git

commit fe60e5e5db23c495eb1ef6e6101b9ac87b16e6fa
Author: Sonui <m...@sonui.cn>
AuthorDate: Fri Oct 11 01:02:16 2024 +0800

    perf: optimize question linked display processing
---
 .../Detail/components/LinkedQuestions/index.tsx    | 37 ++++------------------
 ui/src/pages/Questions/Linked/index.tsx            |  6 ++--
 2 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/ui/src/pages/Questions/Detail/components/LinkedQuestions/index.tsx 
b/ui/src/pages/Questions/Detail/components/LinkedQuestions/index.tsx
index 8e5a57dd..f02adb35 100644
--- a/ui/src/pages/Questions/Detail/components/LinkedQuestions/index.tsx
+++ b/ui/src/pages/Questions/Detail/components/LinkedQuestions/index.tsx
@@ -37,36 +37,14 @@ const Index: FC<Props> = ({ id }) => {
     keyPrefix: 'related_question',
   });
 
-  const { data, isLoading } = questionLink({
+  const { data } = questionLink({
     question_id: id,
     page: 1,
     page_size: 5,
   });
 
-  if (isLoading) {
-    return null;
-  }
-
   if (!data || !data.list) {
-    return (
-      <Card className="mb-4">
-        <Card.Header className="text-nowrap d-flex justify-content-between 
text-capitalize">
-          {t('title')}
-          <Link to={`/questions/linked/${id}`} className="btn btn-link p-0">
-            {t('more', { keyPrefix: 'btns' })}
-          </Link>
-        </Card.Header>
-        <ListGroup variant="flush">
-          <div
-            className="text-muted"
-            style={{
-              padding: 'var(--bs-card-spacer-y) var(--bs-card-spacer-x)',
-            }}>
-            {t('no_linked_question')}
-          </div>
-        </ListGroup>
-      </Card>
-    );
+    return null;
   }
 
   return (
@@ -78,8 +56,8 @@ const Index: FC<Props> = ({ id }) => {
         </Link>
       </Card.Header>
       <ListGroup variant="flush">
-        {data.list.map((item) => {
-          return (
+        {data.list.length > 0 ? (
+          data.list.map((item) => (
             <ListGroup.Item
               action
               key={item.id}
@@ -107,9 +85,8 @@ const Index: FC<Props> = ({ id }) => {
                 </div>
               )}
             </ListGroup.Item>
-          );
-        })}
-        {data.list.length === 0 ? (
+          ))
+        ) : (
           <div
             className="text-muted"
             style={{
@@ -117,7 +94,7 @@ const Index: FC<Props> = ({ id }) => {
             }}>
             {t('no_linked_question')}
           </div>
-        ) : null}
+        )}
       </ListGroup>
     </Card>
   );
diff --git a/ui/src/pages/Questions/Linked/index.tsx 
b/ui/src/pages/Questions/Linked/index.tsx
index aabba7bb..70a62ec1 100644
--- a/ui/src/pages/Questions/Linked/index.tsx
+++ b/ui/src/pages/Questions/Linked/index.tsx
@@ -72,11 +72,11 @@ const LinkedQuestions: FC = () => {
   return (
     <Row className="pt-4 mb-5">
       <Col className="page-main flex-auto">
-        <h3>Linked Questions</h3>
-        <p>
+        <h3 className="mb-3">Linked Questions</h3>
+        <div className="mb-5">
           Questions linked to/from&nbsp;
           <a href={`/questions/${qid}`}>{questionTitle}</a>
-        </p>
+        </div>
         <QuestionList
           source="linked"
           data={listData}