mv profile n msgs to app context

src/App.js

@@ -2,22 +2,23 @@ import { AuthForm } from './Components/AuthForm';
 import { Home } from './Components/Home';
 import { Routes, Route } from 'react-router-dom';
 import { PrivateRoute } from './Components/PrivateRoute';
+import { AppProvider } from './Contexts/AppContext';
 
 function App() {
   return (
-    <>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <PrivateRoute>
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <PrivateRoute>
+            <AppProvider>
               <Home />
-            </PrivateRoute>
-          }
-        />
-        <Route path="/auth" element={<AuthForm />} />
-      </Routes>
-    </>
+            </AppProvider>
+          </PrivateRoute>
+        }
+      />
+      <Route path="/auth" element={<AuthForm />} />
+    </Routes>
   );
 }
 

src/Components/Messages.js

@@ -1,21 +1,13 @@
-import { useState, useEffect } from 'react';
-import { supabase } from '../supabaseClient';
+import { useAppContext } from '../Contexts/AppContext';
 
 export const Messages = () => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    supabase
-      .from('messages')
-      .select()
-      .then(({ data }) => setData(data));
-  }, []);
+  const { messages } = useAppContext();
 
   return (
     <>
-      {data.map((msg) => (
+      {messages.map((msg) => (
         <div key={msg.id}>
-          {msg.created_at}: {msg.username} {msg.message}
+          {msg.inserted_at}: {msg.author.username} {msg.message}
         </div>
       ))}
     </>

src/Components/UserProfile.js

@@ -13,15 +13,17 @@ import {
 import CloseIcon from '@mui/icons-material/Close';
 import { useAuth } from '../Contexts/AuthContext';
 import { useSnackbar } from '../Contexts/SnackbarContext';
+import { useAppContext } from '../Contexts/AppContext';
 
 export const UserProfile = ({ showProfile, setShowProfile }) => {
-  const { user, signOut, updateUserMetaData } = useAuth();
+  const { user, signOut } = useAuth();
+  const { userSettings, updateProfile } = useAppContext();
   const { showSnackBar } = useSnackbar();
-  const [profileInputs, setProfileInputs] = useState({ username: '' });
+  const [profileInputs, setProfileInputs] = useState({ userSettings });
 
   useEffect(() => {
-    setProfileInputs({ username: user.user_metadata.username });
-  }, [showProfile, user]);
+    setProfileInputs({ username: userSettings?.username });
+  }, [showProfile, userSettings]);
 
   const handleChange = ({ target: { name, value } }) => {
     setProfileInputs({ ...profileInputs, [name]: value });
@@ -30,9 +32,8 @@ export const UserProfile = ({ showProfile, setShowProfile }) => {
   const handleUpdate = async (e) => {
     e.preventDefault();
     if (profileInputs.username !== '') {
-      const res = await updateUserMetaData({
-        username: profileInputs.username,
-      });
+      const res = await updateProfile(profileInputs.username);
+
       if (res) {
         showSnackBar('success', 'nickname updated');
         setShowProfile(false);

src/Contexts/AppContext.js

@@ -0,0 +1,96 @@
+import { useEffect, useState, createContext, useContext } from 'react';
+import { supabase } from '../supabaseClient';
+import { useAuth } from '../Contexts/AuthContext';
+
+const AppContext = createContext();
+
+const AppProvider = ({ children }) => {
+  const [userSettings, setUserSettings] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [appDataLoading, setAppDataLoading] = useState(true);
+  const { user } = useAuth();
+
+  /**
+   * get messagaes
+   * start listeners
+   * make money
+   */
+
+  useEffect(() => {
+    console.log('gettn profile data');
+    !userSettings &&
+      supabase
+        .from('users')
+        .select('username')
+        .eq('id', user.id)
+        .then(({ data }) => setUserSettings({ ...userSettings, ...data[0] }));
+
+    console.log('gettn message data');
+    !messages.length &&
+      supabase
+        .from('messages')
+        .select('*, author:user_id(*)')
+        .then(({ data }) => setMessages([...messages, ...data]));
+
+    console.log('loading profile listener');
+    const { data: profileListener } = supabase
+      .from('users')
+      .on('*', (payload) => {
+        console.log('Change received!', payload);
+        setUserSettings({ ...userSettings, ...payload.new });
+      })
+      .subscribe();
+
+    console.log('loading message listener');
+    const { data: msgListener } = supabase
+      .from('messages')
+      .on('*', (payload) => {
+        console.log('Change received!', payload);
+        setUserSettings({ ...userSettings, ...payload.new });
+      })
+      .subscribe();
+
+    profileListener && setAppDataLoading(false);
+
+    return () => {
+      profileListener?.unsubscribe();
+      msgListener?.unsubscribe();
+      console.log('unloading app listeners');
+    };
+  }, []);
+
+  const updateProfile = async (updateData) => {
+    const { data, error } = await supabase
+      .from('users')
+      .update({ username: updateData })
+      .eq('id', user.id);
+
+    if (error) return { error };
+
+    return { data };
+  };
+
+  const value = {
+    userSettings,
+    updateProfile,
+    messages,
+  };
+
+  return (
+    <AppContext.Provider value={value}>
+      {/* maybe cud show some loading animations using the app loading const idk*/}
+      {appDataLoading && children}
+    </AppContext.Provider>
+  );
+};
+
+const useAppContext = () => {
+  const context = useContext(AppContext);
+
+  if (!context)
+    throw new Error('useAppContext must be used within AppProvider');
+
+  return context;
+};
+
+export { AppProvider, useAppContext };

src/Contexts/AuthContext.js

@@ -11,30 +11,27 @@ const AuthProvider = ({ children }) => {
     const session = supabase.auth.session();
     setUser(session?.user ?? null);
 
-    const { data: listener } = supabase.auth.onAuthStateChange(
-      (event, session) => {
+    const { data: authListener } = supabase.auth.onAuthStateChange(
+      (_event, session) => {
         setUser(session?.user ?? null);
       }
     );
-    setAuthLoading(false);
+
+    authListener && setAuthLoading(false);
 
     return () => {
-      listener?.unsubscribe();
+      authListener?.unsubscribe();
+      console.log('unloading auth listener');
     };
   }, []);
 
   const signUp = async (email, password, username) => {
-    const { user, session, error } = await supabase.auth.signUp(
-      {
-        email,
-        password,
-      },
-      {
-        data: {
-          username,
-        },
-      }
-    );
+    const { user, session, error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    // TODO: also update the users table with the user nickname
 
     if (error) return { error };
 
@@ -68,7 +65,13 @@ const AuthProvider = ({ children }) => {
     return { status: 'success' };
   };
 
-  const value = { user, signUp, signIn, signOut, updateUserMetaData };
+  const value = {
+    user,
+    signUp,
+    signIn,
+    signOut,
+    updateUserMetaData,
+  };
 
   return (
     <AuthContext.Provider value={value}>