From c102d6c2746bb1b59850e824322cc42b145b53aa Mon Sep 17 00:00:00 2001
From: mehdilouraoui <37937348+mehdilouraoui@users.noreply.github.com>
Date: Thu, 24 Feb 2022 17:15:26 +0100
Subject: [PATCH] feat(recap): add total folder count on recap (#124)

---
 .../components/common/pictos/picto.tsx        | 72 +++++++++++++++++++
 src/renderer/utils/dashboard-recap.ts         | 21 ++++++
 src/renderer/utils/pst-extractor.ts           | 14 ++--
 .../views/dashboard/DashboardRecap.tsx        | 54 ++++++++++++--
 .../views/dashboard/DashboardRecapItem.tsx    |  8 ++-
 static/locales/en-GB/translation.json         | 23 ++++--
 static/locales/fr-FR/translation.json         | 27 ++++---
 7 files changed, 191 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/common/pictos/picto.tsx b/src/renderer/components/common/pictos/picto.tsx
index 8a8ff63c..6adfe2c2 100644
--- a/src/renderer/components/common/pictos/picto.tsx
+++ b/src/renderer/components/common/pictos/picto.tsx
@@ -414,6 +414,78 @@ export const TrashPicto: React.FC = () => (
     </svg>
 );
 
+export const FolderPicto: React.FC = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="50"
+        height="50"
+        viewBox="0 0 50 50"
+        fill="none"
+    >
+        <g clipPath="url(#clip0_160_947)">
+            <path
+                d="M48.9584 32.2917L47.2105 23.5417C47.1144 23.0707 46.8584 22.6476 46.4859 22.3438C46.1134 22.04 45.6474 21.8744 45.1667 21.875H4.83341C4.35279 21.8744 3.88674 22.04 3.51426 22.3438C3.14178 22.6476 2.88579 23.0707 2.78966 23.5417L1.04175 32.2917V40.625H48.9584V32.2917Z"
+                fill="#C9C9FC"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M42.7084 37.5V11.4583H23.0376C22.3651 11.4807 21.7006 11.3076 21.1245 10.96C20.5484 10.6125 20.0855 10.1053 19.7917 9.49999C19.5144 8.84526 19.0503 8.2867 18.4576 7.89398C17.8648 7.50127 17.1695 7.29178 16.4584 7.29166H8.33341C8.05715 7.29166 7.7922 7.4014 7.59685 7.59675C7.40149 7.7921 7.29175 8.05706 7.29175 8.33332V37.5"
+                fill="#C9C9FC"
+            />
+            <path
+                d="M23.0376 11.4583C22.3651 11.4807 21.7006 11.3076 21.1245 10.96C20.5484 10.6125 20.0855 10.1053 19.7917 9.49999C19.5144 8.84526 19.0503 8.2867 18.4576 7.89398C17.8648 7.50127 17.1695 7.29178 16.4584 7.29166H8.33341C8.05715 7.29166 7.7922 7.4014 7.59685 7.59675C7.40149 7.7921 7.29175 8.05706 7.29175 8.33332V37.5H9.75008L35.7917 11.4583H23.0376Z"
+                fill="#E5E5F4"
+            />
+            <path
+                d="M42.7084 28.125V11.4583H23.0376C22.3651 11.4807 21.7006 11.3076 21.1245 10.96C20.5484 10.6125 20.0855 10.1053 19.7917 9.49999C19.5144 8.84526 19.0503 8.2867 18.4576 7.89398C17.8648 7.50127 17.1695 7.29178 16.4584 7.29166H8.33341C8.05715 7.29166 7.7922 7.4014 7.59685 7.59675C7.40149 7.7921 7.29175 8.05706 7.29175 8.33332V28.125"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M38.5418 7.29167H25.0918C24.4038 7.2916 23.7301 7.09564 23.1494 6.7267C22.5687 6.35777 22.105 5.83111 21.8127 5.20833C21.5205 4.58715 21.058 4.06162 20.479 3.69284C19.9001 3.32405 19.2283 3.12715 18.5418 3.125H11.4585"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M25.0001 22.9167C27.0136 22.9167 28.6459 21.2844 28.6459 19.2708C28.6459 17.2573 27.0136 15.625 25.0001 15.625C22.9865 15.625 21.3542 17.2573 21.3542 19.2708C21.3542 21.2844 22.9865 22.9167 25.0001 22.9167Z"
+                fill="#E5E5F4"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M32.2918 30.2083C31.8787 28.5881 30.9376 27.1515 29.6172 26.1256C28.2968 25.0996 26.6723 24.5427 25.0002 24.5427C23.328 24.5427 21.7035 25.0996 20.3831 26.1256C19.0627 27.1515 18.1217 28.5881 17.7085 30.2083H32.2918Z"
+                fill="#C9C9FC"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M38.5417 32.2917C38.1243 32.2915 37.711 32.375 37.3263 32.5372C36.9416 32.6995 36.5933 32.9371 36.302 33.2362C36.0107 33.5353 35.7823 33.8897 35.6303 34.2785C35.4782 34.6673 35.4056 35.0827 35.4167 35.5C35.3885 36.3337 35.0306 37.1222 34.4217 37.6924C33.8128 38.2627 33.0026 38.5681 32.1688 38.5417H17.8292C16.9958 38.5675 16.1861 38.2618 15.5777 37.6917C14.9692 37.1215 14.6117 36.3334 14.5834 35.5C14.5945 35.0827 14.5219 34.6673 14.3699 34.2785C14.2178 33.8897 13.9894 33.5353 13.6981 33.2362C13.4068 32.9371 13.0585 32.6995 12.6739 32.5372C12.2892 32.375 11.8759 32.2915 11.4584 32.2917H1.04175V44.7917C1.04175 45.3442 1.26124 45.8741 1.65194 46.2648C2.04264 46.6555 2.57255 46.875 3.12508 46.875H46.8751C47.4276 46.875 47.9575 46.6555 48.3482 46.2648C48.7389 45.8741 48.9584 45.3442 48.9584 44.7917V32.2917H38.5417Z"
+                fill="#C9C9FC"
+                stroke="#00303E"
+                strokeWidth="2.66667"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_160_947">
+                <rect width="50" height="50" fill="white" />
+            </clipPath>
+        </defs>{" "}
+    </svg>
+);
+
 export const ExtremeDatePicto: React.FC = () => (
     <svg
         width="50"
diff --git a/src/renderer/utils/dashboard-recap.ts b/src/renderer/utils/dashboard-recap.ts
index b3fe3317..e5637df8 100644
--- a/src/renderer/utils/dashboard-recap.ts
+++ b/src/renderer/utils/dashboard-recap.ts
@@ -2,7 +2,9 @@ import type {
     PstContent,
     PstEmail,
     PstExtractTables,
+    PstFolder,
 } from "@common/modules/pst-extractor/type";
+import { isPstFolder } from "@common/modules/pst-extractor/type";
 
 export const getPstTotalReceivedMails = (
     extractTables: PstExtractTables | undefined
@@ -94,3 +96,22 @@ export const getPstMailsPercentage = (
     }
     return "0";
 };
+
+interface FolderListItem {
+    name: string;
+    type: string;
+    id: string;
+}
+
+export const getPstListOfFolder = (pst: PstFolder[]): FolderListItem[] => {
+    const folderList: FolderListItem[] = [];
+    pst.forEach((folder) => {
+        const { id, name, type, children } = folder;
+        if (isPstFolder(folder)) {
+            folderList.push({ id, name, type });
+        }
+        const childFolders = children?.filter(isPstFolder);
+        if (childFolders) folderList.push(...getPstListOfFolder(childFolders));
+    });
+    return folderList;
+};
diff --git a/src/renderer/utils/pst-extractor.ts b/src/renderer/utils/pst-extractor.ts
index 5dbb99b0..afa38cc3 100644
--- a/src/renderer/utils/pst-extractor.ts
+++ b/src/renderer/utils/pst-extractor.ts
@@ -14,16 +14,16 @@ export const getExtremumDate = (
     dates: PstEmail[],
     compare: "max" | "min",
     messageType: "receivedDate" | "sentTime"
-): string =>
+): Date =>
     new Date(
         Math[compare](
             ...dates.map((date) => new Date(date[messageType]!).getTime())
         )
-    ).toDateString();
+    );
 
 interface ExtremeMailDates {
-    max: string;
-    min: string;
+    maxDate: Date;
+    minDate: Date;
 }
 export const getExtremeMailsDates = (
     extractTables: PstExtractTables
@@ -36,8 +36,8 @@ export const getExtremeMailsDates = (
     const extremumMaxR = getExtremumDate(dates, "max", "receivedDate");
     const extremumMinR = getExtremumDate(dates, "min", "receivedDate");
 
-    const max = extremumMaxR > extremumMaxS ? extremumMaxR : extremumMaxS;
-    const min = extremumMinR < extremumMinS ? extremumMinR : extremumMinS;
+    const maxDate = extremumMaxR > extremumMaxS ? extremumMaxR : extremumMaxS;
+    const minDate = extremumMinR < extremumMinS ? extremumMinR : extremumMinS;
 
-    return { max, min };
+    return { maxDate, minDate };
 };
diff --git a/src/renderer/views/dashboard/DashboardRecap.tsx b/src/renderer/views/dashboard/DashboardRecap.tsx
index 05f22f19..3661c1fd 100644
--- a/src/renderer/views/dashboard/DashboardRecap.tsx
+++ b/src/renderer/views/dashboard/DashboardRecap.tsx
@@ -6,12 +6,14 @@ import { Card } from "../../components/common/card/Card";
 import {
     ContactPicto,
     ExtremeDatePicto,
+    FolderPicto,
     MailPicto,
     MailSentPicto,
     TrashPicto,
 } from "../../components/common/pictos/picto";
 import { usePstStore } from "../../store/PSTStore";
 import {
+    getPstListOfFolder,
     getPstMailsPercentage,
     getPstTotalContacts,
     getPstTotalDeletedMails,
@@ -33,6 +35,7 @@ export const DashboardRecap: FC = () => {
     const switchView = useCallback(() => {
         setIsRecapReady(true);
     }, []);
+
     const { pstFile, deletedFolder, extractTables } = usePstStore();
 
     // mails received
@@ -59,8 +62,17 @@ export const DashboardRecap: FC = () => {
     // contact
     const contactTotal = getPstTotalContacts(extractTables?.contacts);
 
+    if (!pstFile) return null;
+
+    // folders
+    const totalFolderSize = getPstListOfFolder(pstFile.children).length;
+
     // dates extrêmes
-    const { min, max } = getExtremeMailsDates(extractTables!);
+    const { minDate, maxDate } = getExtremeMailsDates(extractTables!);
+    // TODO: move to default config (?)
+    const extremeDateFormatParam: Intl.DateTimeFormatOptions = {
+        dateStyle: "full",
+    };
     return (
         <Card title={t("dashboard.recap.cardTitle")} color="blue">
             {isRecapReady ? (
@@ -87,7 +99,7 @@ export const DashboardRecap: FC = () => {
                         picto={<TrashPicto />}
                     />
                     <DashboardRecapItem
-                        title={t("dashboard.recap.contacts")}
+                        title={t("dashboard.recap.contactsTitle")}
                         contact={contactTotal}
                         picto={<ContactPicto />}
                     />
@@ -109,14 +121,48 @@ export const DashboardRecap: FC = () => {
                                     style.dashboard__recap__informations__item
                                 }
                             >
-                                {t("dashboard.recap.extremum.min", { min })}
+                                {t("dashboard.recap.extremum.minDate", {
+                                    formatParams: {
+                                        minDate: extremeDateFormatParam,
+                                    },
+                                    minDate,
+                                })}
+                            </span>
+                            <span
+                                className={
+                                    style.dashboard__recap__informations__item
+                                }
+                            >
+                                {t("dashboard.recap.extremum.maxDate", {
+                                    formatParams: {
+                                        maxDate: extremeDateFormatParam,
+                                    },
+                                    maxDate,
+                                })}
+                            </span>
+                        </div>
+                    </div>
+                    <div className={style.dashboard__recap__item}>
+                        <div className={style.dashboard__recap__picto}>
+                            <FolderPicto />
+                        </div>
+
+                        <div className={style.dashboard__recap__informations}>
+                            <span
+                                className={
+                                    style.dashboard__recap__informations__item
+                                }
+                            >
+                                {t("dashboard.recap.folderLabel")}
                             </span>
                             <span
                                 className={
                                     style.dashboard__recap__informations__item
                                 }
                             >
-                                {t("dashboard.recap.extremum.max", { max })}
+                                {t("dashboard.recap.folder", {
+                                    count: totalFolderSize,
+                                })}
                             </span>
                         </div>
                     </div>
diff --git a/src/renderer/views/dashboard/DashboardRecapItem.tsx b/src/renderer/views/dashboard/DashboardRecapItem.tsx
index 1692bab7..de68165a 100644
--- a/src/renderer/views/dashboard/DashboardRecapItem.tsx
+++ b/src/renderer/views/dashboard/DashboardRecapItem.tsx
@@ -36,7 +36,7 @@ export const DashboardRecapItem: FC<DashboardRecapItemProps> = ({
                     <span
                         className={style.dashboard__recap__informations__item}
                     >
-                        {contact} {t("dashboard.recap.contacts")}
+                        {t("dashboard.recap.contact", { count: contact })}
                     </span>
                 </div>
             ) : (
@@ -54,12 +54,14 @@ export const DashboardRecapItem: FC<DashboardRecapItemProps> = ({
                     <span
                         className={style.dashboard__recap__informations__item}
                     >
-                        {mails ?? 0} {t("dashboard.recap.mails")}
+                        {t("dashboard.recap.mail", { count: mails ?? 0 })}
                     </span>
                     <span
                         className={style.dashboard__recap__informations__item}
                     >
-                        {attachements} {t("dashboard.recap.pc")}
+                        {t("dashboard.recap.attachement", {
+                            count: attachements,
+                        })}
                     </span>
                 </div>
             )}
diff --git a/static/locales/en-GB/translation.json b/static/locales/en-GB/translation.json
index 59d5855e..26aeff7e 100644
--- a/static/locales/en-GB/translation.json
+++ b/static/locales/en-GB/translation.json
@@ -32,13 +32,24 @@
   "dashboard.informations.to": "Recipient(s)",
   "dashboard.informations.type": "Type",
   "dashboard.recap.cardTitle": "Summary",
-  "dashboard.recap.contacts": "Contacts",
-  "dashboard.recap.deletedMessages": "Deleted messages",
-  "dashboard.recap.extremum.max": "Max: {{ max, number }}",
-  "dashboard.recap.extremum.min": "Min: {{ min, number }}",
+  "dashboard.recap.contactsTitle": "Contacts",
+  "dashboard.recap.contact_zero": "No contact",
+  "dashboard.recap.contact_one": "{{ count }} contact",
+  "dashboard.recap.contact_other": "{{ count }} contacts",
+  "dashboard.recap.deletedMessages": "Deleted message(s)",
+  "dashboard.recap.folderLabel": "File(s)",
+  "dashboard.recap.folder_zero": "No file",
+  "dashboard.recap.folder_one": "{{ count }} file",
+  "dashboard.recap.folder_other": "{{ count }} files",
+  "dashboard.recap.extremum.maxDate": "Max: {{ maxDate, datetime }}",
+  "dashboard.recap.extremum.minDate": "Min: {{ minDate, datetime }}",
   "dashboard.recap.extremum": "Extreme dates",
-  "dashboard.recap.mails": "Emails",
-  "dashboard.recap.pc": "pc",
+  "dashboard.recap.mail_zero": "No mail",
+  "dashboard.recap.mail_one": "{{ count }} mail",
+  "dashboard.recap.mail_other": "{{ count }} mails",
+  "dashboard.recap.attachement_zero": "No attachement",
+  "dashboard.recap.attachement_one": "{{ count }} attachement",
+  "dashboard.recap.attachement_other": "{{ count }} attachements",
   "dashboard.recap.receivedMessages": "Messages received",
   "dashboard.recap.selectFolder.choosePlaceholder": "Choose your deleted messages folder",
   "dashboard.recap.selectFolder.selector": "To view your PST summary, select your deleted emails folder",
diff --git a/static/locales/fr-FR/translation.json b/static/locales/fr-FR/translation.json
index 188cbbb9..c196fff6 100644
--- a/static/locales/fr-FR/translation.json
+++ b/static/locales/fr-FR/translation.json
@@ -32,18 +32,29 @@
   "dashboard.informations.to": "Destinataire(s)",
   "dashboard.informations.type": "Type",
   "dashboard.recap.cardTitle": "Synthèse",
-  "dashboard.recap.contacts": "Contacts",
-  "dashboard.recap.deletedMessages": "Messages supprimés",
-  "dashboard.recap.extremum.max": "Max :  {{ max, number }}",
-  "dashboard.recap.extremum.min": "Min :  {{ min, number }}",
+  "dashboard.recap.contactsTitle": "Contact(s)",
+  "dashboard.recap.contact_zero": "Aucun contact",
+  "dashboard.recap.contact_one": "{{ count }} contact",
+  "dashboard.recap.contact_other": "{{ count }} contacts",
+  "dashboard.recap.deletedMessages": "Message(s) supprimé(s)",
+  "dashboard.recap.folderLabel": "Dossier(s)",
+  "dashboard.recap.folder_zero": "Aucun dossier",
+  "dashboard.recap.folder_one": "{{ count }} dossier",
+  "dashboard.recap.folder_other": "{{ count }} dossiers",
+  "dashboard.recap.extremum.maxDate": "Max : {{ maxDate, datetime }}",
+  "dashboard.recap.extremum.minDate": "Min : {{ minDate, datetime }}",
   "dashboard.recap.extremum": "Dates extrêmes",
-  "dashboard.recap.mails": "Mails",
-  "dashboard.recap.pc": "pj",
-  "dashboard.recap.receivedMessages": "Messages reçus",
+  "dashboard.recap.mail_zero": "Aucun email",
+  "dashboard.recap.mail_one": "{{ count }} email",
+  "dashboard.recap.mail_other": "{{ count }} emails",
+  "dashboard.recap.attachement_zero": "Aucune pièce jointe",
+  "dashboard.recap.attachement_one": "{{ count }} pièce jointe",
+  "dashboard.recap.attachement_other": "{{ count }} pièces jointes",
+  "dashboard.recap.receivedMessages": "Message(s) reçu(s)",
   "dashboard.recap.selectFolder.choosePlaceholder": "Choisissez votre dossier de messages supprimés",
   "dashboard.recap.selectFolder.selector": "Pour afficher la synthèse de votre PST, sélectionnez votre dossier de mails supprimés",
   "dashboard.recap.selectFolder.validate": "Valider mon choix",
-  "dashboard.recap.sentMessages": "Messages envoyés",
+  "dashboard.recap.sentMessages": "Message(s) envoyé(s)",
   "dashboard.viewer.breadcrumb.domain": "Domaine",
   "dashboard.viewer.breadcrumb.id.correspondant": "{{history.domain}} > Correspondant",
   "dashboard.viewer.breadcrumb.id.domain": "Domaine",