Merge remote-tracking branch 'origin/development' into feat/ui-improv…

…ements

src/components/Modals/SideModal/SideModal.tsx

@@ -14,7 +14,7 @@ interface SideModalProps {
   };
   headerTitle: string;
   className?: string;
-  children: ReactChild | ReactChild[];
+  children: React.ReactNode;
 }
 
 const SideModal: FC<SideModalProps> = ({

src/components/Modals/UploadFileModal/UploadFileModal.tsx

@@ -21,6 +21,7 @@ import { CreatorModalProps } from '@interfaces/handlers';
 import { addItemToCache, ContentType } from '@utils/cache';
 import { getFdpPathByDirectory } from '@api/pod';
 import { useLocales } from '@context/LocalesContext';
+import { FileItem } from '@fairdatasociety/fdp-storage';
 
 const UploadFileModal: FC<CreatorModalProps> = ({
   showModal,
@@ -33,33 +34,34 @@ const UploadFileModal: FC<CreatorModalProps> = ({
   const [loading, setLoading] = useState(false);
   const [message, setMessage] = useState<string | null>(null);
 
-  const [fileToUpload, setFileToUpload] = useState(null);
+  const [filesToUpload, setFilesToUpload] = useState<File[]>(null);
+  const [uploadedItems, setUploadedItems] = useState<FileItem[]>([]);
+  const [failedUplods, setFailedUplods] = useState<File[]>([]);
   const [errorMessage, setErrorMessage] = useState('');
   const { fdpClientRef, getAccountAddress } = useFdpStorage();
   const { getRootProps, getInputProps } = useDropzone({
-    onDrop: (acceptedFiles: any) => {
+    onDrop: (acceptedFiles: File[]) => {
+      setUploadedItems([]);
+      setFailedUplods([]);
+      setErrorMessage('');
       if (activePod) {
-        setFileToUpload(acceptedFiles[0]);
+        setFilesToUpload(acceptedFiles);
       }
     },
   });
   const { intl } = useLocales();
 
-  const handleUpload = async () => {
-    if (!(fileToUpload && activePod)) {
-      return;
-    }
-
-    setLoading(true);
-    try {
+  const onClose = async () => {
+    if (uploadedItems.length > 0) {
       const userAddress = await getAccountAddress();
       const directory = directoryName || 'root';
       const fdpPath = getFdpPathByDirectory(directory);
-      const item = await uploadFile(fdpClientRef.current, {
-        file: fileToUpload,
-        directory: directoryName,
-        podName: activePod,
-      });
+
+      setMessage(intl.get('SUCCESSFULLY_UPLOADED'));
+
+      uploadedItems.forEach((item) =>
+        addItemToCache(userAddress, activePod, fdpPath, item, ContentType.FILE)
+      );
 
       trackEvent({
         category: 'Upload',
@@ -69,23 +71,76 @@ const UploadFileModal: FC<CreatorModalProps> = ({
         href: window.location.href,
       });
 
-      addItemToCache(userAddress, activePod, fdpPath, item, ContentType.FILE);
       updateDrive({
         isUseCacheOnly: true,
       });
-      closeModal();
-      setMessage(intl.get('SUCCESSFULLY_UPLOADED'));
+    }
+
+    closeModal();
+  };
+
+  const handleUpload = async () => {
+    setErrorMessage('');
+
+    if (loading || !(filesToUpload && activePod)) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const uploadedFiles = [];
+      setFailedUplods([]);
+
+      await filesToUpload.reduce(async (prevUpload, file) => {
+        try {
+          await prevUpload;
+
+          if (uploadedItems.some(({ name }) => name === file.name)) {
+            uploadedFiles.push(file);
+            return;
+          }
+
+          const item = await uploadFile(fdpClientRef.current, {
+            file,
+            directory: directoryName,
+            podName: activePod,
+          });
+
+          uploadedFiles.push(file);
+          setUploadedItems((uploadedItems) => [...uploadedItems, item]);
+        } catch (error) {
+          setFailedUplods((failedUplods) => [...failedUplods, file]);
+        }
+      }, Promise.resolve());
+
+      if (uploadedFiles.length === filesToUpload.length) {
+        onClose();
+      } else {
+        throw new Error("Some files weren't uploaded successfully.");
+      }
     } catch (e) {
       setErrorMessage(`${e.message}`);
     } finally {
       setLoading(false);
     }
   };
 
+  const getFileUploadStatus = (
+    file: File
+  ): 'pending' | 'success' | 'failed' => {
+    if (uploadedItems.some((item) => item.name === file.name)) {
+      return 'success';
+    }
+    if (failedUplods.some((failedFile) => failedFile.name === file.name)) {
+      return 'failed';
+    }
+    return 'pending';
+  };
+
   return (
     <SideModal
       showModal={showModal}
-      closeModal={closeModal}
+      closeModal={onClose}
       headerIcon={{
         light: <FolderLightIcon />,
         dark: <FolderDarkIcon />,
@@ -113,11 +168,21 @@ const UploadFileModal: FC<CreatorModalProps> = ({
         </p>
       </div>
 
-      {fileToUpload ? (
-        <p className="mt-5 text-sm text-center text-color-shade-light-2-night">
-          {intl.get('READY_TO_UPLOAD')} <strong>{fileToUpload?.name}</strong>
-        </p>
-      ) : null}
+      {filesToUpload &&
+        filesToUpload.map((file) => {
+          const status = getFileUploadStatus(file);
+          return (
+            <p
+              key={file.name}
+              className={`mt-5 text-sm text-center text-color-shade-light-2-night ${
+                status === 'success' ? 'text-color-status-positive-day' : ''
+              } ${status === 'failed' ? 'text-color-status-negative-day' : ''}`}
+            >
+              {status === 'pending' && intl.get('READY_TO_UPLOAD')}{' '}
+              <strong>{file?.name}</strong>
+            </p>
+          );
+        })}
 
       {errorMessage ? (
         <div className="mt-10 text-color-status-negative-day text-xs text-center leading-none">
@@ -131,7 +196,7 @@ const UploadFileModal: FC<CreatorModalProps> = ({
           variant="primary-outlined"
           label={intl.get('UPLOAD_CONTENT')}
           onClick={handleUpload}
-          disabled={!fileToUpload || loading}
+          disabled={!filesToUpload || loading}
           loading={loading}
         />
       </div>

src/components/NavigationBars/DriveActionBar/DriveActionBarMobile.tsx

@@ -44,7 +44,7 @@ const DriveActionBarItem = (
       <a className="flex flex-col justify-center items-center">
         {theme === 'light' ? imageLight : imageDark}
 
-        <span className="inline-block mt-2 text-color-accents-plum-black dark:text-color-shade-light-2-night">
+        <span className="inline-block text-center mt-2 text-color-accents-plum-black dark:text-color-shade-light-2-night">
           {label}
         </span>
       </a>
@@ -92,7 +92,7 @@ const DriveActionBarMobile: FC<DriveActionBarMobileProps> = ({
       )}
       {DriveActionBarItem(
         theme,
-        intl.get('FOLDER'),
+        intl.get('NEW_FOLDER'),
         <CreateFolderLightIcon height="22" />,
         <CreateFolderDarkIcon height="22" />,
         () => setShowCreateFolderModal(true),

src/locales/ch-CH.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "为了增强安全性，您的访问受到密码短语和MetaMask的数字签名的双重保护。输入正确的密码短语和签名会解锁您特定的数据、Pods、文件夹和文件。注意：输入错误的密码短语不会拒绝访问，而是会显示完全不相关的数据。如果您决定升级到完全的FDP帐户，请注意，只有当前登录帐户的数据才会被迁移。",
   "ROOT_DIRECTORY": "根目录 ",
   "INVITES_TOOLTIP": "邀请简化了入门过程！分享邀请链接，让朋友们即时访问预先充值的钱包。",
-  "INVITES_DESCRIPTION": "我们的邀请制度旨在使新用户的入门过程变得无缝。当您创建邀请时，您实际上是生成了一个嵌入预先充值钱包的私钥的推荐链接。通过与朋友或同事共享此链接，您可以让他们立即访问并开始使用已配置好的服务。这不仅可以帮助他们避免初次设置的麻烦，还可以更快地推动他们使用我们的平台。"
+  "INVITES_DESCRIPTION": "我们的邀请制度旨在使新用户的入门过程变得无缝。当您创建邀请时，您实际上是生成了一个嵌入预先充值钱包的私钥的推荐链接。通过与朋友或同事共享此链接，您可以让他们立即访问并开始使用已配置好的服务。这不仅可以帮助他们避免初次设置的麻烦，还可以更快地推动他们使用我们的平台。",
+  "NEW_FOLDER": "新建文件夹"
 }

src/locales/de-DE.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "Um die Sicherheit zu erhöhen, wird Ihr Zugang durch eine Kombination aus einer Passphrase und einer digitalen Signatur von MetaMask geschützt. Die korrekte Eingabe von Passphrase und Signatur gibt Zugang zu Ihren spezifischen Daten, Pods, Ordnern und Dateien. Hinweis: Eine falsch eingegebene Passphrase wird keinen Zugang verweigern, sondern komplett unterschiedliche Daten anzeigen. Wenn Sie sich entscheiden, auf ein vollständiges FDP-Konto zu aktualisieren, wird nur das aktuell eingeloggte Konto migriert.",
   "ROOT_DIRECTORY": "Stammverzeichnis",
   "INVITES_TOOLTIP": "Einladungen erleichtern den Einstieg! Teile einen Einladungslink, um Freunden sofortigen Zugang zu einem vorgefundenen Wallet zu geben.",
-  "INVITES_DESCRIPTION": "Unser Einladungssystem ist darauf ausgelegt, den Einstieg für neue Benutzer nahtlos zu gestalten. Wenn Sie eine Einladung erstellen, generieren Sie im Wesentlichen einen Empfehlungslink, der mit einem privaten Schlüssel zu einer vorgefundenen Brieftasche versehen ist. Durch das Teilen dieses Links mit Freunden oder Kollegen ermöglichen Sie ihnen den sofortigen Zugang und die sofortige Nutzung unseres Dienstes mit bereits vorhandenen Mitteln. Dies erleichtert nicht nur die Erstkonfiguration, sondern fördert auch die schnellere Nutzung unserer Plattform."
+  "INVITES_DESCRIPTION": "Unser Einladungssystem ist darauf ausgelegt, den Einstieg für neue Benutzer nahtlos zu gestalten. Wenn Sie eine Einladung erstellen, generieren Sie im Wesentlichen einen Empfehlungslink, der mit einem privaten Schlüssel zu einer vorgefundenen Brieftasche versehen ist. Durch das Teilen dieses Links mit Freunden oder Kollegen ermöglichen Sie ihnen den sofortigen Zugang und die sofortige Nutzung unseres Dienstes mit bereits vorhandenen Mitteln. Dies erleichtert nicht nur die Erstkonfiguration, sondern fördert auch die schnellere Nutzung unserer Plattform.",
+  "NEW_FOLDER": "Neuer Ordner"
 }

src/locales/en-US.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "To enhance security, your access is protected by a combination of a passphrase and a digital signature from MetaMask. Entering the correct passphrase and signature unlocks your specific data, pods, folders, and files. Note: A mistyped passphrase will not deny access but will show you completely unrelated data. If you decide to upgrade to a full FDP account, be aware that only the data from the currently logged-in account will be migrated.",
   "ROOT_DIRECTORY": "Root directory",
   "INVITES_TOOLTIP": "Invites simplify onboarding! Share an invite link to give friends instant access to a pre-funded wallet.",
-  "INVITES_DESCRIPTION": "Our invitation system is designed to make the onboarding process seamless for new users. When you create an invite, you're essentially generating a referral link embedded with a private key to a pre-funded wallet. By sharing this link with friends or colleagues, you give them immediate access to start using the service with funds already in place. This not only helps them bypass the initial setup hassles but also encourages quicker adoption and usage of our platform."
+  "INVITES_DESCRIPTION": "Our invitation system is designed to make the onboarding process seamless for new users. When you create an invite, you're essentially generating a referral link embedded with a private key to a pre-funded wallet. By sharing this link with friends or colleagues, you give them immediate access to start using the service with funds already in place. This not only helps them bypass the initial setup hassles but also encourages quicker adoption and usage of our platform.",
+  "NEW_FOLDER": "New Folder"
 }

src/locales/es-ES.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "Para mejorar la seguridad, tu acceso está protegido por una combinación de una frase de contraseña y una firma digital de MetaMask. Ingresar la frase de contraseña y la firma correctas desbloqueará tus datos, pods, carpetas y archivos específicos. Nota: Si escribes mal la frase de contraseña, no se te denegará el acceso, sino que verás datos completamente diferentes. Si decides actualizar a una cuenta FDP completa, ten en cuenta que solo se migrarán los datos de la cuenta en la que estés registrado actualmente.",
   "ROOT_DIRECTORY": "Directorio raíz",
   "INVITES_TOOLTIP": "¡Las invitaciones simplifican el proceso de incorporación! Comparte un enlace de invitación para dar a tus amigos acceso instantáneo a una billetera prefinanciada.",
-  "INVITES_DESCRIPTION": "Nuestro sistema de invitación está diseñado para hacer que el proceso de incorporación sea fluido para los nuevos usuarios. Al crear una invitación, esencialmente estás generando un enlace de referencia incrustado con una clave privada para una billetera prefinanciada. Al compartir este enlace con amigos o colegas, les das acceso inmediato para empezar a usar el servicio con fondos ya establecidos. Esto no solo les ayuda a evitar las complicaciones de la configuración inicial, sino que también fomenta una adopción y uso más rápidos de nuestra plataforma."
+  "INVITES_DESCRIPTION": "Nuestro sistema de invitación está diseñado para hacer que el proceso de incorporación sea fluido para los nuevos usuarios. Al crear una invitación, esencialmente estás generando un enlace de referencia incrustado con una clave privada para una billetera prefinanciada. Al compartir este enlace con amigos o colegas, les das acceso inmediato para empezar a usar el servicio con fondos ya establecidos. Esto no solo les ayuda a evitar las complicaciones de la configuración inicial, sino que también fomenta una adopción y uso más rápidos de nuestra plataforma.",
+  "NEW_FOLDER": "Nueva Carpeta"
 }

src/locales/fr-FR.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "Pour améliorer la sécurité, votre accès est protégé par une combinaison de phrase secrète et d'une signature numérique via MetaMask. Saisir la phrase secrète et la signature correctes vous donnera accès à vos données, pods, dossiers et fichiers spécifiques. Remarque : une phrase secrète mal saisie ne refusera pas l'accès mais affichera des données complètement différentes. Si vous choisissez de migrer vers un compte FDP complet, seules les données du compte actuellement connecté seront migrées.",
   "ROOT_DIRECTORY": "Répertoire racine",
   "INVITES_TOOLTIP": "Les invitations simplifient l'intégration ! Partagez un lien d'invitation pour offrir à vos amis un accès instantané à un portefeuille préfinancé.",
-  "INVITES_DESCRIPTION": "Notre système d'invitation est conçu pour faciliter l'intégration des nouveaux utilisateurs. Lorsque vous créez une invitation, vous générez essentiellement un lien de parrainage intégré avec une clé privée pour un portefeuille préfinancé. En partageant ce lien avec des amis ou des collègues, vous leur donnez un accès immédiat pour commencer à utiliser le service avec des fonds déjà en place. Cela les aide non seulement à éviter les tracas de la configuration initiale, mais encourage également une adoption et une utilisation plus rapides de notre plateforme."
+  "INVITES_DESCRIPTION": "Notre système d'invitation est conçu pour faciliter l'intégration des nouveaux utilisateurs. Lorsque vous créez une invitation, vous générez essentiellement un lien de parrainage intégré avec une clé privée pour un portefeuille préfinancé. En partageant ce lien avec des amis ou des collègues, vous leur donnez un accès immédiat pour commencer à utiliser le service avec des fonds déjà en place. Cela les aide non seulement à éviter les tracas de la configuration initiale, mais encourage également une adoption et une utilisation plus rapides de notre plateforme.",
+  "NEW_FOLDER": "Nouveau Dossier"
 }

src/locales/hu-HU.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "A biztonság fokozása érdekében az hozzáférését egy jelszó és egy digitális aláírás kombinációja védi a MetaMask alkalmazásban. A helyes jelszó és aláírás megadása engedi a hozzáférést a saját adatokhoz, podokhoz, mappákhoz és fájlokhoz. Megjegyzés: Egy hibásan beírt jelszó nem tagadja meg a hozzáférést, de teljesen irreleváns adatokat fog mutatni. Ha úgy dönt, hogy teljes FDP fiókra vált, vegye figyelembe, hogy csak a jelenleg bejelentkezett fiók adatai lesznek áthelyezve.",
   "ROOT_DIRECTORY": "Gyökérkönyvtár",
   "INVITES_TOOLTIP": "Az meghívók egyszerűsítik a bekapcsolódást! Ossz meg egy meghívó linket, hogy barátaid azonnal hozzáférjenek egy előre finanszírozott tárcához.",
-  "INVITES_DESCRIPTION": "A meghívó rendszerünk arra lett tervezve, hogy az új felhasználók számára gördülékenyebbé tegye az első lépéseket. Egy meghívó létrehozásakor lényegében egy olyan hivatkozási linket generálsz, amely egy előre finanszírozott tárcához tartozó privát kulccsal van ellátva. Ennek a linknek a megosztásával azonnali hozzáférést és a már meglévő alapokkal történő szolgáltatás használatát teszed lehetővé barátaid vagy kollégáid számára. Ez nem csak az első beállításokkal járó bonyodalmakat hárítja el, de gyorsabbá is teszi platformunk elfogadását és használatát."
+  "INVITES_DESCRIPTION": "A meghívó rendszerünk arra lett tervezve, hogy az új felhasználók számára gördülékenyebbé tegye az első lépéseket. Egy meghívó létrehozásakor lényegében egy olyan hivatkozási linket generálsz, amely egy előre finanszírozott tárcához tartozó privát kulccsal van ellátva. Ennek a linknek a megosztásával azonnali hozzáférést és a már meglévő alapokkal történő szolgáltatás használatát teszed lehetővé barátaid vagy kollégáid számára. Ez nem csak az első beállításokkal járó bonyodalmakat hárítja el, de gyorsabbá is teszi platformunk elfogadását és használatát.",
+  "NEW_FOLDER": "Új Mappa"
 }

src/locales/it-IT.json

@@ -222,5 +222,6 @@
   "PASSPHRASE_EXPLANATION_2": "Per migliorare la sicurezza, l'accesso è protetto da una combinazione di una passphrase e una firma digitale da MetaMask. L'inserimento corretto di passphrase e firma sbloccherà i tuoi dati specifici, pod, cartelle e file. Nota: una passphrase errata non negherà l'accesso, ma mostrerà dati completamente diversi. Se decidi di passare a un account FDP completo, solo i dati del conto attualmente loggato verranno migrati.",
   "ROOT_DIRECTORY": "Directory principale",
   "INVITES_TOOLTIP": "Gli inviti semplificano l'accesso! Condividi un link di invito per fornire agli amici un accesso immediato a un portafoglio prefinanziato.",
-  "INVITES_DESCRIPTION": "Il nostro sistema di inviti è progettato per rendere fluido il processo di integrazione per i nuovi utenti. Creando un invito, stai essenzialmente generando un link di riferimento incastonato con una chiave privata per un portafoglio prefinanziato. Condividendo questo link con amici o colleghi, dai loro accesso immediato per iniziare a utilizzare il servizio con fondi già presenti. Questo non solo aiuta a evitare i problemi della configurazione iniziale, ma incoraggia anche una più rapida adozione e utilizzo della nostra piattaforma."
+  "INVITES_DESCRIPTION": "Il nostro sistema di inviti è progettato per rendere fluido il processo di integrazione per i nuovi utenti. Creando un invito, stai essenzialmente generando un link di riferimento incastonato con una chiave privata per un portafoglio prefinanziato. Condividendo questo link con amici o colleghi, dai loro accesso immediato per iniziare a utilizzare il servizio con fondi già presenti. Questo non solo aiuta a evitare i problemi della configurazione iniziale, ma incoraggia anche una più rapida adozione e utilizzo della nostra piattaforma.",
+  "NEW_FOLDER": "Nuova Cartella"
 }