add empty state for statistic

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'}

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} />
       ))}

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 {
       }

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);

src/components/global/EmptyState.tsx

@@ -5,17 +5,23 @@ 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]">
       <div className="mx-auto">{image}</div>
       <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',
 };

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(

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,14 +116,30 @@ 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);
   };
 
   return (
     <TokenContext.Provider
-      value={{ token, community, updateToken, updateCommunity, clearToken }}
+      value={{
+        token,
+        community,
+        updateToken,
+        updateCommunity,
+        deleteCommunity,
+        clearToken,
+      }}
     >
       <SnackbarProvider>{children}</SnackbarProvider>
     </TokenContext.Provider>

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 = {

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';

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 />;
   }