From 02d03031ef12b5c71a457c01fe089e3bd9c16dd0 Mon Sep 17 00:00:00 2001
From: Ramon Candel <mameo@MBP-de-Ramon.home>
Date: Wed, 22 Nov 2023 09:08:23 +0100
Subject: [PATCH] Fixed % of space occupied

---
 .../views/Preferences/tabs/Account/Usage.tsx     | 16 +++++++++++++---
 src/app/drive/components/PlanUsage/PlanUsage.tsx |  4 ++--
 src/app/shared/components/UsageDetails/index.tsx |  7 +++----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/core/views/Preferences/tabs/Account/Usage.tsx b/src/app/core/views/Preferences/tabs/Account/Usage.tsx
index 159b79607..0b0ed097e 100644
--- a/src/app/core/views/Preferences/tabs/Account/Usage.tsx
+++ b/src/app/core/views/Preferences/tabs/Account/Usage.tsx
@@ -1,7 +1,6 @@
-import { SdkFactory } from 'app/core/factory/sdk';
 import usageService, { UsageDetailsProps } from 'app/drive/services/usage.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useSelector } from 'react-redux';
 import Card from '../../../../../shared/components/Card';
@@ -52,13 +51,24 @@ export default function Usage({ className = '' }: { className?: string }): JSX.E
 
   const userSubscription = plan.subscription;
 
+  const sumUsageDetails = (usageDetails: UsageDetailsProps): number => {
+    return Object.values(usageDetails).reduce((acc, value) => acc + value, 0);
+  };
+
+  const totalPlanUsage = useMemo(() => (planUsage ? sumUsageDetails(planUsage) : 0), [planUsage, sumUsageDetails]);
+
   return (
     <Section className={className} title={translate('drive.usage')}>
       <Card>
         {products && plan.planLimit && userSubscription ? (
           <>
             <CurrentPlanWrapper bytesInPlan={plan.planLimit} userSubscription={userSubscription} />
-            <UsageDetails className="mt-5" planLimitInBytes={plan.planLimit} products={products} />
+            <UsageDetails
+              className="mt-5"
+              planLimitInBytes={plan.planLimit}
+              products={products}
+              planUsage={totalPlanUsage}
+            />
           </>
         ) : (
           <div className="flex items-center justify-center" style={{ height: '122px' }}>
diff --git a/src/app/drive/components/PlanUsage/PlanUsage.tsx b/src/app/drive/components/PlanUsage/PlanUsage.tsx
index 1f727ce7a..adeddb760 100644
--- a/src/app/drive/components/PlanUsage/PlanUsage.tsx
+++ b/src/app/drive/components/PlanUsage/PlanUsage.tsx
@@ -13,12 +13,12 @@ export default function PlanUsage({
   usage,
   isLoading,
   className = '',
-}: {
+}: Readonly<{
   limit: number;
   usage: number;
   isLoading: boolean;
   className?: string;
-}): JSX.Element {
+}>): JSX.Element {
   const { translate } = useTranslationContext();
   const usagePercent = usageService.getUsagePercent(usage, limit);
   const plan = useSelector<RootState, PlanState>((state) => state.plan);
diff --git a/src/app/shared/components/UsageDetails/index.tsx b/src/app/shared/components/UsageDetails/index.tsx
index 010de6efc..2eb5e1318 100644
--- a/src/app/shared/components/UsageDetails/index.tsx
+++ b/src/app/shared/components/UsageDetails/index.tsx
@@ -2,13 +2,12 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { useEffect, useRef, useState } from 'react';
 import { bytesToString } from '../../../drive/services/size.service';
 import Tooltip from '../Tooltip';
-import { RootState } from 'app/store';
-import { useAppSelector } from 'app/store/hooks';
 
 export default function UsageDetails({
   className = '',
   planLimitInBytes,
   products,
+  planUsage,
 }: {
   className?: string;
   planLimitInBytes: number;
@@ -17,6 +16,7 @@ export default function UsageDetails({
     usageInBytes: number;
     color: 'red' | 'orange' | 'yellow' | 'green' | 'pink' | 'indigo' | 'teal' | 'mint' | 'primary' | 'gray';
   }[];
+  planUsage: number;
 }): JSX.Element {
   const { translate } = useTranslationContext();
   const [barWidth, setBarWidth] = useState(0);
@@ -37,7 +37,7 @@ export default function UsageDetails({
     }
   }, []);
 
-  const colorMapping: { [key in typeof products[number]['color']]: string } = {
+  const colorMapping: { [key in (typeof products)[number]['color']]: string } = {
     red: 'bg-red-std',
     orange: 'bg-orange',
     yellow: 'bg-yellow',
@@ -50,7 +50,6 @@ export default function UsageDetails({
     gray: 'bg-gray-40',
   };
 
-  const planUsage = useAppSelector((state: RootState) => state.plan.planUsage);
   const maxBytesLimit = Math.max(planUsage, planLimitInBytes);
   const percentageUsed = Math.round((planUsage / planLimitInBytes) * 100);