From bf679b32892fa6ba48a70dc6d55baca7dc5475e9 Mon Sep 17 00:00:00 2001
From: visualjerk <jb@visualjerk.de>
Date: Thu, 28 Jul 2022 22:35:08 +0200
Subject: [PATCH] use supabase module

---
 .env.example    |  4 +--
 app.vue         | 34 +++++++++-----------------
 nuxt.config.ts  |  8 +-----
 package.json    |  1 +
 pages/index.vue |  5 +---
 store/api.ts    | 17 -------------
 store/auth.ts   | 43 ++++++++------------------------
 store/todos.ts  | 65 +++++++++++++++++++++----------------------------
 yarn.lock       | 12 ++++++++-
 9 files changed, 66 insertions(+), 123 deletions(-)
 delete mode 100644 store/api.ts

diff --git a/.env.example b/.env.example
index aaa612c..0aa462f 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 GITHUB_CLIENT_ID='1234'
 GITHUB_CLIENT_SECRET='1234'
-NUXT_PUBLIC_SUPABASE_URL='https://XY.supabase.co'
-NUXT_PUBLIC_SUPABASE_KEY='1234'
\ No newline at end of file
+SUPABASE_URL='https://XY.supabase.co'
+SUPABASE_KEY='1234'
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 5d7f23d..c59d251 100644
--- a/app.vue
+++ b/app.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { useUser, login, logout } from '@/store/auth'
 
-const { user, getUser, subscribe } = await useUser()
-
-getUser()
-subscribe()
+const { user } = await useUser()
 
 useHead({
   title: 'Do',
@@ -18,15 +15,10 @@ useHead({
     >
       <NuxtLink to="/" class="text-slate-800">Do</NuxtLink>
       <nav class="flex items-center justify-end gap-2">
-        <ClientOnly>
-          <ActionButton @click="logout" v-if="user">
-            <img
-              :src="user.avatarUrl"
-              class="rounded-full h-5 w-5 mr-2 border"
-            />
-            Logout
-          </ActionButton>
-        </ClientOnly>
+        <ActionButton @click="logout" v-if="user">
+          <img :src="user.avatarUrl" class="rounded-full h-5 w-5 mr-2 border" />
+          Logout
+        </ActionButton>
         <a
           href="https://github.com/visualjerk/do"
           class="flex px-2 py-1 text-slate-600 hover:text-slate-800"
@@ -39,15 +31,13 @@ useHead({
     </header>
 
     <main class="py-6 sm:py-10 px-4 max-w-screen-md m-auto">
-      <ClientOnly>
-        <div v-if="!user">
-          <h1 class="mb-8">Please login</h1>
-          <ActionButton @click="login" v-if="!user">
-            Login with GitHub
-          </ActionButton>
-        </div>
-        <NuxtPage v-else />
-      </ClientOnly>
+      <div v-if="!user">
+        <h1 class="mb-8">Please login</h1>
+        <ActionButton @click="login" v-if="!user">
+          Login with GitHub
+        </ActionButton>
+      </div>
+      <NuxtPage v-else />
     </main>
     <footer class="p-8 flex justify-center items-center gap-1 text-slate-500">
       Built by
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 85b7b16..48f3b21 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,12 +2,6 @@ import { defineNuxtConfig } from 'nuxt'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-  runtimeConfig: {
-    public: {
-      supabaseUrl: process.env.NUXT_PUBLIC_SUPABASE_URL,
-      supabaseKey: process.env.NUXT_PUBLIC_SUPABASE_KEY,
-    },
-  },
   css: ['@/assets/css/main.css'],
   build: {
     postcss: {
@@ -18,5 +12,5 @@ export default defineNuxtConfig({
   typescript: {
     strict: true,
   },
-  modules: ['@kevinmarrec/nuxt-pwa'],
+  modules: ['@nuxtjs/supabase', '@kevinmarrec/nuxt-pwa'],
 })
diff --git a/package.json b/package.json
index 366612a..afce871 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@kevinmarrec/nuxt-pwa": "^0.4.2",
+    "@nuxtjs/supabase": "^0.1.19",
     "nuxt": "3.0.0-rc.6",
     "tailwindcss": "^3.1.6"
   },
diff --git a/pages/index.vue b/pages/index.vue
index 75f8e61..48cbc3c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,12 +7,9 @@ import {
   Todo,
 } from '@/store/todos'
 
-const { todos, getTodos, subscribe } = useTodos()
+const { todos } = await useTodos(true)
 const { newTodo, addTodo } = useTodoForm()
 
-getTodos()
-subscribe()
-
 useHead({
   title: 'Do',
 })
diff --git a/store/api.ts b/store/api.ts
deleted file mode 100644
index b28b1d9..0000000
--- a/store/api.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createClient, SupabaseClient } from '@supabase/supabase-js'
-
-let supabase: SupabaseClient | undefined
-
-export function getApi() {
-  if (!process.client) {
-    return null
-  }
-  const { supabaseUrl, supabaseKey } = useRuntimeConfig().public
-  if (!supabaseUrl || !supabaseKey) {
-    return null
-  }
-  if (!supabase) {
-    supabase = createClient(supabaseUrl, supabaseKey)
-  }
-  return supabase
-}
diff --git a/store/auth.ts b/store/auth.ts
index 79b77da..4c5ce8c 100644
--- a/store/auth.ts
+++ b/store/auth.ts
@@ -1,46 +1,26 @@
-import { getApi } from '@/store/api'
-
 interface User {
   avatarUrl: string
 }
 
 export function useUser() {
-  const user = useState<User | null>('USER')
-
-  function getUser() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    const apiUser = api.auth.user()
-    if (!apiUser) {
-      user.value = null
-      return
+  const supabaseUser = useSupabaseUser()
+  const user = computed<User | null>(() => {
+    if (!supabaseUser.value) {
+      return null
     }
 
-    const identity = apiUser.identities?.at(0)
+    const identity = supabaseUser.value.identities?.at(0)
 
-    user.value = {
+    return {
       avatarUrl: (identity?.identity_data.avatar_url as string) || '',
     }
-  }
-
-  function subscribe() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    api.auth.onAuthStateChange(getUser)
-  }
+  })
 
-  return { user, getUser, subscribe }
+  return { user }
 }
 
 export async function login() {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const appUrl = useRuntimeConfig().app.baseURL
   await api.auth.signIn(
     {
@@ -53,10 +33,7 @@ export async function login() {
 }
 
 export async function logout() {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   await api.auth.signOut()
   await refreshNuxtData()
   useRouter().push('/')
diff --git a/store/todos.ts b/store/todos.ts
index 46a4fa5..f4f102d 100644
--- a/store/todos.ts
+++ b/store/todos.ts
@@ -1,5 +1,5 @@
-import { getApi } from '@/store/api'
 import { definitions } from '@/types/supabase'
+import type { RealtimeSubscription } from '@supabase/supabase-js'
 
 export interface Todo {
   id: number
@@ -7,54 +7,51 @@ export interface Todo {
   done: boolean
 }
 
-export function useTodos() {
-  const todos = useState<Todo[]>('TODOS', () => [])
+export async function useTodos(subscribe = false) {
+  const api = useSupabaseClient()
+  let subscription: RealtimeSubscription | undefined
 
-  async function getTodos() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    const apiTodos = await api
+  if (subscribe && process.client) {
+    onUnmounted(() => {
+      if (subscription) {
+        api.removeSubscription(subscription)
+      }
+    })
+  }
+
+  const { data: todos, refresh } = await useAsyncData('todos', async () => {
+    const { data } = await api
       .from<definitions['todo']>('todo')
       .select('*')
       .order('id')
-    if (!apiTodos.data) {
-      todos.value = []
-      return
-    }
 
-    todos.value = apiTodos.data.map((todo) => ({
+    if (!data) {
+      return []
+    }
+    return data.map((todo) => ({
       id: todo.id,
       name: todo.name,
       done: todo.done,
     }))
-  }
+  })
 
-  function subscribe() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
-    api
+  if (subscribe && process.client) {
+    subscription = api
       .from('todo')
       .on('*', () => {
-        getTodos()
+        refresh()
       })
       .subscribe()
   }
 
-  return { todos, getTodos, subscribe }
+  return { todos }
 }
 
 export function useTodoForm() {
   const newTodo = ref({ name: '' })
 
   async function addTodo() {
-    const api = getApi()
-    if (!api) {
-      return
-    }
+    const api = useSupabaseClient()
     const user = api.auth.user()
     if (!user) {
       return
@@ -72,12 +69,9 @@ export function useTodoForm() {
 }
 
 export async function toggleTodo(todo: Todo) {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const { done } = todo
-  const { todos } = useTodos()
+  const { todos } = await useTodos()
   const index = todos.value.findIndex(({ id }) => id === todo.id)
   todos.value[index].done = !done
 
@@ -91,12 +85,9 @@ export async function toggleTodo(todo: Todo) {
 }
 
 export async function deleteTodo(todo: Todo) {
-  const api = getApi()
-  if (!api) {
-    return
-  }
+  const api = useSupabaseClient()
   const { id: oldId } = todo
-  const { todos } = useTodos()
+  const { todos } = await useTodos()
   const index = todos.value.findIndex(({ id }) => id === oldId)
   todos.value.splice(index, 1)
 
diff --git a/yarn.lock b/yarn.lock
index ccddedc..71d7e79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -419,7 +419,7 @@
     unimport "^0.1.6"
     untyped "^0.4.4"
 
-"@nuxt/kit@^3.0.0-rc.6":
+"@nuxt/kit@^3.0.0-rc.5", "@nuxt/kit@^3.0.0-rc.6":
   version "3.0.0-rc.6"
   resolved "https://registry.yarnpkg.com/@nuxt/kit/-/kit-3.0.0-rc.6.tgz#b59c10639cb591bdc5a63164fb352b344230a065"
   integrity sha512-+lxSd6dSWlAzMXfGOPcY4856xnMF1Ck1rycFUZ+K2QYiDXphq/fiW2eMaWLVvqgPyL2Box2WzVDZJ6C5ceptcw==
@@ -527,6 +527,16 @@
     vite-node "^0.18.1"
     vite-plugin-checker "^0.4.9"
 
+"@nuxtjs/supabase@^0.1.19":
+  version "0.1.19"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/supabase/-/supabase-0.1.19.tgz#763e9280505565481db280681f32fa837cc79a55"
+  integrity sha512-ntAxxscRblW9NK86U9sabrDVZ2mH9WkmV0p+ej+lpywWudWL4GaSji60YWj4lxckxS8H8ihHTALsIznSjyrBoQ==
+  dependencies:
+    "@nuxt/kit" "^3.0.0-rc.5"
+    "@supabase/supabase-js" "^1.35.4"
+    defu "^6.0.0"
+    pathe "^0.3.2"
+
 "@rollup/plugin-alias@^3.1.9":
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz#a5d267548fe48441f34be8323fb64d1d4a1b3fdf"