feat: add website and folder upload and download (#260)

* feat: add website and folder upload and download

* feat: download-share-upload navigation

* fix: check for files length in hasIndexDocument

* fix: change router dependency

* refactor: switch to @ethersphere/manfest-js

* fix: hide previews on dropzone, fix spinner align, hide 0 size display

* feat: add upload and download history

* refactor: change drag and drop text

* feat: make history ux better

* refactor: improve code based on review

* build: add missing react-router dependency

* ci: remove beeload

* revert(ci): remove beeload

This reverts commit 4ce6cb0045a2d9aea3047ab395d214d8d368c532.

src/utils/date.ts

@@ -0,0 +1,5 @@
+export function getPrettyDateString(date: Date): string {
+  const string = date.toString()
+
+  return string.split('GMT')[0].trim()
+}

src/utils/file.ts

@@ -49,3 +49,25 @@ export function convertBeeFileToBrowserFile(file: FileData<ArrayBuffer>): Partia
     arrayBuffer: () => new Promise(resolve => resolve(file.data)),
   }
 }
+
+export function convertManifestToFiles(files: Record<string, string>): SwarmFile[] {
+  return Object.entries(files).map(
+    x =>
+      ({
+        name: x[0],
+        path: x[0],
+        type: 'n/a',
+        size: 0,
+        webkitRelativePath: x[0],
+        arrayBuffer: () => new Promise(resolve => resolve(new ArrayBuffer(0))),
+      } as SwarmFile),
+  )
+}
+
+export function getAssetNameFromFiles(files: SwarmFile[]): string {
+  if (files.length === 1) {
+    return files[0].name
+  }
+
+  return files[0].path.split('/')[0]
+}

src/utils/hash.ts

@@ -0,0 +1,3 @@
+export function shortenHash(hash: string, sliceLength = 8): string {
+  return `${hash.slice(0, sliceLength)}[…]${hash.slice(-sliceLength)}`
+}

src/utils/local-storage.ts

@@ -0,0 +1,70 @@
+import { shortenHash } from './hash'
+
+export enum HISTORY_KEYS {
+  UPLOAD_HISTORY = 'UPLOAD_HISTORY',
+  DOWNLOAD_HISTORY = 'DOWNLOAD_HISTORY',
+}
+
+export interface HistoryItem {
+  createdAt: number
+  name: string
+  hash: string
+}
+
+export function putHistory(key: string, hash: string, name: string): void {
+  const history = getHistorySafe(key)
+
+  const existingIndex = history.findIndex(x => x.hash === hash)
+
+  if (existingIndex !== -1) {
+    history.splice(existingIndex, 1)
+  }
+
+  history.unshift({
+    createdAt: Date.now(),
+    hash,
+    name,
+  })
+
+  if (history.length > 10) {
+    history.length = 10
+  }
+  localStorage.setItem(key, JSON.stringify(history))
+}
+
+export function getHistorySafe(key: string): HistoryItem[] {
+  const items = localStorage.getItem(key)
+
+  if (!items) {
+    return []
+  }
+  try {
+    const parsed = JSON.parse(items)
+
+    if (!Array.isArray(parsed) || !parsed.every(isHistoryItem)) {
+      return []
+    }
+
+    return parsed
+  } catch {
+    return []
+  }
+}
+
+function isHistoryItem(x: unknown): x is HistoryItem {
+  if (typeof x !== 'object' || x === null) {
+    return false
+  }
+
+  return 'createdAt' in x && 'hash' in x
+}
+
+export function determineHistoryName(hash: string, indexDocument?: string | null): string {
+  if (indexDocument === 'index.html') {
+    return `Website ${shortenHash(hash, 4)}`
+  } else if (indexDocument) {
+    return indexDocument
+  }
+
+  return `Folder ${shortenHash(hash, 4)}`
+}