From 6d9779a49788d881b29a49e283562bdfccf2d212 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Sun, 12 Mar 2023 13:00:09 -0700
Subject: [PATCH] Fix hydration issue + Edit Page (#1043)

---
 nuxt.config.js                          |  3 +++
 pages/[type]/[id]/version/[version].vue |  6 ++++--
 plugins/1.theme.js                      | 25 +++++++++++++++++++++++++
 plugins/{1.state.js => 2.state.js}      |  0
 plugins/2.theme.js                      | 24 ------------------------
 5 files changed, 32 insertions(+), 26 deletions(-)
 create mode 100644 plugins/1.theme.js
 rename plugins/{1.state.js => 2.state.js} (100%)
 delete mode 100644 plugins/2.theme.js

diff --git a/nuxt.config.js b/nuxt.config.js
index 0dce8699..19832531 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -256,6 +256,9 @@ export default defineNuxtConfig({
         children: [],
       })
     },
+    'app:created'() {
+      console.log('beforeeeee')
+    },
   },
   runtimeConfig: {
     apiBaseUrl: process.env.BASE_URL ?? getApiUrl(),
diff --git a/pages/[type]/[id]/version/[version].vue b/pages/[type]/[id]/version/[version].vue
index 8d6cb02a..b78f07f1 100644
--- a/pages/[type]/[id]/version/[version].vue
+++ b/pages/[type]/[id]/version/[version].vue
@@ -800,6 +800,10 @@ export default defineNuxtComponent({
 
     let replaceFile = null
 
+    if (mode === 'edit') {
+      isEditing = true
+    }
+
     if (route.params.version === 'create') {
       isCreating = true
       isEditing = true
@@ -839,8 +843,6 @@ export default defineNuxtComponent({
           console.error('Error parsing version file data', err)
         }
       }
-    } else if (mode === 'edit') {
-      isEditing = true
     } else if (route.params.version === 'latest') {
       let versionList = props.versions
       if (route.query.loader) {
diff --git a/plugins/1.theme.js b/plugins/1.theme.js
new file mode 100644
index 00000000..029130a9
--- /dev/null
+++ b/plugins/1.theme.js
@@ -0,0 +1,25 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const themeStore = useTheme()
+
+  // TODO: Temporarily removed as it was causing hydration issues
+  // nuxtApp.hook('app:mounted', () => {
+  //   if (process.client && themeStore.value.preference === 'system') {
+  //     const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
+  //
+  //     const setColorScheme = (e) => {
+  //       if (themeStore.value.preference === 'system') {
+  //         if (e.matches) {
+  //           updateTheme('light')
+  //         } else {
+  //           updateTheme('dark')
+  //         }
+  //       }
+  //     }
+  //
+  //     setColorScheme(colorSchemeQueryList)
+  //     colorSchemeQueryList.addEventListener('change', setColorScheme)
+  //   }
+  // })
+
+  nuxtApp.provide('colorMode', themeStore.value)
+})
diff --git a/plugins/1.state.js b/plugins/2.state.js
similarity index 100%
rename from plugins/1.state.js
rename to plugins/2.state.js
diff --git a/plugins/2.theme.js b/plugins/2.theme.js
deleted file mode 100644
index 78dd3cc9..00000000
--- a/plugins/2.theme.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  const themeStore = useTheme()
-
-  if (process.client && themeStore.value.preference === 'system') {
-    setTimeout(() => {
-      const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)')
-
-      const setColorScheme = (e) => {
-        if (themeStore.value.preference === 'system') {
-          if (e.matches) {
-            updateTheme('light')
-          } else {
-            updateTheme('dark')
-          }
-        }
-      }
-
-      setColorScheme(colorSchemeQueryList)
-      colorSchemeQueryList.addEventListener('change', setColorScheme)
-    }, 100)
-  }
-
-  nuxtApp.provide('colorMode', themeStore.value)
-})