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

fix: lables nesting error

See merge request opensource/answer!405

i18n/en_US.yaml

@@ -607,7 +607,7 @@ ui:
     msg:
       empty: Cannot be empty.
   login:
-    page_title: Welcome to Answer
+    page_title: Welcome to {{site_name}}
     info_sign: Don't have an account? <1>Sign up</1>
     info_login: Already have an account? <1>Log in</1>
     agreements: By registering, you agree to the <1>privacy policy</1> and <3>terms of service</3>.

ui/src/components/Comment/index.tsx

@@ -27,7 +27,6 @@ import './index.scss';
 const Comment = ({ objectId, mode, commentId }) => {
   const pageUsers = usePageUsers();
   const [pageIndex, setPageIndex] = useState(0);
-  const [comments, setComments] = useState<any>([]);
   const [visibleComment, setVisibleComment] = useState(false);
   const pageSize = pageIndex === 0 ? 3 : 15;
   const { data, mutate } = useQueryComments({
@@ -36,6 +35,7 @@ const Comment = ({ objectId, mode, commentId }) => {
     page: pageIndex,
     page_size: pageSize,
   });
+  const [comments, setComments] = useState<any>([]);
 
   const reportModal = useReportModal();
 
@@ -100,6 +100,9 @@ const Comment = ({ objectId, mode, commentId }) => {
     const users = matchedUsers(item.value);
     const userNames = unionBy(users.map((user) => user.userName));
     const html = marked.parse(parseUserInfo(item.value));
+    if (!item.value || !html) {
+      return;
+    }
     const params = {
       object_id: objectId,
       original_text: item.value,
@@ -164,9 +167,8 @@ const Comment = ({ objectId, mode, commentId }) => {
         deleteComment(id).then(() => {
           if (pageIndex === 0) {
             mutate();
-          } else {
-            setComments(comments.filter((item) => item.comment_id !== id));
           }
+          setComments(comments.filter((item) => item.comment_id !== id));
         });
       },
     });

ui/src/components/Editor/Viewer.tsx

@@ -14,6 +14,7 @@ import { htmlRender } from './utils';
 let scrollTop = 0;
 marked.setOptions({
   breaks: true,
+  sanitize: true,
 });
 
 const Index = ({ value }, ref) => {

ui/src/components/Footer/index.tsx

@@ -5,12 +5,10 @@ import { Trans } from 'react-i18next';
 import dayjs from 'dayjs';
 
 import { siteInfoStore } from '@/stores';
-import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 const Index = () => {
   const fullYear = dayjs().format('YYYY');
-  const siteName =
-    siteInfoStore((state) => state.siteInfo.name) || DEFAULT_SITE_NAME;
+  const siteName = siteInfoStore((state) => state.siteInfo.name);
   const cc = `${fullYear} ${siteName}`;
   return (
     <footer className="bg-light py-3">

ui/src/components/Header/index.tsx

@@ -28,7 +28,6 @@ import {
   themeSettingStore,
 } from '@/stores';
 import { logout, useQueryNotificationStatus } from '@/services';
-import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 import NavItems from './components/NavItems';
 
@@ -121,7 +120,7 @@ const Header: FC = () => {
                 />
               </>
             ) : (
-              <span>{siteInfo.name || DEFAULT_SITE_NAME}</span>
+              <span>{siteInfo.name}</span>
             )}
           </Navbar.Brand>
 

ui/src/components/Operate/index.tsx

@@ -41,10 +41,10 @@ const Index: FC<IProps> = ({
   const navigate = useNavigate();
   const reportModal = useReportModal();
 
-  const refershQuestion = () => {
+  const refreshQuestion = () => {
     callback?.('default');
   };
-  const closeModal = useReportModal(refershQuestion);
+  const closeModal = useReportModal(refreshQuestion);
   const editUrl =
     type === 'answer' ? `/posts/${qid}/${aid}/edit` : `/posts/${qid}/edit`;
 
@@ -132,7 +132,7 @@ const Index: FC<IProps> = ({
             msg: t('success', { keyPrefix: 'question_detail.reopen' }),
             variant: 'success',
           });
-          refershQuestion();
+          refreshQuestion();
         });
       },
     });

ui/src/pages/Admin/Seo/index.tsx

@@ -38,6 +38,7 @@ const Index: FC = () => {
       'ui:widget': 'textarea',
       'ui:options': {
         rows: 10,
+        className: 'font-monospace',
       },
     },
   };

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

@@ -14,47 +14,47 @@ const Index: FC = () => {
 
       <div style={{ marginBottom: '2rem' }}>
         <p>
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
 
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-75 d-block align-top"
             style={{ height: '24px' }}
           />
         </p>
 
         <p>
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-100 d-block align-top mb-1"
             style={{ height: '24px' }}
           />
-          <div
+          <span
             className="placeholder w-50 d-block align-top"
             style={{ height: '24px' }}
           />

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

@@ -123,7 +123,6 @@ const Index = () => {
       }, 1000);
       return;
     }
-
     if (type === 'default') {
       window.scrollTo(0, 0);
       getDetail();
@@ -150,6 +149,7 @@ const Index = () => {
     if (!qid) {
       return;
     }
+    window.scrollTo(0, 0);
     getDetail();
     requestAnswers();
   }, [qid]);

ui/src/pages/Users/Login/index.tsx

@@ -12,7 +12,11 @@ import type {
   FormDataType,
 } from '@/common/interface';
 import { Unactivate } from '@/components';
-import { loggedUserInfoStore, loginSettingStore } from '@/stores';
+import {
+  loggedUserInfoStore,
+  loginSettingStore,
+  siteInfoStore,
+} from '@/stores';
 import { guard, floppyNavigation, handleFormError } from '@/utils';
 import { login, checkImgCode } from '@/services';
 import { PicAuthCodeModal } from '@/components/Modal';
@@ -23,8 +27,8 @@ const Index: React.FC = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [refresh, setRefresh] = useState(0);
-  const updateUser = loggedUserInfoStore((state) => state.update);
-  const storeUser = loggedUserInfoStore((state) => state.user);
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
+  const { user: storeUser, update: updateUser } = loggedUserInfoStore((_) => _);
   const loginSetting = loginSettingStore((state) => state.login);
   const [formData, setFormData] = useState<FormDataType>({
     e_mail: {
@@ -170,7 +174,9 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <h3 className="text-center mb-5">
+        {t('page_title', { site_name: siteName })}
+      </h3>
       {step === 1 && (
         <Col className="mx-auto" md={3}>
           <Form noValidate onSubmit={handleSubmit}>

ui/src/pages/Users/Register/index.tsx

@@ -4,13 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 import { usePageTags } from '@/hooks';
 import { Unactivate } from '@/components';
+import { siteInfoStore } from '@/stores';
 
 import SignUpForm from './components/SignUpForm';
 
 const Index: React.FC = () => {
   const [showForm, setShowForm] = useState(true);
   const { t } = useTranslation('translation', { keyPrefix: 'login' });
-
+  const { name: siteName } = siteInfoStore((_) => _.siteInfo);
   const onStep = () => {
     setShowForm((bol) => !bol);
   };
@@ -19,7 +20,9 @@ const Index: React.FC = () => {
   });
   return (
     <Container style={{ paddingTop: '4rem', paddingBottom: '5rem' }}>
-      <h3 className="text-center mb-5">{t('page_title')}</h3>
+      <h3 className="text-center mb-5">
+        {t('page_title', { site_name: siteName })}
+      </h3>
       {showForm ? (
         <SignUpForm callback={onStep} />
       ) : (

ui/src/stores/siteInfo.ts

@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 import { AdminSettingsGeneral } from '@/common/interface';
+import { DEFAULT_SITE_NAME } from '@/common/constants';
 
 interface SiteInfoType {
   siteInfo: AdminSettingsGeneral;
@@ -9,7 +10,7 @@ interface SiteInfoType {
 
 const siteInfo = create<SiteInfoType>((set) => ({
   siteInfo: {
-    name: '',
+    name: DEFAULT_SITE_NAME,
     description: '',
     short_description: '',
     site_url: '',
@@ -19,6 +20,9 @@ const siteInfo = create<SiteInfoType>((set) => ({
   update: (params) =>
     set((_) => {
       const o = { ..._.siteInfo, ...params };
+      if (!o.name) {
+        o.name = DEFAULT_SITE_NAME;
+      }
       return {
         siteInfo: o,
       };