chore: create app-menu component + use custom fetch for user login #10

teritorio · Apr 18, 2024 · ee47c61 · ee47c61
1 parent 567f0e4
commit ee47c61
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 65 deletions.
diff --git a/app.vue b/app.vue
@@ -2,82 +2,32 @@
 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}/blabl/projects`)
+  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
-    .toUpperCase()
-    .split('')
-    .map((char) => 127397 + char.charCodeAt(0))
-  return String.fromCodePoint(...codePoints)
-}
 </script>
 
 <template>
-  <NuxtLayout>
-    <el-menu mode="horizontal" :ellipsis="false">
-      <el-menu-item v-if="back" index="0">
-        <nuxt-link to="/" :title="$t('app.back')">
-          <img src="/favicon.svg" style="width: 6em" />
-        </nuxt-link>
-      </el-menu-item>
-      <el-menu-item v-else index="0">
-        <img src="/favicon.svg" style="width: 6em" />
-      </el-menu-item>
-      <div class="flex-grow" />
-      <el-menu-item index="1">
-        <slot name="header" />
-      </el-menu-item>
-      <div class="flex-grow" />
-      <el-menu-item index="2">
-        <el-select
-          v-model="locale"
-          class="m-2"
-          placeholder="Language"
-          size="small"
-          @change="setLocale"
-        >
-          <el-option
-            v-for="l in availableLocales"
-            :key="l.code"
-            :label="`${getFlagEmoji(l.flag)} ${l.name}`"
-            :value="l.code"
-            :fit-input-width="true"
-          />
-        </el-select>
-      </el-menu-item>
-      <el-menu-item index="3">
-        <User :user="user" />
-      </el-menu-item>
-    </el-menu>
-    <NuxtPage />
+  <nuxt-layout>
+    <app-menu />
+    <nuxt-page />
     <footer>
       <p>
         {{ $t('app.attribution.data') }}
@@ -86,11 +36,5 @@ function getFlagEmoji(countryCode: string) {
         }}</a>
       </p>
     </footer>
-  </NuxtLayout>
+  </nuxt-layout>
 </template>
-
-<style scoped>
-.flex-grow {
-  flex-grow: 1;
-}
-</style>
diff --git a/components/AppMenu.vue b/components/AppMenu.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { User } from '~/libs/apiTypes'
+
+const back = ref(true)
+const user = useState<User>('user')
+const { locale, locales, setLocale } = useI18n()
+
+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
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt(0))
+  return String.fromCodePoint(...codePoints)
+}
+</script>
+
+<template>
+  <el-menu mode="horizontal" :ellipsis="false">
+    <el-menu-item v-if="back" index="0">
+      <nuxt-link to="/" :title="$t('app.back')">
+        <img src="/favicon.svg" style="width: 6em" />
+      </nuxt-link>
+    </el-menu-item>
+    <el-menu-item v-else index="0">
+      <img src="/favicon.svg" style="width: 6em" />
+    </el-menu-item>
+    <div class="flex-grow" />
+    <el-menu-item index="1">
+      <slot name="header" />
+    </el-menu-item>
+    <div class="flex-grow" />
+    <el-menu-item index="2">
+      <el-select
+        v-model="locale"
+        class="m-2"
+        placeholder="Language"
+        size="small"
+        @change="setLocale"
+      >
+        <el-option
+          v-for="l in availableLocales"
+          :key="l.code"
+          :label="`${getFlagEmoji(l.flag)} ${l.name}`"
+          :value="l.code"
+          :fit-input-width="true"
+        />
+      </el-select>
+    </el-menu-item>
+    <el-menu-item index="3">
+      <User :user="user" />
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>