update channelContext and update platform components integration

TogetherCrew · Nov 29, 2023 · 3660423 · 3660423
1 parent 401bc52
commit 3660423
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 56 deletions.
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
@@ -58,9 +58,7 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
           <BsThreeDots
             className="cursor-pointer text-gray-400"
             onClick={() =>
-              router.push(
-                `/community-settings/platform/${platform.id}/?platformId=${platform.id}&property=channel`
-              )
+              router.push(`/community-settings/platform/${platform.id}/`)
             }
           />
         </div>

diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -36,17 +36,28 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     useState<string>('');
   const [initialTrueIDs, setInitialTrueIDs] = useState<string[]>([]);
 
-  const { selectedSubChannels } = channelContext;
-  const { id } = router.query;
+  const { refreshData, selectedSubChannels, updateSelectedSubChannels } =
+    channelContext;
+
+  const id = Array.isArray(router.query.id)
+    ? router.query.id[0]
+    : router.query.id;
 
   const fetchPlatform = async () => {
     setLoading(true);
     if (id) {
       try {
         const data = await retrievePlatformById(id);
         setFetchedPlatform(data);
+        const { metadata } = data;
+        if (metadata) {
+          const { selectedChannels } = metadata;
+
+          await refreshData(id, 'channel', selectedChannels);
+        } else {
+          refreshData(id);
+        }
       } catch (error) {
-        console.error('Error fetching platform data:', error);
       } finally {
         setLoading(false);
       }
@@ -72,7 +83,6 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
       await fetchPlatform();
       setLoading(false);
     } catch (error) {
-      console.error('Error updating community:', error);
       setLoading(false);
     }
   };

diff --git a/src/components/communitySettings/platform/TcPlatformChannelList.tsx b/src/components/communitySettings/platform/TcPlatformChannelList.tsx
@@ -6,9 +6,15 @@ import TcButton from '../../shared/TcButton';
 import { TbRefresh } from 'react-icons/tb';
 import Loading from '../../global/Loading';
 import { ChannelContext } from '../../../context/ChannelContext';
+import { useRouter } from 'next/router';
 
 function TcPlatformChannelList() {
   const channelContext = useContext(ChannelContext);
+  const router = useRouter();
+
+  const id = Array.isArray(router.query.id)
+    ? router.query.id[0]
+    : router.query.id;
 
   const {
     channels,
@@ -19,6 +25,12 @@ function TcPlatformChannelList() {
     loading,
   } = channelContext;
 
+  const handleRefresh = () => {
+    if (id) {
+      refreshData(id);
+    }
+  };
+
   if (loading) {
     return <Loading height="400px" />;
   }
@@ -30,7 +42,7 @@ function TcPlatformChannelList() {
         startIcon={<TbRefresh />}
         sx={{ maxWidth: '10rem' }}
         variant="outlined"
-        onClick={refreshData}
+        onClick={handleRefresh}
         text={'Refresh List'}
       />
       <div className="px-6 py-3">

diff --git a/src/context/ChannelContext.tsx b/src/context/ChannelContext.tsx
@@ -7,7 +7,6 @@ import React, {
   useRef,
 } from 'react';
 import useAppStore from '../store/useStore';
-import { useRouter } from 'next/router';
 
 export interface SubChannel {
   channelId: string;
@@ -34,9 +33,17 @@ interface ChannelContextProps {
   selectedSubChannels: {
     [channelId: string]: { [subChannelId: string]: boolean };
   };
-  refreshData: () => Promise<void>;
+  refreshData: (
+    platformId: string,
+    property?: 'channel' | 'role',
+    selectedChannels?: string[]
+  ) => Promise<void>;
   handleSubChannelChange: (channelId: string, subChannelId: string) => void;
   handleSelectAll: (channelId: string, subChannels: SubChannel[]) => void;
+  updateSelectedSubChannels: (
+    allChannels: Channel[],
+    newSelectedSubChannels: string[]
+  ) => void;
 }
 
 interface ChannelProviderProps {
@@ -62,49 +69,65 @@ const initialChannelContextData: ChannelContextProps = {
   channels: [initialChannel],
   loading: false,
   selectedSubChannels: initialSelectedSubChannels,
-  refreshData: async () => {},
+  refreshData: async (
+    platformId: string,
+    property?: 'channel' | 'role',
+    selectedChannels?: string[]
+  ) => {},
   handleSubChannelChange: (channelId: string, subChannelId: string) => {},
   handleSelectAll: (channelId: string, subChannels: SubChannel[]) => {},
+  updateSelectedSubChannels: (
+    allChannels: Channel[],
+    newSelectedSubChannels: string[]
+  ) => {},
 };
 
 export const ChannelContext = createContext<ChannelContextProps>(
   initialChannelContextData
 );
 
 export const ChannelProvider = ({ children }: ChannelProviderProps) => {
-  const router = useRouter();
   const { retrievePlatformProperties } = useAppStore();
   const [channels, setChannels] = useState<Channel[]>([]);
-  const [selectedSubChannels, setSelectedSubChannels] = useState<{
-    [channelId: string]: { [subChannelId: string]: boolean };
-  }>({});
+  const [selectedSubChannels, setSelectedSubChannels] =
+    useState<SelectedSubChannels>({});
   const [loading, setLoading] = useState<boolean>(false);
 
-  const platformIdRef = useRef<string>('');
-  const propertyRef = useRef<string>('');
-
-  const refreshData = useCallback(async () => {
-    setLoading(true);
-    const data: Channel[] = await retrievePlatformProperties({
-      property: propertyRef.current,
-      platformId: platformIdRef.current,
-    });
-
-    const newSelectedSubChannels = data.reduce((acc, channel) => {
-      acc[channel.channelId] = channel.subChannels.reduce(
-        (subAcc, subChannel) => {
-          subAcc[subChannel.channelId] = true;
-          return subAcc;
-        },
-        {} as { [subChannelId: string]: boolean }
-      );
-      return acc;
-    }, {} as SelectedSubChannels);
-
-    setChannels(data);
-    setSelectedSubChannels(newSelectedSubChannels);
-    setLoading(false);
-  }, [retrievePlatformProperties]);
+  const refreshData = useCallback(
+    async (
+      platformId: string,
+      property: 'channel' | 'role' = 'channel',
+      selectedChannels?: string[]
+    ) => {
+      setLoading(true);
+      try {
+        const data = await retrievePlatformProperties({ property, platformId });
+        setChannels(data);
+        if (selectedChannels) {
+          updateSelectedSubChannels(data, selectedChannels);
+        } else {
+          const newSelectedSubChannels = data.reduce(
+            (acc: any, channel: any) => {
+              acc[channel.channelId] = channel.subChannels.reduce(
+                (subAcc: any, subChannel: any) => {
+                  subAcc[subChannel.channelId] = true;
+                  return subAcc;
+                },
+                {} as { [subChannelId: string]: boolean }
+              );
+              return acc;
+            },
+            {} as SelectedSubChannels
+          );
+          setSelectedSubChannels(newSelectedSubChannels);
+        }
+      } catch (error) {
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
 
   const handleSubChannelChange = (channelId: string, subChannelId: string) => {
     setSelectedSubChannels((prev) => ({
@@ -131,27 +154,38 @@ export const ChannelProvider = ({ children }: ChannelProviderProps) => {
     }));
   };
 
-  useEffect(() => {
-    const { platformId, property } = router.query;
-    if (platformId && property) {
-      const platformIdString = Array.isArray(platformId)
-        ? platformId[0]
-        : platformId;
-      const propertyString = Array.isArray(property) ? property[0] : property;
+  const updateSelectedSubChannels = (
+    allChannels: Channel[],
+    newSelectedSubChannels: string[]
+  ) => {
+    setSelectedSubChannels((prevSelectedSubChannels: SelectedSubChannels) => {
+      const updatedSelectedSubChannels: SelectedSubChannels = {
+        ...prevSelectedSubChannels,
+      };
 
-      platformIdRef.current = platformIdString;
-      propertyRef.current = propertyString;
-      refreshData();
-    }
-  }, [router.query]);
+      allChannels.forEach((channel) => {
+        const channelUpdates: { [subChannelId: string]: boolean } = {};
+
+        channel.subChannels.forEach((subChannel) => {
+          channelUpdates[subChannel.channelId] =
+            newSelectedSubChannels.includes(subChannel.channelId);
+        });
+
+        updatedSelectedSubChannels[channel.channelId] = channelUpdates;
+      });
+
+      return updatedSelectedSubChannels;
+    });
+  };
 
   const value = {
     channels,
     loading,
     selectedSubChannels,
-    refreshData,
     handleSubChannelChange,
     handleSelectAll,
+    refreshData,
+    updateSelectedSubChannels,
   };
 
   return (

diff --git a/src/pages/callback.tsx b/src/pages/callback.tsx
@@ -85,9 +85,7 @@ function Callback() {
       if (!data) {
         router.push('community-settings');
       }
-      router.push(
-        `/community-settings/platform/${data.id}?property=channel&platformId=${data.id}`
-      );
+      router.push(`/community-settings/platform/${data.id}`);
     } catch (error) {
       console.error('Failed to create new platform:', error);
     }