Fix user lookup spamming the api, and throwing (#1553)

* oh yeaah * lingui extract * lingui extract * Apply suggestions from code review * lingui extract Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
ChainSafe · Sep 22, 2021 · c92477b · c92477b
1 parent 4919583
commit c92477b
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 13 deletions.
diff --git a/packages/common-components/src/TagsInput/TagsInput.tsx b/packages/common-components/src/TagsInput/TagsInput.tsx
@@ -3,7 +3,8 @@ import {
   makeStyles,
   createStyles,
   ITheme,
-  useTheme
+  useTheme,
+  debounce
 } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import AsyncSelect from "react-select/async"
@@ -63,6 +64,8 @@ interface ITagsInputProps {
   fetchTags: (searchValue: string) => Promise<Array<ITagOption>>
   onChange: (value: ValueType<ITagOption, true>, action: ActionMeta<ITagOption>) => void
   styles?: Partial<Styles>
+  loadingMessage?: string
+  noOptionsMessage? : string
 }
 
 const TagsInput = ({
@@ -75,7 +78,9 @@ const TagsInput = ({
   fetchTags,
   disabled = false,
   onChange,
-  styles
+  styles,
+  loadingMessage = "Loading...",
+  noOptionsMessage = "No options found."
 }: ITagsInputProps) => {
   const classes = useStyles()
 
@@ -111,6 +116,10 @@ const TagsInput = ({
     })
   })
 
+  const loadOptions = debounce((inputText, callback) => {
+    fetchTags(inputText).then((options) => callback(options))
+  }, 300)
+
   return (
     <label className={clsx(classes.root, className)}>
       {label && label.length > 0 && (
@@ -127,18 +136,17 @@ const TagsInput = ({
         isMulti
         cacheOptions={false}
         value={value}
-        loadOptions={fetchTags}
-        onInputChange={(inputVal) => fetchTags(inputVal)}
+        loadOptions={loadOptions}
         isClearable={false}
-        getOptionLabel={(option) => option.label}
-        getOptionValue={(option) => option.value}
         onChange={onChange}
         openMenuOnClick={false}
         openMenuOnFocus={false}
         placeholder={placeholder}
         isDisabled={disabled}
         components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
         styles={selectOverides as Partial<Styles>}
+        loadingMessage={() => loadingMessage}
+        noOptionsMessage={() => noOptionsMessage}
       />
       {caption && (
         <Typography

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx
@@ -240,6 +240,8 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
                 alignContent: "start"
               })
             }}
+            loadingMessage={t`Loading`}
+            noOptionsMessage={t`No user found for this query.`}
           />
         </div>
         <div className={classes.modalFlexItem}>
@@ -259,7 +261,10 @@ const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdi
                 minHeight: 90,
                 alignContent: "start"
               })
-            }}/>
+            }}
+            loadingMessage={t`Loading`}
+            noOptionsMessage={t`No user found for this query.`}
+          />
         </div>
         <Grid
           item

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/ShareModal.tsx
@@ -295,7 +295,6 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
     transferFileBetweenBuckets
   ])
 
-
   return (
     <CustomModal
       className={classes.modalRoot}
@@ -367,7 +366,10 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
                         minHeight: 90,
                         alignContent: "start"
                       })
-                    }}/>
+                    }}
+                    loadingMessage={t`Loading`}
+                    noOptionsMessage={t`No user found for this query.`}
+                  />
                 </div>
                 <div className={classes.modalFlexItem}>
                   <TagsInput
@@ -383,7 +385,10 @@ const ShareModal = ({ close, file, filePath }: IShareFileProps) => {
                         minHeight: 90,
                         alignContent: "start"
                       })
-                    }}/>
+                    }}
+                    loadingMessage={t`Loading...`}
+                    noOptionsMessage={t`No user found for this query.`}
+                  />
                 </div>
                 {!!usersError && (
                   <Typography

diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useLookupUser.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/hooks/useLookupUser.tsx
@@ -60,8 +60,8 @@ export const useLookupSharedFolderUser = () => {
 
       return [{ label: inputVal, value: result.uuid, data: result }]
     } catch (e) {
-      console.error(e)
-      return Promise.reject(e)
+      console.error("No user found", e)
+      return Promise.resolve([])
     }
   }, [filesApiClient, sharedFolderReaders, sharedFolderWriters, profile])
 

diff --git a/packages/files-ui/src/Components/Modules/Settings/Profile.tsx b/packages/files-ui/src/Components/Modules/Settings/Profile.tsx
@@ -217,7 +217,7 @@ const ProfileView = () => {
       addToast({ title: t`Profile updated`, type: "success" })
       setUpdatingProfile(false)
     } catch (error) {
-      addToast({ title: error, type: "error" })
+      error instanceof Error && addToast({ title: error.message, type: "error" })
       setUpdatingProfile(false)
     }
   }

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -364,12 +364,18 @@ msgstr "Los geht’s."
 msgid "Light Theme"
 msgstr "Helles Farbschema"
 
+msgid "Loading"
+msgstr ""
+
 msgid "Loading preview"
 msgstr "Vorschau wird geladen"
 
 msgid "Loading your shared folders…"
 msgstr ""
 
+msgid "Loading..."
+msgstr ""
+
 msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 msgstr "Sieht aus, als würden Sie sich über einen neuen Browser anmelden. Bitte wählen Sie eine der folgenden Möglichkeiten, um fortzufahren:"
 
@@ -424,6 +430,9 @@ msgstr "Keine Suchergebnisse für"
 msgid "No thanks"
 msgstr "Nein danke"
 
+msgid "No user found for this query."
+msgstr ""
+
 msgid "Number of copies (Replication Factor)"
 msgstr "Anzahl der Kopien (Replikationsfaktor)"
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -367,12 +367,18 @@ msgstr "Let's get you set up."
 msgid "Light Theme"
 msgstr "Light Theme"
 
+msgid "Loading"
+msgstr "Loading"
+
 msgid "Loading preview"
 msgstr "Loading preview"
 
 msgid "Loading your shared folders…"
 msgstr "Loading your shared folders…"
 
+msgid "Loading..."
+msgstr "Loading..."
+
 msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 msgstr "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 
@@ -427,6 +433,9 @@ msgstr "No search results for"
 msgid "No thanks"
 msgstr "No thanks"
 
+msgid "No user found for this query."
+msgstr "No user found for this query."
+
 msgid "Number of copies (Replication Factor)"
 msgstr "Number of copies (Replication Factor)"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -368,12 +368,18 @@ msgstr "Vamos a configurarlo."
 msgid "Light Theme"
 msgstr "Tema Claro"
 
+msgid "Loading"
+msgstr ""
+
 msgid "Loading preview"
 msgstr "Cargando vista previa"
 
 msgid "Loading your shared folders…"
 msgstr ""
 
+msgid "Loading..."
+msgstr ""
+
 msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 msgstr "Parece que está iniciando sesión desde un nuevo navegador. Elija una de las siguientes opciones para continuar:"
 
@@ -428,6 +434,9 @@ msgstr "No hay resultados de búsqueda para"
 msgid "No thanks"
 msgstr "No gracias"
 
+msgid "No user found for this query."
+msgstr ""
+
 msgid "Number of copies (Replication Factor)"
 msgstr "Número de copias (factor de replicación)"
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -368,12 +368,18 @@ msgstr "C’est parti."
 msgid "Light Theme"
 msgstr "Thème clair"
 
+msgid "Loading"
+msgstr ""
+
 msgid "Loading preview"
 msgstr "Chargement de l’aperçu"
 
 msgid "Loading your shared folders…"
 msgstr "Chargement de vos dossiers partagés…"
 
+msgid "Loading..."
+msgstr ""
+
 msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 msgstr "Il semble que vous vous connectiez à partir d’un nouveau navigateur. Veuillez choisir une des options suivantes pour continuer :"
 
@@ -428,6 +434,9 @@ msgstr "Aucun fichier à afficher"
 msgid "No thanks"
 msgstr "Non merci"
 
+msgid "No user found for this query."
+msgstr ""
+
 msgid "Number of copies (Replication Factor)"
 msgstr "Nombre de copies (facteur de réplication)"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -364,12 +364,18 @@ msgstr ""
 msgid "Light Theme"
 msgstr "Lys drakt"
 
+msgid "Loading"
+msgstr ""
+
 msgid "Loading preview"
 msgstr ""
 
 msgid "Loading your shared folders…"
 msgstr ""
 
+msgid "Loading..."
+msgstr ""
+
 msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
 msgstr ""
 
@@ -424,6 +430,9 @@ msgstr ""
 msgid "No thanks"
 msgstr "Nei takk"
 
+msgid "No user found for this query."
+msgstr ""
+
 msgid "Number of copies (Replication Factor)"
 msgstr ""