optimize code

haiwen · Oct 17, 2024 · de46d14 · de46d14
1 parent 88b483d
commit de46d14
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 165 deletions.
diff --git a/frontend/src/components/dir-view-mode/constants.js b/frontend/src/components/dir-view-mode/constants.js
@@ -1,3 +1,4 @@
+export * from '../../metadata/constants';
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
 export const METADATA_MODE = 'metadata';

diff --git a/frontend/src/components/dirent-detail/detail-container.js b/frontend/src/components/dirent-detail/detail-container.js
@@ -1,38 +1,51 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibDetail from './lib-details';
 import DirentDetail from './dirent-details';
 import GalleryDetail from '../../metadata/components/gallery-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
+import { MetadataContext } from '../../metadata';
 import { METADATA_MODE } from '../dir-view-mode/constants';
 
 const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged, mode }) => {
 
-  const renderContent = () => {
-    if (mode === METADATA_MODE) {
-      const viewID = path.split('/').pop();
-      return <GalleryDetail currentRepoInfo={currentRepoInfo} viewID={viewID} onClose={onClose} />;
+  useEffect(() => {
+    // init context
+    if (!window.sfMetadataContext) {
+      const context = new MetadataContext();
+      window.sfMetadataContext = context;
+      window.sfMetadataContext.init({ repoID, repoInfo: currentRepoInfo });
     }
 
-    if (path === '/' && !dirent) {
-      return <LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />;
-    }
+    return () => {
+      if (window.sfMetadataContext && mode !== METADATA_MODE) {
+        window.sfMetadataContext.destroy();
+        delete window['sfMetadataContext'];
+      }
+    };
+  }, [repoID, currentRepoInfo, mode]);
+
+  if (mode === METADATA_MODE) {
+    const viewID = path.split('/').pop();
+    return <GalleryDetail currentRepoInfo={currentRepoInfo} viewID={viewID} onClose={onClose} />;
+  }
+
+  if (path === '/' && !dirent) {
+    return <LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />;
+  }
 
-    return (
-      <DirentDetail
-        repoID={repoID}
-        path={path}
-        dirent={dirent}
-        currentRepoInfo={currentRepoInfo}
-        repoTags={repoTags}
-        fileTags={fileTags}
-        onFileTagChanged={onFileTagChanged}
-        onClose={onClose}
-      />
-    );
-  };
-
-  return renderContent();
+  return (
+    <DirentDetail
+      repoID={repoID}
+      path={path}
+      dirent={dirent}
+      currentRepoInfo={currentRepoInfo}
+      repoTags={repoTags}
+      fileTags={fileTags}
+      onFileTagChanged={onFileTagChanged}
+      onClose={onClose}
+    />
+  );
 }, (props, nextProps) => {
   const isChanged =
     props.repoID !== nextProps.repoID ||

diff --git a/frontend/src/metadata/components/gallery-details/index.js b/frontend/src/metadata/components/gallery-details/index.js
@@ -9,7 +9,7 @@ import { Utils } from '../../../utils/utils';
 import { gettext, siteRoot, thumbnailSizeForGrid } from '../../../utils/constants';
 import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
 import { CellType, PRIVATE_COLUMN_KEY } from '../../constants';
-import { useMetadata } from '../../../metadata';
+import { useMetadata, useGallery } from '../../../metadata';
 import { seafileAPI } from '../../../utils/seafile-api';
 import FileDetails from '../../../components/dirent-detail/dirent-details/file-details';
 import { Dirent } from '../../../models';
@@ -18,39 +18,14 @@ const GalleryDetail = ({ currentRepoInfo, viewID, onClose }) => {
   const [isLoading, setLoading] = useState(true);
   const [repo, setRepo] = useState({});
   const [direntDetail, setDirentDetail] = useState(null);
-  const { viewsMap, currentImage } = useMetadata();
+  const { viewsMap } = useMetadata();
+  const { currentImage } = useGallery();
 
   const view = useMemo(() => viewsMap[viewID], [viewID, viewsMap]);
   const icon = useMemo(() => Utils.getFolderIconUrl(), []);
-  const filesField = useMemo(() => ({ type: CellType.NUMBER, name: gettext('Files') }), []);
-  const sizeField = useMemo(() => ({ type: CellType.TEXT, name: gettext('Size') }), []);
   const creatorField = useMemo(() => ({ type: CellType.CREATOR, name: gettext('Creator') }), []);
   const mtimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
 
-  const filesCount = useMemo(() => {
-    if (!window.sfMetadataContext || !window.sfMetadataStore) return 0;
-
-    const store = window.sfMetadataStore;
-    return store.data.rows.reduce((count, row) => Utils.imageCheck(row[PRIVATE_COLUMN_KEY.FILE_NAME]) ? count + 1 : count, 0);
-  }, []);
-
-  const sizeCount = useMemo(() => {
-    // count all images size
-    if (!window.sfMetadataContext || !window.sfMetadataStore) return 0;
-
-    const store = window.sfMetadataStore;
-    const total = store.data.rows.reduce((size, row) => {
-      if (Utils.imageCheck(row[PRIVATE_COLUMN_KEY.FILE_NAME])) {
-        const sizeStr = row[PRIVATE_COLUMN_KEY.SIZE];
-        const sizeNum = parseInt(sizeStr);
-        return size + sizeNum;
-      }
-      return size;
-    }, 0);
-
-    return Utils.bytesToSize(total);
-  }, []);
-
   useEffect(() => {
     setLoading(true);
     seafileAPI.getRepoInfo(currentRepoInfo.repo_id).then(res => {
@@ -101,18 +76,9 @@ const GalleryDetail = ({ currentRepoInfo, viewID, onClose }) => {
           <div className="w-100 h-100 d-flex align-items-center justify-content-center"><Loading /></div>
         ) : (
           <div className="detail-content">
-            <DetailItem field={filesField} value={filesCount} className="sf-metadata-property-detail-formatter">
-              <Formatter field={filesField} value={filesCount} />
-            </DetailItem>
-
-            <DetailItem field={sizeField} value={sizeCount} className="sf-metadata-property-detail-formatter">
-              <Formatter field={sizeField} value={sizeCount} />
-            </DetailItem>
-
             <DetailItem field={mtimeField} className="sf-metadata-property-detail-formatter">
               <Formatter field={mtimeField} value={repo.last_modified} />
             </DetailItem>
-
             <DetailItem field={creatorField} className="sf-metadata-property-detail-formatter">
               <Formatter
                 field={creatorField}

diff --git a/frontend/src/metadata/hooks/gallery.js b/frontend/src/metadata/hooks/gallery.js
@@ -0,0 +1,27 @@
+import React, { useState, createContext, useContext, useCallback } from 'react';
+
+const GalleryContext = createContext();
+
+export const GalleryProvider = ({ children }) => {
+  const [currentImage, setCurrentImage] = useState(null);
+
+  const updateCurrentImage = useCallback((image) => {
+    setCurrentImage(image);
+  }, []);
+
+  return (
+    <GalleryContext.Provider value={{ currentImage, updateCurrentImage }}>
+      {children}
+    </GalleryContext.Provider>
+  );
+};
+
+export const useGallery = () => {
+  const context = useContext(GalleryContext);
+
+  if (!context) {
+    throw new Error('\'GalleryContext\' is null');
+  }
+
+  return context;
+};
diff --git a/frontend/src/metadata/hooks/index.js b/frontend/src/metadata/hooks/index.js
@@ -1,3 +1,4 @@
 export { MetadataProvider, useMetadata } from './metadata';
 export { EnableMetadataProvider, useEnableMetadata } from './enable-metadata';
 export { CollaboratorsProvider, useCollaborators } from './collaborators';
+export { GalleryProvider, useGallery } from './gallery';
diff --git a/frontend/src/metadata/hooks/metadata.js b/frontend/src/metadata/hooks/metadata.js
@@ -20,7 +20,6 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
   const [navigation, setNavigation] = useState([]);
   const [staticView, setStaticView] = useState([]);
   const [, setCount] = useState(0);
-  const [currentImage, setCurrentImage] = useState(null);
 
   const viewsMap = useRef({});
 
@@ -139,6 +138,7 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
         name: isFaceRecognitionView ? gettext('Photos - classfied by people') : gettext('File extended properties'),
         type: isFaceRecognitionView ? PRIVATE_FILE_TYPE.FACE_RECOGNITION : PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES,
         isDir: () => false,
+        viewType: view.type,
       },
       parentNode: {},
       key: repoID,
@@ -214,10 +214,6 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
     });
   }, [repoID]);
 
-  const updateCurrentImage = useCallback((image) => {
-    setCurrentImage(image);
-  }, []);
-
   return (
     <MetadataContext.Provider value={{
       enableMetadata,
@@ -235,8 +231,6 @@ export const MetadataProvider = ({ repoID, hideMetadataView, selectMetadataView,
       deleteView,
       updateView,
       moveView,
-      currentImage,
-      updateCurrentImage,
     }}>
       {children}
     </MetadataContext.Provider>

diff --git a/frontend/src/metadata/views/gallery/gallery-main.js b/frontend/src/metadata/views/gallery/gallery-main.js
@@ -81,7 +81,16 @@ const GalleryMain = ({
   }, []);
 
   const handleClickOutside = useCallback((e) => {
-    if (imageRef.current && !imageRef.current.contains(e.target) && containerRef.current && containerRef.current.contains(e.target)) {
+    const images = containerRef.current.querySelectorAll('.metadata-gallery-image-item');
+    let isClickInsideImage = false;
+
+    images.forEach(img => {
+      if (img.contains(e.target)) {
+        isClickInsideImage = true;
+      }
+    });
+
+    if (!isClickInsideImage && containerRef.current.contains(e.target)) {
       onImageSelect([]);
     }
   }, [onImageSelect]);
@@ -129,7 +138,6 @@ const GalleryMain = ({
           <div className="metadata-gallery-date-tag">{name || gettext('Empty')}</div>
         )}
         <div
-          ref={imageRef}
           className="metadata-gallery-image-list"
           style={{
             gridTemplateColumns: `repeat(${columns}, 1fr)`,
@@ -142,6 +150,7 @@ const GalleryMain = ({
               const isSelected = selectedImageIDs.includes(img.id);
               return (
                 <div
+                  ref={imageRef}
                   key={img.src}
                   id={img.id}
                   tabIndex={1}

diff --git a/frontend/src/metadata/views/gallery/index.js b/frontend/src/metadata/views/gallery/index.js
@@ -13,7 +13,7 @@ import { Utils } from '../../../utils/utils';
 import { getDateDisplayString, getFileNameFromRecord, getParentDirFromRecord } from '../../utils/cell';
 import { siteRoot, fileServerRoot, useGoFileserver, gettext, thumbnailSizeForGrid, thumbnailSizeForOriginal } from '../../../utils/constants';
 import { EVENT_BUS_TYPE, PER_LOAD_NUMBER, PRIVATE_COLUMN_KEY, GALLERY_DATE_MODE, DATE_TAG_HEIGHT, GALLERY_IMAGE_GAP } from '../../constants';
-import { useMetadata } from '../../hooks';
+import { useGallery } from '../../hooks';
 
 import './index.css';
 
@@ -32,13 +32,11 @@ const Gallery = () => {
   const containerRef = useRef(null);
   const renderMoreTimer = useRef(null);
 
-  const { updateCurrentImage } = useMetadata();
+  const { updateCurrentImage } = useGallery();
   const { metadata, store } = useMetadataView();
   const repoID = store.repoId;
 
-  useEffect(() => {
-    updateCurrentImage(selectedImages[0]);
-  }, [selectedImages, updateCurrentImage]);
+  useEffect(() => updateCurrentImage(selectedImages[0]), [selectedImages, updateCurrentImage]);
 
   const selectedImageIDs = useMemo(() => {
     return selectedImages.map(image => image.id);