begin adding msgs

src/App.js

@@ -1,6 +1,6 @@
 import { Container } from '@mui/material';
 import { AuthForm } from './Components/AuthForm';
-import { Appbar } from './Components/Appbar';
+import { Home } from './Components/Home';
 import { Routes, Route } from 'react-router-dom';
 import { PrivateRoute } from './Components/PrivateRoute';
 
@@ -13,7 +13,7 @@ function App() {
             path="/"
             element={
               <PrivateRoute>
-                <Appbar />
+                <Home />
               </PrivateRoute>
             }
           />

src/Components/Appbar.js

@@ -35,7 +35,11 @@ export const Appbar = () => {
             >
               <AccountCircle />
             </IconButton>
-            <UserProfile toggleDrawer={toggleDrawer} showDrawer={showDrawer} />
+            <UserProfile
+              toggleDrawer={toggleDrawer}
+              showDrawer={showDrawer}
+              setShowDrawer={setShowDrawer}
+            />
           </div>
         </Toolbar>
       </AppBar>

src/Components/Home.js

@@ -0,0 +1,19 @@
+import { Box } from '@mui/material';
+import { Appbar } from './Appbar';
+import { Messages } from './Messages';
+
+export const Home = () => {
+  return (
+    <>
+      <Appbar />
+      <Box>
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <Messages />
+      </Box>
+    </>
+  );
+};

src/Components/Messages.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+import { Box } from '@mui/material';
+
+export const Messages = () => {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    supabase
+      .from('messages')
+      .select()
+      .then(({ data }) => setData(data));
+  }, []);
+
+  return (
+    <Box>
+      THINGS TO DO: userlist, rooms, msg subscriptions msgs: <br />
+      <br />
+      <br />
+      <br />
+      {data.map((msg) => (
+        <div key={msg.id}>
+          {msg.created_at}: {msg.username} {msg.message}
+        </div>
+      ))}
+    </Box>
+  );
+};

src/Components/UserProfile.js

@@ -8,12 +8,13 @@ import {
   TextField,
   Divider,
   Stack,
+  FormControl,
 } from '@mui/material';
 import { useAuth } from '../Contexts/AuthContext';
 import { useSnackbar } from '../Contexts/SnackbarContext';
 import CloseIcon from '@mui/icons-material/Close';
 
-export const UserProfile = ({ showDrawer, toggleDrawer }) => {
+export const UserProfile = ({ showDrawer, setShowDrawer }) => {
   const { user, signOut, updateUserMetaData } = useAuth();
   const { showSnackBar } = useSnackbar();
   const [profileInputs, setProfileInputs] = useState({ username: '' });
@@ -28,8 +29,15 @@ export const UserProfile = ({ showDrawer, toggleDrawer }) => {
 
   const handleUpdate = async (e) => {
     e.preventDefault();
-    const res = await updateUserMetaData({ username: profileInputs.username });
-    if (res) showSnackBar('success', 'nickname updated');
+    if (profileInputs.username !== '') {
+      const res = await updateUserMetaData({
+        username: profileInputs.username,
+      });
+      if (res) {
+        showSnackBar('success', 'nickname updated');
+        setShowDrawer(false);
+      }
+    }
   };
 
   const handleSignOut = (e) => {
@@ -48,16 +56,16 @@ export const UserProfile = ({ showDrawer, toggleDrawer }) => {
       }}
       anchor="right"
       open={showDrawer}
-      onClose={toggleDrawer()}
+      onClose={() => setShowDrawer(false)}
     >
       <Toolbar sx={{ flexDirection: 'row' }}>
         <Box sx={{ flexGrow: 1 }}>user profile</Box>
-        <IconButton onClick={toggleDrawer()}>
+        <IconButton onClick={() => setShowDrawer(false)}>
           <CloseIcon />
         </IconButton>
       </Toolbar>
       <Divider />
-      <Stack m={2} spacing={2}>
+      <Stack m={2} spacing={2} component="form">
         <TextField
           name="username"
           label="username"
@@ -69,7 +77,7 @@ export const UserProfile = ({ showDrawer, toggleDrawer }) => {
         />
         {/** TODO: add update email fnc*/}
         <TextField fullWidth label="email" value={user.email} disabled />
-        <Button fullWidth onClick={(e) => handleUpdate(e)}>
+        <Button type="submit" fullWidth onClick={(e) => handleUpdate(e)}>
           update profile
         </Button>
         <Button fullWidth onClick={(e) => handleSignOut(e)}>