feat: optimize code

haiwen · Jan 20, 2025 · fbe7e5c · fbe7e5c
1 parent 10c88a1
commit fbe7e5c
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 73 deletions.
diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
@@ -7,8 +7,6 @@ import { SYSTEM_FOLDERS } from '../../../constants';
 import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
 import { Utils } from '../../../utils/utils';
 import Icon from '../../icon';
-import { metadataAPI } from '../../../metadata';
-import toaster from '../../toast';
 
 import '@seafile/react-image-lightbox/style.css';
 import './index.css';
@@ -18,7 +16,6 @@ const SIDE_PANEL_EXPANDED_WIDTH = 300;
 
 const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
   const [expanded, setExpanded] = useState(false);
-  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
 
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
@@ -34,15 +31,6 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
     setExpanded(!expanded);
   }, [expanded]);
 
-  useEffect(() => {
-    metadataAPI.getFaceRecognitionStatus(repoID).then(res => {
-      setEnableFaceRecognition(res.data.enabled);
-    }).catch(error => {
-      const errMessage = Utils.getErrorMsg(error);
-      toaster.danger(errMessage);
-    });
-  }, [repoID]);
-
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
   const id = imageItems[imageIndex].id;
@@ -77,21 +65,7 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
         <div className="side-panel-controller" onClick={onToggleSidePanel}>
           <Icon className="expand-button" symbol={expanded ? 'right_arrow' : 'left_arrow'} />
         </div>
-        {expanded && (
-          <EmbeddedFileDetails
-            repoID={repoID}
-            repoInfo={repoInfo}
-            path={path}
-            dirent={dirent}
-            onClose={() => {}}
-            component={{
-              headerComponent: {
-                isShowControl: false,
-              }
-            }}
-            enableFaceRecognition={enableFaceRecognition}
-          />
-        )}
+        {expanded && (<EmbeddedFileDetails repoID={repoID} repoInfo={repoInfo} path={path} dirent={dirent} />)}
       </div>
 
     );

diff --git a/frontend/src/components/dirent-detail/detail/header/index.js b/frontend/src/components/dirent-detail/detail/header/index.js
@@ -6,36 +6,32 @@ import Title from './title';
 import './index.css';
 
 const Header = ({ title, icon, iconSize = 32, onClose, children, component = {} }) => {
-  const { isShowControl, closeIcon } = component;
+  const { closeIcon } = component;
   return (
     <div className="detail-header">
       <Title title={title} icon={icon} iconSize={iconSize} />
-      {isShowControl && (
+      {(children || onClose) && (
         <div className="detail-control-container">
           {children}
-          <div className="detail-control" onClick={onClose}>
-            {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
-          </div>
+          {onClose && (
+            <div className="detail-control" onClick={onClose}>
+              {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />}
+            </div>
+          )}
         </div>
       )}
     </div>
   );
 };
 
-Header.defaultProps = {
-  component: {
-    isShowControl: true,
-  }
-};
 
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
   iconSize: PropTypes.number,
   component: PropTypes.object,
   children: PropTypes.any,
-  onClose: PropTypes.func.isRequired,
-  isShowControl: PropTypes.bool,
+  onClose: PropTypes.func,
 };
 
 export default Header;
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/file-details.js b/frontend/src/components/dirent-detail/embedded-file-details/file-details.js
@@ -9,8 +9,8 @@ import { MetadataDetails, useMetadataDetails } from '../../../metadata';
 import { useMetadataStatus } from '../../../hooks';
 import People from '../people';
 
-const FileDetails = ({ repoID, dirent, direntDetail, enableFaceRecognition }) => {
-  const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
+const FileDetails = ({ repoID, dirent, direntDetail }) => {
+  const { enableMetadataManagement, enableMetadata, enableFaceRecognition } = useMetadataStatus();
   const { record } = useMetadataDetails();
 
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);

diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -12,7 +12,7 @@ import { AI, Settings } from '../../../metadata/components/metadata-details';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {}, enableFaceRecognition = false }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
@@ -38,16 +38,16 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   useEffect(() => {
     if (isView || isTag) return;
 
-    let isNewContext = false;
+    let isExistContext = true;
     if (!window.sfMetadataContext) {
       const context = new MetadataContext();
       window.sfMetadataContext = context;
       window.sfMetadataContext.init({ repoID, repoInfo });
-      isNewContext = true;
+      isExistContext = false;
     }
 
     return () => {
-      if (window.sfMetadataContext && isNewContext) {
+      if (window.sfMetadataContext && !isExistContext) {
         window.sfMetadataContext.destroy();
         delete window['sfMetadataContext'];
       }
@@ -71,14 +71,18 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
         })}
         style={{ width }}
       >
-        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={onClose} component={headerComponent} >
-          <AI />
-          <Settings />
+        <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={onClose} component={headerComponent}>
+          {onClose && (
+            <>
+              <AI />
+              <Settings />
+            </>
+          )}
         </Header>
         <Body>
           {dirent && direntDetail && (
             <div className="detail-content">
-              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} enableFaceRecognition={enableFaceRecognition} />
+              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} />
             </div>
           )}
         </Body>
@@ -93,8 +97,7 @@ EmbeddedFileDetails.propTypes = {
   path: PropTypes.string.isRequired,
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
-  onClose: PropTypes.func.isRequired,
-  enableFaceRecognition: PropTypes.bool,
+  onClose: PropTypes.func,
 };
 
 export default EmbeddedFileDetails;
diff --git a/frontend/src/hooks/metadata-status.js b/frontend/src/hooks/metadata-status.js
@@ -21,6 +21,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
   const [enableOCR, setEnableOCR] = useState(false);
   const [detailsSettings, setDetailsSettings] = useState({});
   const [isBeingBuilt, setIsBeingBuilt] = useState(false);
+  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
 
   const cancelMetadataURL = useCallback((isSetRoot = false) => {
     // If attribute extension is turned off, unmark the URL
@@ -39,6 +40,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
     setEnableMetadata(false);
     setEnableTags(false);
     setEnableOCR(false);
+    setEnableFaceRecognition(false);
     setDetailsSettings({});
     setIsBeingBuilt(false);
     if (!enableMetadataManagement) {
@@ -52,7 +54,8 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
         tags_enabled: enableTags,
         tags_lang: tagsLang,
         details_settings: detailsSettings,
-        ocr_enabled: enableOCR
+        ocr_enabled: enableOCR,
+        face_recognition_enabled: enableFaceRecognition,
       } = res.data;
       if (!enableMetadata) {
         cancelMetadataURL();
@@ -61,6 +64,7 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
       setTagsLang(tagsLang || 'en');
       setDetailsSettings(JSON.parse(detailsSettings));
       setEnableOCR(enableOCR);
+      setEnableFaceRecognition(enableFaceRecognition);
       setEnableMetadata(enableMetadata);
       setLoading(false);
     }).catch(error => {
@@ -97,6 +101,11 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
     setEnableOCR(newValue);
   }, [enableOCR]);
 
+  const updateEnableFaceRecognition = useCallback((newValue) => {
+    if (newValue === enableFaceRecognition) return;
+    setEnableFaceRecognition(newValue);
+  }, [enableFaceRecognition]);
+
   const modifyDetailsSettings = useCallback((update) => {
     metadataAPI.modifyMetadataDetailsSettings(repoID, update).then(res => {
       const newDetailsSettings = { ...detailsSettings, ...update };
@@ -122,6 +131,8 @@ export const MetadataStatusProvider = ({ repoID, repoInfo, hideMetadataView, chi
         modifyDetailsSettings,
         enableOCR,
         updateEnableOCR,
+        enableFaceRecognition,
+        updateEnableFaceRecognition,
       }}
     >
       {!isLoading && (

diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js
@@ -17,14 +17,13 @@ const MetadataContext = React.createContext(null);
 
 export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadataView, children }) => {
   const [isLoading, setLoading] = useState(true);
-  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
   const [navigation, setNavigation] = useState([]);
   const [idViewMap, setIdViewMap] = useState({});
 
   const collapsedFoldersIds = useRef([]);
   const originalTitleRef = useRef(document.title);
 
-  const { enableMetadata, isBeingBuilt, setIsBeingBuilt } = useMetadataStatus();
+  const { enableMetadata, enableFaceRecognition, isBeingBuilt, setIsBeingBuilt, updateEnableFaceRecognition: updateEnableFaceRecognitionAPI } = useMetadataStatus();
 
   const getCollapsedFolders = useCallback(() => {
     const strFoldedFolders = window.localStorage.getItem(`${CACHED_COLLAPSED_FOLDERS_PREFIX}-${repoID}`);
@@ -70,27 +69,12 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata
       });
       return;
     }
-    setEnableFaceRecognition(false);
     setNavigation([]);
     setIdViewMap({});
     setLoading(false);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enableMetadata]);
 
-  useEffect(() => {
-    if (!enableMetadata) {
-      setEnableFaceRecognition(false);
-      return;
-    }
-    metadataAPI.getFaceRecognitionStatus(repoID).then(res => {
-      setEnableFaceRecognition(res.data.enabled);
-    }).catch(error => {
-      const errorMsg = Utils.getErrorMsg(error);
-      toaster.danger(errorMsg);
-    });
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [enableMetadata]);
-
   const getFirstView = useCallback(() => {
     const firstViewNav = navigation.find(item => item.type === VIEWS_TYPE_VIEW);
     const firstView = firstViewNav ? idViewMap[firstViewNav._id] : null;
@@ -394,8 +378,8 @@ export const MetadataProvider = ({ repoID, currentPath, repoInfo, selectMetadata
         deleteView({ folderId, viewId: FACE_RECOGNITION_VIEW_ID, isSelected });
       }
     }
-    setEnableFaceRecognition(newValue);
-  }, [enableFaceRecognition, currentPath, idViewMap, navigation, addView, deleteView]);
+    updateEnableFaceRecognitionAPI(newValue);
+  }, [enableFaceRecognition, currentPath, idViewMap, navigation, addView, deleteView, updateEnableFaceRecognitionAPI]);
 
   useEffect(() => {
     if (isLoading) return;

diff --git a/seahub/repo_metadata/apis.py b/seahub/repo_metadata/apis.py
@@ -52,6 +52,7 @@ def get(self, request, repo_id):
         tags_lang = ''
         details_settings = '{}'
         is_ocr_enabled = False
+        face_recognition_enabled = False
 
         try:
             record = RepoMetadata.objects.filter(repo_id=repo_id).first()
@@ -65,6 +66,8 @@ def get(self, request, repo_id):
                     tags_lang = record.tags_lang
                 if record.ocr_enabled:
                     is_ocr_enabled = True
+                if record.face_recognition_enabled:
+                    face_recognition_enabled = True
         except Exception as e:
             logger.error(e)
             error_msg = 'Internal Server Error'
@@ -73,9 +76,10 @@ def get(self, request, repo_id):
         return Response({
             'enabled': is_enabled,
             'tags_enabled': is_tags_enabled,
+            'ocr_enabled': is_ocr_enabled,
+            'face_recognition_enabled': face_recognition_enabled,
             'tags_lang': tags_lang,
             'details_settings': details_settings,
-            'ocr_enabled': is_ocr_enabled
         })
 
     def put(self, request, repo_id):