From 4fc6e405e0cdfe26350dd6a4e79fb297be973779 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 18 Nov 2022 05:32:03 +0800
Subject: [PATCH] refactor: update composable names

---
 components/account/AccountMe.client.vue |  2 +-
 components/nav/NavSide.vue              | 46 ++++++++++++++-----------
 composables/client.ts                   |  8 ++---
 composables/cookies.ts                  |  5 +++
 layouts/default.vue                     |  2 +-
 package.json                            |  2 +-
 pages/login/callback.vue                |  2 +-
 plugins/masto.ts                        |  5 +--
 plugins/store.client.ts                 |  8 +++--
 9 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/components/account/AccountMe.client.vue b/components/account/AccountMe.client.vue
index c60f29ab..dafd8733 100644
--- a/components/account/AccountMe.client.vue
+++ b/components/account/AccountMe.client.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { currentUser } = $(useAppStore())
+const { currentUser } = $(useClientState())
 
 const account = $computed(() => currentUser?.account)
 </script>
diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index da09e22f..6fc573b3 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
-
+const isLogin = useLoginState()
 </script>
 
 <template>
   <div px6 py2 flex="~ col gap6" text-lg>
-    <NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
-      <div i-ri:home-5-line />
-      <span>Home</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
-      <div i-ri:notification-4-line />
-      <span>Notifications</span>
-    </NuxtLink>
+    <template v-if="isLogin">
+      <NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
+        <div i-ri:home-5-line />
+        <span>Home</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
+        <div i-ri:notification-4-line />
+        <span>Notifications</span>
+      </NuxtLink>
+    </template>
     <NuxtLink flex gap2 items-center to="/explore" active-class="text-primary">
       <div i-ri:hashtag />
       <span>Explore</span>
@@ -24,17 +26,19 @@
       <div i-ri:earth-line />
       <span>Federated</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center active-class="text-primary">
-      <div i-ri:at-line />
-      <span>Messages</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
-      <div i-ri:heart-3-line />
-      <span>Favorites</span>
-    </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
-      <div i-ri:bookmark-line />
-      <span>Bookmarks</span>
-    </NuxtLink>
+    <template v-if="isLogin">
+      <NuxtLink flex gap2 items-center active-class="text-primary">
+        <div i-ri:at-line />
+        <span>Messages</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
+        <div i-ri:heart-3-line />
+        <span>Favorites</span>
+      </NuxtLink>
+      <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
+        <div i-ri:bookmark-line />
+        <span>Bookmarks</span>
+      </NuxtLink>
+    </template>
   </div>
 </template>
diff --git a/composables/client.ts b/composables/client.ts
index 5568891b..3a1e2bab 100644
--- a/composables/client.ts
+++ b/composables/client.ts
@@ -1,10 +1,10 @@
 import type { MastoClient } from 'masto'
-import type { AppStore } from '~~/plugins/store.client'
+import type { ClientState } from '~/plugins/store.client'
 
 export function useMasto() {
-  return inject('masto') as Promise<MastoClient>
+  return useNuxtApp().$masto as Promise<MastoClient>
 }
 
-export function useAppStore() {
-  return inject('app-store') as AppStore
+export function useClientState() {
+  return useNuxtApp().$clientState as ClientState
 }
diff --git a/composables/cookies.ts b/composables/cookies.ts
index ae4ee63d..80174975 100644
--- a/composables/cookies.ts
+++ b/composables/cookies.ts
@@ -9,3 +9,8 @@ export function useAppCookies() {
     token,
   }
 }
+
+export function useLoginState() {
+  const token = useCookie('nuxtodon-token')
+  return computed(() => !!token.value)
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 406b4e23..b37c585e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div h-full of-hidden>
-    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-70rem mxa h-full>
+    <main grid="~ lg:cols-[1fr_40rem_1fr]" max-w-80rem mxa h-full>
       <div>
         <slot name="left">
           <AccountMe />
diff --git a/package.json b/package.json
index 6899d8d3..26509301 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "private": true,
   "type": "module",
+  "private": true,
   "packageManager": "pnpm@7.9.0",
   "scripts": {
     "build": "nuxi build",
diff --git a/pages/login/callback.vue b/pages/login/callback.vue
index a63dcfa6..e935cbee 100644
--- a/pages/login/callback.vue
+++ b/pages/login/callback.vue
@@ -2,7 +2,7 @@
 const { query } = useRoute()
 
 onMounted(async () => {
-  const { login } = useAppStore()
+  const { login } = useClientState()
   await login(query as any)
   await nextTick()
   await nextTick()
diff --git a/plugins/masto.ts b/plugins/masto.ts
index 820dacfb..4e4eae82 100644
--- a/plugins/masto.ts
+++ b/plugins/masto.ts
@@ -5,7 +5,8 @@ export default defineNuxtPlugin((nuxt) => {
 
   const masto = login({
     url: `https://${server.value}`,
-    accessToken: token.value,
+    accessToken: token.value || undefined,
   })
-  nuxt.vueApp.provide('masto', masto)
+
+  nuxt.$masto = masto
 })
diff --git a/plugins/store.client.ts b/plugins/store.client.ts
index 4579af90..208c67ae 100644
--- a/plugins/store.client.ts
+++ b/plugins/store.client.ts
@@ -1,10 +1,12 @@
 import { login as loginMasto } from 'masto'
 import type { UserLogin } from '~/types'
 
-function createStore() {
+function createClientState() {
   const { server, token } = useAppCookies()
+
   const accounts = useLocalStorage<UserLogin[]>('nuxtodon-accounts', [], { deep: true })
   const currentId = useLocalStorage<string>('nuxtodon-current-user', '')
+
   const currentUser = computed<UserLogin | undefined>(() => {
     let user: UserLogin | undefined
     if (currentId.value) {
@@ -48,8 +50,8 @@ function createStore() {
   }
 }
 
-export type AppStore = ReturnType<typeof createStore>
+export type ClientState = ReturnType<typeof createClientState>
 
 export default defineNuxtPlugin((nuxt) => {
-  nuxt.vueApp.provide('app-store', createStore())
+  nuxt.$clientState = createClientState()
 })