feat(migrate old data): migrate tag collections correctly and complet…

…e page

assets/js/BackupHelper.ts

@@ -1,7 +1,7 @@
 import { db as postsDb, type ISavedPost } from '~/store/SavedPosts'
 import type { ITagCollection } from '~/assets/js/tagCollection.dto'
 import type { VuexUser } from '~/assets/js/oldLocalStorage.dto'
-import { union } from 'lodash-es'
+import { cloneDeep, toLower, union } from 'lodash-es'
 import type { Domain } from '~/assets/js/domain'
 import { booruTypeList } from '~/assets/lib/rule-34-shared-resources/src/util/BooruUtils'
 
@@ -79,6 +79,13 @@ export function doesHaveOldVersionState(): boolean {
   return false
 }
 
+export function removeOldVersionState() {
+  localStorage.removeItem('vuex-root')
+  localStorage.removeItem('vuex-user')
+  localStorage.removeItem('vuex-booru')
+  localStorage.removeItem('vuex-notifications')
+}
+
 export function migrateOldVersionState(): void {
   const { tagCollections } = useTagCollections()
   const userSettings = useUserSettings()
@@ -91,22 +98,22 @@ export function migrateOldVersionState(): void {
   const vuexUser: VuexUser = JSON.parse(localStorage.getItem('vuex-user')!)
 
   // Migrate settings
-  if (vuexUser.settings.touchGestures)
-    userSettings.navigationTouchGestures = vuexUser.settings.touchGestures.value
+  if (vuexUser.user.settings.touchGestures)
+    userSettings.navigationTouchGestures = vuexUser.user.settings.touchGestures.value
 
-  if (vuexUser.settings.fullSizeImages)
-    userSettings.postFullSizeImages = vuexUser.settings.fullSizeImages.value
+  if (vuexUser.user.settings.fullSizeImages)
+    userSettings.postFullSizeImages = vuexUser.user.settings.fullSizeImages.value
 
-  if (vuexUser.settings.postsPerPage)
-    userSettings.postsPerPage = vuexUser.settings.postsPerPage.value
+  if (vuexUser.user.settings.postsPerPage)
+    userSettings.postsPerPage = vuexUser.user.settings.postsPerPage.value
 
   // Migrate tag collections
-  if (vuexUser.custom.tagCollections) {
-    tagCollections.value = union(tagCollections.value, vuexUser.custom.tagCollections)
+  if (vuexUser.user.custom.tagCollections) {
+    tagCollections.value = mergeBlocklists(tagCollections.value, vuexUser.user.custom.tagCollections)
   }
 
   // Migrate Boorus
-  const vuexUserBoorusMigrated = vuexUser.custom.boorus.map(booru => {
+  const vuexUserBoorusMigrated = vuexUser.user.custom.boorus.map(booru => {
     // TODO: Find defaults and return that
 
     return {
@@ -123,5 +130,31 @@ export function migrateOldVersionState(): void {
   // Migrate saved posts
 
 
-  localStorage.removeItem('vuex-user')
+  removeOldVersionState()
+}
+
+function mergeTags(tags1: string[], tags2: string[]): string[] {
+  return union(tags1, tags2)
+}
+
+function mergeBlocklists(list1: ITagCollection[], list2: ITagCollection[]): ITagCollection[] {
+  const mergedList: ITagCollection[] = cloneDeep(list1)
+
+  list2.forEach((item2) => {
+
+    const existingItem = mergedList.find((item1) =>
+      toLower(item1.name) === toLower(item2.name)
+    )
+
+    // If an item with the same name exists, merge their tags
+    if (existingItem) {
+      existingItem.tags = mergeTags(existingItem.tags, item2.tags)
+
+      // Otherwise, add the new item to the merged list
+    } else {
+      mergedList.push(item2)
+    }
+  })
+
+  return mergedList
 }

assets/js/oldLocalStorage.dto.ts

@@ -1,6 +1,8 @@
 export interface VuexUser {
-  custom: Custom
-  settings: Settings
+  user: {
+    custom: Custom
+    settings: Settings
+  }
 }
 
 interface Custom {
@@ -29,7 +31,7 @@ interface SavedPost {
 
 interface Data {
   id: number
-  score?: number
+  score: number | null
   high_res_file: HighResFile
   low_res_file: LowResFile
   preview_file: PreviewFile

package.json

@@ -13,7 +13,8 @@
     "analyze": "nuxt build --analyze",
     "generate-pwa-assets": "pwa-assets-generator",
     "__": "",
-    "test": "vitest",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "___": "",
     "release": "standard-version",
     "release:publish": "git push --follow-tags origin main",

pages/premium/migrate-old-data.vue

@@ -1,5 +1,29 @@
 <script lang='ts' setup>
 import PageHeader from '~/components/layout/PageHeader.vue'
+import { migrateOldVersionState, removeOldVersionState } from '~/assets/js/BackupHelper'
+import { toast } from 'vue-sonner'
+
+function migrateOldData() {
+
+  try {
+    migrateOldVersionState()
+  } catch (error) {
+    toast.error('Error migrating data: ' + error.message)
+    throw error
+  }
+
+  toast.success('Old data migrated successfully!')
+
+  navigateTo('/premium')
+}
+
+function removeOldData() {
+  removeOldVersionState()
+
+  toast.success('Old data removed successfully!')
+
+  navigateTo('/premium')
+}
 
 useSeoMeta({
   title: 'Migrate old data'
@@ -16,17 +40,35 @@ useSeoMeta({
       <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.
+          With the new version of the app, the data structure has changed
+          <br>
+          <br>
+          - If you want to keep your old saved posts, tag collections, settings, etc. you need to migrate your data
+          <br>
+          <br>
+          - If you want to start fresh, you can remove your old data (recommended)
         </div>
       </template>
     </PageHeader>
 
     <section class='mt-8 flex justify-around'>
-      <!-- -->
+
+      <button
+        class='focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium ring-1 ring-base-0/20'
+        type='button'
+        @click='removeOldData'
+      >
+        Remove data
+      </button>
+
+      <button
+        class='focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium ring-1 ring-base-0/20'
+        type='button'
+        @click='migrateOldData'
+      >
+        Migrate data
+      </button>
+
     </section>
   </main>
 </template>