Merge pull request #1027 from internxt/release/PB-701-display-folder-…

…size-on-shared-landing-page

[PB-701] release/display folder size on shared landing page

package.json

@@ -7,7 +7,7 @@
     "@iconscout/react-unicons": "^1.1.6",
     "@internxt/inxt-js": "=1.2.21",
     "@internxt/lib": "^1.2.0",
-    "@internxt/sdk": "^1.4.65",
+    "@internxt/sdk": "^1.4.67",
     "@phosphor-icons/react": "^2.0.10",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",

src/app/share/services/share.service.ts

@@ -20,6 +20,7 @@ import {
   CreateSharingPayload,
   SharingMeta,
   PublicSharedItemInfo,
+  SharedFolderSize,
 } from '@internxt/sdk/dist/drive/share/types';
 import { domainManager } from './DomainManager';
 import _ from 'lodash';
@@ -231,14 +232,6 @@ export function getSharedFolderInfo(token: string, password?: string): Promise<S
   });
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function getSharedFolderSize(shareId: string, folderId: string): Promise<any> {
-  const shareClient = SdkFactory.getNewApiInstance().createShareClient();
-  return shareClient.getShareLinkFolderSize({ itemId: shareId, folderId }).catch((error) => {
-    throw errorService.castError(error);
-  });
-}
-
 export function getShareDomains(): Promise<ShareDomainsResponse> {
   const shareClient = SdkFactory.getNewApiInstance().createShareClient();
   return shareClient.getShareDomains().catch((error) => {
@@ -866,6 +859,13 @@ export function removeSharingPassword(sharingId: string): Promise<void> {
   });
 }
 
+export async function getSharedFolderSize(id: string): Promise<SharedFolderSize> {
+  const shareClient = SdkFactory.getNewApiInstance().createShareClient();
+  return shareClient.getSharedFolderSize(id).catch((error) => {
+    throw errorService.castError(error);
+  });
+}
+
 const shareService = {
   createShare,
   createShareLink,
@@ -906,6 +906,7 @@ const shareService = {
   decryptPublicSharingCodeWithOwner,
   validateSharingInvitation,
   getPublicSharedItemInfo,
+  getSharedFolderSize,
 };
 
 export default shareService;

src/app/share/views/ShareView/ShareFolderView.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useState } from 'react';
 import { WritableStream } from 'streamsaver';
 import { match } from 'react-router';
-import {
-  downloadPublicSharedFolder,
-  getPublicSharingMeta,
-  getSharedFolderSize,
-} from 'app/share/services/share.service';
+import shareService, { downloadPublicSharedFolder, getPublicSharingMeta } from 'app/share/services/share.service';
 import iconService from 'app/drive/services/icon.service';
 import sizeService from 'app/drive/services/size.service';
 import { TaskProgress } from 'app/tasks/types';
@@ -18,7 +14,6 @@ import './ShareView.scss';
 import { ShareTypes } from '@internxt/sdk/dist/drive';
 import Spinner from '../../../shared/components/Spinner/Spinner';
 import { PublicSharedItemInfo, SharingMeta } from '@internxt/sdk/dist/drive/share/types';
-import shareService from 'app/share/services/share.service';
 import { loadWritableStreamPonyfill } from 'app/network/download';
 import ShareItemPwdView from './ShareItemPwdView';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
@@ -60,6 +55,8 @@ export default function ShareFolderView(props: ShareViewProps): JSX.Element {
   const [requiresPassword, setRequiresPassword] = useState(false);
   const [itemPassword, setItemPassword] = useState('');
   const [sendBannerVisible, setIsSendBannerVisible] = useState(false);
+  const [folderSize, setFolderSize] = useState<string | null>(null);
+  const [isGetFolderSizeError, setIsGetFolderSizeError] = useState<boolean>(false);
 
   const canUseReadableStreamMethod =
     'WritableStream' in window &&
@@ -110,8 +107,7 @@ export default function ShareFolderView(props: ShareViewProps): JSX.Element {
         setInfo({ ...res });
         setIsLoaded(true);
         setRequiresPassword(false);
-        // TODO: Commented until apply some fixes to the endpoint
-        // return loadSize((sharedFolderInfo as unknown as { id: number }).id, sharedFolderInfo.item.id);
+        getFolderSize(res.id);
         return Promise.resolve(0);
       })
       .then((folderSize) => {
@@ -136,10 +132,6 @@ export default function ShareFolderView(props: ShareViewProps): JSX.Element {
     }
   };
 
-  const loadSize = (shareId: number, folderId: number): Promise<number> => {
-    return getSharedFolderSize(shareId.toString(), folderId.toString());
-  };
-
   const updateProgress = (progress: number) => {
     setProgress(Number((progress * 100).toFixed(2)));
   };
@@ -182,6 +174,19 @@ export default function ShareFolderView(props: ShareViewProps): JSX.Element {
     return confirmationMessage; // WebKit, Chrome <34
   };
 
+  const getFolderSize = async (folderId: string) => {
+    try {
+      setIsGetFolderSizeError(false);
+      const folderData = await shareService.getSharedFolderSize(folderId);
+
+      const folderSizeToString = sizeService.bytesToString(folderData.size);
+      setFolderSize(folderSizeToString);
+    } catch (error) {
+      setIsGetFolderSizeError(true);
+      errorService.reportError(error);
+    }
+  };
+
   useEffect(() => {
     if (isDownloading && progress < 100) {
       window.addEventListener('beforeunload', handleLeavePage);
@@ -268,7 +273,12 @@ export default function ShareFolderView(props: ShareViewProps): JSX.Element {
               <abbr className="w-screen max-w-prose break-words px-10 text-xl sm:w-full" title={info?.item?.plainName}>
                 {info?.item?.plainName}
               </abbr>
-              <span className="text-gray-60">{sizeService.bytesToString(info?.item?.size || 0)}</span>
+              {!isGetFolderSizeError &&
+                (folderSize === null ? (
+                  <Spinner size={24} />
+                ) : (
+                  <span className="text-gray-60"> {folderSize || '0MB'}</span>
+                ))}
             </div>
           </div>
         </div>

yarn.lock

@@ -1612,10 +1612,10 @@
   resolved "https://npm.pkg.github.com/download/@internxt/prettier-config/1.0.2/5bd220b8de76734448db5475b3e0c01f9d22c19b#5bd220b8de76734448db5475b3e0c01f9d22c19b"
   integrity sha512-t4HiqvCbC7XgQepwWlIaFJe3iwW7HCf6xOSU9nKTV0tiGqOPz7xMtIgLEloQrDA34Cx4PkOYBXrvFPV6RxSFAA==
 
-"@internxt/sdk@^1.4.65":
-  version "1.4.65"
-  resolved "https://npm.pkg.github.com/download/@internxt/sdk/1.4.65/d79f02bd0349de251b77991a57af1e6dbc1991e9#d79f02bd0349de251b77991a57af1e6dbc1991e9"
-  integrity sha512-P+7PdQz9+cFvGbeSsVeb1Sfav6zr9Ef46/6SS8cDDEN18txiGL3M2rUK1mpGMJyQdMGpu6jwWVIK51M1nKWVxg==
+"@internxt/sdk@^1.4.67":
+  version "1.4.67"
+  resolved "https://npm.pkg.github.com/download/@internxt/sdk/1.4.67/86fe22ae1a418a1fd29fd586e7dda5f391c490fb#86fe22ae1a418a1fd29fd586e7dda5f391c490fb"
+  integrity sha512-jiDue0BRNm/uAEiah/19EL5bXd3GKUdPmyFkzTTEQjpk+xGhUWAkOgTw+Bp6jN5KL9WqleOnKdWIiGKoKj24XQ==
   dependencies:
     axios "^0.24.0"
     query-string "^7.1.0"