fix: frozen pinning service modal error (#1841)

* fix: fozen pinning service modal error License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com> * fix(pin-mgr): show pin stats loading state This ensures we show "Failed to fetch" only when ipfs pin remote service ls --stat fails, and not when we are waiting for it to complete. Co-authored-by: Marcin Rataj <lidel@lidel.org>
ipfs · Sep 1, 2021 · d43dc62 · d43dc62
1 parent 3f6a09a
commit d43dc62
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/bundles/pinning.js b/src/bundles/pinning.js
@@ -10,7 +10,7 @@ const parseService = async (service, remoteServiceTemplates, ipfs) => {
   const parsedService = { ...service, name: service.service, icon, visitServiceUrl, autoUpload }
 
   if (service?.stat?.status === 'invalid') {
-    return { ...parsedService, numberOfPins: 'Error', online: false }
+    return { ...parsedService, numberOfPins: -1, online: false }
   }
 
   const numberOfPins = service.stat?.pinCount?.pinned

diff --git a/src/components/pinning-manager/PinningManager.js b/src/components/pinning-manager/PinningManager.js
@@ -141,7 +141,7 @@ const ServiceCell = ({ rowData, rowIndex }) => (
 //     })}</p>
 // )
 const NumberOfPinsCell = ({ rowData, t }) => {
-  if (!serviceOnline(rowData)) {
+  if (rowData.numberOfPins < 0) {
     return <div className='red help' title={t('errors.failedToFetchTitle')}>{t('errors.failedToFetch')}</div>
   }
   return <div className={rowData.numberOfPins >= 0 ? '' : 'gray'}>{rowData.numberOfPins >= 0 ? rowData.numberOfPins : `${(t('app:terms:loading'))}...`}</div>

diff --git a/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js b/src/components/pinning-manager/pinning-manager-service-modal/PinningManagerServiceModal.js
@@ -22,7 +22,6 @@ const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service,
   const onSubmit = async data => {
     try {
       await doAddPinningService(data)
-      clearErrors('apiValidation')
       onSuccess()
     } catch (error) {
       console.error(error)
@@ -32,10 +31,13 @@ const PinningManagerServiceModal = ({ t, onLeave, onSuccess, className, service,
       })
     }
   }
+  const cleanErrors = () => {
+    clearErrors('apiValidation')
+  }
 
   return (
     <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '34em' }}>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form onSubmit={handleSubmit(onSubmit)} onChange={cleanErrors}>
         <ModalBody>
           <p>{ t('pinningServiceModal.title') }</p>