refactor: small composable units (atinux#89)

app.vue

@@ -1,14 +1,10 @@
 <script setup>
-const { login, hasToken, apiUrl, headers } = useGitHub()
+const login = () => githubLogin()
+const user = await useGithubUser()
+
 useMeta({
   title: 'Discuss with Atinux',
 })
-const user = useState('user', () => null)
-if (hasToken.value) {
-  user.value = await $fetch(apiUrl('/user'), {
-    headers: headers(),
-  })
-}
 </script>
 
 <template>

components/Messages.vue

@@ -1,14 +1,11 @@
 <script setup>
 import { UseTimeAgo } from '@vueuse/components'
-const { apiUrl, headers } = useGitHub()
 const { ISSUES_SSE_URL } = useRuntimeConfig()
 
-const { data: issues } = await useFetch(
-  apiUrl('/repos/atinux/discuss/issues'),
-  {
-    headers: headers(),
-    transform: issues => issues.filter(issue => issue.state === 'open'),
-  }
+const { data: issues } = await useAsyncData(
+  'issues',
+  () => githubFetch('/repos/atinux/discuss/issues'),
+  { transform: issues => issues.filter(issue => issue.state === 'open') }
 )
 
 onMounted(() => {

components/NewMessage.vue

@@ -1,17 +1,13 @@
 <script setup>
-const { apiUrl, headers } = useGitHub()
 const title = ref('')
 const sending = ref(false)
 const postIssue = async () => {
   if (sending.value || !title.value.trim()) return
   sending.value = true
   // Call GitHub
-  await $fetch(apiUrl('/repos/atinux/discuss/issues'), {
+  await githubFetch('/repos/atinux/discuss/issues', {
     method: 'POST',
-    headers: headers(),
-    body: {
-      title: title.value,
-    },
+    body: { title: title.value, },
   })
   sending.value = false
   title.value = ''

components/User.vue

@@ -1,12 +1,6 @@
 <script setup>
-const { logout } = useGitHub()
-
-defineProps({
-  user: {
-    type: Object,
-    required: true
-  }
-})
+const logout = githubLogout
+const user = await useGithubUser()
 </script>
 
 <template>
@@ -15,4 +9,4 @@ defineProps({
     <p>Welcome <strong>{{ user.login }}</strong>, nice to meet you!</p>
     <button @click="logout" class="border text-black border-gray-600 rounded px-2 hover:border-black">Logout</button>
   </div>
-</template>
+</template>

composables/github.ts

@@ -0,0 +1,33 @@
+export const useGithubCookie = () => useCookie('gh_token')
+
+export const githubFetch = (url: string, fetchOptions: any = {}) => {
+  return $fetch(url, {
+      baseURL: 'https://api.github.com',
+      ...fetchOptions,
+      headers: {
+        Authorization: `token ${useGithubCookie().value}`,
+        ...fetchOptions.headers
+      },
+  })
+}
+
+export const useGithubUser = async () => {
+  const cookie = useGithubCookie()
+  const user = useState('gh_user')
+  if (cookie.value && !user.value) {
+    user.value = await githubFetch('/user')
+  }
+  return user
+}
+
+export const githubLogin = () => {
+  if (process.client) {
+    const { GITHUB_CLIENT_ID } = useRuntimeConfig()
+    window.location.replace(`https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&scope=public_repo`)
+  }
+}
+
+export const githubLogout = async () => {
+  useGithubCookie().value = null
+  if (process.client) { window.location.reload() }
+}

server/api/github/callback.ts

@@ -17,9 +17,8 @@ export default async (req, res) => {
   if (response.error) {
     return sendRedirect(res, '/')
   }
-  setCookie(res, 'gh_token', response.access_token, {
-    path: '/',
-    httpOnly: true,
-  })
+
+  setCookie(res, 'gh_token', response.access_token, { path: '/', })
+
   return sendRedirect(res, '/')
 }