refactor heatmap

TogetherCrew · Nov 29, 2023 · 848c9d5 · 848c9d5
1 parent 3660423
commit 848c9d5
Show file tree

Hide file tree

Showing 12 changed files with 336 additions and 882 deletions.
diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -36,8 +36,7 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     useState<string>('');
   const [initialTrueIDs, setInitialTrueIDs] = useState<string[]>([]);
 
-  const { refreshData, selectedSubChannels, updateSelectedSubChannels } =
-    channelContext;
+  const { refreshData, selectedSubChannels } = channelContext;
 
   const id = Array.isArray(router.query.id)
     ? router.query.id[0]
@@ -55,7 +54,7 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
 
           await refreshData(id, 'channel', selectedChannels);
         } else {
-          refreshData(id);
+          await refreshData(id);
         }
       } catch (error) {
       } finally {

diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx
@@ -6,31 +6,15 @@ import { AiOutlineClose } from 'react-icons/ai';
 import TcPlatformChannelDialogHeader from './TcPlatformChannelDialogHeader';
 import TcPlatformChannelDialogBody from './TcPlatformChannelDialogBody';
 import TcPlatformChannelDialogFooter from './TcPlatformChannelDialogFooter';
-import {
-  ChannelContext,
-  SelectedSubChannels,
-} from '../../../context/ChannelContext';
+import { ChannelContext } from '../../../context/ChannelContext';
+import { calculateSelectedChannelSize } from '../../../helpers/helper';
 
 function TcPlatformChannelDialog() {
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const channelContext = useContext(ChannelContext);
 
   const { selectedSubChannels } = channelContext;
 
-  const calculateSelectedChannelSize = (
-    selectedSubChannels: SelectedSubChannels
-  ) => {
-    let count = 0;
-    for (const channelId in selectedSubChannels) {
-      for (const subChannelId in selectedSubChannels[channelId]) {
-        if (selectedSubChannels[channelId][subChannelId]) {
-          count++;
-        }
-      }
-    }
-    return count;
-  };
-
   const selectedCount = calculateSelectedChannelSize(selectedSubChannels);
 
   return (

diff --git a/src/components/communitySettings/platform/TcPlatformChannelList.tsx b/src/components/communitySettings/platform/TcPlatformChannelList.tsx
@@ -7,8 +7,17 @@ import { TbRefresh } from 'react-icons/tb';
 import Loading from '../../global/Loading';
 import { ChannelContext } from '../../../context/ChannelContext';
 import { useRouter } from 'next/router';
+import clsx from 'clsx';
 
-function TcPlatformChannelList() {
+interface ITcPlatformChannelList {
+  refreshTrigger: boolean;
+  channelListCustomClass?: string;
+}
+
+function TcPlatformChannelList({
+  refreshTrigger = true,
+  channelListCustomClass,
+}: ITcPlatformChannelList) {
   const channelContext = useContext(ChannelContext);
   const router = useRouter();
 
@@ -35,64 +44,85 @@ function TcPlatformChannelList() {
     return <Loading height="400px" />;
   }
 
+  if (channels.length === 0) {
+    return (
+      <div className="flex justify-center py-24">
+        <TcText
+          text={'Channel list is empty'}
+          variant="body2"
+          className="text-gray-400"
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="max-h-[400px] overflow-y-scroll">
-      <TcButton
-        className="sticky top-4 float-right m-4"
-        startIcon={<TbRefresh />}
-        sx={{ maxWidth: '10rem' }}
-        variant="outlined"
-        onClick={handleRefresh}
-        text={'Refresh List'}
-      />
-      <div className="px-6 py-3">
-        {channels?.map((channel) => (
-          <div key={channel.channelId}>
-            <TcText variant="h6" text={channel.title} />
-            <div className="ml-5">
-              <FormControlLabel
-                control={
-                  <TcCheckbox
-                    checked={channel.subChannels.every(
-                      (subChannel) =>
-                        selectedSubChannels[channel.channelId]?.[
-                          subChannel.channelId
-                        ]
-                    )}
-                    onChange={() =>
-                      handleSelectAll(channel.channelId, channel.subChannels)
-                    }
-                  />
-                }
-                label="Select All"
-              />
-              <TcText text="Channels" />
-              <FormGroup>
-                {channel.subChannels.map((subChannel) => (
-                  <FormControlLabel
-                    key={subChannel.channelId}
-                    control={
-                      <TcCheckbox
-                        checked={
+      {refreshTrigger ? (
+        <TcButton
+          className="sticky top-4 float-right m-4"
+          startIcon={<TbRefresh />}
+          sx={{ maxWidth: '10rem' }}
+          variant="outlined"
+          onClick={handleRefresh}
+          text={'Refresh List'}
+        />
+      ) : (
+        ''
+      )}
+      <div
+        className={clsx(
+          channelListCustomClass ? channelListCustomClass : 'px-6 py-3'
+        )}
+      >
+        {channels &&
+          channels?.map((channel) => (
+            <div key={channel.channelId}>
+              <TcText variant="h6" text={channel.title} />
+              <div className="ml-5">
+                <FormControlLabel
+                  control={
+                    <TcCheckbox
+                      checked={channel?.subChannels?.every(
+                        (subChannel) =>
                           selectedSubChannels[channel.channelId]?.[
                             subChannel.channelId
-                          ] || false
-                        }
-                        onChange={() =>
-                          handleSubChannelChange(
-                            channel.channelId,
-                            subChannel.channelId
-                          )
-                        }
-                      />
-                    }
-                    label={subChannel.name}
-                  />
-                ))}
-              </FormGroup>
+                          ]
+                      )}
+                      onChange={() =>
+                        handleSelectAll(channel.channelId, channel?.subChannels)
+                      }
+                    />
+                  }
+                  label="Select All"
+                />
+                <TcText text="Channels" />
+                <FormGroup>
+                  {channel.subChannels.map((subChannel) => (
+                    <FormControlLabel
+                      key={subChannel.channelId}
+                      control={
+                        <TcCheckbox
+                          checked={
+                            selectedSubChannels[channel.channelId]?.[
+                              subChannel.channelId
+                            ] || false
+                          }
+                          onChange={() =>
+                            handleSubChannelChange(
+                              channel.channelId,
+                              subChannel.channelId
+                            )
+                          }
+                        />
+                      }
+                      label={subChannel.name}
+                    />
+                  ))}
+                </FormGroup>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
       </div>
     </div>
   );