pleroma-fe/src/stores/drafts.js

import { defineStore } from 'pinia'

import { storage } from 'src/lib/storage.js'

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 (ids) => {
  const currentData = (await getStorageData()) ?? {}
  ids.forEach((id) => {
    delete currentData[id]
  })
  await storage.setItem(storageKey, currentData)
}

export const useDraftsStore = defineStore('drafts', {
  state: () => ({
    drafts: new Map(),
  }),
  getters: {
    draftsByTypeAndRefId(state) {
      return (type, refId) => {
        return [...state.drafts.values()].filter(
          (draft) => draft.type === type && draft.refId === refId,
        )
      }
    },
    draftsArray(state) {
      return [...state.drafts.values()]
    },
    draftsCount(state) {
      return state.drafts.size
    },
  },
  actions: {
    async abandonDraft(id) {
      this.drafts.delete(id)
      await deleteDraftFromStorage([id])
    },
    async loadDrafts() {
      const currentData = await getStorageData()
      this.drafts = new Map(Object.entries(currentData))
    },
    async addOrSaveDraft(draft) {
      const id = draft.id ?? new Date().getTime().toString()
      const draftWithId = { ...draft, id }
      this.drafts.set(draft.id, draftWithId)
      await saveDraftToStorage(draftWithId)
      return id
    },
    async abandonAllDrafts(store) {
      const ids = this.drafts.keys()
      ids.forEach((id) => this.abandonDraft(id))
      await deleteDraftFromStorage(ids)
    },
  },
})