Merge pull request #213 from TogetherCrew/feat/cc-improvments

Feat/CC improvments
TogetherCrew · Dec 8, 2023 · 29b8e22 · 29b8e22
2 parents 0ed88c1 + 590bb3c
commit 29b8e22
Show file tree

Hide file tree

Showing 15 changed files with 611 additions and 247 deletions.
diff --git a/src/components/centric/selectCommunity/TcCommunityListItems.tsx b/src/components/centric/selectCommunity/TcCommunityListItems.tsx
@@ -5,6 +5,8 @@ import { IDiscordModifiedCommunity } from '../../../utils/interfaces';
 import clsx from 'clsx';
 import { StorageService } from '../../../services/StorageService';
 import { MdGroups } from 'react-icons/md';
+import { conf } from '../../../configs';
+import Image from 'next/image';
 
 /**
  * Props for the TcCommunityListItems component.
@@ -57,6 +59,34 @@ function TcCommunityListItems({
     }
   }, [selectedCommunity]);
 
+  const renderPlatformAvatar = (community: IDiscordModifiedCommunity) => {
+    let activeCommunityPlatformIcon;
+
+    if (community?.platforms) {
+      activeCommunityPlatformIcon = community.platforms.find(
+        (platform) => platform.disconnectedAt === null
+      );
+    }
+
+    if (
+      activeCommunityPlatformIcon &&
+      activeCommunityPlatformIcon.metadata &&
+      activeCommunityPlatformIcon.metadata.icon
+    ) {
+      return (
+        <Image
+          src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
+          width="100"
+          height="100"
+          alt={activeCommunityPlatformIcon.metadata.name || ''}
+          className="rounded-full"
+        />
+      );
+    }
+
+    return <MdGroups size={28} />;
+  };
+
   if (communities.length === 0) {
     return (
       <div className="py-8">
@@ -80,7 +110,7 @@ function TcCommunityListItems({
             <TcAvatar className="mx-auto" src={community.avatarURL} />
           ) : (
             <TcAvatar className="mx-auto">
-              <MdGroups size={28} />
+              {renderPlatformAvatar(community)}
             </TcAvatar>
           )}
           <TcText text={community.name} variant={'body1'} />

diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx
@@ -91,7 +91,10 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
                   placement="right"
                   enterTouchDelay={0}
                 >
-                  <div className={'h-3 w-3 rounded-full bg-success'} />
+                  <div
+                    onClick={handleTooltipOpen}
+                    className={'h-3 w-3 rounded-full bg-success'}
+                  />
                 </Tooltip>
               </ClickAwayListener>
             </div>

diff --git a/src/components/communitySettings/platform/TcCommunityName.tsx b/src/components/communitySettings/platform/TcCommunityName.tsx
@@ -2,19 +2,63 @@ import React from 'react';
 import TcText from '../../shared/TcText';
 import TcAvatar from '../../shared/TcAvatar';
 import moment from 'moment';
-import { IPlatformProps } from '../../../utils/interfaces';
+import Image from 'next/image';
+import {
+  IDiscordModifiedCommunity,
+  IPlatformProps,
+} from '../../../utils/interfaces';
 import { MdGroups } from 'react-icons/md';
+import { useToken } from '../../../context/TokenContext';
+import { conf } from '../../../configs';
 
 interface TccommunityName {
   platform: IPlatformProps | null;
 }
 
 function TcCommunityName({ platform }: TccommunityName) {
+  const { community } = useToken();
+
+  const renderPlatformAvatar = (community: IDiscordModifiedCommunity) => {
+    let activeCommunityPlatformIcon;
+
+    if (community?.platforms) {
+      activeCommunityPlatformIcon = community.platforms.find(
+        (platform) => platform.disconnectedAt === null
+      );
+    }
+
+    if (
+      activeCommunityPlatformIcon &&
+      activeCommunityPlatformIcon.metadata &&
+      activeCommunityPlatformIcon.metadata.icon
+    ) {
+      return (
+        <Image
+          src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
+          width="100"
+          height="100"
+          alt={activeCommunityPlatformIcon.metadata.name || ''}
+          className="rounded-full"
+        />
+      );
+    }
+
+    return <MdGroups size={28} />;
+  };
+
   return (
     <div className="flex justify-start space-x-4 items-center py-3">
-      <TcAvatar data-testid="tc-avatar">
-        <MdGroups size={28} />
-      </TcAvatar>
+      {community && community.avatarURL ? (
+        <TcAvatar
+          className="mx-auto"
+          src={community.avatarURL}
+          data-testid="tc-avatar"
+        />
+      ) : (
+        <TcAvatar className="mx-auto" data-testid="tc-avatar">
+          {community ? renderPlatformAvatar(community) : <MdGroups size={28} />}
+        </TcAvatar>
+      )}
       <div className="flex flex-col">
         <TcText text={platform?.metadata?.name} variant="body1" />
         <TcText

diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -31,33 +31,38 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
   const [currentTrueIDs, setCurrentTrueIDs] = useState<string[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [openConfirmDialog, setOpenConfirmDialog] = useState<boolean>(false);
+  const [isChannelsFetched, setIsChannelFetched] = useState<boolean>(true);
 
   const [initialPlatformAnalyzerDate, setInitialPlatformAnalyzerDate] =
     useState<string>('');
   const [initialTrueIDs, setInitialTrueIDs] = useState<string[]>([]);
 
   const { refreshData, selectedSubChannels } = channelContext;
 
-  const id = Array.isArray(router.query.id)
-    ? router.query.id[0]
-    : router.query.id;
+  const id = router.query.id as string;
 
   const fetchPlatform = async () => {
-    setLoading(true);
-
     if (id) {
       try {
+        setLoading(true);
         const data = await retrievePlatformById(id);
         setFetchedPlatform(data);
+        setLoading(false);
         const { metadata } = data;
         if (metadata) {
           const { selectedChannels } = metadata;
 
-          await refreshData(id, 'channel', selectedChannels);
+          const data = await refreshData(id, 'channel', selectedChannels);
+
+          if (data && data.length === 0) {
+            setIsChannelFetched(false);
+          }
         } else {
-          await refreshData(id);
+          const data = await refreshData(id, 'channel');
+          if (data && data.length === 0) {
+            setIsChannelFetched(false);
+          }
         }
-        setLoading(false);
       } catch (error) {
       } finally {
       }
@@ -68,6 +73,33 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     fetchPlatform();
   }, [id, retrievePlatformById]);
 
+  useEffect(() => {
+    if (isChannelsFetched) return;
+
+    const fetchPlatformData = async () => {
+      if (!id) return;
+
+      try {
+        const data = await retrievePlatformById(id);
+        setFetchedPlatform(data);
+        const { metadata } = data;
+        if (metadata) {
+          const { selectedChannels } = metadata;
+          await refreshData(id, 'channel', selectedChannels);
+        } else {
+          await refreshData(id);
+        }
+        setLoading(false);
+      } catch (error) {}
+    };
+
+    const intervalId = setInterval(() => {
+      fetchPlatformData();
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, [isChannelsFetched]);
+
   const handlePatchCommunity = async () => {
     try {
       const data = await patchPlatformById({

diff --git a/src/components/communitySettings/platform/TcPlatformChannelList.tsx b/src/components/communitySettings/platform/TcPlatformChannelList.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { FormControlLabel, FormGroup } from '@mui/material';
 import TcCheckbox from '../../shared/TcCheckbox';
 import TcText from '../../shared/TcText';
@@ -8,6 +8,7 @@ import Loading from '../../global/Loading';
 import { ChannelContext } from '../../../context/ChannelContext';
 import { useRouter } from 'next/router';
 import clsx from 'clsx';
+import { BiError } from 'react-icons/bi';
 
 interface ITcPlatformChannelList {
   refreshTrigger: boolean;
@@ -60,7 +61,7 @@ function TcPlatformChannelList({
     <div className="max-h-[400px] overflow-y-scroll">
       {refreshTrigger ? (
         <TcButton
-          className="sticky top-4 float-right m-4"
+          className="sticky top-4 float-right m-4 bg-white"
           startIcon={<TbRefresh />}
           sx={{ maxWidth: '10rem' }}
           variant="outlined"
@@ -76,8 +77,8 @@ function TcPlatformChannelList({
         )}
       >
         {channels &&
-          channels?.map((channel) => (
-            <div key={channel.channelId}>
+          channels?.map((channel, index) => (
+            <div key={`${channel.channelId} ${index}`}>
               <TcText variant="h6" text={channel.title} />
               <div className="ml-5">
                 <FormControlLabel
@@ -92,32 +93,54 @@ function TcPlatformChannelList({
                       onChange={() =>
                         handleSelectAll(channel.channelId, channel?.subChannels)
                       }
+                      disabled={channel?.subChannels?.some(
+                        (subChannel) =>
+                          !subChannel.canReadMessageHistoryAndViewChannel
+                      )}
                     />
                   }
-                  label="Select All"
+                  label="All Channels"
                 />
                 <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}
-                    />
+                  {channel.subChannels.map((subChannel, index) => (
+                    <div
+                      className="flex justify-between"
+                      key={`${subChannel.channelId} ${subChannel.parentId} ${index}`}
+                    >
+                      <FormControlLabel
+                        control={
+                          <TcCheckbox
+                            checked={
+                              selectedSubChannels[channel.channelId]?.[
+                                subChannel.channelId
+                              ] || false
+                            }
+                            disabled={
+                              !subChannel.canReadMessageHistoryAndViewChannel
+                            }
+                            onChange={() =>
+                              handleSubChannelChange(
+                                channel.channelId,
+                                subChannel.channelId
+                              )
+                            }
+                          />
+                        }
+                        label={subChannel.name}
+                      />
+                      {!subChannel.canReadMessageHistoryAndViewChannel ? (
+                        <div className="flex items-center space-x-1">
+                          <BiError className="text-error-500" />
+                          <TcText
+                            className="text-error-500"
+                            text="Bot needs access"
+                          />
+                        </div>
+                      ) : (
+                        ''
+                      )}
+                    </div>
                   ))}
                 </FormGroup>
               </div>

diff --git a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
@@ -9,6 +9,8 @@ import TcInput from '../../shared/TcInput';
 import { debounce } from '@mui/material';
 import { useSnackbar } from '../../../context/SnackbarContext';
 import { MdGroups } from 'react-icons/md';
+import { conf } from '../../../configs';
+import Image from 'next/image';
 
 const updateCommunityName = debounce(
   async (communityId, newName, updateFunc, fetchFunc, showSnackbar) => {
@@ -88,6 +90,34 @@ function TcActiveCommunity() {
     }
   };
 
+  const renderPlatformAvatar = (community: IDiscordModifiedCommunity) => {
+    let activeCommunityPlatformIcon;
+
+    if (community?.platforms) {
+      activeCommunityPlatformIcon = community.platforms.find(
+        (platform) => platform.disconnectedAt === null
+      );
+    }
+
+    if (
+      activeCommunityPlatformIcon &&
+      activeCommunityPlatformIcon.metadata &&
+      activeCommunityPlatformIcon.metadata.icon
+    ) {
+      return (
+        <Image
+          src={`${conf.DISCORD_CDN}icons/${activeCommunityPlatformIcon.metadata.id}/${activeCommunityPlatformIcon.metadata.icon}`}
+          width="100"
+          height="100"
+          alt={activeCommunityPlatformIcon.metadata.name || ''}
+          className="rounded-full"
+        />
+      );
+    }
+
+    return <MdGroups size={28} />;
+  };
+
   if (loading) {
     return (
       <div className="flex justify-center items-center border-b border-b-gray-200 py-4 mt-4">
@@ -99,13 +129,17 @@ function TcActiveCommunity() {
   return (
     <div className="flex flex-col md:flex-row md:justify-between md:items-center border-b border-b-gray-200 md:py-4 mt-4">
       <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row md:items-center space-x-2 md:px-3">
-        <TcAvatar
-          src={community?.avatarURL}
-          sx={{ width: 40, height: 40 }}
-          className="mx-auto"
-        >
-          <MdGroups size={28} />
-        </TcAvatar>
+        {community && community.avatarURL ? (
+          <TcAvatar className="mx-auto" src={community.avatarURL} />
+        ) : (
+          <TcAvatar className="mx-auto">
+            {community ? (
+              renderPlatformAvatar(community)
+            ) : (
+              <MdGroups size={28} />
+            )}
+          </TcAvatar>
+        )}
         {loading ? (
           <Loading height="40px" size={30} />
         ) : (