diff --git a/src/Components/Channels.js b/src/Components/Channels.js
index 70d07d8..18f7112 100644
--- a/src/Components/Channels.js
+++ b/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 (
+ {channels.map((channel) => (
+
+ ))}
);
diff --git a/src/Components/Messages.js b/src/Components/Messages.js
index 33256e8..7ce6b71 100644
--- a/src/Components/Messages.js
+++ b/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) => (
-
- {msg.inserted_at}: {msg.author.username} {msg.message}
-
- ))}
+ {messages
+ ? messages
+ .filter((msg) => msg.channel_id === currentChannel?.id)
+ .map((msg) => (
+
+ {msg.inserted_at}: {msg.author.username} {msg.message}
+
+ ))
+ : 'loading'}
>
);
};
diff --git a/src/Contexts/AppContext.js b/src/Contexts/AppContext.js
index 72c1b12..4047799 100644
--- a/src/Contexts/AppContext.js
+++ b/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 (