dropzone tweaks

src/components/Add.module.css

@@ -4,3 +4,23 @@
   word-wrap: break-word;
   word-break: break-all;
 }
+
+.files {
+  text-align: left;
+}
+
+.title {
+  margin-bottom: calc(var(--spacer) / 4);
+  font-size: var(--font-size-base);
+}
+
+.link {
+  color: var(--color-text);
+  font-size: var(--font-size-small);
+  margin-bottom: calc(var(--spacer) / 4);
+  display: inline-block;
+}
+
+.link:hover {
+  color: var(--brand-cyan);
+}

src/components/Add.tsx

@@ -1,10 +1,61 @@
 import React, { useState, ReactElement } from 'react'
 import { ipfsGateway } from '../../site.config'
-import Dropzone, { FileDropzone } from './Dropzone'
+import Dropzone from './Dropzone'
 import styles from './Add.module.css'
 import Loader from './Loader'
 import useIpfsApi from '../hooks/use-ipfs-api'
 import { FileIpfs } from '../@types/ipfs'
+import { FileWithPath } from 'react-dropzone'
+
+function FileLink({
+  file,
+  cidFolder,
+  cid
+}: {
+  file: FileIpfs
+  cidFolder: string
+  cid?: string
+}) {
+  const title = cid ? `ipfs://${cid}` : `ipfs://${cidFolder}/${file.path}`
+  const href = cid
+    ? `${ipfsGateway}/ipfs/${cid}`
+    : `${ipfsGateway}/ipfs/${cidFolder}/${file.path}`
+
+  return cidFolder !== cid ? (
+    <a
+      className={styles.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    >
+      {title}
+    </a>
+  ) : null
+}
+
+function Files({ files }: { files: FileIpfs[] }) {
+  const cidFolder = files.filter((file) => file.path === '')[0].cid.toString()
+
+  return (
+    <ul className={styles.files}>
+      {files?.map((file) => (
+        <li key={file.path}>
+          <h3 className={styles.title}>
+            {file.path === '' ? 'Folder with all files' : file.path}
+          </h3>
+          <FileLink
+            file={file}
+            cidFolder={cidFolder}
+            cid={file.cid.toString()}
+          />
+          <p>
+            <FileLink file={file} cidFolder={cidFolder} />
+          </p>
+        </li>
+      ))}
+    </ul>
+  )
+}
 
 export default function Add(): ReactElement {
   const { ipfs, isIpfsReady, ipfsError, addFiles } = useIpfsApi()
@@ -13,7 +64,7 @@ export default function Add(): ReactElement {
   const [message] = useState()
   const [error, setError] = useState<string>()
 
-  async function handleOnDrop(acceptedFiles: FileDropzone[]): Promise<void> {
+  async function handleOnDrop(acceptedFiles: FileWithPath[]): Promise<void> {
     if (!acceptedFiles || !ipfs || !isIpfsReady) return
 
     setLoading(true)
@@ -21,7 +72,6 @@ export default function Add(): ReactElement {
 
     try {
       const addedFiles = await addFiles(acceptedFiles)
-      if (!addedFiles) return
       setFiles(addedFiles)
       setLoading(false)
     } catch (error) {
@@ -35,19 +85,7 @@ export default function Add(): ReactElement {
       {loading ? (
         <Loader message={message} />
       ) : files?.length ? (
-        <ul style={{ textAlign: 'left' }}>
+        <Files files={files} />
-          {files?.map((file: FileIpfs) => (
-            <li key={file.path}>
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={`${ipfsGateway}/ipfs/${file.cid.toString()}`}
-              >
-                ipfs://{file.path}
-              </a>
-            </li>
-          ))}
-        </ul>
       ) : (
         <Dropzone
           multiple

src/components/Dropzone.tsx

@@ -1,18 +1,14 @@
 import React, { useCallback, ReactElement } from 'react'
-import { useDropzone } from 'react-dropzone'
+import { FileWithPath, useDropzone } from 'react-dropzone'
 import styles from './Dropzone.module.css'
 
-export interface FileDropzone extends File {
-  path: string
-}
-
 export default function Dropzone({
   handleOnDrop,
   disabled,
   multiple,
   error
 }: {
-  handleOnDrop(files: FileDropzone[]): void
+  handleOnDrop(files: FileWithPath[]): void
   disabled?: boolean
   multiple?: boolean
   error?: string

src/hooks/use-ipfs-api.tsx

@@ -4,15 +4,15 @@ import type { IPFSHTTPClient } from 'ipfs-http-client'
 import type { CIDVersion } from 'multiformats/cid'
 import { ipfsNodeUri } from '../../site.config'
 import { formatBytes } from '../utils'
-import { FileDropzone } from '../components/Dropzone'
 import type { FileIpfs } from '../@types/ipfs'
+import { FileWithPath } from 'react-dropzone'
 
 export interface IpfsApiValue {
   ipfs: IPFSHTTPClient | undefined
   version: string | undefined
   isIpfsReady: boolean
   ipfsError: string | undefined
-  addFiles: (files: FileDropzone[]) => Promise<FileIpfs[] | undefined>
+  addFiles: (files: FileWithPath[]) => Promise<FileIpfs[] | undefined>
 }
 
 const { hostname, port, protocol } = new URL(ipfsNodeUri)
@@ -30,11 +30,11 @@ export default function useIpfsApi(): IpfsApiValue {
   const [ipfsError, setIpfsError] = useState<string>()
 
   const addFiles = useCallback(
-    async (files: FileDropzone[]): Promise<FileIpfs[] | undefined> => {
+    async (files: FileWithPath[]): Promise<FileIpfs[] | undefined> => {
       if (!ipfs || !files?.length) return
 
       const ipfsFiles = [
-        ...files.map((file: FileDropzone) => {
+        ...files.map((file: FileWithPath) => {
           return { path: file.path, content: file }
         })
       ]

src/styles/_variables.css

@@ -29,7 +29,7 @@
 
   --font-weight-base: 400;
   --font-weight-bold: 700;
-  --line-height: 1.6;
+  --line-height: 1.4;
 
   --font-weight-headings: 500;
   --line-height-headings: 1.1;