Merge pull request #229 from TogetherCrew/development

Community centric V1

README.md

@@ -1,4 +1,74 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/35792fb5b2e30c99022c/maintainability)](https://codeclimate.com/github/RnDAO/tc-uiComm/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/35792fb5b2e30c99022c/test_coverage)](https://codeclimate.com/github/RnDAO/tc-uiComm/test_coverage)
 
-### Togethercrew application
+## Overview
+
+Welcome to the `Togethercrew` project! This repository contains a Next.js application with a rich set of features and dependencies geared towards building a robust and scalable web application.
+
+## Getting Started
+
+### Prerequisites
+
+Before you begin, ensure you have the following installed:
+
+- Node.js (version 18.11.9 or higher)
+- npm (comes with Node.js)
+
+### Installation
+
+1.  Clone the repository to your local machine.
+2.  Navigate to the project directory.
+3.  Run `npm install` to install all the dependencies listed in `package.json`.
+
+### Available Scripts
+
+In the project directory, you can run:
+
+- `npm run dev`\
+  Starts the development server.
+
+- `npm run build`\
+  Builds the app for production.
+
+- `npm run start`\
+  Runs the built app in production mode.
+
+- `npm run lint`\
+  Runs ESLint to catch linting errors.
+
+- `npm run test`\
+  Launches the test runner.
+
+- `npm run coverage`\
+  Generates test coverage.
+
+- `npm run export`\
+  Exports a static version of the app.
+
+## Dependencies
+
+The project uses a variety of dependencies for different purposes:
+
+- **[React](https://reactjs.org/) and [Next.js](https://nextjs.org/)**: For building the user interface and server-side rendering.
+- **[TypeScript](https://www.typescriptlang.org/)**: For adding type safety to the codebase.
+- **[ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)**: For code formatting and linting.
+- **[Jest](https://jestjs.io/)**: For running tests.
+- **[Material-UI](https://mui.com/) and [Emotion](https://emotion.sh/)**: For UI components and styling.
+- **[Highcharts](https://www.highcharts.com/)**: For data visualization.
+- **[Axios](https://axios-http.com/)**: For making HTTP requests.
+- **[Sentry](https://sentry.io/welcome/)**: For error tracking and monitoring.
+- **[Zustand](https://github.com/pmndrs/zustand)**: For state management.
+
+And many others that enhance the functionality and performance of the application.
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
+
+## License
+
+This project is licensed under the [MIT License](https://github.com/TogetherCrew/frontend?tab=MIT-1-ov-file).
+
+---
+
+For more details, refer to the project's documentation or contact the maintainers.

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,15 +51,15 @@ 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 &&
           error.config.url?.endsWith('/auth/refresh-tokens')
         ) {
           StorageService.removeLocalStorage('user');
-          StorageService.removeLocalStorage('analysis_state');
+          StorageService.removeLocalStorage('community');
           toast.error('Session expired. Please log in again.', {
             position: 'bottom-left',
             autoClose: 5000,
@@ -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;