Save drafts permanently in local storage

src/modules/drafts.js

@@ -1,3 +1,4 @@
+import { storage } from 'src/lib/storage.js'
 
 export const defaultState = {
   drafts: {}
@@ -9,17 +10,55 @@ export const mutations = {
   },
   abandonDraft (state, { id }) {
     delete state.drafts[id]
+  },
+  loadDrafts (state, data) {
+    state.drafts = data
   }
 }
 
+const storageKey = 'pleroma-fe-drafts'
+
+/*
+ * Note: we do not use the persist state plugin because
+ * it is not impossible for a user to have two windows at
+ * the same time. The persist state plugin is just overriding
+ * everything with the current state. This isn't good because
+ * if a draft is created in one window and another draft is
+ * created in another, the draft in the first window will just
+ * be overriden.
+ * Here, we can't guarantee 100% atomicity unless one uses
+ * different keys, which will just pollute the whole storage.
+ * It is indeed best to have backend support for this.
+ */
+const getStorageData = async () => ((await storage.getItem(storageKey)) || {})
+
+const saveDraftToStorage = async (draft) => {
+  const currentData = await getStorageData()
+  currentData[draft.id] = JSON.parse(JSON.stringify(draft))
+  await storage.setItem(storageKey, currentData)
+}
+
+const deleteDraftFromStorage = async (id) => {
+  const currentData = await getStorageData()
+  delete currentData[id]
+  await storage.setItem(storageKey, currentData)
+}
+
 export const actions = {
-  addOrSaveDraft (store, { draft }) {
+  async addOrSaveDraft (store, { draft }) {
     const id = draft.id || (new Date().getTime()).toString()
-    store.commit('addOrSaveDraft', { draft: { ...draft, id } })
+    const draftWithId = { ...draft, id }
+    store.commit('addOrSaveDraft', { draft: draftWithId })
+    await saveDraftToStorage(draftWithId)
     return id
   },
-  abandonDraft (store, { id }) {
+  async abandonDraft (store, { id }) {
     store.commit('abandonDraft', { id })
+    await deleteDraftFromStorage(id)
+  },
+  async loadDrafts (store) {
+    const currentData = await getStorageData()
+    store.commit('loadDrafts', currentData)
   }
 }