fix(ImgViewer): Migrate `ImgViewer` from hooks to component

ui/src/components/Editor/Viewer.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 
 import { markdownToHtml } from '@/services';
+import ImgViewer from '@/components/ImgViewer';
 
 import { htmlRender } from './utils';
 
@@ -48,11 +49,13 @@ const Index = ({ value }, ref) => {
   });
 
   return (
+    <ImgViewer>
       <div
         ref={previewRef}
         className="preview-wrap position-relative p-3 bg-light rounded text-break text-wrap mt-2 fmt"
         dangerouslySetInnerHTML={{ __html: html }}
       />
+    </ImgViewer>
   );
 };
 

ui/src/components/ImgViewer/index.css

@@ -0,0 +1,7 @@
+.img-viewer .cursor-zoom-out {
+  cursor: zoom-out !important;
+}
+
+.img-viewer img:not(a img, img.broken) {
+  cursor: zoom-in;
+}

ui/src/components/ImgViewer/index.tsx

@@ -1,14 +1,13 @@
-import { useLayoutEffect, useState, MouseEvent, useEffect } from 'react';
+import { FC, MouseEvent, ReactNode, useEffect, useState } from 'react';
 import { Modal } from 'react-bootstrap';
-import { useLocation } from 'react-router-dom';
 
-import ReactDOM from 'react-dom/client';
+import './index.css';
+import classnames from 'classnames';
 
-const div = document.createElement('div');
-const root = ReactDOM.createRoot(div);
-
-const useImgViewer = () => {
-  const location = useLocation();
+const Index: FC<{
+  children: ReactNode;
+  className?: classnames.Argument;
+}> = ({ children, className }) => {
   const [visible, setVisible] = useState(false);
   const [imgSrc, setImgSrc] = useState('');
   const onClose = () => {
@@ -47,8 +46,18 @@ const useImgViewer = () => {
     }
   };
 
-  useLayoutEffect(() => {
-    root.render(
+  useEffect(() => {
+    return () => {
+      onClose();
+    };
+  }, []);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div
+      className={classnames('img-viewer', className)}
+      onClick={checkClickForImgView}>
+      {children}
       <Modal
         show={visible}
         fullscreen
@@ -56,23 +65,16 @@ const useImgViewer = () => {
         scrollable
         contentClassName="bg-transparent"
         onHide={onClose}>
-        <Modal.Body onClick={onClose} className="p-0 d-flex">
+        <Modal.Body onClick={onClose} className="img-viewer p-0 d-flex">
           <img
             className="cursor-zoom-out img-fluid m-auto"
             src={imgSrc}
             alt={imgSrc}
           />
         </Modal.Body>
-      </Modal>,
+      </Modal>
+    </div>
   );
-  });
-  useEffect(() => {
-    onClose();
-  }, [location]);
-  return {
-    onClose,
-    checkClickForImgView,
-  };
 };
 
-export default useImgViewer;
+export default Index;

ui/src/components/index.ts

@@ -39,6 +39,7 @@ import QuestionList from './QuestionList';
 import HotQuestions from './HotQuestions';
 import HttpErrorContent from './HttpErrorContent';
 import CustomSidebar from './CustomSidebar';
+import ImgViewer from './ImgViewer';
 
 export {
   Avatar,
@@ -84,5 +85,6 @@ export {
   HotQuestions,
   HttpErrorContent,
   CustomSidebar,
+  ImgViewer,
 };
 export type { EditorRef, JSONSchema, UISchema };

ui/src/hooks/index.ts

@@ -10,7 +10,6 @@ import useChangePasswordModal from './useChangePasswordModal';
 import usePageTags from './usePageTags';
 import useLoginRedirect from './useLoginRedirect';
 import usePromptWithUnload from './usePrompt';
-import useImgViewer from './useImgViewer';
 
 export {
   useTagModal,
@@ -25,5 +24,4 @@ export {
   usePageTags,
   useLoginRedirect,
   usePromptWithUnload,
-  useImgViewer,
 };

ui/src/index.scss

@@ -120,14 +120,6 @@ a {
   cursor: pointer;
 }
 
-.cursor-zoom-out {
-  cursor: zoom-out !important;
-}
-
-img:not(a img, img.broken) {
-  cursor: zoom-in;
-}
-
 .resize-none {
   resize: none;
 }

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

@@ -1,7 +1,7 @@
 import { FC, memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { JSONSchema, SchemaForm, UISchema } from '@/components';
+import { JSONSchema, SchemaForm, UISchema, ImgViewer } from '@/components';
 import { FormDataType } from '@/common/interface';
 import { brandSetting, getBrandSetting } from '@/services';
 import { brandingStore } from '@/stores';
@@ -142,7 +142,7 @@ const Index: FC = () => {
   }, []);
 
   return (
-    <div>
+    <ImgViewer>
       <h3 className="mb-4">{t('page_title')}</h3>
       <SchemaForm
         schema={schema}
@@ -151,7 +151,7 @@ const Index: FC = () => {
         onSubmit={onSubmit}
         onChange={handleOnChange}
       />
-    </div>
+    </ImgViewer>
   );
 };
 

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

@@ -146,6 +146,9 @@ const Index: FC = () => {
 
   useEffect(() => {
     getUsersSetting().then((resp) => {
+      if (!resp) {
+        return;
+      }
       const formMeta: Type.FormDataType = {};
       Object.keys(formData).forEach((k) => {
         let v = resp[k];

ui/src/pages/Layout/index.tsx

@@ -15,7 +15,6 @@ import {
   HttpErrorContent,
 } from '@/components';
 import { LoginToContinueModal } from '@/components/Modal';
-import { useImgViewer } from '@/hooks';
 
 const Layout: FC = () => {
   const location = useLocation();
@@ -24,7 +23,6 @@ const Layout: FC = () => {
     toastClear();
   };
   const { code: httpStatusCode, reset: httpStatusReset } = errorCodeStore();
-  const imgViewer = useImgViewer();
   const { show: showLoginToContinueModal } = loginToContinueStore();
 
   useEffect(() => {
@@ -40,9 +38,7 @@ const Layout: FC = () => {
         }}>
         <Header />
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className="position-relative page-wrap"
-          onClick={imgViewer.checkClickForImgView}>
+        <div className="position-relative page-wrap">
           {httpStatusCode ? (
             <HttpErrorContent httpCode={httpStatusCode} />
           ) : (

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

@@ -12,6 +12,7 @@ import {
   FormatTime,
   htmlRender,
   Icon,
+  ImgViewer,
 } from '@/components';
 import { formatCount, guard } from '@/utils';
 import { following } from '@/services';
@@ -114,11 +115,13 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
           return <Tag className="m-1" key={item.slug_name} data={item} />;
         })}
       </div>
+      <ImgViewer>
         <article
           ref={ref}
           className="fmt text-break text-wrap mt-4"
           dangerouslySetInnerHTML={{ __html: data?.html }}
         />
+      </ImgViewer>
 
       <Actions
         className="mt-4"

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import MD5 from 'md5';
 
 import type { FormDataType } from '@/common/interface';
-import { UploadImg, Avatar, Icon } from '@/components';
+import { UploadImg, Avatar, Icon, ImgViewer } from '@/components';
 import { loggedUserInfoStore, userCenterStore, siteInfoStore } from '@/stores';
 import { useToast } from '@/hooks';
 import {
@@ -27,7 +27,6 @@ const Index: React.FC = () => {
   const [mailHash, setMailHash] = useState('');
   const [count] = useState(0);
   const [profileAgent, setProfileAgent] = useState<UcSettingAgent>();
-
   const [formData, setFormData] = useState<FormDataType>({
     display_name: {
       value: '',
@@ -343,6 +342,7 @@ const Index: React.FC = () => {
                 </option>
               </Form.Select>
             </div>
+            <ImgViewer>
               <div className="d-flex">
                 {formData.avatar.type === 'gravatar' && (
                   <Stack>
@@ -403,6 +403,7 @@ const Index: React.FC = () => {
                   <Avatar size="160px" avatar="" />
                 )}
               </div>
+            </ImgViewer>
             <Form.Control
               isInvalid={formData.avatar.isInvalid}
               className="d-none"

ui/src/stores/siteInfo.ts

@@ -13,6 +13,16 @@ interface SiteInfoType {
   updateUsers: (users: SiteInfoType['users']) => void;
 }
 
+const defaultUsersConf: AdminSettingsUsers = {
+  allow_update_avatar: false,
+  allow_update_bio: false,
+  allow_update_display_name: false,
+  allow_update_location: false,
+  allow_update_username: false,
+  allow_update_website: false,
+  default_avatar: 'system',
+};
+
 const siteInfo = create<SiteInfoType>((set) => ({
   siteInfo: {
     name: DEFAULT_SITE_NAME,
@@ -22,15 +32,7 @@ const siteInfo = create<SiteInfoType>((set) => ({
     contact_email: '',
     permalink: 1,
   },
-  users: {
-    allow_update_avatar: false,
-    allow_update_bio: false,
-    allow_update_display_name: false,
-    allow_update_location: false,
-    allow_update_username: false,
-    allow_update_website: false,
-    default_avatar: 'system',
-  },
+  users: defaultUsersConf,
   version: '',
   revision: '',
   update: (params) =>
@@ -50,6 +52,7 @@ const siteInfo = create<SiteInfoType>((set) => ({
   },
   updateUsers: (users) => {
     set(() => {
+      users ||= defaultUsersConf;
       return { users };
     });
   },