complete responsive size

TogetherCrew · Nov 29, 2023 · eed35d3 · eed35d3
1 parent 848c9d5
commit eed35d3
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 117 deletions.
diff --git a/src/components/communitySettings/platform/TcDisconnectPlatform.tsx b/src/components/communitySettings/platform/TcDisconnectPlatform.tsx
@@ -57,14 +57,14 @@ function TcDisconnectPlatform({ platform }: TcDisconnectPlatformProps) {
             onClick={() => setOpenDialog(false)}
           />
         </div>
-        <div className="text-center px-8">
-          <div className="w-4/5 text-center mx-auto">
+        <div className="text-center px-4 md:px-8">
+          <div className="md:w-4/5 text-center mx-auto">
             <TcText
               text={`Are you sure you want to disconnect ${platform?.metadata.name}?`}
               variant="h6"
             />
           </div>
-          <div className="flex justify-between space-x-5 py-12">
+          <div className="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 md:space-x-5 pb-8 md:py-12">
             <div className="shadow-xl rounded-md px-4 py-6 space-y-4">
               <TcText text={'Disconnect and delete data'} variant="body1" />
               <TcText

diff --git a/src/components/communitySettings/platform/TcPlatform.tsx b/src/components/communitySettings/platform/TcPlatform.tsx
@@ -43,7 +43,6 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     : router.query.id;
 
   const fetchPlatform = async () => {
-    setLoading(true);
     if (id) {
       try {
         const data = await retrievePlatformById(id);
@@ -58,7 +57,6 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
         }
       } catch (error) {
       } finally {
-        setLoading(false);
       }
     }
   };
@@ -69,7 +67,6 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
 
   const handlePatchCommunity = async () => {
     try {
-      setLoading(true);
       await patchPlatformById({
         id,
         metadata: {
@@ -80,10 +77,7 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
       });
       setOpenConfirmDialog(true);
       await fetchPlatform();
-      setLoading(false);
-    } catch (error) {
-      setLoading(false);
-    }
+    } catch (error) {}
   };
 
   const handleDateChange = (date: string) => {
@@ -114,7 +108,7 @@ function TcPlatform({ platformName = 'Discord' }: TcPlatformProps) {
     <TcBoxContainer
       contentContainerChildren={
         <div className="p-4 md:p-10 space-y-4">
-          <div className="flex justify-between items-center">
+          <div className="flex flex-col md:flex-row md:justify-between md:items-center">
             <div className="space-y-5">
               <TcText text={platformName} variant={'h6'} />
               <div>

diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialog.tsx
@@ -24,8 +24,12 @@ function TcPlatformChannelDialog() {
         variant="body1"
         fontWeight="bold"
       />
-      <div className="flex items-center space-x-3">
-        <TcText text={`Selected channels: ${selectedCount}`} variant="body1" />
+      <div className="flex md:flex-row items-center space-x-3">
+        <TcText
+          text={`Selected channels: ${selectedCount}`}
+          variant="body1"
+          className="whitespace-nowrap"
+        />
         <TcButton
           text={'Show channels'}
           sx={{ width: 'auto', textDecoration: 'underline' }}
@@ -41,6 +45,9 @@ function TcPlatformChannelDialog() {
               width: '100%',
               maxWidth: '640px',
               borderRadius: '10px',
+              '@media (max-width:600px)': {
+                margin: '10px',
+              },
             },
           },
         }}
@@ -58,7 +65,7 @@ function TcPlatformChannelDialog() {
           <TcPlatformChannelDialogBody />
           <TcPlatformChannelDialogFooter />
         </div>
-        <div className="flex justify-center pb-3">
+        <div className="flex justify-center px-6 md:px-0 pb-3">
           <TcButton
             text={'Save Channels'}
             variant="contained"

diff --git a/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx b/src/components/communitySettings/platform/TcPlatformChannelDialogBody.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react';
-import useAppStore from '../../../store/useStore';
+import React from 'react';
 import TcPlatformChannelList from './TcPlatformChannelList';
 
 function TcPlatformChannelDialogBody() {
   return (
     <div className="border border-gray-300 rounded-md">
-      <TcPlatformChannelList />
+      <TcPlatformChannelList refreshTrigger={true} />
     </div>
   );
 }

diff --git a/src/components/communitySettings/platform/TcPlatformChannels.tsx b/src/components/communitySettings/platform/TcPlatformChannels.tsx
@@ -6,8 +6,8 @@ import TcPlatformChannelDialog from './TcPlatformChannelDialog';
 function TcPlatformChannels() {
   return (
     <div>
-      <div className="flex items-stretch space-x-4">
-        <TcAvatar>
+      <div className="flex items-stretch md:space-x-4">
+        <TcAvatar className="hidden md:flex">
           <FaHashtag color="black" />
         </TcAvatar>
         <div className="space-y-4 pt-2">

diff --git a/src/components/communitySettings/platform/TcPlatformPeriod.tsx b/src/components/communitySettings/platform/TcPlatformPeriod.tsx
@@ -19,8 +19,8 @@ function TcPlatformPeriod({ onDateChange, platform }: ITcPlatformPeriodProps) {
 
   return (
     <div>
-      <div className="flex items-stretch space-x-4">
-        <TcAvatar>
+      <div className="flex items-stretch md:space-x-4">
+        <TcAvatar className="hidden md:flex">
           <MdOutlineCalendarToday color="black" />
         </TcAvatar>
         <div className="space-y-4 pt-2">
@@ -35,7 +35,7 @@ function TcPlatformPeriod({ onDateChange, platform }: ITcPlatformPeriodProps) {
             }
             variant="body2"
           />
-          <div className="flex items-center space-x-2">
+          <div className="flex md:items-center space-x-2">
             <HiOutlineExclamationCircle size={20} />
             <TcText
               text={`Data analysis runs from: ${moment(

diff --git a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx
@@ -90,9 +90,13 @@ function TcActiveCommunity() {
   }
 
   return (
-    <div className="flex justify-between items-center border-b border-b-gray-200 py-4 mt-4">
-      <div className="flex items-center space-x-2 px-3">
-        <TcAvatar src={community?.avatarURL} sx={{ width: 40, height: 40 }} />
+    <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">
+        <TcAvatar
+          src={community?.avatarURL}
+          sx={{ width: 40, height: 40 }}
+          className="mx-auto"
+        />
         {loading ? (
           <Loading height="40px" size={30} />
         ) : (

diff --git a/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx b/src/components/communitySettings/switchCommunity/TcSwitchCommunity.tsx
@@ -6,8 +6,8 @@ import TcText from '../../shared/TcText';
 
 function TcSwitchCommunity() {
   return (
-    <div className="py-5">
-      <div className="flex justify-between items-center">
+    <div className="md:py-5">
+      <div className="flex flex-col space-y-3 md:space-y-0 md:flex-row text-left md:justify-between md:items-center">
         <TcText text="Your community account" variant={'h6'} />
         <TcButton
           text={'Switch account'}

diff --git a/src/components/global/EmptyState.tsx b/src/components/global/EmptyState.tsx
@@ -18,7 +18,7 @@ export default function EmptyState({ image, title, description }: IProps) {
         label={'Connect your community'}
         classes="bg-secondary text-white mx-auto"
         onClick={() => {
-          router.push('/settings');
+          router.push('/community-settings');
         }}
       />
     </div>

diff --git a/src/components/layouts/shared/TcPrompt.tsx b/src/components/layouts/shared/TcPrompt.tsx
@@ -20,9 +20,7 @@ function TcPrompt() {
     return !isExcludedRoute && hasNoPlatforms;
   }, [router.pathname, community?.platforms]);
 
-  useEffect(() => {
-    // Any additional logic that needs to run when the route changes
-  }, [router.pathname]);
+  useEffect(() => {}, [router.pathname]);
 
   if (!shouldShowPrompt) {
     return null;

diff --git a/src/components/pages/communitySettings/TcIntegrationDialog.tsx b/src/components/pages/communitySettings/TcIntegrationDialog.tsx
@@ -82,7 +82,7 @@ function TcIntegrationDialog({
         />
         {bodyContent}
         <div className="flex justify-center py-4">
-          <TcButton text={buttonText} variant="contained" />
+          <TcButton text={buttonText} variant="contained" onClick={onClose} />
         </div>
       </div>
     </TcDialog>

diff --git a/src/components/pages/pageIndex/HeatmapChart.tsx b/src/components/pages/pageIndex/HeatmapChart.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Highcharts from 'highcharts';
 import HighchartsHeatmap from 'highcharts/modules/heatmap';
 import HighchartsReact from 'highcharts-react-official';
@@ -121,8 +121,6 @@ const HeatmapChart = () => {
   };
 
   const handleFetchHeatmapByChannels = () => {
-    console.log('dsss');
-
     fetchData();
   };
 

diff --git a/src/context/TokenContext.tsx b/src/context/TokenContext.tsx
@@ -10,6 +10,7 @@ import { StorageService } from '../services/StorageService';
 import { IToken } from '../utils/types';
 import { ICommunity } from '../utils/interfaces';
 import { SnackbarProvider } from './SnackbarContext';
+import useAppStore from '../store/useStore';
 
 type TokenContextType = {
   token: IToken | null;
@@ -26,6 +27,7 @@ type TokenProviderProps = {
 };
 
 export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
+  const { retrieveCommunityById } = useAppStore();
   const [token, setToken] = useState<IToken | null>(null);
   const [community, setCommunity] = useState<ICommunity | null>(null);
 
@@ -39,6 +41,23 @@ export const TokenProvider: React.FC<TokenProviderProps> = ({ children }) => {
     if (storedCommunity) {
       setCommunity(storedCommunity);
     }
+
+    const interval = setInterval(async () => {
+      if (storedCommunity?.id) {
+        const updatedCommunity = await retrieveCommunityById(
+          storedCommunity.id
+        );
+        if (updatedCommunity) {
+          setCommunity(updatedCommunity);
+          StorageService.writeLocalStorage<ICommunity>(
+            'community',
+            updatedCommunity
+          );
+        }
+      }
+    }, 5000);
+
+    return () => clearInterval(interval);
   }, []);
 
   const updateToken = (newToken: IToken) => {

diff --git a/src/pages/community-settings/index.tsx b/src/pages/community-settings/index.tsx
@@ -25,53 +25,11 @@ function index() {
     setLoading(true);
     if (router.query.platform) {
       setShowDialog(true);
-      if (router.query.platform === 'Twitter') {
-        setDialogContent({
-          title: 'How to connect your community’s Twitter account',
-          bodyContent: (
-            <div className="py-2">
-              <ol className="space-y-8">
-                <li>
-                  <TcText
-                    text={
-                      <p>
-                        1 / Go to{' '}
-                        <TcLink
-                          className="text-secondary underline cursor-pointer font-bold"
-                          to={'https://twitter.com/home?lang=en'}
-                          target="_blank"
-                        >
-                          Twitter
-                        </TcLink>
-                        . Ensure you’re connected with your{' '}
-                        <b>community’s Twitter account</b> and leave this window
-                        open.
-                      </p>
-                    }
-                    variant={'body2'}
-                  />
-                </li>
-                <li>
-                  <TcText
-                    text={
-                      <p>
-                        2 / Once you are connected, click on the button below
-                        “Connect Twitter account” and approve the access.
-                      </p>
-                    }
-                    variant={'body2'}
-                  />
-                </li>
-              </ol>
-            </div>
-          ),
-          dialogButtonText: 'Connect Twitter account',
-        });
-      } else if (router.query.platform === 'Discord') {
+      if (router.query.platform === 'Discord') {
         setDialogContent({
           title: 'Welcome to TogetherCrew!',
           bodyContent: <>To see the data, please connect your community</>,
-          dialogButtonText: 'Connect community',
+          dialogButtonText: 'I Understand!',
         });
       }
     } else {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,24 +1,20 @@
 import { defaultLayout } from '../layouts/defaultLayout';
 import SEO from '../components/global/SEO';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { StorageService } from '../services/StorageService';
-import { IUser } from '../utils/types';
-import { useRouter } from 'next/router';
 import EmptyState from '../components/global/EmptyState';
 import Image from 'next/image';
 import emptyState from '../assets/svg/empty-state.svg';
-import useAppStore from '../store/useStore';
-import { Alert, Collapse } from '@mui/material';
 import React from 'react';
 import ActiveMemberComposition from '../components/pages/pageIndex/ActiveMemberComposition';
 import HeatmapChart from '../components/pages/pageIndex/HeatmapChart';
 import MemberInteractionGraph from '../components/pages/pageIndex/MemberInteractionGraph';
 import { ChannelProvider } from '../context/ChannelContext';
+import { useToken } from '../context/TokenContext';
 
 function Dashboard(): JSX.Element {
   const [alertStateOpen, setAlertStateOpen] = useState(false);
-
-  const router = useRouter();
+  const { community } = useToken();
 
   const toggleAnalysisState = () => {
     StorageService.writeLocalStorage('analysis_state', {
@@ -28,41 +24,18 @@ function Dashboard(): JSX.Element {
     setAlertStateOpen(false);
   };
 
-  // if (guilds && guilds.length === 0) {
-  //   return (
-  //     <>
-  //       <SEO />
-  //       <EmptyState image={<Image alt="Image Alt" src={emptyState} />} />
-  //     </>
-  //   );
-  // }
+  if (!community || community.platforms.length === 0) {
+    return (
+      <>
+        <SEO />
+        <EmptyState image={<Image alt="Image Alt" src={emptyState} />} />
+      </>
+    );
+  }
 
   return (
     <>
       <SEO />
-      {/* <Collapse
-        in={alertStateOpen}
-        sx={{
-          position: 'sticky',
-          top: 0,
-          zIndex: 999,
-        }}
-      >
-        {guilds && guilds[0].isInProgress ? (
-          <Alert
-            variant="filled"
-            onClose={toggleAnalysisState}
-            severity="warning"
-            sx={{ padding: '6px 9rem 6px 14rem' }}
-          >
-            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.
-          </Alert>
-        ) : (
-          ''
-        )}
-      </Collapse> */}
       <ChannelProvider>
         <div className="flex flex-col container space-y-8 justify-between px-4 md:px-12 py-4">
           <div className="block">