From e05362d7c9031ca6b2c15527d14906a7263ab2b0 Mon Sep 17 00:00:00 2001 From: zuies Date: Tue, 12 Dec 2023 00:23:38 +0300 Subject: [PATCH] add progress alert state --- .../platform/TcDisconnectPlatform.tsx | 3 +- src/components/layouts/shared/TcPrompt.tsx | 74 +++++++++++-------- src/utils/interfaces.ts | 7 +- 3 files changed, 51 insertions(+), 33 deletions(-) diff --git a/src/components/communitySettings/platform/TcDisconnectPlatform.tsx b/src/components/communitySettings/platform/TcDisconnectPlatform.tsx index bf6e7c13..244da5f5 100644 --- a/src/components/communitySettings/platform/TcDisconnectPlatform.tsx +++ b/src/components/communitySettings/platform/TcDisconnectPlatform.tsx @@ -18,7 +18,8 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) { const [openDialog, setOpenDialog] = useState(false); const router = useRouter(); - const { id } = router.query; + + const id = router.query.platformId as string; const handleDeletePlatform = async (deleteType: 'hard' | 'soft') => { try { diff --git a/src/components/layouts/shared/TcPrompt.tsx b/src/components/layouts/shared/TcPrompt.tsx index 7cea43d6..18f23fd2 100644 --- a/src/components/layouts/shared/TcPrompt.tsx +++ b/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('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() { >
- - router.push(`/community-settings${redirectRouteParams}`) - } - sx={{ - border: '1px solid white', - color: 'white', - paddingY: '0', - '&:hover': { - background: 'white', + {buttonText && ( + + router.push(`/community-settings${redirectRouteParams}`) + } + sx={{ border: '1px solid white', - color: 'black', - }, - }} - /> + color: 'white', + py: 0, + '&:hover': { + backgroundColor: 'white', + borderColor: 'white', + color: 'black', + }, + }} + /> + )}
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index d717b1ba..d8218423 100644 --- a/src/utils/interfaces.ts +++ b/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; }