fix(nuxt3): change use case of useFetch

LarchLiu · Jan 27, 2024 · c24c1ed · c24c1ed · vercel · Jan 27, 2024
1 parent facd8f6
commit c24c1ed
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 66 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/server/nuxt3/composables/push-notifications.ts b/server/nuxt3/composables/push-notifications.ts
@@ -1,14 +1,11 @@
 /* eslint-disable no-console */
-import { v4 as uuidv4 } from 'uuid'
-
 const supportsPushNotifications = typeof window !== 'undefined'
   && 'serviceWorker' in navigator
   && 'PushManager' in window
   && 'Notification' in window
   && 'getKey' in PushSubscription.prototype
-const clientId = useLocalStorage('clientId', uuidv4())
 
-export function usePushManager() {
+export function usePushManager(clientId: Ref<string>) {
   const runtimeConfig = useRuntimeConfig()
 
   function urlBase64ToUint8Array(base64String: string) {
@@ -85,10 +82,6 @@ export function usePushManager() {
           console.log('subscription !!!', { ...pushSubscription.toJSON(), clientId: clientId.value })
           return $fetch('/api/subscriptions', {
             method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Accept': 'application/json',
-            },
             body: { ...pushSubscription.toJSON(), clientId: clientId.value },
           })
         })

diff --git a/server/nuxt3/package.json b/server/nuxt3/package.json
@@ -45,6 +45,7 @@
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.26",
     "@iconify-json/eos-icons": "^1.1.10",
+    "@iconify-json/fad": "^1.1.9",
     "@iconify-json/logos": "^1.1.41",
     "@iconify-json/twemoji": "^1.1.15",
     "@nuxt/devtools": "^1.0.6",

diff --git a/server/nuxt3/pages/index.vue b/server/nuxt3/pages/index.vue
@@ -1,18 +1,18 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
 import type { StorageData } from '@stargram/core/storage'
+import { v4 as uuidv4 } from 'uuid'
 
 const cardWidth = 350
 const cardHeight = 246
 type LoadMoreStatus = 'idle' | 'loading' | 'no-more' | 'error'
 
-// const runtimeConfig = useRuntimeConfig()
+const clientId = useLocalStorage('clientId', uuidv4())
 const {
   shouldAskNotifications,
   askForNotificationPermission,
-} = usePushManager()
+} = usePushManager(clientId)
 const userId = useLocalStorage('userId', '')
-// const clientId = useLocalStorage('clientId', uuidv4())
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const pageSize = computed(() => {
   return Math.floor(windowWidth.value / cardWidth) * 10

diff --git a/server/nuxt3/pages/settings.vue b/server/nuxt3/pages/settings.vue
@@ -8,14 +8,14 @@ const _userId = ref('')
 const edit = ref(false)
 
 async function getConfigCode() {
-  const { data } = await useFetch<string>('/api/stargram-user-config', {
+  const data = await $fetch<string>('/api/stargram/user-config', {
     method: 'POST',
     body: {
       userId: _userId.value ? _userId.value : userId.value,
     },
   })
 
-  return data.value
+  return data
 }
 
 async function redirectToConfig() {
@@ -40,16 +40,16 @@ async function redirectToConfig() {
             class="rounded-[4px] text-[#636161]"
             type="text"
             border="1px solid #636161"
-            w-350px p-2px
+            w-340px p-2px
           >
-          <div uno-carbon-rotate-360 ml-1 title="Refresh" h-24px w-24px cursor-pointer @click="_userId = uuidv4()" />
+          <div uno-fad-random-1dice ml-1 title="Refresh" h-32px w-32px cursor-pointer @click="_userId = uuidv4()" />
           <div uno-carbon-copy title="Copy" ml-1 h-24px w-24px cursor-pointer @click="copy(_userId)" />
         </div>
         <div mt-4 flex justify-center>
-          <button btn @click="userId = _userId">
+          <button btn :disabled="!_userId" @click="userId = _userId">
             Save
           </button>
-          <button ml-4 btn @click="redirectToConfig()">
+          <button ml-4 btn :disabled="(!userId && !_userId) || (edit && !_userId)" @click="redirectToConfig()">
             Config
           </button>
         </div>

diff --git a/server/nuxt3/pages/share-target.vue b/server/nuxt3/pages/share-target.vue
@@ -7,9 +7,6 @@ const text = ref('')
 const userId = useLocalStorage('userId', '')
 const clientId = useLocalStorage('clientId', uuidv4())
 const toast = useToast()
-const _userId = ref(uuidv4())
-const { copy } = useClipboard()
-const router = useRouter()
 
 useWebShareTarget(async ({ data: { data, action } }: any) => {
   if (action !== 'compose-with-shared-data')
@@ -70,23 +67,6 @@ function saveWebInfo(text: string) {
     })
   }
 }
-
-async function getConfigUrl() {
-  const { data } = await useFetch<string>('/api/stargram-user-config', {
-    method: 'POST',
-    body: {
-      userId: _userId.value,
-    },
-  })
-
-  return data.value
-}
-
-async function redirectToConfig() {
-  const encode = await getConfigUrl()
-  if (encode)
-    router.push(`/user-config?code=${encode}`)
-}
 </script>
 
 <template>
@@ -113,24 +93,12 @@ async function redirectToConfig() {
       <div v-else mt-4>
         <div flex flex-col>
           There is no user config.
-          <div mt-4>
-            User ID
-          </div>
-          <div mt-2 flex items-center>
-            <input
-              v-model="_userId"
-              class="rounded-[4px] text-[#636161]"
-              type="text"
-              border="1px solid #636161"
-              w-350px p-2px
-            >
-            <div uno-carbon-rotate-360 ml-1 title="Refresh" h-24px w-24px cursor-pointer @click="_userId = uuidv4()" />
-            <div uno-carbon-copy title="Copy" ml-1 h-24px w-24px cursor-pointer @click="copy(_userId)" />
-          </div>
           <div mt-4 flex justify-center>
-            <button btn @click="redirectToConfig()">
-              Config
-            </button>
+            <NuxtLink to="/settings">
+              <button btn>
+                Settings
+              </button>
+            </NuxtLink>
           </div>
         </div>
       </div>

diff --git a/server/nuxt3/pages/user-config.vue b/server/nuxt3/pages/user-config.vue
@@ -12,6 +12,7 @@ const slackBot = ref<Record<string, any>[]>([])
 const { code } = route.query
 const decode = cryption.decode(code as string)
 const { appName, appId, userId } = (decode && decode.includes('appName')) ? JSON.parse(decode) : { appName: '', appId: '', userId: '' }
+// useFetch just use on the setup top level
 const { data } = await useFetch<{ config: string }>(`/api/${appName}/${appId}/adduser`, {
   method: 'GET',
   query: {
@@ -62,24 +63,24 @@ const appConfig = computed(() => {
 })
 
 async function onChange(config: ServerConfig<OutUserConfig>) {
-  const { error } = await useFetch(`/api/${appName}/${appId}/adduser`, {
-    method: 'POST',
-    body: {
-      userId,
-      userConfig: cryption.encode(JSON.stringify(config)),
-    },
-  })
-  if (error.value) {
-    toast.add({ title: errorMessage(error.value), color: 'red', timeout: 2000, icon: 'i-carbon-warning' })
-  }
-  else {
+  try {
+    await $fetch(`/api/${appName}/${appId}/adduser`, {
+      method: 'POST',
+      body: {
+        userId,
+        userConfig: cryption.encode(JSON.stringify(config)),
+      },
+    })
     if (appName === 'stargram') {
       const id = useLocalStorage('userId', '')
       id.value = userId
     }
 
     toast.add({ title: 'success', color: 'green', timeout: 2000, icon: 'i-carbon-checkmark-outline' })
   }
+  catch (error) {
+    toast.add({ title: errorMessage(error), color: 'red', timeout: 2000, icon: 'i-carbon-warning' })
+  }
 }
 
 onMounted(async () => {

diff --git a/.../nuxt3/server/api/stargram-user-config.ts → .../nuxt3/server/api/stargram/user-config.ts b/.../nuxt3/server/api/stargram-user-config.ts → .../nuxt3/server/api/stargram/user-config.ts
@@ -12,5 +12,5 @@ export default eventHandler(async (event) => {
   }
   const encode = cryption.encode(JSON.stringify(info))
 
-  return encode // `/user-config?code=${encode}`
+  return encode
 })