Development

package.json

@@ -64,10 +64,12 @@
     "zustand": "^4.3.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/d3-force": "^3.0.4",
     "@types/papaparse": "^5.3.8",
+    "@types/testing-library__user-event": "^4.2.0",
     "autoprefixer": "^10.4.13",
     "babel-jest": "^29.5.0",
     "identity-obj-proxy": "^3.0.0",

src/axiosInstance.ts

@@ -1,11 +1,10 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { conf } from './configs/index';
 import { StorageService } from './services/StorageService';
-import router from 'next/router';
 import * as Sentry from '@sentry/nextjs';
 
 import { toast } from 'react-toastify';
-import { IUser } from './utils/types';
+import { IToken } from './utils/types';
 import { tokenRefreshEventEmitter } from './services/EventEmitter';
 
 let isRefreshing = false;
@@ -16,14 +15,14 @@ export const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   async (config: any) => {
-    const user: IUser | undefined =
-      StorageService.readLocalStorage<IUser>('user');
+    const user: IToken | undefined =
+      StorageService.readLocalStorage<IToken>('user');
 
     if (user) {
-      const { token } = user;
+      const { accessToken } = user;
 
-      if (token.accessToken) {
-        config.headers!['Authorization'] = `Bearer ${token.accessToken}`;
+      if (accessToken) {
+        config.headers!['Authorization'] = `Bearer ${accessToken}`;
       }
     }
 
@@ -52,8 +51,8 @@ axiosInstance.interceptors.response.use(
         });
         break;
       case 401:
-        const user: IUser | undefined =
-          StorageService.readLocalStorage<IUser>('user');
+        const user: IToken | undefined =
+          StorageService.readLocalStorage<IToken>('user');
 
         if (
           error.response?.status === 401 &&
@@ -78,25 +77,22 @@ axiosInstance.interceptors.response.use(
           !error.config.url?.endsWith('/auth/refresh-tokens') &&
           user
         ) {
-          const { token } = user;
+          const { accessToken, refreshToken } = user;
 
-          if (token.refreshToken && !isRefreshing) {
+          if (refreshToken && !isRefreshing) {
             isRefreshing = true;
 
             try {
               const response = await axiosInstance.post(
                 '/auth/refresh-tokens',
                 {
-                  refreshToken: token.refreshToken,
+                  refreshToken: refreshToken,
                 }
               );
 
               StorageService.writeLocalStorage('user', {
-                guild: user.guild,
-                token: {
-                  accessToken: response.data.access.token,
-                  refreshToken: response.data.refresh.token,
-                },
+                accessToken: response.data.access.token,
+                refreshToken: response.data.refresh.token,
               });
 
               axiosInstance.defaults.headers['Authorization'] =
@@ -118,7 +114,7 @@ axiosInstance.interceptors.response.use(
             } finally {
               isRefreshing = false;
             }
-          } else if (token.refreshToken && isRefreshing) {
+          } else if (refreshToken && isRefreshing) {
             // If a refresh is already in progress, listen for the completion event
             return new Promise((resolve, reject) => {
               tokenRefreshEventEmitter.subscribe('tokenRefresh', (newToken) => {

src/components/centric/selectCommunity/TcCommunityList.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import TcCommunityListItems from './TcCommunityListItems';
+import { IDiscordModifiedCommunity } from '../../../utils/interfaces';
+
+function TcCommunityList({ fetchedCommunities, handleActiveCommunity }: any) {
+  const [activeCommunity, setActiveCommunity] =
+    useState<IDiscordModifiedCommunity>();
+  const handleSelectedCommunity = (community: IDiscordModifiedCommunity) => {
+    setActiveCommunity(community);
+  };
+
+  useEffect(() => {
+    handleActiveCommunity(activeCommunity);
+  }, [activeCommunity]);
+
+  return (
+    <TcCommunityListItems
+      communities={fetchedCommunities.results}
+      onSelectCommunity={handleSelectedCommunity}
+    />
+  );
+}
+
+export default TcCommunityList;

src/components/centric/selectCommunity/TcCommunityListItems.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import TcAvatar from '../../shared/TcAvatar';
+import TcText from '../../shared/TcText';
+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.
+ */
+interface ITcCommunityListItemsProps {
+  /**
+   * Array of community objects with avatar URLs and labels.
+   */
+  communities: IDiscordModifiedCommunity[];
+  onSelectCommunity: (selectedCommunity: IDiscordModifiedCommunity) => void;
+}
+
+/**
+ * TcCommunityListItems Component
+ *
+ * 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.
+ *
+ * Props:
+ * - communities (IDiscordModifiedCommunity[]): 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,
+}: ITcCommunityListItemsProps) {
+  const [selectedCommunity, setSelectedCommunity] =
+    useState<IDiscordModifiedCommunity>();
+
+  useEffect(() => {
+    const community =
+      StorageService.readLocalStorage<IDiscordModifiedCommunity>('community');
+    setSelectedCommunity(community);
+  }, []);
+
+  useEffect(() => {
+    if (selectedCommunity) {
+      onSelectCommunity(selectedCommunity);
+    }
+  }, [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">
+        <TcText text="No community exist" variant={'body1'} color="gray" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex justify-start flex-wrap mt-8 mx-2">
+      {communities.map((community, index) => (
+        <div
+          className={clsx(
+            selectedCommunity?.id === community.id ? 'bg-gray-100' : '',
+            'flex-shrink-0 w-1/2 md:w-1/4 min-h-[150px] rounded text-center px-8 py-4 cursor-pointer space-y-2 hover:bg-gray-100 transition-all delay-75 ease-in'
+          )}
+          key={community.name + index}
+          onClick={() => setSelectedCommunity(community)}
+        >
+          {community?.avatarURL ? (
+            <TcAvatar className="mx-auto" src={community.avatarURL} />
+          ) : (
+            <TcAvatar className="mx-auto">
+              {renderPlatformAvatar(community)}
+            </TcAvatar>
+          )}
+          <TcText text={community.name} variant={'body1'} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default TcCommunityListItems;