From ffabb858009a8f4a1a35d3e930a1e39536ddb862 Mon Sep 17 00:00:00 2001
From: zuies <zurabichkhikvadze66@gmail.com>
Date: Fri, 1 Dec 2023 14:31:44 +0300
Subject: [PATCH] add empty state for statistic

---
 .../TcAvailableIntegrations.tsx               |  2 +-
 .../TcConnectedPlatforms.tsx                  |  2 +-
 .../communitySettings/platform/TcPlatform.tsx |  3 +++
 .../TcConfirmDeleteCommunity.tsx              |  3 +++
 src/components/global/EmptyState.tsx          | 11 +++++++++--
 .../activeMembers/ActiveMemberBreakdown.tsx   |  2 ++
 src/context/TokenContext.tsx                  | 19 ++++++++++++++++++-
 src/layouts/defaultLayout.tsx                 |  5 +----
 src/pages/community-settings/index.tsx        |  1 -
 src/pages/statistics.tsx                      | 14 +++++++++++++-
 10 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
index 79f4823c..b39020a7 100644
--- a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
@@ -4,7 +4,7 @@ import { IntegrationPlatform } from '../../../utils/enums';
 
 function TcAvailableIntegrations() {
   return (
-    <div className="flex flex-row space-x-5">
+    <div className="flex flex-row space-x-5 overflow-x-scroll py-2">
       {Object.values(IntegrationPlatform).map((platform, index) => (
         <TcAvailableIntegrationsItem
           disabled={platform !== 'Discord'}
diff --git a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
index b9a80c1f..f1d0abb0 100644
--- a/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
+++ b/src/components/communitySettings/communityIntegrations/TcConnectedPlatforms.tsx
@@ -10,7 +10,7 @@ function TcConnectedPlatforms({
   connectedPlatforms,
 }: IConnectedPlatformsProps) {
   return (
-    <div className="flex flex-row space-x-5">
+    <div className="flex flex-row space-x-5 overflow-x-scroll py-2">
       {connectedPlatforms?.map((platform: IPlatformProps, index: number) => (
         <TcConnectedPlatformsItem key={index} platform={platform} />
       ))}
diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
index 1c53a3b1..c4907c73 100644
--- a/src/components/communitySettings/platform/TcPlatform.tsx
+++ b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -43,6 +43,8 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     : router.query.id;
 
   const fetchPlatform = async () => {
+    setLoading(true);
+
     if (id) {
       try {
         const data = await retrievePlatformById(id);
@@ -55,6 +57,7 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
         } else {
           await refreshData(id);
         }
+        setLoading(false);
       } catch (error) {
       } finally {
       }
diff --git a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
index a2cb3c42..58e0f745 100644
--- a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
+++ b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
@@ -12,6 +12,7 @@ import useAppStore from '../../../store/useStore';
 import SimpleBackdrop from '../../global/LoadingBackdrop';
 import Router from 'next/router';
 import { StorageService } from '../../../services/StorageService';
+import { useToken } from '../../../context/TokenContext';
 
 interface CommunityComponentProps {
   community: ICommunity | null;
@@ -23,6 +24,7 @@ function TcConfirmDeleteCommunity({
   handleUpdatePlatforms,
 }: CommunityComponentProps) {
   const { deleteCommunityById } = useAppStore();
+  const { deleteCommunity } = useToken();
   const [loading, setLoading] = useState<boolean>(false);
   const [activeStep, setActiveStep] = useState<1 | 2>(1);
   const [openDialog, setOpenDialog] = useState<boolean>(false);
@@ -41,6 +43,7 @@ function TcConfirmDeleteCommunity({
       deleteCommunityById(community?.id).then(() => {
         StorageService.removeLocalStorage('community');
       });
+      deleteCommunity();
       setLoading(false);
       setActiveStep(1);
       setOpenDialog(false);
diff --git a/src/components/global/EmptyState.tsx b/src/components/global/EmptyState.tsx
index 0bf86dc4..51b72b05 100644
--- a/src/components/global/EmptyState.tsx
+++ b/src/components/global/EmptyState.tsx
@@ -5,9 +5,15 @@ type IProps = {
   image: JSX.Element;
   title: string;
   description: string;
+  customButtonLabel: string;
 };
 
-export default function EmptyState({ image, title, description }: IProps) {
+export default function EmptyState({
+  image,
+  title,
+  description,
+  customButtonLabel,
+}: IProps) {
   const router = useRouter();
   return (
     <div className="text-center flex flex-col justify-center p-8 md:p-0 md:w-2/3  mx-auto space-y-4 mt-[4rem]">
@@ -15,7 +21,7 @@ export default function EmptyState({ image, title, description }: IProps) {
       <h1 className="text-2xl font-bold">{title}</h1>
       <p className="text-sm md:w-5/12 mx-auto pb-1">{description}</p>
       <CustomButton
-        label={'Connect your community'}
+        label={customButtonLabel}
         classes="bg-secondary text-white mx-auto"
         onClick={() => {
           router.push('/community-settings');
@@ -29,4 +35,5 @@ EmptyState.defaultProps = {
   title: 'Almost there!',
   description:
     "To get an overview of your member's insights, community health, and more, connect your community.",
+  customButtonLabel: 'Connect your community',
 };
diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
index c2da8896..06ddf71d 100644
--- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
+++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx
@@ -75,6 +75,8 @@ export default function ActiveMemberBreakdown() {
     if (!platformId) {
       return;
     }
+    console.log(platformId, 'test log');
+
     setLoading(true);
     const fetchData = async () => {
       const res = await getActiveMemberCompositionTable(
diff --git a/src/context/TokenContext.tsx b/src/context/TokenContext.tsx
index 953cf5a9..5ed7b18a 100644
--- a/src/context/TokenContext.tsx
+++ b/src/context/TokenContext.tsx
@@ -17,6 +17,7 @@ type TokenContextType = {
   community: ICommunity | null;
   updateToken: (newToken: IToken) => void;
   updateCommunity: (newCommunity: ICommunity) => void;
+  deleteCommunity: () => void;
   clearToken: () => void;
 };
 
@@ -115,6 +116,15 @@ export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
     }, 5000);
   };
 
+  const deleteCommunity = () => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current);
+    }
+
+    StorageService.removeLocalStorage('community');
+    setCommunity(null);
+  };
+
   const clearToken = () => {
     StorageService.removeLocalStorage('user');
     setToken(null);
@@ -122,7 +132,14 @@ export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
 
   return (
     <TokenContext.Provider
-      value={{ token, community, updateToken, updateCommunity, clearToken }}
+      value={{
+        token,
+        community,
+        updateToken,
+        updateCommunity,
+        deleteCommunity,
+        clearToken,
+      }}
     >
       <SnackbarProvider>{children}</SnackbarProvider>
     </TokenContext.Provider>
diff --git a/src/layouts/defaultLayout.tsx b/src/layouts/defaultLayout.tsx
index 99a4ff6d..2ed3c239 100644
--- a/src/layouts/defaultLayout.tsx
+++ b/src/layouts/defaultLayout.tsx
@@ -1,9 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Sidebar from '../components/layouts/Sidebar';
 import SidebarXs from '../components/layouts/xs/SidebarXs';
-import useAppStore from '../store/useStore';
-import { StorageService } from '../services/StorageService';
-import { IUser } from '../utils/types';
 import TcPrompt from '../components/layouts/shared/TcPrompt';
 
 type IDefaultLayoutProps = {
diff --git a/src/pages/community-settings/index.tsx b/src/pages/community-settings/index.tsx
index 0a1ca2ad..4f7cbc10 100644
--- a/src/pages/community-settings/index.tsx
+++ b/src/pages/community-settings/index.tsx
@@ -6,7 +6,6 @@ import TcText from '../../components/shared/TcText';
 import TcCommunityIntegrations from '../../components/communitySettings/communityIntegrations/TcCommunityIntegrations';
 import TcIntegrationDialog from '../../components/pages/communitySettings/TcIntegrationDialog';
 import { useRouter } from 'next/router';
-import TcLink from '../../components/shared/TcLink';
 import TcSwitchCommunity from '../../components/communitySettings/switchCommunity/TcSwitchCommunity';
 import SimpleBackdrop from '../../components/global/LoadingBackdrop';
 import { ChannelProvider } from '../../context/ChannelContext';
diff --git a/src/pages/statistics.tsx b/src/pages/statistics.tsx
index 74f5444e..6e81db61 100644
--- a/src/pages/statistics.tsx
+++ b/src/pages/statistics.tsx
@@ -16,6 +16,9 @@ import { AiOutlineLeft } from 'react-icons/ai';
 import Onboarding from '../components/pages/statistics/Onboarding';
 import { transformToMidnightUTC } from '../helpers/momentHelper';
 import { useToken } from '../context/TokenContext';
+import EmptyState from '../components/global/EmptyState';
+import emptyState from '../assets/svg/empty-state.svg';
+import Image from 'next/image';
 
 const Statistics = () => {
   const { community } = useToken();
@@ -47,7 +50,7 @@ const Statistics = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        if (platformId) {
+        if (!platformId) {
           return;
         }
 
@@ -222,6 +225,15 @@ const Statistics = () => {
     setInactiveMembersDate(dateRangeType);
   };
 
+  if (!community || community?.platforms?.length === 0) {
+    return (
+      <>
+        <SEO />
+        <EmptyState image={<Image alt="Image Alt" src={emptyState} />} />
+      </>
+    );
+  }
+
   if (loading) {
     return <SimpleBackdrop />;
   }