chore: use custom fetch on app level #10

teritorio · Apr 18, 2024 · 32a62f6 · 32a62f6
1 parent 4550442
commit 32a62f6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 45 deletions.
diff --git a/app.vue b/app.vue
@@ -1,26 +1,34 @@
 <script setup lang="ts">
 import type { User } from '~/libs/apiTypes'
+import type { Project } from '~/libs/types'
 
 const back = ref(true)
 const { locale, locales, setLocale } = useI18n()
 
-const user = useState<User>('user')
 const authToken = useCookie('_interslice_session')
 if (authToken.value) {
   await callOnce(async () => {
     try {
-      user.value = await $fetch<User>(`${useRuntimeConfig().public.API}/users/me`, { credentials: 'include' })
+      const user = await useFetchWithCache<User>('user', `${useRuntimeConfig().public.API}/users/me`, { credentials: 'include' })
+      useState<User>('user', () => user.value)
     }
-    catch (error) {
-      console.error(error)
+    catch (err: any) {
+      ElMessage.error(err.message)
     }
   })
 }
 
+try {
+  const projects = await useFetchWithCache<Project[]>('projects', `${useRuntimeConfig().public.API}/projects`)
+  useState<Project[]>('projects', () => projects.value)
+}
+catch (err: any) {
+  ElMessage.error(err.message)
+}
+
 const availableLocales = computed(() => {
   return locales.value.filter((i) => i.code !== locale.value)
 })
-
 // Function from https://dev.to/jorik/country-code-to-flag-emoji-a21
 function getFlagEmoji(countryCode: string) {
   const codePoints = countryCode
@@ -32,7 +40,7 @@ function getFlagEmoji(countryCode: string) {
 </script>
 
 <template>
-  <NuxtLayout>
+  <nuxt-layout>
     <el-menu mode="horizontal" :ellipsis="false">
       <el-menu-item v-if="back" index="0">
         <nuxt-link to="/" :title="$t('app.back')">
@@ -68,7 +76,7 @@ function getFlagEmoji(countryCode: string) {
         <User :user="user" />
       </el-menu-item>
     </el-menu>
-    <NuxtPage />
+    <nuxt-page />
     <footer>
       <p>
         {{ $t('app.attribution.data') }}
@@ -77,11 +85,5 @@ function getFlagEmoji(countryCode: string) {
         }}</a>
       </p>
     </footer>
-  </NuxtLayout>
+  </nuxt-layout>
 </template>
-
-<style scoped>
-.flex-grow {
-  flex-grow: 1;
-}
-</style>
diff --git a/libs/apiTypes.ts b/libs/apiTypes.ts
@@ -5,24 +5,6 @@ export interface User {
   projects: string[]
 }
 
-export function getUser(apiEndpoint: string): Promise<User | null> {
-  return fetch(`${apiEndpoint}/users/me`, {
-    credentials: 'include',
-  }).then((data) => {
-    if (data.ok) {
-      return data.json() as unknown as User
-    }
-    else if (data.status === 404) {
-      return null
-    }
-    else {
-      return Promise.reject(
-        new Error([data.url, data.status, data.statusText].join(' ')),
-      )
-    }
-  })
-}
-
 export function userLogout(apiEndpoint: string): Promise<void> {
   return fetch(`${apiEndpoint}/../../../users`, {
     method: 'DELETE',

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,25 +1,19 @@
 <script setup lang="ts">
 import _ from 'underscore'
 import type { User } from '~/libs/apiTypes'
-import { getAsyncDataOrThrows } from '~/libs/getAsyncData'
 import type { Project } from '~/libs/types'
-import { getProjects } from '~/libs/types'
 
 const user = useState<User>('user')
+const projects = useState<Project>('projects')
 const myProjects = ref<Project[]>()
 const otherProjects = ref<Project[]>()
 
-getAsyncDataOrThrows('fetchSettings', () =>
-  getProjects(useRuntimeConfig().public.API)).then((data) => {
-  const projects = data.data as Ref<Project[]>
-
-  const [my, other] = _.partition(
-    projects.value,
-    (project) => user?.value?.projects.includes(project.id) || false,
-  )
-  myProjects.value = my
-  otherProjects.value = other
-})
+const [my, other] = _.partition(
+  projects.value,
+  (project: Project) => user?.value?.projects.includes(project.id) || false,
+)
+myProjects.value = my
+otherProjects.value = other
 </script>
 
 <template>