From 6accd4c52be827ab92edbb643083500b4c776f13 Mon Sep 17 00:00:00 2001
From: Thorsten Schaeff <thorsten.schaeff@gmail.com>
Date: Tue, 22 Dec 2020 14:10:25 +0800
Subject: [PATCH] chore(example/nextjs-with-supabase-auth): Refactor to user
 user context.

---
 examples/nextjs-with-supabase-auth/README.md  |  2 +-
 .../components/UserContext.js                 | 38 +++++++++++++++++++
 .../nextjs-with-supabase-auth/pages/_app.js   |  9 +++++
 .../nextjs-with-supabase-auth/pages/index.js  | 25 ++++++------
 .../utils/useUser.js                          | 27 -------------
 5 files changed, 59 insertions(+), 42 deletions(-)
 create mode 100644 examples/nextjs-with-supabase-auth/components/UserContext.js
 create mode 100644 examples/nextjs-with-supabase-auth/pages/_app.js
 delete mode 100644 examples/nextjs-with-supabase-auth/utils/useUser.js

diff --git a/examples/nextjs-with-supabase-auth/README.md b/examples/nextjs-with-supabase-auth/README.md
index dacf6008e30..e24d04efc9e 100644
--- a/examples/nextjs-with-supabase-auth/README.md
+++ b/examples/nextjs-with-supabase-auth/README.md
@@ -1,6 +1,6 @@
 # Example: Supabase authentication client- and server-side (API routes)
 
-This example shows how to use Supabase auth both on the client (`useUser` hook) and server in [API routes](https://nextjs.org/docs/api-routes/introduction).
+This example shows how to use Supabase auth both on the client (`useUser` hook from the `UserContext` component) and server in [API routes](https://nextjs.org/docs/api-routes/introduction).
 
 ## Demo
 
diff --git a/examples/nextjs-with-supabase-auth/components/UserContext.js b/examples/nextjs-with-supabase-auth/components/UserContext.js
new file mode 100644
index 00000000000..e858351de2e
--- /dev/null
+++ b/examples/nextjs-with-supabase-auth/components/UserContext.js
@@ -0,0 +1,38 @@
+import { useEffect, useState, createContext, useContext } from 'react'
+import { supabase } from '../utils/initSupabase'
+
+export const UserContext = createContext()
+
+export const UserContextProvider = (props) => {
+  const [session, setSession] = useState(null)
+  const [user, setUser] = useState(null)
+
+  useEffect(() => {
+    const session = supabase.auth.session()
+    setSession(session)
+    setUser(session?.user ?? null)
+    const { data: authListener } = supabase.auth.onAuthStateChange(async (event, session) => {
+      setSession(session)
+      setUser(session?.user ?? null)
+    })
+
+    return () => {
+      authListener.unsubscribe()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const value = {
+    session,
+    user,
+  }
+  return <UserContext.Provider value={value} {...props} />
+}
+
+export const useUser = () => {
+  const context = useContext(UserContext)
+  if (context === undefined) {
+    throw new Error(`useUser must be used within a UserContextProvider.`)
+  }
+  return context
+}
diff --git a/examples/nextjs-with-supabase-auth/pages/_app.js b/examples/nextjs-with-supabase-auth/pages/_app.js
new file mode 100644
index 00000000000..b472b590c9f
--- /dev/null
+++ b/examples/nextjs-with-supabase-auth/pages/_app.js
@@ -0,0 +1,9 @@
+import { UserContextProvider } from '../components/UserContext'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <UserContextProvider>
+      <Component {...pageProps} />
+    </UserContextProvider>
+  )
+}
diff --git a/examples/nextjs-with-supabase-auth/pages/index.js b/examples/nextjs-with-supabase-auth/pages/index.js
index 9f88d8afdb0..82a4278927b 100644
--- a/examples/nextjs-with-supabase-auth/pages/index.js
+++ b/examples/nextjs-with-supabase-auth/pages/index.js
@@ -1,21 +1,18 @@
-import useSWR from 'swr';
-import { useUser } from '../utils/useUser';
-import { supabase } from '../utils/initSupabase';
-import SupabaseAuth from '../components/SupabaseAuth';
+import useSWR from 'swr'
+import { useUser } from '../components/UserContext'
+import { supabase } from '../utils/initSupabase'
+import SupabaseAuth from '../components/SupabaseAuth'
 
 const fetcher = (url, token) =>
   fetch(url, {
     method: 'GET',
     headers: new Headers({ 'Content-Type': 'application/json', token }),
     credentials: 'same-origin',
-  }).then((res) => res.json());
+  }).then((res) => res.json())
 
 const Index = () => {
-  const { user, session } = useUser();
-  const { data, error } = useSWR(
-    session ? ['/api/getUser', session.access_token] : null,
-    fetcher
-  );
+  const { user, session } = useUser()
+  const { data, error } = useSWR(session ? ['/api/getUser', session.access_token] : null, fetcher)
   if (!user) {
     return (
       <>
@@ -25,7 +22,7 @@ const Index = () => {
           <SupabaseAuth />
         </div>
       </>
-    );
+    )
   }
 
   return (
@@ -54,7 +51,7 @@ const Index = () => {
         <div>Loading...</div>
       )}
     </div>
-  );
-};
+  )
+}
 
-export default Index;
+export default Index
diff --git a/examples/nextjs-with-supabase-auth/utils/useUser.js b/examples/nextjs-with-supabase-auth/utils/useUser.js
deleted file mode 100644
index 569c30082f4..00000000000
--- a/examples/nextjs-with-supabase-auth/utils/useUser.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useEffect, useState } from 'react';
-import { supabase } from './initSupabase';
-
-const useUser = () => {
-  const [session, setSession] = useState(null);
-  const [user, setUser] = useState(null);
-
-  useEffect(() => {
-    setSession(supabase.auth.session());
-    setUser(supabase.auth.user());
-    const { data: authListener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
-        console.log(`Supbase auth event: ${event}`);
-        setSession(session);
-        setUser(session?.user ?? null);
-      }
-    );
-    return () => {
-      authListener.unsubscribe();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { user, session };
-};
-
-export { useUser };