update community settings pages

TogetherCrew · Nov 30, 2023 · 8b53776 · 8b53776
1 parent eed35d3
commit 8b53776
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 24 deletions.
diff --git a/src/components/centric/selectCommunity/TcSelectCommunity.tsx b/src/components/centric/selectCommunity/TcSelectCommunity.tsx
@@ -12,6 +12,7 @@ import { debounce } from '../../../helpers/helper';
 import { ICommunity } from '../../../utils/interfaces';
 import { StorageService } from '../../../services/StorageService';
 import SimpleBackdrop from '../../global/LoadingBackdrop';
+import { useToken } from '../../../context/TokenContext';
 
 export interface CommunityData {
   limit: number;
@@ -23,6 +24,9 @@ export interface CommunityData {
 
 function TcSelectCommunity() {
   const { retrieveCommunities } = useAppStore();
+
+  const { updateCommunity } = useToken();
+
   const [loading, setLoading] = useState<boolean>(false);
   const [communityLoading, setCommunityLoading] = useState<boolean>(false);
   const [activeCommunity, setActiveCommunity] = useState<ICommunity>();
@@ -52,6 +56,9 @@ function TcSelectCommunity() {
   const handleSelectedCommunity = () => {
     setCommunityLoading(true);
     StorageService.writeLocalStorage('community', activeCommunity);
+    if (activeCommunity) {
+      updateCommunity(activeCommunity);
+    }
     router.push('/');
   };
 
@@ -100,6 +107,7 @@ function TcSelectCommunity() {
         text="Continue"
         className="secondary"
         variant="contained"
+        disabled={!activeCommunity}
         onClick={handleSelectedCommunity}
       />
 

diff --git a/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx b/src/components/communitySettings/communityIntegrations/TcAvailableIntegrations.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import TcAvailableIntegrationsItem from './TcAvailableIntegrationsItem';
 import { IntegrationPlatform } from '../../../utils/enums';
+import { useToken } from '../../../context/TokenContext';
 
 function TcAvailableIntegrations() {
+  const { community } = useToken();
+
   return (
     <div className="flex flex-row space-x-5">
       {Object.values(IntegrationPlatform).map((platform, index) => (

diff --git a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrationsDialog.tsx
@@ -45,6 +45,7 @@ function TcCommunityIntegrationsDialog() {
 
   const handlePatchPlatform = async () => {
     setLoading(true);
+
     await patchPlatformById({
       id: platformId,
       metadata: {

diff --git a/src/components/communitySettings/platform/TcPeriodRange.tsx b/src/components/communitySettings/platform/TcPeriodRange.tsx
@@ -11,7 +11,6 @@ interface ITcPeriodRange {
 
 function TcPeriodRange({ handleSelectedDate, activePeriod }: ITcPeriodRange) {
   const periods: PeriodValue[] = ['Last 35 days', '1M', '3M', '6M', '1Y'];
-
   const calculateDaysDifference = (dateString: string): number => {
     const date = new Date(dateString);
     const today = new Date();
@@ -43,8 +42,16 @@ function TcPeriodRange({ handleSelectedDate, activePeriod }: ITcPeriodRange) {
       return '1Y';
     }
   };
+  console.log(findDefaultPeriod());
+
+  const [selected, setSelected] = useState<PeriodValue>('Last 35 days');
 
-  const [selected, setSelected] = useState<PeriodValue>(findDefaultPeriod());
+  useEffect(() => {
+    const newDefaultPeriod = findDefaultPeriod();
+    setSelected(newDefaultPeriod);
+    const calculatedDateUTC = calculateDate(newDefaultPeriod);
+    handleSelectedDate(calculatedDateUTC);
+  }, [activePeriod]);
 
   useEffect(() => {
     const calculatedDateUTC = calculateDate(selected);

diff --git a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
@@ -30,8 +30,7 @@ function TcActiveCommunity() {
   const { retrieveCommunityById, patchCommunityById } = useAppStore();
   const [loading, setLoading] = useState<boolean>(false);
   const [community, setCommunity] = useState<ICommunity | null>(null);
-  const storedCommunityId =
-    StorageService.readLocalStorage<ICommunity>('community')?.id;
+
   const { showMessage } = useSnackbar();
 
   useEffect(() => {
@@ -51,6 +50,8 @@ function TcActiveCommunity() {
 
   async function fetchCommunity() {
     try {
+      const storedCommunityId =
+        StorageService.readLocalStorage<ICommunity>('community')?.id;
       if (storedCommunityId) {
         const fullCommunityData = await retrieveCommunityById(
           storedCommunityId
@@ -60,6 +61,7 @@ function TcActiveCommunity() {
         StorageService.writeLocalStorage('community', fullCommunityData);
       }
     } catch (error) {
+      StorageService.removeLocalStorage('community');
       setLoading(false);
       console.error('Failed to fetch community data:', error);
     }
@@ -91,7 +93,7 @@ function TcActiveCommunity() {
 
   return (
     <div className="flex flex-col md:flex-row md:justify-between md:items-center border-b border-b-gray-200 md:py-4 mt-4">
-      <div className="flex flex-col space-y-3 md:flex-row md:items-center space-x-2 md:px-3">
+      <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row md:items-center space-x-2 md:px-3">
         <TcAvatar
           src={community?.avatarURL}
           sx={{ width: 40, height: 40 }}
@@ -106,6 +108,7 @@ function TcActiveCommunity() {
             placeholder="Write community name"
             size="small"
             value={community?.name || ''}
+            disabled={!community?.name}
             onChange={handleCommunityNameChange}
             sx={{
               minWidth: '14rem',

diff --git a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx
@@ -46,6 +46,7 @@ function TcConfirmDeleteCommunity({
       setOpenDialog(false);
       setCommunityNameInput('');
       handleUpdatePlatforms();
+      Router.push('/community-settings/switch-community');
     }
   };
 

diff --git a/src/components/layouts/shared/TcPrompt.tsx b/src/components/layouts/shared/TcPrompt.tsx
@@ -5,11 +5,12 @@ import TcCollapse from '../../shared/TcCollapse';
 import TcText from '../../shared/TcText';
 import { useRouter } from 'next/router';
 import { useToken } from '../../../context/TokenContext';
+import { StorageService } from '../../../services/StorageService';
+import { ICommunity } from '../../../utils/interfaces';
 
 function TcPrompt() {
   const router = useRouter();
-  const { community } = useToken();
-
+  const community = StorageService.readLocalStorage<ICommunity>('community');
   const shouldShowPrompt = useMemo(() => {
     const currentRoute = router.pathname;
     const isExcludedRoute =
@@ -20,16 +21,14 @@ function TcPrompt() {
     return !isExcludedRoute && hasNoPlatforms;
   }, [router.pathname, community?.platforms]);
 
-  useEffect(() => {}, [router.pathname]);
-
   if (!shouldShowPrompt) {
     return null;
   }
 
   const promptData = {
     backgroundColor: 'bg-orange',
     message: 'To see the data, connect your community platforms.',
-    buttonText: 'Connect Community',
+    buttonText: 'Connect Platform',
     redirectRouteParams: '/?platform=Discord',
   };
 

diff --git a/src/context/TokenContext.tsx b/src/context/TokenContext.tsx
@@ -31,6 +31,8 @@ export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
   const [token, setToken] = useState<IToken | null>(null);
   const [community, setCommunity] = useState<ICommunity | null>(null);
 
+  let intervalId: string | number | NodeJS.Timer | undefined;
+
   useEffect(() => {
     const storedToken = StorageService.readLocalStorage<IToken>('user');
     const storedCommunity =
@@ -42,22 +44,32 @@ export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
       setCommunity(storedCommunity);
     }
 
-    const interval = setInterval(async () => {
-      if (storedCommunity?.id) {
-        const updatedCommunity = await retrieveCommunityById(
-          storedCommunity.id
-        );
-        if (updatedCommunity) {
-          setCommunity(updatedCommunity);
-          StorageService.writeLocalStorage<ICommunity>(
-            'community',
-            updatedCommunity
+    const fetchAndUpdateCommunity = async () => {
+      try {
+        if (storedCommunity?.id) {
+          const updatedCommunity = await retrieveCommunityById(
+            storedCommunity.id
           );
+          if (updatedCommunity) {
+            setCommunity(updatedCommunity);
+            StorageService.writeLocalStorage<ICommunity>(
+              'community',
+              updatedCommunity
+            );
+          }
         }
+      } catch (error) {
+        console.error('Error fetching community:', error);
+        StorageService.removeLocalStorage('community');
+        clearInterval(intervalId);
       }
-    }, 5000);
+    };
+
+    intervalId = setInterval(fetchAndUpdateCommunity, 5000);
 
-    return () => clearInterval(interval);
+    return () => {
+      clearInterval(intervalId);
+    };
   }, []);
 
   const updateToken = (newToken: IToken) => {

diff --git a/src/pages/community-settings/switch-community/index.tsx b/src/pages/community-settings/switch-community/index.tsx
@@ -14,9 +14,11 @@ import { debounce } from '@mui/material';
 import { StorageService } from '../../../services/StorageService';
 import useAppStore from '../../../store/useStore';
 import { CommunityData } from '../../../components/centric/selectCommunity/TcSelectCommunity';
-import SimpleBackdrop from '../../../components/global/LoadingBackdrop';
+import { useToken } from '../../../context/TokenContext';
 
 function Index() {
+  const { updateCommunity } = useToken();
+
   const { retrieveCommunities } = useAppStore();
   const [loading, setLoading] = useState<boolean>(false);
   const [communityLoading, setCommunityLoading] = useState<boolean>(false);
@@ -47,6 +49,9 @@ function Index() {
   const handleSelectedCommunity = () => {
     setCommunityLoading(true);
     StorageService.writeLocalStorage('community', activeCommunity);
+    if (activeCommunity) {
+      updateCommunity(activeCommunity);
+    }
     router.push('/community-settings');
   };
 
@@ -109,6 +114,7 @@ function Index() {
                     text="Save Changes"
                     className="secondary"
                     variant="contained"
+                    disabled={!activeCommunity}
                     onClick={handleSelectedCommunity}
                   />
                 </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -24,7 +24,7 @@ function Dashboard(): JSX.Element {
     setAlertStateOpen(false);
   };
 
-  if (!community || community.platforms.length === 0) {
+  if (!community || community?.platforms?.length === 0) {
     return (
       <>
         <SEO />

diff --git a/src/utils/privateRoute.tsx b/src/utils/privateRoute.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import SimpleBackdrop from '../components/global/LoadingBackdrop';
 import { StorageService } from '../services/StorageService';
 import { IToken } from './types';
+import { ICommunity } from './interfaces';
 
 export default function PrivateRoute({
   children,
@@ -17,9 +18,13 @@ export default function PrivateRoute({
     [router.pathname]
   );
 
+  const isObjectNotEmpty = (obj: Record<string, any>): boolean => {
+    return Object.keys(obj).length > 0;
+  };
   useEffect(() => {
     if (!isCentricRoute) {
       const storedToken = StorageService.readLocalStorage<IToken>('user');
+
       if (storedToken && storedToken.accessToken) {
         setToken(storedToken);
       } else {