Add quota for shared drive and trash

linagora · Feb 21, 2024 · e8a4024 · e8a4024
1 parent 5502963
commit e8a4024
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/tdrive/frontend/src/app/features/users/hooks/use-user-quota.ts b/tdrive/frontend/src/app/features/users/hooks/use-user-quota.ts
@@ -1,7 +1,17 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { UserQuota } from '@features/users/types/user-quota';
 import UserAPIClient from '@features/users/api/user-api-client';
 import { useCurrentUser } from "features/users/hooks/use-current-user";
+import { atom, useRecoilState } from "recoil";
+
+export const QuotaState = atom<UserQuota>({
+  key: 'QuotaState',
+  default: {
+    used: 0,
+    remaining: 1,
+    total: 1
+  },
+});
 
 export const useUserQuota = () => {
   const nullQuota = {
@@ -10,8 +20,7 @@ export const useUserQuota = () => {
     total: 1
   }
   const {user } = useCurrentUser();
-  const [quota, setQuota] = useState<UserQuota>(nullQuota);
-  const [used, setUsed] = useState<number>(0);
+  const [quota, setQuota] = useRecoilState(QuotaState);
 
   const getQuota = useCallback(async () => {
     let data: UserQuota = nullQuota;
@@ -21,13 +30,12 @@ export const useUserQuota = () => {
       data = nullQuota;
     }
     setQuota(data)
-    setUsed(Math.random());
   },  []);
 
   useEffect(() => {
     getQuota();
   }, []);
 
 
-  return { quota, used, getQuota };
+  return { quota, getQuota };
 };
diff --git a/tdrive/frontend/src/app/views/client/common/disk-usage.tsx b/tdrive/frontend/src/app/views/client/common/disk-usage.tsx
@@ -1,34 +1,38 @@
-import { Base, Title } from "@atoms/text";
+import { Base } from "@atoms/text";
 import { formatBytesToInt } from "@features/drive/utils";
 import Languages from "features/global/services/languages-service";
 import { useUserQuota } from "@features/users/hooks/use-user-quota";
 import RouterServices from "features/router/services/router-service";
 import { useEffect, useState } from "react";
 import FeatureTogglesService, { FeatureNames } from "@features/global/services/feature-toggles-service";
+import { useDriveItem } from "features/drive/hooks/use-drive-item";
 
 
-export default () => {
+const DiskUsage = () => {
   const { viewId } = RouterServices.getStateFromRoute();
   console.log("VIEW-iD::" + viewId);
 
-  const { quota, used } = useUserQuota()
-  // const [used, setUsed] = useState(
-  //   Math.round(quota.used / quota.total * 100)
-  // )
-  //
-  // useEffect(() => {
-  //   console.log("SETUSED::")
-  //   setUsed(Math.round(quota.used / quota.total * 100))
-  // }, [quota]);
-  //
-  // useEffect(() => {
-  //   console.log("USED::" + used);
-  // }, [used]);
+  const [used, setUsed] = useState(0);
+  const [usedBytes, setUsedBytes] = useState(0);
+  const [totalBytes, setTotalBytes] = useState(0);
+
+  if (FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA)) {
+    const { quota } = useUserQuota()
+    useEffect(() => {
+      setUsed(Math.round(quota.used / quota.total * 100))
+      setUsedBytes(quota.used);
+      setTotalBytes(quota.total);
+    }, [quota]);
+  } else if (viewId) {
+    const { item } = useDriveItem(viewId);
+    useEffect(() => {
+      setUsedBytes(item?.size || 0);
+    }, [viewId, item])
+  }
 
   return (
     <>
-      <Title>{used}</Title>
-      {!FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
+      {FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
         <div className="bg-zinc-500 dark:bg-zinc-800 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
           <div className="w-full">
             <div className="overflow-hidden h-4 mb-4 text-xs flex rounded bg-emerald-200">
@@ -46,25 +50,27 @@ export default () => {
             </div>
             {/*<div className="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style={usedStyle}></div>*/}
             <Base>
-              {formatBytesToInt(quota?.used || 0)}
+              {formatBytesToInt(usedBytes)}
               <Base>  { Languages.t('components.disk_usage.of')} </Base>
-              {formatBytesToInt(quota?.total || 0)}
+              {formatBytesToInt(totalBytes || 0)}
               <Base> { Languages.t('components.disk_usage.used')} </Base>
               {/*<Base>{formatBytes(trash?.size || 0)} {Languages.t('components.disk_usage.in_trash')}</Base>*/}
             </Base>
           </div>
         </div>
       )}
-      {FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
+      {!FeatureTogglesService.isActiveFeatureName(FeatureNames.COMPANY_USER_QUOTA) && (
         <div className="bg-zinc-500 dark:bg-zinc-800 bg-opacity-10 rounded-md p-4 w-auto max-w-md">
           <div className="w-full">
             <Base>
-              {formatBytesToInt(quota?.used || 0)}
+              {formatBytesToInt(usedBytes)}
               <Base>  { Languages.t('components.disk_usage.used')} </Base>
             </Base>
           </div>
         </div>
       )}
     </>
   );
-};
+};
+
+export default DiskUsage;