Merge branch 'feat/1.4.1/badge-style' into test

apache · Sep 24, 2024 · db80f63 · db80f63
2 parents 66eb2d1 + 7ff8038
commit db80f63
Show file tree

Hide file tree

Showing 11 changed files with 309 additions and 214 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -20,7 +20,7 @@
     "@codemirror/language-data": "^6.5.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.1",
-    "axios": "^0.28.1",
+    "axios": "^1.7.7",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.10.5",
     "classnames": "^2.3.1",

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
diff --git a/ui/src/components/CardBadge/index.scss b/ui/src/components/CardBadge/index.scss
@@ -18,19 +18,9 @@
  */
 
 .badge-card {
-  width: 194px;
-  margin: 12px;
-
   .label {
     position: absolute;
     top: 1rem;
     right: 1rem;
   }
 }
-
-
-@media screen and (max-width: 768px) {
-  .badge-card {
-    width: 163.5px;
-  }
-}
diff --git a/ui/src/components/CardBadge/index.tsx b/ui/src/components/CardBadge/index.tsx
@@ -50,15 +50,20 @@ const Index: FC<IProps> = ({
       to={`/badges/${data.id}${urlSearchParams ? `?${urlSearchParams}` : ''}`}>
       <Card.Body>
         {Number(data?.earned_count) > 0 && badgePillType === 'earned' && (
-          <Badge bg="success" className="label">
+          <Badge
+            bg="success"
+            style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
             {`${t('earned')}${
               Number(data?.earned_count) > 1 ? ` ×${data.earned_count}` : ''
             }`}
           </Badge>
         )}
 
         {badgePillType === 'count' && Number(data?.earned_count) > 1 && (
-          <Badge pill bg="secondary" className="label">
+          <Badge
+            pill
+            bg="secondary"
+            style={{ position: 'absolute', top: '1rem', right: '1rem' }}>
             ×{data.earned_count}
           </Badge>
         )}

diff --git a/ui/src/components/Modal/BadgeModal.tsx b/ui/src/components/Modal/BadgeModal.tsx
@@ -72,7 +72,10 @@ const BadgeModal: FC<BadgeModalProps> = ({ badge, visible }) => {
     const bgNode = document.documentElement || document.body;
 
     if (visible) {
-      const paranetNode = document.getElementById('badgeModal')?.parentNode;
+      const badgeModalNode = document.getElementById('badgeModal');
+      const paranetNode = badgeModalNode?.parentNode;
+
+      badgeModalNode?.setAttribute('style', 'z-index: 1');
 
       bg1 = new AnimateGift({
         elm: paranetNode,

diff --git a/ui/src/pages/Admin/Badges/index.tsx b/ui/src/pages/Admin/Badges/index.tsx
@@ -102,7 +102,7 @@ const Badges: FC = () => {
           </tr>
         </thead>
         <tbody className="align-middle">
-          {data?.list.map((badge) => (
+          {data?.list?.map((badge) => (
             <tr key={badge.id}>
               <td className="d-flex align-items-center">
                 {badge.icon?.startsWith('http') ? (

diff --git a/ui/src/pages/Badges/Detail/index.tsx b/ui/src/pages/Badges/Detail/index.tsx
@@ -68,7 +68,7 @@ const Index = () => {
         {isSkeletonShow ? (
           <Loader />
         ) : (
-          badges?.list?.map((item) => {
+          badges?.list?.map((item, index) => {
             const linkUrl =
               item.object_type === 'question'
                 ? `/questions/${item.question_id}`
@@ -84,7 +84,7 @@ const Index = () => {
                 sm={12}
                 md={6}
                 lg={3}
-                key={item.author_user_info.id}
+                key={item.object_id || `${item.author_user_info.id}${index}`}
                 className="mb-4">
                 <FormatTime
                   time={item.created_at}

diff --git a/ui/src/pages/Badges/index.tsx b/ui/src/pages/Badges/index.tsx
@@ -18,6 +18,7 @@
  */
 
 import { useTranslation } from 'react-i18next';
+import { Row, Col } from 'react-bootstrap';
 
 import { CardBadge } from '@/components';
 import { usePageTags } from '@/hooks';
@@ -37,15 +38,17 @@ const Index = () => {
       <h3 className="mb-4">{t('title')}</h3>
       {badgesList?.map((item) => {
         return (
-          <div key={item.group_name} className="mb-5">
+          <div key={item.group_name} className="mb-4">
             <h5 className="mb-4">{item.group_name}</h5>
-            <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
+            <Row>
               {item.badges?.map((badge) => {
                 return (
-                  <CardBadge data={badge} key={badge.id} showAwardedCount />
+                  <Col sm={6} md={4} lg={3} key={badge.id} className="mb-4">
+                    <CardBadge data={badge} showAwardedCount />
+                  </Col>
                 );
               })}
-            </div>
+            </Row>
           </div>
         );
       })}

diff --git a/ui/src/pages/Users/Personal/components/Badges/index.tsx b/ui/src/pages/Users/Personal/components/Badges/index.tsx
@@ -18,6 +18,7 @@
  */
 
 import { FC } from 'react';
+import { Row, Col } from 'react-bootstrap';
 
 import * as Type from '@/common/interface';
 import { CardBadge } from '@/components';
@@ -33,17 +34,19 @@ const Index: FC<IProps> = ({ data, visible, username }) => {
     return null;
   }
   return (
-    <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
+    <Row>
       {data.map((item) => {
         return (
-          <CardBadge
-            data={item}
-            urlSearchParams={`username=${username}`}
-            badgePillType="count"
-          />
+          <Col sm={6} md={4} lg={3} key={item.id} className="mb-4">
+            <CardBadge
+              data={item}
+              urlSearchParams={`username=${username}`}
+              badgePillType="count"
+            />
+          </Col>
         );
       })}
-    </div>
+    </Row>
   );
 };
 

diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx b/ui/src/pages/Users/Personal/components/Overview/index.tsx
@@ -72,19 +72,21 @@ const Index: FC<Props> = ({ visible, introduction, data, username }) => {
       </Row>
 
       {Number(recentBadges?.count) > 0 && (
-        <div className="mb-5">
+        <div className="mb-4">
           <h5 className="mb-3">{t('recent_badges')}</h5>
-          <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
+          <Row>
             {recentBadges?.list?.map((item) => {
               return (
-                <CardBadge
-                  data={item}
-                  urlSearchParams={`username=${username}`}
-                  badgePillType="count"
-                />
+                <Col sm={6} md={4} lg={3} key={item.id} className="mb-4">
+                  <CardBadge
+                    data={item}
+                    urlSearchParams={`username=${username}`}
+                    badgePillType="count"
+                  />
+                </Col>
               );
             })}
-          </div>
+          </Row>
         </div>
       )}
     </div>

diff --git a/ui/src/utils/request.ts b/ui/src/utils/request.ts
@@ -18,7 +18,12 @@
  */
 
 import axios, { AxiosResponse } from 'axios';
-import type { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios';
+import type {
+  AxiosInstance,
+  AxiosRequestConfig,
+  InternalAxiosRequestConfig,
+  AxiosError,
+} from 'axios';
 
 import { Modal } from '@/components';
 import { loggedUserInfoStore, toastStore, errorCodeStore } from '@/stores';
@@ -51,13 +56,11 @@ class Request {
   constructor(config: AxiosRequestConfig) {
     this.instance = axios.create(config);
     this.instance.interceptors.request.use(
-      (requestConfig: AxiosRequestConfig) => {
+      (requestConfig: InternalAxiosRequestConfig) => {
         const token = Storage.get(LOGGED_TOKEN_STORAGE_KEY) || '';
         const lang = getCurrentLang();
-        requestConfig.headers = {
-          Authorization: token,
-          'Accept-Language': lang,
-        };
+        requestConfig.headers.set('Authorization', token);
+        requestConfig.headers.set('Accept-Language', lang);
         return requestConfig;
       },
       (err: AxiosError) => {