fix unit test issue

src/components/centric/selectCommunity/TcCommunityListItems.tsx

@@ -4,6 +4,7 @@ import TcText from '../../shared/TcText';
 import { ICommunity } from '../../../utils/interfaces';
 import clsx from 'clsx';
 import { StorageService } from '../../../services/StorageService';
+import { MdGroups } from 'react-icons/md';
 
 /**
  * Props for the TcCommunityListItems component.
@@ -17,15 +18,26 @@ interface ITcCommunityListItemsProps {
 }
 
 /**
- * Renders a list of community items.
+ * TcCommunityListItems Component
  *
- * Each item in the list displays an avatar and a label.
- * The component ensures that items are displayed with a hover effect and
- * a consistent layout across various screen sizes.
+ * Renders a list of community items, each displaying an avatar and a label.
+ * Features include:
+ * - Reading the currently selected community from local storage on initial render.
+ * - Updating the selected community both internally and via `onSelectCommunity` callback when a community is clicked.
+ * - Responsive layout for different screen sizes.
+ * - Displaying a message when there are no communities.
  *
- * @param communities - An array of community data with avatar and label properties.
- * @returns A JSX element containing the list of community items.
+ * Props:
+ * - communities (ICommunity[]): Array of community objects with `avatarURL` and `name`.
+ * - onSelectCommunity (Function): Callback when a community is selected.
+ *
+ * Usage:
+ * <TcCommunityListItems
+ *   communities={[{ id: 1, name: 'Community 1', avatarURL: 'url1' }]}
+ *   onSelectCommunity={handleSelect}
+ * />
  */
+
 function TcCommunityListItems({
   communities,
   onSelectCommunity,
@@ -62,7 +74,13 @@ function TcCommunityListItems({
           key={community.name + index}
           onClick={() => setSelectedCommunity(community)}
         >
-          <TcAvatar className="mx-auto" src={community.avatarURL} />
+          {community?.avatarURL ? (
+            <TcAvatar className="mx-auto" src={community.avatarURL} />
+          ) : (
+            <TcAvatar className="mx-auto">
+              <MdGroups size={28} />
+            </TcAvatar>
+          )}
           <TcText text={community.name} variant={'body1'} />
         </div>
       ))}

src/components/centric/selectCommunity/TcSelectCommunity.spec.tsx

@@ -1,21 +1,57 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import { render, screen, fireEvent } from '@testing-library/react';
 import TcCommunityListItems from './TcCommunityListItems';
+import { ICommunity } from '../../../utils/interfaces';
 
-describe('<TcCommunityListItems />', () => {
-  const mockCommunities = [
-    { avatar: 'path1', label: 'Community 1' },
-    { avatar: 'path2', label: 'Community 2' },
-    { avatar: 'path3', label: 'Community 3' },
+describe('TcCommunityListItems', () => {
+  const mockCommunities: ICommunity[] = [
+    {
+      id: '1',
+      name: 'Community 1',
+      platforms: ['platform1', 'platform2'],
+      users: ['user1', 'user2'],
+      avatarURL: 'url1',
+    },
+    {
+      id: '2',
+      name: 'Community 2',
+      platforms: ['platform3', 'platform4'],
+      users: ['user3', 'user4'],
+      avatarURL: 'url2',
+    },
   ];
 
-  it('renders the community items correctly', () => {
-    render(<TcCommunityListItems communities={mockCommunities} />);
+  const onSelectCommunityMock = jest.fn();
 
-    // Check that each community is rendered
-    mockCommunities.forEach((community) => {
-      expect(screen.getByText(community.label)).toBeInTheDocument();
-    });
+  it('renders community items correctly', () => {
+    render(
+      <TcCommunityListItems
+        communities={mockCommunities}
+        onSelectCommunity={onSelectCommunityMock}
+      />
+    );
+    expect(screen.getByText('Community 1')).toBeInTheDocument();
+    expect(screen.getByText('Community 2')).toBeInTheDocument();
+  });
+
+  it('calls onSelectCommunity when a community is clicked', () => {
+    render(
+      <TcCommunityListItems
+        communities={mockCommunities}
+        onSelectCommunity={onSelectCommunityMock}
+      />
+    );
+    fireEvent.click(screen.getByText('Community 1'));
+    expect(onSelectCommunityMock).toHaveBeenCalledWith(mockCommunities[0]);
+  });
+
+  it('displays a message when no communities are available', () => {
+    render(
+      <TcCommunityListItems
+        communities={[]}
+        onSelectCommunity={onSelectCommunityMock}
+      />
+    );
+    expect(screen.getByText('No community exist')).toBeInTheDocument();
   });
 });

src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import TcAvailableIntegrationsItem from './TcAvailableIntegrationsItem';
 import { IntegrationPlatform } from '../../../utils/enums';
-import { useToken } from '../../../context/TokenContext';
 
 function TcAvailableIntegrations() {
-  const { community } = useToken();
-
   return (
     <div className="flex flex-row space-x-5">
       {Object.values(IntegrationPlatform).map((platform, index) => (

src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.spec.tsx

@@ -1,19 +1,56 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-
 import TcConnectedPlatforms from './TcConnectedPlatforms';
 
-describe('<TcConnectedPlatforms />', () => {
-  it('renders TcConnectedPlatformsItem components based on mock data', () => {
-    render(<TcConnectedPlatforms />);
+// Mock the TcConnectedPlatformsItem component since it's imported and used in TcConnectedPlatforms
+jest.mock('./TcConnectedPlatformsItem', () => {
+  return function MockTcConnectedPlatformsItem({
+    platform,
+  }: {
+    platform: any;
+  }) {
+    return (
+      <div data-testid="mock-connected-platforms-item">
+        {/* Render the platform's name for testing purposes */}
+        {platform.name}
+      </div>
+    );
+  };
+});
+
+describe('TcConnectedPlatforms', () => {
+  it('renders connected platforms correctly', () => {
+    // Define mock data for connected platforms
+    const connectedPlatforms = [
+      {
+        name: 'Platform 1',
+        community: 'Community 1',
+        isInProgress: false,
+        connectedAt: '2023-01-01',
+        id: '1',
+        disconnectedAt: null,
+        metadata: {},
+      },
+      {
+        name: 'Platform 2',
+        community: 'Community 2',
+        isInProgress: true,
+        connectedAt: '2023-01-02',
+        id: '2',
+        disconnectedAt: null,
+        metadata: {},
+      },
+    ];
+
+    // Render the TcConnectedPlatforms component with the mock data
+    render(<TcConnectedPlatforms connectedPlatforms={connectedPlatforms} />);
 
-    // Check if the platform title from mock data is rendered
-    const allPlatformTitleElements = screen.getAllByText('Discord');
-    expect(allPlatformTitleElements[0]).toBeInTheDocument();
+    // Check if the platform names are rendered correctly
+    const platform1Element = screen.getByText('Platform 1');
+    const platform2Element = screen.getByText('Platform 2');
 
-    // Check if the community name from mock data is rendered
-    const communityNameElement = screen.getByText('Togethercrew');
-    expect(communityNameElement).toBeInTheDocument();
+    expect(platform1Element).toBeInTheDocument();
+    expect(platform2Element).toBeInTheDocument();
   });
 });

src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.spec.tsx

@@ -1,29 +1,27 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-
 import TcConnectedPlatformsItem from './TcConnectedPlatformsItem';
 
 describe('<TcConnectedPlatformsItem />', () => {
-  it('renders the platform title, icon, status, and community info', () => {
-    const MockIcon = () => <span>MockIcon</span>;
-
-    render(
-      <TcConnectedPlatformsItem
-        icon={<MockIcon />}
-        platformTitle="Mock Platform"
-        status={true}
-        community={{
-          logo: 'https://example.com/logo.png',
-          name: 'Mock Community',
-        }}
-      />
-    );
+  const mockPlatform = {
+    name: 'Discord',
+    community: 'Mock Community',
+    isInProgress: false,
+    connectedAt: '2021-01-01',
+    id: '1',
+    disconnectedAt: null,
+    metadata: {
+      profileImageUrl: 'https://example.com/image.png',
+      name: 'Example Community',
+      username: 'exampleuser',
+      icon: 'icon-id',
+    },
+  };
 
-    // Checking the platform title
-    expect(screen.getByText('Mock Platform')).toBeInTheDocument();
+  it('renders the platform title, status, and community info', () => {
+    render(<TcConnectedPlatformsItem platform={mockPlatform} />);
 
-    // Checking the icon
-    expect(screen.getByText('MockIcon')).toBeInTheDocument();
+    expect(screen.getByText('Discord')).toBeInTheDocument();
   });
 });

src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx

@@ -1,35 +1,40 @@
 /**
- * TcConnectedPlatformsItem Component.
+ * TcConnectedPlatformsItem Component
  *
- * This component displays information about a connected platform, such as:
- * - Platform's name and its status (in progress, completed, or error).
- * - An icon representing the platform.
- * - Community details: logo and name.
+ * This component displays detailed information about a specific platform connected to a community.
+ * It includes the platform's name, connection status, and related community details.
  *
  * Props:
- * - `icon`: A React element representing the platform's icon.
- *   It can be a JSX element or any component.
+ * - `platform` (IPlatformProps): An object containing the platform's details, including:
+ *    - `name`: The name of the platform.
+ *    - `community`: The name of the associated community.
+ *    - `isInProgress`: Boolean indicating the connection status of the platform.
+ *    - `connectedAt`: Date string representing when the platform was connected.
+ *    - `id`: The unique identifier of the platform.
+ *    - `disconnectedAt`: Date string or null, indicating when the platform was disconnected, if applicable.
+ *    - `metadata`: An object containing additional metadata about the platform.
  *
- * - `platformTitle`: The name or title of the platform, represented as a string.
- *
- * - `status`: Represents the platform's connection status.
- *   It's a boolean value true or false.
- *
- * - `community`: An object detailing the community associated with the platform:
- *    - `logo`: A string URL pointing to the community's logo.
- *    - `name`: The name of the community.
+ * The component visually represents the platform with an icon, the platform's name, and the community's information.
+ * It also provides a menu for additional actions, represented by a 'three dots' icon.
  *
  * @component
  * @example
- * <TcConnectedPlatformsItem
- *   icon={<SomeIcon />}
- *   platformTitle="Some Platform"
- *   status={true or false}
- *   community={{
- *     logo: 'https://example.com/logo.png',
- *     name: 'Example Community'
- *   }}
- * />
+ * const platform = {
+ *   name: 'Discord',
+ *   community: 'Example Community',
+ *   isInProgress: false,
+ *   connectedAt: '2021-01-01',
+ *   id: '1',
+ *   disconnectedAt: null,
+ *   metadata: {
+ *     profileImageUrl: 'https://example.com/image.png',
+ *     name: 'Example Community',
+ *     username: 'exampleuser',
+ *     icon: 'icon-id'
+ *   }
+ * };
+ *
+ * <TcConnectedPlatformsItem platform={platform} />
  */
 
 import React from 'react';

src/components/communitySettings/platform/TcCommunityName.tsx

@@ -13,7 +13,7 @@ function TcCommunityName({ platform }: TccommunityName) {
   return (
     <div className="flex justify-start space-x-4 items-center py-3">
       <TcAvatar data-testid="tc-avatar">
-        <MdGroups />
+        <MdGroups size={28} />
       </TcAvatar>
       <div className="flex flex-col">
         <TcText text={platform?.metadata?.name} variant="body1" />

src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx

@@ -8,6 +8,7 @@ import Loading from '../../global/Loading';
 import TcInput from '../../shared/TcInput';
 import { debounce } from '@mui/material';
 import { useSnackbar } from '../../../context/SnackbarContext';
+import { MdGroups } from 'react-icons/md';
 
 const updateCommunityName = debounce(
   async (communityId, newName, updateFunc, fetchFunc, showSnackbar) => {
@@ -98,7 +99,9 @@ function TcActiveCommunity() {
           src={community?.avatarURL}
           sx={{ width: 40, height: 40 }}
           className="mx-auto"
-        />
+        >
+          <MdGroups size={28} />
+        </TcAvatar>
         {loading ? (
           <Loading height="40px" size={30} />
         ) : (

src/components/layouts/Sidebar.tsx

@@ -10,20 +10,11 @@ type items = {
 import { conf } from '../../configs/index';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-// import the icons you need
-import {
-  faUserGroup,
-  faHeartPulse,
-  faGear,
-} from '@fortawesome/free-solid-svg-icons';
+import { faUserGroup, faHeartPulse } from '@fortawesome/free-solid-svg-icons';
 
-import { Router, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { Tooltip, Typography } from '@mui/material';
 import useAppStore from '../../store/useStore';
-import { StorageService } from '../../services/StorageService';
-import { IUser } from '../../utils/types';
-import { BsBarChartFill } from 'react-icons/bs';
 import { FiSettings } from 'react-icons/fi';
 
 const Sidebar = () => {
@@ -42,6 +33,8 @@ const Sidebar = () => {
     // }
   }, []);
 
+  // `${conf.DISCORD_CDN}icons/${platform.metadata.id}/${platform?.metadata.icon}.png`
+
   const menuItems: items[] = [
     {
       name: 'Community Insights',