make showing received file size more reliable

client/src/routes/Publish/Files/Ipfs.tsx

@@ -25,14 +25,15 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
 
     const [loading, setLoading] = useState(false)
     const [message, setMessage] = useState('')
-    const [received, setReceived] = useState(0)
+    const [fileSize, setFileSize] = useState('')
+    const [fileSizeReceived, setFileSizeReceived] = useState('')
 
     useEffect(() => {
         setMessage(
             `Adding to IPFS<br />
-            <small>${formatBytes(received, 0)}</small><br />`
+             <small>${fileSizeReceived || 0}/${fileSize}</small><br />`
         )
-    }, [received])
+    })
 
     async function addToIpfs(data: any) {
         try {
@@ -40,7 +41,7 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
                 wrapWithDirectory: true,
                 progress: (length: number) => {
                     console.log(`Received: ${formatBytes(length, 0)}`)
-                    setReceived(length)
+                    setFileSizeReceived(formatBytes(length, 0))
                 }
             })
 
@@ -61,7 +62,7 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
         const totalSize = formatBytes(size, 0)
 
         setLoading(true)
-        setMessage(`Adding to IPFS<br /><small>0/${totalSize}</small><br />`)
+        setFileSize(totalSize)
 
         // Add file to IPFS node
         const content: any = await readFileAsync(acceptedFiles[0])

client/src/routes/Publish/Files/Item.module.scss

@@ -4,8 +4,9 @@
     font-size: $font-size-small;
     display: block;
     margin-bottom: $spacer / 8;
-
-    // TODO: truncate long urls with ellipsis
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
 }
 
 .remove {

client/src/routes/Publish/Files/Item.tsx

@@ -5,7 +5,7 @@ import Dotdotdot from 'react-dotdotdot'
 
 const Item = ({
     item,
-    removeItem
+    removeFile
 }: {
     item: {
         url: string
@@ -13,7 +13,7 @@ const Item = ({
         contentType: string
         contentLength: number
     }
-    removeItem(): void
+    removeFile(): void
 }) => (
     <li>
         <a href={item.url} className={styles.linkUrl} title={item.url}>
@@ -36,7 +36,7 @@ const Item = ({
             type="button"
             className={styles.remove}
             title="Remove item"
-            onClick={removeItem}
+            onClick={removeFile}
         >
             &times;
         </button>

client/src/routes/Publish/Files/index.tsx

@@ -169,9 +169,9 @@ export default class Files extends PureComponent<FilesProps, FilesStates> {
                         <ul className={styles.itemsList}>
                             {files.map((item: any, index: number) => (
                                 <Item
-                                    key={item.url}
+                                    key={shortid.generate()}
                                     item={item}
-                                    removeItem={() => this.removeFile(index)}
+                                    removeFile={() => this.removeFile(index)}
                                 />
                             ))}
                         </ul>

client/src/routes/Publish/index.test.tsx

@@ -32,12 +32,7 @@ describe('Publish', () => {
                 <MemoryRouter>
                     <Publish
                         history={history}
-                        location={{
-                            pathname: '/publish',
-                            search: '',
-                            hash: '',
-                            state: ''
-                        }}
+                        location={location}
                         match={{ params: '', path: '', url: '', isExact: true }}
                     />
                 </MemoryRouter>