use 1 app listerner for all events, add channel selection buttons, filter msgs shown for the selected channel

src/Components/Channels.js

@@ -1,6 +1,16 @@
-import { Box, Drawer, Toolbar, Divider, Typography } from '@mui/material';
+import {
+  Box,
+  Drawer,
+  Toolbar,
+  Divider,
+  Typography,
+  Button,
+} from '@mui/material';
+import { useAppContext } from '../Contexts/AppContext';
 
 export function Channels({ drawerWidth, showChannels, setShowChannels }) {
+  const { channels, setCurrentChannel } = useAppContext();
+
   return (
     <Box sx={{ display: 'flex' }}>
       <Drawer
@@ -33,6 +43,11 @@ export function Channels({ drawerWidth, showChannels, setShowChannels }) {
           </Box>
         </Toolbar>
         <Divider />
+        {channels.map((channel) => (
+          <Button onClick={() => setCurrentChannel(channel)} key={channel.id}>
+            {channel.slug}
+          </Button>
+        ))}
       </Drawer>
     </Box>
   );

src/Components/Messages.js

@@ -1,15 +1,19 @@
 import { useAppContext } from '../Contexts/AppContext';
 
 export const Messages = () => {
-  const { messages } = useAppContext();
+  const { messages, currentChannel } = useAppContext();
 
   return (
     <>
-      {messages.map((msg) => (
-        <div key={msg.id}>
-          {msg.inserted_at}: {msg.author.username} {msg.message}
-        </div>
-      ))}
+      {messages
+        ? messages
+            .filter((msg) => msg.channel_id === currentChannel?.id)
+            .map((msg) => (
+              <div key={msg?.id}>
+                {msg.inserted_at}: {msg.author.username} {msg.message}
+              </div>
+            ))
+        : 'loading'}
     </>
   );
 };

src/Contexts/AppContext.js

@@ -7,11 +7,13 @@ const AppContext = createContext();
 const AppProvider = ({ children }) => {
   const [userSettings, setUserSettings] = useState(null);
   const [messages, setMessages] = useState([]);
+  const [channels, setChannels] = useState([]);
+  const [currentChannel, setCurrentChannel] = useState(null);
   const [appDataLoading, setAppDataLoading] = useState(true);
   const { user } = useAuth();
 
   /**
-   * get messagaes
+   * get data
    * start listeners
    * make money
    */
@@ -23,42 +25,51 @@ const AppProvider = ({ children }) => {
         .from('users')
         .select('username')
         .eq('id', user.id)
-        .then(({ data }) => setUserSettings({ ...userSettings, ...data[0] }));
+        .then(({ data }) =>
+          setUserSettings((userSettings) => ({ ...userSettings, ...data[0] }))
+        );
 
     console.log('gettn message data');
     !messages.length &&
       supabase
         .from('messages')
         .select('*, author:user_id(*)')
-        .then(({ data }) => setMessages([...messages, ...data]));
+        .then(({ data }) => setMessages((messages) => [...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('gettn channel data');
+    !messages.length &&
+      supabase
+        .from('channels')
+        .select('*')
+        .then(({ data }) => setChannels((channels) => [...channels, ...data]));
 
-    console.log('loading message listener');
-    const { data: msgListener } = supabase
-      .from('messages')
+    console.log('loading app listener');
+    const { data: appListener } = supabase
+      .from('*')
       .on('*', (payload) => {
-        console.log('Change received!', payload);
-        setUserSettings({ ...userSettings, ...payload.new });
+        const { eventType, table, new: newData } = payload;
+        // console.log('Change received!', payload);
+
+        if (table === 'users')
+          setUserSettings((userSettings) => ({ ...userSettings, ...newData }));
+
+        if (table === 'messages')
+          setMessages((messages) => [...messages, newData]);
       })
       .subscribe();
 
-    profileListener && setAppDataLoading(false);
+    appListener && setAppDataLoading(false);
 
     return () => {
-      profileListener?.unsubscribe();
-      msgListener?.unsubscribe();
+      appListener?.unsubscribe();
       console.log('unloading app listeners');
     };
   }, []);
 
+  useEffect(() => {
+    setCurrentChannel(channels.find((channel) => channel.id));
+  }, [channels]);
+
   const updateProfile = async (updateData) => {
     const { data, error } = await supabase
       .from('users')
@@ -74,6 +85,10 @@ const AppProvider = ({ children }) => {
     userSettings,
     updateProfile,
     messages,
+    channels,
+    currentChannel,
+    setCurrentChannel,
+    setAppDataLoading,
   };
 
   return (