update eslint file

.eslintrc.js

@@ -13,29 +13,38 @@ module.exports = {
     'prettier',
   ],
   rules: {
-    'no-unused-vars': 'off',
-    'no-console': 'warn',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    'react/no-unescaped-entities': 'off',
-
-    'react/display-name': 'off',
+    'no-unused-vars': 'off', // Disabling base rule as it's handled by @typescript-eslint/no-unused-vars
+    'no-console': 'warn', // Allow console with warning to identify usage
+    '@typescript-eslint/explicit-module-boundary-types': 'off', // Disabling requirement for explicit return types on functions
+    'react/no-unescaped-entities': 'off', // Disable warnings for unescaped entities in JSX
+    'react/display-name': 'off', // Disable display name rule for React components
     'react/jsx-curly-brace-presence': [
       'warn',
       { props: 'never', children: 'never' },
-    ],
+    ], // Enforce no unnecessary curly braces in JSX
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    'no-empty': 'off',
+    'no-fallthrough': 'off',
+    'react/jsx-key': 'warn',
+    'react/no-children-prop': 'off',
+    'no-prototype-builtins': 'warn',
+    'no-case-declarations': 'warn',
 
+    // Disable rule for unused vars but enable warning for unused imports and vars with specific patterns
     '@typescript-eslint/no-unused-vars': 'off',
     'unused-imports/no-unused-imports': 'warn',
     'unused-imports/no-unused-vars': [
       'warn',
       {
         vars: 'all',
-        varsIgnorePattern: '^_',
+        varsIgnorePattern: '^_', // Ignore vars with _ prefix
         args: 'after-used',
-        argsIgnorePattern: '^_',
+        argsIgnorePattern: '^_', // Ignore args with _ prefix
       },
     ],
 
+    // Configuring import sorting
     'simple-import-sort/exports': 'warn',
     'simple-import-sort/imports': [
       'warn',
@@ -65,7 +74,7 @@ module.exports = {
     ],
   },
   globals: {
-    React: true,
+    React: 'writable', // Updated to 'writable' to reflect correct usage
     JSX: true,
   },
-};
+};

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18' 
+          node-version: '18'
           cache: 'npm'
       - run: npm ci
       - run: npm run build

jest.config.js

@@ -9,7 +9,8 @@ module.exports = {
   moduleNameMapper: {
     '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
     '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
-    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$': '<rootDir>/__mocks__/fileMock.js',
+    '^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$':
+      '<rootDir>/__mocks__/fileMock.js',
   },
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
   testEnvironment: 'jsdom',

src/components/announcements/TcAnnouncementsAlert.tsx

@@ -39,7 +39,7 @@ function TcAnnouncementsAlert() {
     >
       <TcAlert
         variant='filled'
-        className="bg-error-500"
+        className='bg-error-500'
         icon={false}
         sx={{
           display: 'flex',
@@ -50,9 +50,9 @@ function TcAnnouncementsAlert() {
       >
         <div className='flex flex-col items-center justify-center p-0 md:flex-row md:space-x-3'>
           <TcText
-            text="Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)"
-            color="white"
-            variant="subtitle1"
+            text='Announcements needs write access at the server-level (i.e. Send Message, Send Messages in Threads, Create Public Threads, Create Private Threads, etc)'
+            color='white'
+            variant='subtitle1'
           />
           <TcButton
             text='Update Permissions'

src/components/announcements/TcAnnouncementsTable.tsx

@@ -14,7 +14,7 @@ import Router from 'next/router';
 import React, { useState } from 'react';
 import { AiOutlineClose } from 'react-icons/ai';
 import { BsThreeDotsVertical } from 'react-icons/bs';
-import { MdDelete,MdModeEdit } from 'react-icons/md';
+import { MdDelete, MdModeEdit } from 'react-icons/md';
 
 import Loading from '../global/Loading';
 import TcButton from '../shared/TcButton';
@@ -513,13 +513,13 @@ function TcAnnouncementsTable({
                 />
                 <div className='flex items-center space-x-3 py-3'>
                   <TcButton
-                    text="Cancel"
+                    text='Cancel'
                     className='w-full'
                     variant='outlined'
                     onClick={() => setDeleteConfirmDialogOpen(false)}
                   />
                   <TcButton
-                    text="Confirm"
+                    text='Confirm'
                     className='w-full'
                     variant='contained'
                     onClick={() =>

src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.spec.tsx

@@ -1,4 +1,4 @@
-import { fireEvent,render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
 import TcConfirmSchaduledAnnouncementsDialog from './TcConfirmSchaduledAnnouncementsDialog';

src/components/announcements/TcConfirmSchaduledAnnouncementsDialog.tsx

@@ -81,15 +81,15 @@ function TcConfirmSchaduledAnnouncementsDialog({
                 <div className='flex items-center space-x-1'>
                   <FaDiscord size={20} className='text-gray-500' />
                   <TcText
-                    text="Discord announcements scheduled for:"
+                    text='Discord announcements scheduled for:'
                     variant='body2'
                     className='text-left'
                   />
                 </div>
                 <div className='flex flex-col'>
                   <div className='flex items-center justify-between'>
                     <TcText
-                      text="Public Message to:"
+                      text='Public Message to:'
                       fontWeight={500}
                       variant='subtitle2'
                       className='text-left text-gray-400'
@@ -111,7 +111,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
                   <div className='flex flex-col'>
                     <div className='flex items-center justify-between'>
                       <TcText
-                        text="Private Message to these user(s):"
+                        text='Private Message to these user(s):'
                         fontWeight={500}
                         variant='subtitle2'
                         className='text-left text-gray-400'
@@ -136,7 +136,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
                   <div className='flex flex-col'>
                     <div className='flex items-center justify-between'>
                       <TcText
-                        text="Private Message to these role(s):"
+                        text='Private Message to these role(s):'
                         fontWeight={500}
                         variant='subtitle2'
                         className='text-left text-gray-400'
@@ -158,7 +158,7 @@ function TcConfirmSchaduledAnnouncementsDialog({
               </div>
               <div className='w-full py-6'>
                 <TcButton
-                  text="Confirm"
+                  text='Confirm'
                   variant='contained'
                   onClick={() => {
                     setConfirmSchadulerDialog(false);

src/components/announcements/create/privateMessaageContainer/TcPrivateMessageContainer.tsx

@@ -156,9 +156,7 @@ function TcPrivateMessageContainer({
             }
             label={
               <div className='flex items-center space-x-1'>
-                <TcIconWithTooltip
-                  tooltipText="Community members who have their DMs open will receive a DM. Members who have their DMs closed, will receive a private message inside the server (only they can see it). Additionally, a public message will always be sent with instructions to verify the legitimacy of the bot and announcement by checking the bot ID."
-                />
+                <TcIconWithTooltip tooltipText='Community members who have their DMs open will receive a DM. Members who have their DMs closed, will receive a private message inside the server (only they can see it). Additionally, a public message will always be sent with instructions to verify the legitimacy of the bot and announcement by checking the bot ID.' />
               </div>
             }
           />

src/components/announcements/create/privateMessaageContainer/TcPrivateMessagePreviewDialog.tsx

@@ -113,7 +113,7 @@ function TcPublicMessagePreviewDialog({
               />
               <div className='w-full py-6'>
                 <TcButton
-                  text="Confirm"
+                  text='Confirm'
                   variant='contained'
                   onClick={() => setPreviewDialogOpen(false)}
                   sx={{ width: '100%' }}

src/components/announcements/create/privateMessaageContainer/TcRolesAutoComplete.tsx

@@ -154,7 +154,7 @@ function TcRolesAutoComplete({
     <TcAutocomplete
       options={fetchedRoles.results}
       getOptionLabel={(option) => option.name}
-      label="Select Role(s)"
+      label='Select Role(s)'
       multiple={true}
       loading={isLoading}
       loadingText={

src/components/announcements/create/privateMessaageContainer/TcUsersAutoComplete.tsx

@@ -162,7 +162,7 @@ function TcUsersAutoComplete({
     <TcAutocomplete
       options={fetchedUsers.results}
       getOptionLabel={(option) => option.ngu}
-      label="Select User(s)"
+      label='Select User(s)'
       multiple={true}
       loading={isLoading}
       loadingText={

src/components/announcements/create/publicMessageContainer/TcPublicMessagePreviewDialog.tsx

@@ -85,7 +85,7 @@ function TcPublicMessagePreviewDialog({
               />
               <div className='w-full py-6'>
                 <TcButton
-                  text="Confirm"
+                  text='Confirm'
                   variant='contained'
                   onClick={() => setPreviewDialogOpen(false)}
                   sx={{ width: '100%' }}

src/components/centric/selectCommunity/TcCommunityListItems.tsx

@@ -91,7 +91,7 @@ function TcCommunityListItems({
   if (communities.length === 0) {
     return (
       <div className='py-8'>
-        <TcText text='No community exist' variant="body1" color='gray' />
+        <TcText text='No community exist' variant='body1' color='gray' />
       </div>
     );
   }
@@ -114,7 +114,7 @@ function TcCommunityListItems({
               {renderPlatformAvatar(community)}
             </TcAvatar>
           )}
-          <TcText text={community.name} variant="body1" />
+          <TcText text={community.name} variant='body1' />
         </div>
       ))}
     </div>

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

@@ -1,4 +1,4 @@
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import TcCommunityListItems from './TcCommunityListItems';

src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx

@@ -50,7 +50,7 @@ function TcCommunityIntegrations() {
 
   return (
     <>
-      <TcText text='Integration' variant="h6" />
+      <TcText text='Integration' variant='h6' />
       <div className='space-y-5'>
         {fetchedPlatforms?.results.length > 0 ? (
           <div className='space-y-4 md:mb-8'>

src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsConfirmDialog.tsx

@@ -52,7 +52,7 @@ function TcCommunityIntegrationsConfirmDialog({
         />
         <div className='py-6'>
           <TcButton
-            text="I understand"
+            text='I understand'
             variant='contained'
             onClick={() => handleCloseDialog()}
           />

src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx

@@ -93,12 +93,12 @@ function TcCommunityIntegrationsDialog() {
             <div className='px-16 pb-12 text-left'>
               <div className='space-y-4 pt-2'>
                 <TcText
-                  text="Choose date period for data analysis"
+                  text='Choose date period for data analysis'
                   variant='body1'
                   fontWeight='bold'
                 />
                 <TcText
-                  text="You will be able to change date period and selected channels in the future."
+                  text='You will be able to change date period and selected channels in the future.'
                   variant='body2'
                 />
                 <TcPeriodRange
@@ -110,7 +110,7 @@ function TcCommunityIntegrationsDialog() {
               </div>
               <div className='flex justify-center pt-12 pb-4'>
                 <TcButton
-                  text="Continue"
+                  text='Continue'
                   variant='contained'
                   onClick={handlePatchPlatform}
                 />

src/components/communitySettings/communityIntegrations/TcConnectedPlatformsItem.tsx

@@ -89,14 +89,14 @@ function TcConnectedPlatformsItem({ platform }: TcConnectedPlatformsItemProps) {
               />
               <ClickAwayListener onClickAway={handleTooltipClose}>
                 <Tooltip
-                  title="Connected"
+                  title='Connected'
                   arrow
                   placement='right'
                   enterTouchDelay={0}
                 >
                   <div
                     onClick={handleTooltipOpen}
-                    className="h-3 w-3 rounded-full bg-success"
+                    className='h-3 w-3 rounded-full bg-success'
                   />
                 </Tooltip>
               </ClickAwayListener>

src/components/communitySettings/platform/TcDisconnectPlatform.tsx

@@ -34,7 +34,7 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
   return (
     <>
       <TcButton
-        text="Disconnect"
+        text='Disconnect'
         variant='outlined'
         sx={{ width: '7.5rem', padding: '0.5rem' }}
         onClick={() => setOpenDialog(true)}
@@ -69,7 +69,7 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
           <div className='flex flex-col justify-between space-y-4 pb-8 md:flex-row md:space-y-0 md:space-x-5 md:py-12'>
             <div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
               <TcText
-                text="Disconnect and delete data"
+                text='Disconnect and delete data'
                 variant='body1'
                 fontWeight='bold'
               />
@@ -84,15 +84,15 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
                 variant='body2'
               />
               <TcButton
-                text="Disconnect and delete"
+                text='Disconnect and delete'
                 variant='contained'
                 className='w-full'
                 onClick={() => handleDeletePlatform('hard')}
               />
             </div>
             <div className='space-y-4 rounded-md px-4 py-6 shadow-xl'>
               <TcText
-                text="Disconnect only"
+                text='Disconnect only'
                 variant='body1'
                 fontWeight='bold'
               />
@@ -107,7 +107,7 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
                 variant='body2'
               />
               <TcButton
-                text="Disconnect"
+                text='Disconnect'
                 variant='contained'
                 className='w-full'
                 onClick={() => handleDeletePlatform('soft')}

src/components/communitySettings/platform/TcPlatform.tsx

@@ -149,9 +149,9 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
         <div className='space-y-4 p-4 md:p-10'>
           <div className='flex flex-col md:flex-row md:items-center md:justify-between'>
             <div className='space-y-5'>
-              <TcText text={platformName} variant="h6" />
+              <TcText text={platformName} variant='h6' />
               <div>
-                <TcText text='Server:' variant="body2" color="gray.100" />
+                <TcText text='Server:' variant='body2' color='gray.100' />
                 <TcCommunityName platform={fetchedPlatform} />
               </div>
             </div>

src/components/communitySettings/platform/TcPlatformChannelDialog.tsx

@@ -21,7 +21,7 @@ function TcPlatformChannelDialog() {
   return (
     <div>
       <TcText
-        text="Confirm your imported channels"
+        text='Confirm your imported channels'
         variant='body1'
         fontWeight='bold'
       />
@@ -32,7 +32,7 @@ function TcPlatformChannelDialog() {
           className='whitespace-nowrap'
         />
         <TcButton
-          text="Show channels"
+          text='Show channels'
           sx={{ width: 'auto', textDecoration: 'underline' }}
           onClick={() => setOpenDialog(true)}
         />
@@ -54,7 +54,7 @@ function TcPlatformChannelDialog() {
         }}
       >
         <div className='flex items-center justify-between p-6'>
-          <TcText text="Import activities from channels" variant='h5' />
+          <TcText text='Import activities from channels' variant='h5' />
           <AiOutlineClose
             className='cursor-pointer'
             size={24}
@@ -68,7 +68,7 @@ function TcPlatformChannelDialog() {
         </div>
         <div className='flex justify-center px-6 pb-3 md:px-0'>
           <TcButton
-            text="Save Channels"
+            text='Save Channels'
             variant='contained'
             sx={{ width: '15rem', padding: '0.5rem' }}
             onClick={() => setOpenDialog(false)}