refactor: cleanup files page (#1029)

This declutters the `FilesPage` file a lot.

- Moves the modals to their own directory and the info boxes to their own directory too 5409447
- Cleans up files.extra on preview c2055cc
- Quickly fixes a message f8a3059
- Cleans up context menu 63b4164
- Moves header outside of files page ea6b761

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>

package.json

@@ -23,7 +23,7 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
-    "@tableflip/react-dropdown": "^1.2.0",
+    "@tableflip/react-dropdown": "^1.3.0",
     "@tableflip/react-inspector": "^2.3.0",
     "brace": "^0.11.1",
     "chart.js": "^2.7.2",

public/locales/en/files.json

@@ -17,6 +17,7 @@
   "addByPath": "From IPFS",
   "addToIPFS": "Add",
   "newFolder": "New folder",
+  "generating": "Generating...",
   "actions": {
     "add": "Add",
     "delete": "Delete",
@@ -70,7 +71,7 @@
     "paragraph6": "<0>If you want to help push the Web UI forward, <1>check out its code</1> or <3>report a bug</3>!</0>"
   },
   "filesList": {
-    "noFiles": "<0>No files in this directory. Click the “Add to IPFS” button to add some.</0>"
+    "noFiles": "<0>No files in this directory. Click the “Add” button to add some.</0>"
   },
   "addFilesInfo": "<0>Add files to your local IPFS node by clicking the <1>Add to IPFS</1> button above.</0>",
   "companionInfo": "<0>As you are using <1>IPFS Companion</1>, the files view is limited to files added while using the extension.</0>"

src/bundles/files.js

@@ -92,23 +92,14 @@ const fetchFiles = make(actions.FETCH, async (ipfs, id, { store }) => {
   const stats = await ipfs.files.stat(path)
 
   if (stats.type === 'file') {
-    stats.name = path
-
     return {
       path: path,
       fetched: Date.now(),
       type: 'file',
-      stats: stats,
       read: () => ipfs.files.read(path),
-      // TODO - This will be refactored in the future
-      // I'm adding this here to make the file actions work in preview mode
-      extra: [{
-        name: path.split('/').pop(),
-        path: path,
-        type: 'file',
-        size: stats.size,
-        hash: stats.hash
-      }]
+      name: path.split('/').pop(),
+      size: stats.size,
+      hash: stats.hash
     }
   }