feat: create initial data migration

assets/js/BackupHelper.ts

@@ -71,3 +71,57 @@ export async function restoreBackupState(backupState: IBackupState): Promise<voi
 
   }
 }
+
+export function doesHaveOldVersionState(): boolean {
+  if (localStorage.getItem('vuex-user'))
+    return true
+
+  return false
+}
+
+export function migrateOldVersionState(): void {
+  const { tagCollections } = useTagCollections()
+  const userSettings = useUserSettings()
+  const { booruList } = useBooruList()
+
+  if (!localStorage.getItem('vuex-user')) {
+    return
+  }
+
+  const vuexUser: VuexUser = JSON.parse(localStorage.getItem('vuex-user')!)
+
+  // Migrate settings
+  if (vuexUser.settings.touchGestures)
+    userSettings.navigationTouchGestures = vuexUser.settings.touchGestures.value
+
+  if (vuexUser.settings.fullSizeImages)
+    userSettings.postFullSizeImages = vuexUser.settings.fullSizeImages.value
+
+  if (vuexUser.settings.postsPerPage)
+    userSettings.postsPerPage = vuexUser.settings.postsPerPage.value
+
+  // Migrate tag collections
+  if (vuexUser.custom.tagCollections) {
+    tagCollections.value = union(tagCollections.value, vuexUser.custom.tagCollections)
+  }
+
+  // Migrate Boorus
+  const vuexUserBoorusMigrated = vuexUser.custom.boorus.map(booru => {
+    // TODO: Find defaults and return that
+
+    return {
+      domain: booru.domain,
+
+      type: booruTypeList.find(type => type.type === booru.type),
+
+      isPremium: true
+    }
+  }) as Domain[]
+
+  booruList.value = union(booruList.value, vuexUserBoorusMigrated)
+
+  // Migrate saved posts
+
+
+  localStorage.removeItem('vuex-user')
+}

assets/js/oldLocalStorage.dto.ts

@@ -0,0 +1,94 @@
+export interface VuexUser {
+  custom: Custom
+  settings: Settings
+}
+
+interface Custom {
+  boorus: Booru[]
+  tagCollections: TagCollection[]
+  savedPosts: SavedPost[]
+}
+
+interface Booru {
+  domain: string
+  type: string
+  nsfw: boolean
+  config: any
+}
+
+interface TagCollection {
+  name: string
+  tags: string[]
+}
+
+interface SavedPost {
+  id: string
+  data: Data
+  meta_data: MetaData
+}
+
+interface Data {
+  id: number
+  score?: number
+  high_res_file: HighResFile
+  low_res_file: LowResFile
+  preview_file: PreviewFile
+  tags: Tags
+  rating: string
+  media_type: string
+  sources: any[]
+}
+
+interface HighResFile {
+  url: string
+  width: number
+  height: number
+}
+
+interface LowResFile {
+  url: string
+  width: number
+  height: number
+}
+
+interface PreviewFile {
+  url: string
+  width: number
+  height: number
+}
+
+interface Tags {
+  character: any[]
+  copyright: any[]
+  artist: any[]
+  general: string[]
+  meta: any[]
+}
+
+interface MetaData {
+  booru_domain: string
+  created_at: string
+}
+
+interface Settings {
+  touchGestures: TouchGestures
+  fullSizeImages: FullSizeImages
+  postsPerPage: PostsPerPage
+  score: Score
+}
+
+interface TouchGestures {
+  value: boolean
+}
+
+interface FullSizeImages {
+  value: boolean
+}
+
+interface PostsPerPage {
+  value: number
+}
+
+interface Score {
+  value: number
+}

components/pages/posts/navigation/search/TagCollections.vue

@@ -3,7 +3,7 @@ import { DialogTitle } from '@headlessui/vue'
 import Tag from '~/assets/js/tag.dto'
 import { Cog6ToothIcon, PlusIcon, TagIcon } from '@heroicons/vue/24/outline'
 import { toast } from 'vue-sonner'
-import TagCollection from '~/assets/js/tagCollection.dto'
+import { TagCollection } from '~/assets/js/tagCollection.dto'
 
 const props = defineProps<{
   selectedTags: Tag[]

composables/useTagCollections.ts

@@ -1,5 +1,5 @@
 import { useStorage, useToggle } from '@vueuse/core'
-import TagCollection from '~/assets/js/tagCollection.dto'
+import { TagCollection } from '~/assets/js/tagCollection.dto'
 import { cloneDeep } from 'lodash-es'
 
 const defaultTagCollections: TagCollection[] = [

pages/premium/dashboard.vue

@@ -1,5 +1,6 @@
 <script lang='ts' setup>
 import { ArrowLeftOnRectangleIcon } from '@heroicons/vue/24/solid'
+import { doesHaveOldVersionState } from '~/assets/js/BackupHelper'
 
 const { data, signOut: _signOut } = useAuth()
 
@@ -26,6 +27,17 @@ const links = [
   }
 ]
 
+const doesHaveOldVersionStateData = doesHaveOldVersionState()
+
+if (doesHaveOldVersionStateData) {
+  links.unshift({
+    name: '⚠ Migrate old data ⚠',
+    description: 'Migrate your old saved posts, tag collections, etc',
+    href: '/premium/migrate-old-data'
+  })
+}
+
+
 function signOut() {
   _signOut()
   window.location.reload()

pages/premium/migrate-old-data.vue

@@ -0,0 +1,32 @@
+<script lang='ts' setup>
+import PageHeader from '~/components/layout/PageHeader.vue'
+
+useSeoMeta({
+  title: 'Migrate old data'
+})
+
+// definePageMeta({ middleware: 'auth' })
+</script>
+
+<template>
+  <main class='container mx-auto max-w-3xl flex-1 px-4 py-4 sm:px-6 lg:px-8'>
+    <!-- -->
+
+    <PageHeader>
+      <template #title>Migrate old data</template>
+      <template #text>
+        <div class='text-sm'>
+          With the new version of the app, we have changed the way we store your data.
+
+          This means that you will need to migrate your data to the new format.
+
+          Don't worry, we will do this for you automatically once you click the button below.
+        </div>
+      </template>
+    </PageHeader>
+
+    <section class='mt-8 flex justify-around'>
+      <!-- -->
+    </section>
+  </main>
+</template>

test/feature/pages/premium/migrate-old-data.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import { createPage, setup } from '@nuxt/test-utils'
+
+describe('/premium/migrate-old-data', async () => {
+  await setup({
+    browser: true
+  })
+
+  it('renders', async () => {
+    const page = await createPage('/premium/migrate-old-data')
+
+    await page.waitForSelector('h1')
+
+    expect(await page.textContent('h1')).toBe('Migrate old data')
+  })
+
+  it('migrates old data', async () => {
+    const page = await createPage('/premium/migrate-old-data')
+
+    // Load data to localStorage
+
+    // Click Button
+
+    // Check data is in IndexedDB & localStorage
+  })
+})