feat: update code

haiwen · Aug 7, 2024 · 8a18758 · 8a18758
1 parent 9bda559
commit 8a18758
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
@@ -1,19 +1,16 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getDirentPath, getFileParent } from './utils';
+import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/metadata-view/_basic';
 import { gettext } from '../../../utils/constants';
 import { MetadataDetails } from '../../../metadata';
 
 const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail, ...params }) => {
-  const parent = useMemo(() => getFileParent(dirent, path), [dirent, path]);
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
 
   return (
     <>
-      <DetailItem field={{ type: CellType.TEXT, name: gettext('Parent folder') }} value={parent} />
-      <DetailItem field={{ type: 'size', name: gettext('Size') }} value={repoInfo.size} />
       <DetailItem field={{ type: CellType.CREATOR, name: gettext('Creator') }} value={repoInfo.owner_email} collaborators={[{
         name: repoInfo.owner_name,
         contact_email: repoInfo.owner_contact_email,

diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details.js b/frontend/src/components/dirent-detail/dirent-details/file-details.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidV4 } from 'uuid';
-import { getDirentPath, getFileParent } from './utils';
+import { getDirentPath } from './utils';
 import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/metadata-view/_basic';
 import { gettext } from '../../../utils/constants';
@@ -14,7 +14,6 @@ import ObjectUtils from '../../../metadata/metadata-view/utils/object-utils';
 const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList, ...params }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);
 
-  const parent = useMemo(() => getFileParent(dirent, path), [dirent, path]);
   const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
   const tagListTitleID = useMemo(() => `detail-list-view-tags-${uuidV4()}`, []);
 
@@ -28,7 +27,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
 
   return (
     <>
-      <DetailItem field={{ type: CellType.TEXT, name: gettext('Parent folder') }} value={parent} />
       <DetailItem field={{ type: 'size', name: gettext('Size') }} value={Utils.bytesToSize(direntDetail.size)} />
       <DetailItem field={{ type: CellType.LAST_MODIFIER, name: gettext('Last modifier') }} value={direntDetail.last_modifier_email} collaborators={[{
         name: direntDetail.last_modifier_name,

diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js
@@ -91,30 +91,34 @@ class DirentDetails extends React.Component {
     }
   }
 
-  render() {
-    const { dirent, direntDetail, collaborators, collaboratorsCache } = this.state;
+  renderImage = () => {
+    const { dirent } = this.state;
     if (!dirent) return null;
-    const { repoID, path, fileTags } = this.props;
-    const direntName = dirent.name;
-    const smallIconUrl = Utils.getDirentIcon(dirent);
     // let bigIconUrl = Utils.getDirentIcon(dirent, true);
-    let bigIconUrl = '';
     const isImg = Utils.imageCheck(dirent.name);
     // const isVideo = Utils.videoCheck(dirent.name);
-    if (isImg) {
-      bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
-    }
+    if (!isImg) return null;
+    const { repoID, path } = this.props;
+    const bigIconUrl = `${siteRoot}thumbnail/${repoID}/1024` + Utils.encodePath(`${path === '/' ? '' : path}/${dirent.name}`);
+    return (
+      <div className="detail-image-thumbnail">
+        <img src={bigIconUrl} alt="" className="thumbnail" />
+      </div>
+    );
+  };
+
+  render() {
+    const { dirent, direntDetail, collaborators, collaboratorsCache } = this.state;
+    const { repoID, path, fileTags } = this.props;
+    const direntName = dirent?.name || '';
+    const smallIconUrl = dirent ? Utils.getDirentIcon(dirent) : '';
 
     return (
       <Detail>
         <Header title={direntName} icon={smallIconUrl} onClose={this.props.onClose} />
         <Body>
-          {isImg && (
-            <div className="detail-image-thumbnail">
-              <img src={bigIconUrl} alt="" className="thumbnail" />
-            </div>
-          )}
-          {direntDetail && (
+          {this.renderImage()}
+          {dirent && direntDetail && (
             <div className="detail-content">
               {dirent.type !== 'file' ? (
                 <DirDetails

diff --git a/frontend/src/components/dirent-detail/dirent-details/utils.js b/frontend/src/components/dirent-detail/dirent-details/utils.js
@@ -2,14 +2,16 @@ import { Utils } from '../../../utils/utils';
 
 export const getDirentPath = (dirent, path) => {
   if (Utils.isMarkdownFile(path)) return path; // column mode: view file
-  if (dirent.type === 'dir') return path;
   return Utils.joinPath(path, dirent.name);
 };
 
 export const getFileParent = (dirent, path) => {
   const direntPath = getDirentPath(dirent, path);
-  if (direntPath === '/') return '/';
-  const index = direntPath.lastIndexOf('/');
-  const positionPath = direntPath.slice(0, index);
-  return positionPath || '/';
+  let position = '';
+  if (direntPath !== '/') {
+    const index = direntPath.lastIndexOf('/');
+    const positionPath = direntPath.slice(0, index);
+    position = position + positionPath;
+  }
+  return position;
 };