feat(icicle): add folder's count on ruler (#1265)

* feat(icicle): add folder's count on ruler * refactor(icicles) remove unused types Co-authored-by: Med <mehdi@MacBook-Pro-de-Med.local>
SocialGouv · May 3, 2021 · 083b041 · 083b041
1 parent 8b20046
commit 083b041
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/components/main-space/ruler.tsx b/src/components/main-space/ruler.tsx
@@ -4,7 +4,7 @@ import { FilesAndFoldersMetadata } from "reducers/files-and-folders-metadata/fil
 import React, { FC, useEffect, useRef, useState } from "react";
 import { Dims } from "./icicle/icicle-rect";
 import {
-  isFile,
+  isFolder,
   ROOT_FF_ID,
 } from "reducers/files-and-folders/files-and-folders-selectors";
 import translations from "translations/translations";
@@ -41,12 +41,20 @@ const EmptyDims: Dims = {
  * Get the number of child files from a node
  * @param node
  */
-const getFilesAndFoldersCount = (
-  node: FilesAndFolders & FilesAndFoldersMetadata
-) => {
-  return isFile(node)
-    ? null
-    : `${node.nbChildrenFiles} ${translations.t("common.files")}`;
+const getFilesCount = (node: FilesAndFoldersMetadata): string =>
+  `${node.nbChildrenFiles} ${translations.t("common.files")}`;
+
+/**
+ * Get the number of child folders from a node
+ * @param node
+ */
+const getFoldersCount = (
+  node: FilesAndFolders,
+  getFfById: (id: string) => FilesAndFolders & FilesAndFoldersMetadata
+): string => {
+  const { children } = node;
+  const foldersCount = children.map(getFfById).filter(isFolder).length;
+  return `${foldersCount} ${translations.t("common.folders")}`;
 };
 
 /**
@@ -68,7 +76,8 @@ const makePercentageText = (nodeSize: number, totalSize: number) => {
  */
 const makeRulerText = (
   node: FilesAndFolders & FilesAndFoldersMetadata,
-  rootNode: FilesAndFolders & FilesAndFoldersMetadata
+  rootNode: FilesAndFolders & FilesAndFoldersMetadata,
+  getFfById: (id: string) => FilesAndFolders & FilesAndFoldersMetadata
 ) => {
   const { childrenTotalSize } = node;
   const { childrenTotalSize: rootChildrenTotalSize } = rootNode;
@@ -78,9 +87,10 @@ const makeRulerText = (
   );
   const filesAndFolderSize = octet2HumanReadableFormat(childrenTotalSize);
   const rulerInfo = [percentageText, filesAndFolderSize];
-  const filesAndFoldersNumber = getFilesAndFoldersCount(node);
-  if (filesAndFoldersNumber) {
-    rulerInfo.push(filesAndFoldersNumber);
+
+  if (isFolder(node)) {
+    rulerInfo.push(getFoldersCount(node, getFfById));
+    rulerInfo.push(getFilesCount(node));
   }
 
   return rulerInfo.join(" | ");
@@ -112,7 +122,11 @@ const Ruler: FC<RulerProps> = ({
   const elementId = hoveredElementId || lockedElementId;
 
   const rulerText = elementId
-    ? makeRulerText(getFfByFfId(elementId), getFfByFfId(ROOT_FF_ID))
+    ? makeRulerText(
+        getFfByFfId(elementId),
+        getFfByFfId(ROOT_FF_ID),
+        getFfByFfId
+      )
     : "";
 
   const wrapperRef = useRef<HTMLDivElement>(null);

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -27,8 +27,8 @@
       "cannotFindPath": "Cannot find folder path",
       "multipleFoldersDroppedErrorMessage": "Archifiltre cannot read several folders at the same time",
       "multipleFoldersDroppedErrorTitle": "Several folders dropped",
-      "unexpectedError":  "Unexpected error",
-      "unexpectedErrorMessage":  "An unexpected error occurred. Click here to copy the error details."
+      "unexpectedError": "Unexpected error",
+      "unexpectedErrorMessage": "An unexpected error occurred. Click here to copy the error details."
     },
     "report": {
       "comments": "Comments",
@@ -136,6 +136,7 @@
       "yes": "Yes",
       "no": "No",
       "files": "file(s)",
+      "folders": "folder(s)",
       "fileTypes": {
         "presentation": "Presentation",
         "publication": "Publication",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -27,8 +27,8 @@
       "cannotFindPath": "Impossible de trouver le chemin vers ce dossier",
       "multipleFoldersDroppedErrorMessage": "Archifiltre ne peut pas lire plusieurs dossiers à la fois",
       "multipleFoldersDroppedErrorTitle": "Plusieurs dossiers déposés",
-      "unexpectedError":  "Erreur inattendue",
-      "unexpectedErrorMessage":  "Une erreur inattendue s'est produite. Cliquez ici pour copier les détails de l'erreur."
+      "unexpectedError": "Erreur inattendue",
+      "unexpectedErrorMessage": "Une erreur inattendue s'est produite. Cliquez ici pour copier les détails de l'erreur."
     },
     "report": {
       "comments": "Description",
@@ -70,7 +70,7 @@
     "workspace": {
       "ordering": "Classement",
       "coloring": "Coloration",
-      "weight":  "Pondération",
+      "weight": "Pondération",
       "type": "Par type",
       "dates": "Par date",
       "alphanumeric": "Alphanumérique",
@@ -136,6 +136,7 @@
       "yes": "Oui",
       "no": "Non",
       "files": "fichier(s)",
+      "folders": "dossier(s)",
       "fileTypes": {
         "presentation": "Présentation",
         "publication": "Publication",