refactoring supabase context

client/src/App.tsx

@@ -2,9 +2,14 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import Home from './components/Home/Home'
 import Register from './components/User/Register'
 import './App.css'
+import { useEffect, useState } from 'react'
+import { createClient, SupabaseClient } from '@supabase/supabase-js'
+import { SupabaseProvider } from './supabase/SupabaseContext'
+import { useSupabase } from './supabase/useSupabase'
 
 function App() {
   return (
+    <SupabaseProvider value={useSupabase()}>
       <BrowserRouter>
         <div className="App">
           <Routes>
@@ -13,6 +18,7 @@ function App() {
           </Routes>
         </div>
       </BrowserRouter>
+    </SupabaseProvider>
   )
 }
 

client/src/components/User/Register.tsx

@@ -1,9 +1,4 @@
 import { useState } from "react";
-import { createClient } from "@supabase/supabase-js";
-import { useAuth } from "../../supabase/SupabaseContext";
-
-const url = import.meta.env.VITE_SUPABASE_URL;
-const key = import.meta.env.VITE_SUPABASE_KEY;
 
 interface FormInput {
     email: string
@@ -12,11 +7,12 @@ interface FormInput {
 
 export default function Register() {
     const [input, setInput] = useState<FormInput>({email: "", password: ""});
-    const { handleRegister, setUserData, setUserSession } = useAuth();
+    // const { handleRegister, authData } = useSupabase();
 
     const handleClick = () => {
         const { email, password } = input;
-        if (email && password) handleRegister(email, password, { setUserData, setUserSession });
+        console.log(input);
+        // if (email && password) handleRegister!(email, password, authData);
     }
 
     return (

client/src/supabase/SupabaseContext.tsx

@@ -1,57 +1,13 @@
-import { FunctionComponent, ReactPortal, createContext, useState, useContext, Dispatch, SetStateAction } from "react";
+import { createContext, FC, ReactNode } from "react";
-import { handleRegister, handleEmailLogin } from "./authHelpers";
+import { SupabaseClient } from "@supabase/supabase-js";
-import { createClient, SupabaseClient } from "@supabase/supabase-js";
+import { useSupabase } from "./useSupabase";
 
-const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
+const SupabaseContext = createContext<SupabaseClient | undefined>(undefined!);
-
-interface SupabaseContextData {
-    supabase: SupabaseClient
-    userSession?: any
-    setUserSession?: Dispatch<SetStateAction<any>>
-    userData?: any
-    setUserData?: Dispatch<SetStateAction<any>>
-    handleRegister: (email: string, password: string, authData: ReactAuthData) => Promise<AuthData>
-    handleEmailLogin: (email: string, password: string, authData: ReactAuthData) => Promise<AuthData>
-}
-
-interface AuthData {
-    user?: any
-    session?: any
-    error?: any
-}
-
-export interface ReactAuthData {
-    userSession: any
-    setUserSession: Dispatch<SetStateAction<any>>
-    userData: any
-    setUserData: Dispatch<SetStateAction<any>>
-}
-
-const initialState: SupabaseContextData = {
-    supabase: supabase,
-    userSession: undefined,
-    userData: undefined,
-    handleRegister: handleRegister,
-    handleEmailLogin: handleEmailLogin
-}
-
-const SupabaseContext = createContext<SupabaseContextData>(initialState);
-
-export const SupabaseProvider: FunctionComponent<ReactPortal> = ({ children }) => {
-    const [userData, setUserData] = useState<any>();
-    const [userSession, setUserSession] = useState<any>();
-
-    const store = {
-        supabase, userData, setUserData, userSession, setUserSession, handleRegister, handleEmailLogin
-    }
 
+export const SupabaseProvider: FC<{children: ReactNode, value: SupabaseClient}> = ({ children }) => {
     return (
-        <SupabaseContext.Provider value={store}>
+        <SupabaseContext.Provider value={useSupabase()}>
-            { children }
+            {children}
         </SupabaseContext.Provider>
     )
 }
-
-export const useAuth = () => {
-    return useContext(SupabaseContext);
-}

client/src/supabase/SupabaseTypes.ts

@@ -1 +1,22 @@
-export default {}
+import { SupabaseClient } from "@supabase/supabase-js"
+import { Dispatch, SetStateAction } from "react"
+
+export interface SupabaseContextData {
+    supabase: SupabaseClient
+    authData: AuthData
+    handleRegister?: (email: string, password: string, authData: AuthData) => Promise<SupabaseResponseData>
+    handleEmailLogin?: (email: string, password: string, authData: AuthData) => Promise<SupabaseResponseData>
+}
+
+export interface AuthData {
+    userSession?: any
+    setUserSession?: Dispatch<SetStateAction<any>>
+    userData?: any
+    setUserData?: Dispatch<SetStateAction<any>>
+}
+
+export interface SupabaseResponseData {
+    user?: any
+    session?: any
+    error?: any
+}

client/src/supabase/authHelpers.ts

@@ -1,54 +0,0 @@
-import { SupabaseClient } from "@supabase/supabase-js";
-import { ReactAuthData, useAuth } from "./SupabaseContext";
-
-export const handleRegister = async (email: string, password: string, authData: ReactAuthData) => {
-    const { setUserData } = authData;
-    const { supabase } = useAuth();
-    
-    const { user, session, error } = await supabase.auth.signUp({ email, password });
-    if (error) throw error;
-    if (user) setUserData(user);
-
-    return { user, session, error }
-    // SEE USER RETURN TYPE BELOW
-    /**
-     * object {
-     *    app_metadata: {
-     *        provider: string
-     *        providers: string[]
-     *    }
-     *    aud: string
-     *    confirmation_sent_at: string
-     *    created_at: string
-     *    email: string
-     *    id: string
-     *    identities: Identity[] // to define below
-     *    phone: string?
-     *    role: string
-     *    updated_at: string
-     *    user_metadata: object?
-     * }
-     * 
-     * Identity = {
-     *    created_at,
-     *    id,
-     *    identity_data: { sub: string },
-     *    last_sign_in_at: string
-     *    provider: email
-     *    updated_at: string
-     *    user_id: string
-     * }
-     */
-}
-
-export const handleEmailLogin = async (email: string, password: string, authData: ReactAuthData) => {
-    const { setUserData, setUserSession } = authData;
-    const { supabase } = useAuth();
-
-    const { user, session, error } = await supabase.auth.signIn({ email, password });
-    if (error) throw error;
-    if (user) setUserData(user);
-    if (session) setUserSession(session);
-
-    return { user, session, error };
-}

client/src/supabase/useSupabase.tsx

@@ -0,0 +1,5 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const useSupabase = () => {
+    return createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_KEY);
+}