refactor: move persistence logic into a dedicated service (#3493)

packages/hoppscotch-common/src/modules/i18n.ts

@@ -1,14 +1,15 @@
-import * as R from "fp-ts/Record"
 import * as A from "fp-ts/Array"
-import * as O from "fp-ts/Option"
 import { pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as R from "fp-ts/Record"
 import { createI18n, I18n, I18nOptions } from "vue-i18n"
 import { HoppModule } from "."
 
 import languages from "../../languages.json"
 
 import { throwError } from "~/helpers/functional/error"
-import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import { PersistenceService } from "~/services/persistence"
+import { getService } from "./dioc"
 
 /*
   In context of this file, we have 2 main kinds of things.
@@ -44,6 +45,8 @@ type LanguagesDef = {
 
 const FALLBACK_LANG_CODE = "en"
 
+const persistenceService = getService(PersistenceService)
+
 // TypeScript cannot understand dir is restricted to "ltr" or "rtl" yet, hence assertion
 export const APP_LANGUAGES: LanguagesDef[] = languages as LanguagesDef[]
 
@@ -69,7 +72,7 @@ let i18nInstance: I18n<
 const resolveCurrentLocale = () =>
   pipe(
     // Resolve from locale and make sure it is in languages
-    getLocalConfig("locale"),
+    persistenceService.getLocalConfig("locale"),
     O.fromNullable,
     O.filter((locale) =>
       pipe(
@@ -118,7 +121,7 @@ export const changeAppLanguage = async (locale: string) => {
   // TODO: Look into the type issues here
   i18nInstance.global.locale.value = locale
 
-  setLocalConfig("locale", locale)
+  persistenceService.setLocalConfig("locale", locale)
 }
 
 /**
@@ -145,7 +148,7 @@ export default <HoppModule>{
     const currentLocale = resolveCurrentLocale()
     changeAppLanguage(currentLocale)
 
-    setLocalConfig("locale", currentLocale)
+    persistenceService.setLocalConfig("locale", currentLocale)
   },
   onBeforeRouteChange(to, _, router) {
     // Convert old locale path format to new format

packages/hoppscotch-common/src/modules/theming.ts

@@ -1,22 +1,26 @@
-import { usePreferredDark, useStorage } from "@vueuse/core"
-import { App, computed, reactive, Ref, watch } from "vue"
-import type { HoppBgColor } from "~/newstore/settings"
 import { useSettingStatic } from "@composables/settings"
+import { usePreferredDark, useStorage } from "@vueuse/core"
+import { App, Ref, computed, reactive, watch } from "vue"
+
+import type { HoppBgColor } from "~/newstore/settings"
+import { PersistenceService } from "~/services/persistence"
 import { HoppModule } from "."
-import { hoppLocalConfigStorage } from "~/newstore/localpersistence"
+import { getService } from "./dioc"
 
 export type HoppColorMode = {
   preference: HoppBgColor
   value: Readonly<Exclude<HoppBgColor, "system">>
 }
 
+const persistenceService = getService(PersistenceService)
+
 const applyColorMode = (app: App) => {
   const [settingPref] = useSettingStatic("BG_COLOR")
 
   const currentLocalPreference = useStorage<HoppBgColor>(
     "nuxt-color-mode",
     "system",
-    hoppLocalConfigStorage,
+    persistenceService.hoppLocalConfigStorage,
     {
       listenToStorageChanges: true,
     }