Use indexedDB for caching

package.json

@@ -15,6 +15,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "idb": "^6.1.5",
     "moment": "^2.29.1",
     "node-sass": "^6.0.1",
     "notistack": "^2.0.3",

src/cache.ts

@@ -0,0 +1,37 @@
+import { openDB, IDBPDatabase } from "idb"
+import { client } from "./socialvoid"
+
+let _db: IDBPDatabase | undefined
+
+async function getDB() {
+  if (typeof _db !== "undefined") {
+    return _db
+  }
+
+  _db = await openDB("socialvoidCaches", 1, {
+    upgrade(db) {
+      db.createObjectStore("documents")
+    },
+  })
+  return _db
+}
+
+async function getStore() {
+  return (await getDB())
+    .transaction("documents", "readwrite")
+    .objectStore("documents")
+}
+
+export async function getDocument(id: string): Promise<string> {
+  const cache = await (await getStore()).get(id)
+
+  if (typeof cache !== "undefined") {
+    return URL.createObjectURL(new Blob([cache]))
+  }
+
+  const data = (await client.cdn.download(id)) as ArrayBuffer
+
+  await (await getStore()).put(data, id)
+
+  return URL.createObjectURL(new Blob([data]))
+}

src/components/Post.tsx

@@ -6,7 +6,8 @@ import CardHeader from "@mui/material/CardHeader"
 import CardMedia from "@mui/material/CardMedia"
 import Typography from "@mui/material/Typography"
 import { Post as TypePost } from "socialvoid"
-import { dispatch, getDocumentSrc } from "../socialvoid"
+import { getDocument } from "../cache"
+import { dispatch } from "../socialvoid"
 
 export default class Post extends Component<
   { post: TypePost },
@@ -22,7 +23,7 @@ export default class Post extends Component<
       const attachmentSrcs = new Array<string>()
 
       for (const document of this.props.post.attachments) {
-        attachmentSrcs.push(await getDocumentSrc(document))
+        attachmentSrcs.push(await getDocument(document.id))
       }
 
       this.setState({ attachmentSrcs })

src/socialvoid.ts

@@ -1,23 +1,9 @@
 import { NavigateFunction } from "react-router-dom"
 import { ProviderContext } from "notistack"
-import { Client, Document, errors } from "socialvoid"
+import { Client, errors } from "socialvoid"
 
 export const client = new Client()
 
-export async function getDocumentSrc(document: Document) {
-  const cachedSrc = localStorage.getItem(document.id)
-
-  if (cachedSrc) {
-    return cachedSrc
-  }
-
-  const blob = await client.cdn.download(document, true)
-  const src = URL.createObjectURL(blob)
-
-  sessionStorage.setItem(document.id, src)
-  return src
-}
-
 export async function dispatch(
   func: (client: Client) => Promise<void> | void,
   opts?: {

yarn.lock

@@ -6379,6 +6379,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
+idb@^6.1.5:
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b"
+  integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw==
+
 identity-obj-proxy@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"