supachat/src/Contexts/AppContext.js

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 [channels, setChannels] = useState([]);
  const [currentChannel, setCurrentChannel] = useState(null);
  const [appDataLoading, setAppDataLoading] = useState(true);
  const { user } = useAuth();

  /**
   * get data
   * start listeners
   * make money
   */

  useEffect(() => {
    console.log('gettn profile data');
    !userSettings &&
      supabase
        .from('users')
        .select('username')
        .eq('id', user.id)
        .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) => [...messages, ...data]));

    console.log('gettn channel data');
    !messages.length &&
      supabase
        .from('channels')
        .select('*')
        .then(({ data }) => setChannels((channels) => [...channels, ...data]));

    console.log('loading app listener');
    const { data: appListener } = supabase
      .from('*')
      .on('*', (payload) => {
        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();

    appListener && setAppDataLoading(false);

    return () => {
      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')
      .update({ username: updateData })
      .eq('id', user.id);

    if (error) return { error };

    return { data };
  };

  const value = {
    userSettings,
    updateProfile,
    messages,
    channels,
    currentChannel,
    setCurrentChannel,
    setAppDataLoading,
  };

  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 };