Merge pull request #219 from TogetherCrew/feat/add-progress-alert

add progress platform alert state

src/components/communitySettings/platform/TcDisconnectPlatform.tsx

@@ -18,7 +18,8 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
 
   const [openDialog, setOpenDialog] = useState<boolean>(false);
   const router = useRouter();
-  const { id } = router.query;
+
+  const id = router.query.platformId as string;
 
   const handleDeletePlatform = async (deleteType: 'hard' | 'soft') => {
     try {

src/components/layouts/shared/TcPrompt.spec.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom/extend-expect';
 import TcPrompt from './TcPrompt';
 import mockRouter from 'next-router-mock';
 import { StorageService } from '../../../services/StorageService';
+import { TokenProvider } from '../../../context/TokenContext';
 
 jest.mock('next/router', () => require('next-router-mock'));
 jest.mock('../../../services/StorageService');
@@ -13,40 +14,56 @@ describe('TcPrompt', () => {
     jest.clearAllMocks();
     jest.spyOn(StorageService, 'readLocalStorage').mockImplementation((key) => {
       if (key === 'community') {
-        return { platforms: [] }; // Adjust this return value as needed for different test cases
+        return { platforms: [] };
       }
       return undefined;
     });
   });
 
+  const renderComponent = (url = '/') => {
+    mockRouter.setCurrentUrl(url);
+    render(
+      <TokenProvider>
+        <TcPrompt />
+      </TokenProvider>
+    );
+  };
+
   test('renders without crashing', () => {
-    mockRouter.setCurrentUrl('/');
-    render(<TcPrompt />);
-    // Additional checks can be added here
+    renderComponent();
   });
 
   test('renders prompt when no platforms are connected', () => {
-    mockRouter.setCurrentUrl('/');
-    render(<TcPrompt />);
+    renderComponent();
     expect(
       screen.getByText('To see the data, connect your community platforms.')
     ).toBeInTheDocument();
   });
 
   test('does not render prompt on excluded routes', () => {
-    mockRouter.setCurrentUrl('/cetric');
-    render(<TcPrompt />);
+    renderComponent('/cetric');
     expect(
       screen.queryByText('To see the data, connect your community platforms.')
     ).not.toBeInTheDocument();
   });
 
-  test('does not render prompt when platforms are connected', () => {
-    mockRouter.setCurrentUrl('/');
+  test('renders prompt when platform connection is in progress', () => {
+    jest
+      .spyOn(StorageService, 'readLocalStorage')
+      .mockReturnValue({ platforms: [{ metadata: { isInProgress: true } }] });
+    renderComponent();
+    expect(
+      screen.getByText(
+        'Data import is in progress. It might take up to 6 hours to finish the data import. Once it is done we will send you a message on Discord.'
+      )
+    ).toBeInTheDocument();
+  });
+
+  test('does not render prompt when platforms are connected and not in progress', () => {
     jest
       .spyOn(StorageService, 'readLocalStorage')
-      .mockReturnValue({ platforms: ['Discord'] });
-    render(<TcPrompt />);
+      .mockReturnValue({ platforms: [{ metadata: { isInProgress: false } }] });
+    renderComponent();
     expect(
       screen.queryByText('To see the data, connect your community platforms.')
     ).not.toBeInTheDocument();

src/components/layouts/shared/TcPrompt.tsx

@@ -1,36 +1,50 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import TcAlert from '../../shared/TcAlert';
 import TcButton from '../../shared/TcButton';
 import TcCollapse from '../../shared/TcCollapse';
 import TcText from '../../shared/TcText';
 import { useRouter } from 'next/router';
-import { StorageService } from '../../../services/StorageService';
-import { IDiscordModifiedCommunity } from '../../../utils/interfaces';
+import { useToken } from '../../../context/TokenContext';
 
 function TcPrompt() {
   const router = useRouter();
-  const community =
-    StorageService.readLocalStorage<IDiscordModifiedCommunity>('community');
+  const { community } = useToken();
+
   const shouldShowPrompt = useMemo(() => {
     const currentRoute = router.pathname;
     const isExcludedRoute =
       currentRoute.startsWith('/cetric') ||
       currentRoute.startsWith('/community-settings');
+
     const hasNoPlatforms = community?.platforms.length === 0;
 
-    return !isExcludedRoute && hasNoPlatforms;
+    const isPlatformInProgress = community?.platforms.some(
+      (platform) => platform?.metadata.isInProgress === true
+    );
+
+    return !isExcludedRoute && (hasNoPlatforms || isPlatformInProgress);
   }, [router.pathname, community?.platforms]);
 
   if (!shouldShowPrompt) {
     return null;
   }
 
-  const promptData = {
-    backgroundColor: 'bg-orange',
-    message: 'To see the data, connect your community platforms.',
-    buttonText: 'Connect Platform',
-    redirectRouteParams: '/?platform=Discord',
-  };
+  const isPlatformInProgress = community?.platforms.some(
+    (platform) => platform?.metadata?.isInProgress === true
+  );
+
+  const promptData = isPlatformInProgress
+    ? {
+        backgroundColor: 'bg-orange',
+        message:
+          'Data import is in progress. It might take up to 6 hours to finish the data import. Once it is done we will send you a message on Discord.',
+      }
+    : {
+        backgroundColor: 'bg-orange',
+        message: 'To see the data, connect your community platforms.',
+        buttonText: 'Connect Platform',
+        redirectRouteParams: '/?platform=Discord',
+      };
 
   const { backgroundColor, message, buttonText, redirectRouteParams } =
     promptData;
@@ -61,24 +75,26 @@ function TcPrompt() {
       >
         <div className="md:space-x-3 flex flex-col md:flex-row items-center justify-center p-0">
           <TcText text={message} color={'white'} variant={'subtitle1'} />
-          <TcButton
-            text={buttonText}
-            size="small"
-            variant="outlined"
-            onClick={() =>
-              router.push(`/community-settings${redirectRouteParams}`)
-            }
-            sx={{
-              border: '1px solid white',
-              color: 'white',
-              paddingY: '0',
-              '&:hover': {
-                background: 'white',
+          {buttonText && (
+            <TcButton
+              text={buttonText}
+              size="small"
+              variant="outlined"
+              onClick={() =>
+                router.push(`/community-settings${redirectRouteParams}`)
+              }
+              sx={{
                 border: '1px solid white',
-                color: 'black',
-              },
-            }}
-          />
+                color: 'white',
+                py: 0,
+                '&:hover': {
+                  backgroundColor: 'white',
+                  borderColor: 'white',
+                  color: 'black',
+                },
+              }}
+            />
+          )}
         </div>
       </TcAlert>
     </TcCollapse>

src/utils/interfaces.ts

@@ -155,9 +155,10 @@ export interface ICommunityDiscordPlatfromProps {
     id: string;
     icon: string;
     name: string;
-    selectedChannels: string[];
-    period: string;
-    analyzerStartedAt: string;
+    selectedChannels?: string[];
+    period?: string;
+    analyzerStartedAt?: string;
+    isInProgress?: boolean;
   };
   disconnectedAt: string | null;
 }