dismiss failed pins on File list

public/locales/en/files.json

@@ -108,7 +108,6 @@
   "pinnedRemotely": "Pinned remotely",
   "pinningRemotely": "Pinning remotely",
   "pinningCompletedClickToDismiss": "Pinning completed. Click to dismiss.",
-  "pinningFailed": "Pinning failed",
   "pinningFailedClickToDismiss": "Pinning failed. Click to dismiss.",
   "blocks": "Blocks",
   "allBlocks": "All blocks",

src/bundles/pinning.js

@@ -307,12 +307,12 @@ const pinningBundle = {
     }
   }), {}),
 
-  doDismissCompletedPin: (pin) => async ({ dispatch }) => {
-    dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { completed: [pin] } })
+  doDismissCompletedPin: (...pins) => async ({ dispatch }) => {
+    dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { completed: pins } })
   },
 
-  doDismissFailedPin: (pin) => async ({ dispatch }) => {
-    dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { failed: [pin] } })
+  doDismissFailedPin: (...pins) => async ({ dispatch }) => {
+    dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { failed: pins } })
   },
 
   doSetPinning: (file, services = [], wasLocallyPinned, previousRemotePins = []) => async ({ getIpfs, store, dispatch }) => {

src/files/file/File.js

@@ -19,7 +19,7 @@ import './PendingAnimation.css'
 
 const File = ({
   name, type, size, cid, path, pinned, t, selected, focused, translucent, coloured, cantSelect, cantDrag, isMfs, isRemotePin, isPendingPin, isFailedPin,
-  onAddFiles, onMove, onSelect, onNavigate, onSetPinning, handleContextMenuClick
+  onAddFiles, onMove, onSelect, onNavigate, onSetPinning, onDismissFailedPin, handleContextMenuClick
 }) => {
   const dotsWrapper = useRef()
 
@@ -138,10 +138,11 @@ const File = ({
             { isPendingPin && <div className='br-100 PendingAnimation' title={t('pinningRemotely')} style={{ width: '2rem', height: '2rem' }}>
               <GlyphPinCloud className='fill-aqua' />
             </div> }
-            { isFailedPin && <div className='br-100 o-70' title={t('pinningFailed')} style={{ width: '2rem', height: '2rem' }}>
-              {/* TODO: click to clear */}
-              <GlyphPinCloud className='fill-red' />
-            </div> }
+            { isFailedPin && <div className='br-100 o-70' title={t('pinningFailedClickToDismiss')} style={{ width: '2rem', height: '2rem' }}>
+              <button onClick={onDismissFailedPin} className='w2 h2 pa0'>
+                <GlyphPinCloud className='fill-red' />
+              </button>
+            </div>}
             { !pinned && !isRemotePin && !isPendingPin && !isFailedPin && <div className='br-100 hide-child' title={t('app:actions.setPinning')} style={{ width: '2rem', height: '2rem' }}>
               <GlyphPin className='fill-gray-muted child' />
             </div> }
@@ -170,6 +171,7 @@ File.propTypes = {
   onNavigate: PropTypes.func.isRequired,
   onAddFiles: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
+  onDismissFailedPin: PropTypes.func.isRequired,
   coloured: PropTypes.bool,
   translucent: PropTypes.bool,
   handleContextMenuClick: PropTypes.func,

src/files/files-list/FilesList.js

@@ -8,7 +8,7 @@ import { join } from 'path'
 import { sorts } from '../../bundles/files'
 import { normalizeFiles } from '../../lib/files'
 import { List, WindowScroller, AutoSizer } from 'react-virtualized'
-// Reac DnD
+// React DnD
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { useDrop } from 'react-dnd'
 // Components
@@ -22,33 +22,42 @@ const addFiles = async (filesPromise, onAddFiles) => {
   onAddFiles(normalizeFiles(files))
 }
 
-const mergeRemotePinsIntoFiles = (files, remotePins, pendingPins, failedPins) => {
+const mergeRemotePinsIntoFiles = (files, remotePins, pendingPins, failedPins, onDismissFailedPin) => {
   const remotePinsCids = remotePins.map(id => id.split(':').at(-1))
   const pendingPinsCids = pendingPins.map(id => id.split(':').at(-1))
   const failedPinsCids = failedPins.map(id => id.split(':').at(-1))
 
   return files.map(f => {
+    const fileFailedPins = failedPinsCids.reduce((acc, cid, i) => {
+      if (cid === f.cid?.toString()) {
+        acc.push(failedPins[i])
+      }
+
+      return acc
+    }, [])
+
     const isRemotePin = remotePinsCids.includes(f.cid?.toString())
     const isPendingPin = pendingPinsCids.includes(f.cid?.toString())
-    const isFailedPin = failedPinsCids.includes(f.cid?.toString())
+    const isFailedPin = fileFailedPins.length > 0
 
     return {
       ...f,
       isRemotePin,
       isPendingPin,
-      isFailedPin
+      isFailedPin,
+      onDismissFailedPin: () => onDismissFailedPin(...fileFailedPins)
     }
   })
 }
 
 export const FilesList = ({
   className, files, pins, pinningServices, remotePins, pendingPins, failedPins, filesSorting, updateSorting, downloadProgress, filesIsFetching, filesPathInfo, showLoadingAnimation,
-  onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, handleContextMenuClick, t
+  onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, doDismissFailedPin, handleContextMenuClick, t
 }) => {
   const [selected, setSelected] = useState([])
   const [focused, setFocused] = useState(null)
   const [firstVisibleRow, setFirstVisibleRow] = useState(null)
-  const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins))
+  const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins, doDismissFailedPin))
   const listRef = useRef()
   const filesRefs = useRef([])
   const refreshPinCache = true // manually clicking on Pin Status column skips cache and updates remote status
@@ -394,5 +403,6 @@ export default connect(
   'selectFilesSorting',
   'selectFilesPathInfo',
   'selectShowLoadingAnimation',
+  'doDismissFailedPin',
   withTranslation('files')(FilesList)
 )