From 1f1293cfd5f5ab37ee38ca91d5a340a160a76d87 Mon Sep 17 00:00:00 2001 From: zuies Date: Mon, 4 Dec 2023 00:11:50 +0300 Subject: [PATCH] update community interface and use based on API changes --- .../selectCommunity/TcCommunityList.tsx | 7 ++- .../selectCommunity/TcCommunityListItems.tsx | 14 +++-- .../TcSelectCommunity.spec.tsx | 57 +++++++++++++++++-- .../selectCommunity/TcSelectCommunity.tsx | 14 +++-- .../TcCommunityIntegrations.tsx | 9 ++- .../switchCommunity/TcActiveCommunity.tsx | 12 ++-- .../TcConfirmDeleteCommunity.tsx | 4 +- src/components/layouts/shared/TcPrompt.tsx | 6 +- .../pageIndex/ActiveMemberComposition.tsx | 2 +- .../pages/pageIndex/HeatmapChart.tsx | 16 +++--- .../activeMembers/ActiveMemberBreakdown.tsx | 5 +- .../DisengagedMembersCompositionBreakdown.tsx | 2 +- .../OnboardingMembersBreakdown.tsx | 2 +- src/context/TokenContext.tsx | 23 +++++--- src/pages/community-health.tsx | 2 +- src/pages/membersInteraction.tsx | 2 +- src/pages/statistics.tsx | 2 +- src/utils/interfaces.ts | 19 +++++++ src/utils/privateRoute.tsx | 1 - 19 files changed, 142 insertions(+), 57 deletions(-) diff --git a/src/components/centric/selectCommunity/TcCommunityList.tsx b/src/components/centric/selectCommunity/TcCommunityList.tsx index 6a0146eb..f55deab0 100644 --- a/src/components/centric/selectCommunity/TcCommunityList.tsx +++ b/src/components/centric/selectCommunity/TcCommunityList.tsx @@ -1,10 +1,11 @@ import React, { useEffect, useState } from 'react'; import TcCommunityListItems from './TcCommunityListItems'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; function TcCommunityList({ fetchedCommunities, handleActiveCommunity }: any) { - const [activeCommunity, setActiveCommunity] = useState(); - const handleSelectedCommunity = (community: ICommunity) => { + const [activeCommunity, setActiveCommunity] = + useState(); + const handleSelectedCommunity = (community: IDiscordModifiedCommunity) => { setActiveCommunity(community); }; diff --git a/src/components/centric/selectCommunity/TcCommunityListItems.tsx b/src/components/centric/selectCommunity/TcCommunityListItems.tsx index 89b0d248..8b0f24e8 100644 --- a/src/components/centric/selectCommunity/TcCommunityListItems.tsx +++ b/src/components/centric/selectCommunity/TcCommunityListItems.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import TcAvatar from '../../shared/TcAvatar'; import TcText from '../../shared/TcText'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; import clsx from 'clsx'; import { StorageService } from '../../../services/StorageService'; import { MdGroups } from 'react-icons/md'; @@ -13,8 +13,8 @@ interface ITcCommunityListItemsProps { /** * Array of community objects with avatar URLs and labels. */ - communities: ICommunity[]; - onSelectCommunity: (selectedCommunity: ICommunity) => void; + communities: IDiscordModifiedCommunity[]; + onSelectCommunity: (selectedCommunity: IDiscordModifiedCommunity) => void; } /** @@ -28,7 +28,7 @@ interface ITcCommunityListItemsProps { * - Displaying a message when there are no communities. * * Props: - * - communities (ICommunity[]): Array of community objects with `avatarURL` and `name`. + * - communities (IDiscordModifiedCommunity[]): Array of community objects with `avatarURL` and `name`. * - onSelectCommunity (Function): Callback when a community is selected. * * Usage: @@ -42,10 +42,12 @@ function TcCommunityListItems({ communities, onSelectCommunity, }: ITcCommunityListItemsProps) { - const [selectedCommunity, setSelectedCommunity] = useState(); + const [selectedCommunity, setSelectedCommunity] = + useState(); useEffect(() => { - const community = StorageService.readLocalStorage('community'); + const community = + StorageService.readLocalStorage('community'); setSelectedCommunity(community); }, []); diff --git a/src/components/centric/selectCommunity/TcSelectCommunity.spec.tsx b/src/components/centric/selectCommunity/TcSelectCommunity.spec.tsx index 8d5ca63f..32b0e73d 100644 --- a/src/components/centric/selectCommunity/TcSelectCommunity.spec.tsx +++ b/src/components/centric/selectCommunity/TcSelectCommunity.spec.tsx @@ -1,21 +1,70 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import TcCommunityListItems from './TcCommunityListItems'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; describe('TcCommunityListItems', () => { - const mockCommunities: ICommunity[] = [ + const mockCommunities: IDiscordModifiedCommunity[] = [ { id: '1', name: 'Community 1', - platforms: ['platform1', 'platform2'], + platforms: [ + { + name: 'discord', + metadata: { + id: '1012430565959553145', + icon: '889a294bb7237dc6d4206caa93e79faf', + name: "nimatorabiv's server", + selectedChannels: [ + '1118087567372455966', + '1012430565959553148', + '1124246469516460114', + '1012430565959553149', + '1018893637326749858', + '1155092883565723698', + '1155094012768825375', + ], + period: '2022-12-01T00:00:00.000Z', + analyzerStartedAt: '2023-12-01T11:29:44.013Z', + }, + disconnectedAt: null, + id: '6569c3a12k491e542fc55b1b8', + }, + { + name: 'discord', + metadata: { + id: '10124305123959553145', + icon: '889a29434mf7237dc6d4206caa93e79faf', + name: "ali's server", + selectedChannels: ['1118087567372455966', '1012430565959553148'], + period: '2022-12-01T00:00:00.000Z', + analyzerStartedAt: '2023-12-01T11:29:44.013Z', + }, + disconnectedAt: null, + id: '6569c3a1f89213542fc55b1b8', + }, + ], users: ['user1', 'user2'], avatarURL: 'url1', }, { id: '2', name: 'Community 2', - platforms: ['platform3', 'platform4'], + platforms: [ + { + name: 'discord', + metadata: { + id: '10124301222123959553145', + icon: '889a29434mf7237dc6d4206caa93e79faf', + name: "aliew's server", + selectedChannels: ['111808213567372455966', '1012430312459553148'], + period: '2022-12-01T00:00:00.000Z', + analyzerStartedAt: '2023-12-01T11:29:44.013Z', + }, + disconnectedAt: null, + id: '6569c3a1f849913542fc55b1b8', + }, + ], users: ['user3', 'user4'], avatarURL: 'url2', }, diff --git a/src/components/centric/selectCommunity/TcSelectCommunity.tsx b/src/components/centric/selectCommunity/TcSelectCommunity.tsx index 703ae4ba..dd3619ff 100644 --- a/src/components/centric/selectCommunity/TcSelectCommunity.tsx +++ b/src/components/centric/selectCommunity/TcSelectCommunity.tsx @@ -9,7 +9,7 @@ import router from 'next/router'; import useAppStore from '../../../store/useStore'; import Loading from '../../global/Loading'; import { debounce } from '../../../helpers/helper'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; import { StorageService } from '../../../services/StorageService'; import SimpleBackdrop from '../../global/LoadingBackdrop'; import { useToken } from '../../../context/TokenContext'; @@ -29,7 +29,8 @@ function TcSelectCommunity() { const [loading, setLoading] = useState(false); const [communityLoading, setCommunityLoading] = useState(false); - const [activeCommunity, setActiveCommunity] = useState(); + const [activeCommunity, setActiveCommunity] = + useState(); const [fetchedCommunities, setFetchedCommunities] = useState({ limit: 10, page: 1, @@ -55,11 +56,14 @@ function TcSelectCommunity() { const handleSelectedCommunity = () => { setCommunityLoading(true); - StorageService.writeLocalStorage('community', activeCommunity); if (activeCommunity) { updateCommunity(activeCommunity); + StorageService.writeLocalStorage( + 'community', + activeCommunity + ); + router.push('/'); } - router.push('/'); }; if (communityLoading) { @@ -93,7 +97,7 @@ function TcSelectCommunity() { ) : ( + handleActiveCommunity={(community: IDiscordModifiedCommunity) => setActiveCommunity(community) } /> diff --git a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx index 2c477f59..7f5ee6e2 100644 --- a/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx +++ b/src/components/communitySettings/communityIntegrations/TcCommunityIntegrations.tsx @@ -3,7 +3,10 @@ import TcConnectedPlatforms from './TcConnectedPlatforms'; import TcAvailableIntegrations from './TcAvailableIntegrations'; import TcText from '../../shared/TcText'; import useAppStore from '../../../store/useStore'; -import { FetchedData, ICommunity } from '../../../utils/interfaces'; +import { + FetchedData, + IDiscordModifiedCommunity, +} from '../../../utils/interfaces'; import { StorageService } from '../../../services/StorageService'; import Loading from '../../global/Loading'; @@ -20,7 +23,9 @@ function TcCommunityIntegrations() { useEffect(() => { const communityId = - StorageService.readLocalStorage('community')?.id; + StorageService.readLocalStorage( + 'community' + )?.id; const fetchData = async () => { try { setLoading(true); diff --git a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx index 13c58f1e..c5b8bcaf 100644 --- a/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx +++ b/src/components/communitySettings/switchCommunity/TcActiveCommunity.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { StorageService } from '../../../services/StorageService'; import useAppStore from '../../../store/useStore'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; import TcAvatar from '../../shared/TcAvatar'; import TcConfirmDeleteCommunity from './TcConfirmDeleteCommunity'; import Loading from '../../global/Loading'; @@ -30,7 +30,9 @@ const updateCommunityName = debounce( function TcActiveCommunity() { const { retrieveCommunityById, patchCommunityById } = useAppStore(); const [loading, setLoading] = useState(false); - const [community, setCommunity] = useState(null); + const [community, setCommunity] = useState( + null + ); const { showMessage } = useSnackbar(); @@ -52,7 +54,9 @@ function TcActiveCommunity() { async function fetchCommunity() { try { const storedCommunityId = - StorageService.readLocalStorage('community')?.id; + StorageService.readLocalStorage( + 'community' + )?.id; if (storedCommunityId) { const fullCommunityData = await retrieveCommunityById( storedCommunityId diff --git a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx index 58e0f745..69f7355c 100644 --- a/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx +++ b/src/components/communitySettings/switchCommunity/TcConfirmDeleteCommunity.tsx @@ -6,7 +6,7 @@ import TcAlert from '../../shared/TcAlert'; import TcButton from '../../shared/TcButton'; import TcDialog from '../../shared/TcDialog'; import TcText from '../../shared/TcText'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; import TcInput from '../../shared/TcInput'; import useAppStore from '../../../store/useStore'; import SimpleBackdrop from '../../global/LoadingBackdrop'; @@ -15,7 +15,7 @@ import { StorageService } from '../../../services/StorageService'; import { useToken } from '../../../context/TokenContext'; interface CommunityComponentProps { - community: ICommunity | null; + community: IDiscordModifiedCommunity | null; handleUpdatePlatforms: () => void; } diff --git a/src/components/layouts/shared/TcPrompt.tsx b/src/components/layouts/shared/TcPrompt.tsx index fcb6a7ea..7cea43d6 100644 --- a/src/components/layouts/shared/TcPrompt.tsx +++ b/src/components/layouts/shared/TcPrompt.tsx @@ -4,13 +4,13 @@ import TcButton from '../../shared/TcButton'; 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'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; function TcPrompt() { const router = useRouter(); - const community = StorageService.readLocalStorage('community'); + const community = + StorageService.readLocalStorage('community'); const shouldShowPrompt = useMemo(() => { const currentRoute = router.pathname; const isExcludedRoute = diff --git a/src/components/pages/pageIndex/ActiveMemberComposition.tsx b/src/components/pages/pageIndex/ActiveMemberComposition.tsx index 78ac4e7d..d93c3a1b 100644 --- a/src/components/pages/pageIndex/ActiveMemberComposition.tsx +++ b/src/components/pages/pageIndex/ActiveMemberComposition.tsx @@ -18,7 +18,7 @@ const ActiveMemberComposition = () => { let endDate: moment.Moment = moment().subtract(1, 'day'); let startDate: moment.Moment = moment(endDate).subtract(7, 'days'); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; if (platformId) { fetchActiveMembers(platformId, startDate, endDate); diff --git a/src/components/pages/pageIndex/HeatmapChart.tsx b/src/components/pages/pageIndex/HeatmapChart.tsx index 1eac800c..ae2fe1a2 100644 --- a/src/components/pages/pageIndex/HeatmapChart.tsx +++ b/src/components/pages/pageIndex/HeatmapChart.tsx @@ -17,7 +17,7 @@ import { defaultHeatmapChartOptions } from '../../../lib/data/heatmap'; import { ChannelContext } from '../../../context/ChannelContext'; import { extractTrueSubChannelIds } from '../../../helpers/helper'; import { StorageService } from '../../../services/StorageService'; -import { ICommunity } from '../../../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../../../utils/interfaces'; import Loading from '../../global/Loading'; if (typeof Highcharts === 'object') { @@ -52,7 +52,7 @@ const HeatmapChart = () => { const { community } = useToken(); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; const fetchData = async () => { setLoading(true); @@ -150,18 +150,18 @@ const HeatmapChart = () => { const fetchPlatformChannels = async () => { try { const community = - StorageService.readLocalStorage('community'); + StorageService.readLocalStorage('community'); - const id = community?.platforms[0]; + const platformId = community?.platforms[0].id; - if (id) { - const data = await retrievePlatformById(id); + if (platformId) { + const data = await retrievePlatformById(platformId); const { metadata } = data; if (metadata) { const { selectedChannels } = metadata; - await refreshData(id, 'channel', selectedChannels); + await refreshData(platformId, 'channel', selectedChannels); } else { - await refreshData(id); + await refreshData(platformId); } } } catch (error) { diff --git a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx index 06ddf71d..782d7033 100644 --- a/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/activeMembers/ActiveMemberBreakdown.tsx @@ -1,12 +1,9 @@ import { useState, useEffect, useRef } from 'react'; -import { StorageService } from '../../../../../services/StorageService'; import useAppStore from '../../../../../store/useStore'; -import { IUser } from '../../../../../utils/types'; import CustomTable from '../CustomTable'; import { Column, IActivityCompositionOptions, - ICommunity, } from '../../../../../utils/interfaces'; import CustomPagination from '../CustomPagination'; import CustomButton from '../../../../global/CustomButton'; @@ -62,7 +59,7 @@ export default function ActiveMemberBreakdown() { totalResults: 0, totalPages: 0, }); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; const handlePageChange = (selectedPage: number) => { setPage(selectedPage); diff --git a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx index 565dbdd4..793185bb 100644 --- a/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/disengagedMembersComposition/DisengagedMembersCompositionBreakdown.tsx @@ -71,7 +71,7 @@ export default function DisengagedMembersCompositionBreakdown() { totalPages: 0, }); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; const handlePageChange = (selectedPage: number) => { setPage(selectedPage); diff --git a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx index 1129ae9c..b4ac8941 100644 --- a/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx +++ b/src/components/pages/statistics/memberBreakdowns/onboardingMembers/OnboardingMembersBreakdown.tsx @@ -59,7 +59,7 @@ export default function OnboardingMembersBreakdown() { totalPages: 0, }); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; const handlePageChange = (selectedPage: number) => { setPage(selectedPage); diff --git a/src/context/TokenContext.tsx b/src/context/TokenContext.tsx index 5ed7b18a..becf358c 100644 --- a/src/context/TokenContext.tsx +++ b/src/context/TokenContext.tsx @@ -8,15 +8,15 @@ import React, { } from 'react'; import { StorageService } from '../services/StorageService'; import { IToken } from '../utils/types'; -import { ICommunity } from '../utils/interfaces'; +import { IDiscordModifiedCommunity } from '../utils/interfaces'; import { SnackbarProvider } from './SnackbarContext'; import useAppStore from '../store/useStore'; type TokenContextType = { token: IToken | null; - community: ICommunity | null; + community: IDiscordModifiedCommunity | null; updateToken: (newToken: IToken) => void; - updateCommunity: (newCommunity: ICommunity) => void; + updateCommunity: (newCommunity: IDiscordModifiedCommunity) => void; deleteCommunity: () => void; clearToken: () => void; }; @@ -30,7 +30,9 @@ type TokenProviderProps = { export const TokenProvider: React.FC = ({ children }) => { const { retrieveCommunityById } = useAppStore(); const [token, setToken] = useState(null); - const [community, setCommunity] = useState(null); + const [community, setCommunity] = useState( + null + ); // Use useRef to persist the interval ID across renders const intervalIdRef = useRef(null); @@ -38,7 +40,7 @@ export const TokenProvider: React.FC = ({ children }) => { useEffect(() => { const storedToken = StorageService.readLocalStorage('user'); const storedCommunity = - StorageService.readLocalStorage('community'); + StorageService.readLocalStorage('community'); if (storedToken) { setToken(storedToken); @@ -56,7 +58,7 @@ export const TokenProvider: React.FC = ({ children }) => { ); if (updatedCommunity) { setCommunity(updatedCommunity); - StorageService.writeLocalStorage( + StorageService.writeLocalStorage( 'community', updatedCommunity ); @@ -85,7 +87,7 @@ export const TokenProvider: React.FC = ({ children }) => { setToken(newToken); }; - const updateCommunity = async (newCommunity: ICommunity) => { + const updateCommunity = async (newCommunity: IDiscordModifiedCommunity) => { // Clear the existing interval if (intervalIdRef.current) { clearInterval(intervalIdRef.current); @@ -93,7 +95,10 @@ export const TokenProvider: React.FC = ({ children }) => { // Update the community and reset the interval setCommunity(newCommunity); - StorageService.writeLocalStorage('community', newCommunity); + StorageService.writeLocalStorage( + 'community', + newCommunity + ); // Restart the interval intervalIdRef.current = setInterval(async () => { @@ -101,7 +106,7 @@ export const TokenProvider: React.FC = ({ children }) => { const updatedCommunity = await retrieveCommunityById(newCommunity.id); if (updatedCommunity) { setCommunity(updatedCommunity); - StorageService.writeLocalStorage( + StorageService.writeLocalStorage( 'community', updatedCommunity ); diff --git a/src/pages/community-health.tsx b/src/pages/community-health.tsx index 47c63727..fcb4b062 100644 --- a/src/pages/community-health.tsx +++ b/src/pages/community-health.tsx @@ -21,7 +21,7 @@ function CommunityHealth() { useState(null); useEffect(() => { - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; if (platformId) { Promise.all([ diff --git a/src/pages/membersInteraction.tsx b/src/pages/membersInteraction.tsx index c52bb057..74a8c74f 100644 --- a/src/pages/membersInteraction.tsx +++ b/src/pages/membersInteraction.tsx @@ -102,7 +102,7 @@ export default function membersInteraction() { const { getMemberInteraction, isLoading } = useAppStore(); useEffect(() => { - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; if (platformId) { getMemberInteraction(platformId).then((apiResponse: any[]) => { diff --git a/src/pages/statistics.tsx b/src/pages/statistics.tsx index 6e81db61..9e9b6b07 100644 --- a/src/pages/statistics.tsx +++ b/src/pages/statistics.tsx @@ -22,7 +22,7 @@ import Image from 'next/image'; const Statistics = () => { const { community } = useToken(); - const platformId = community?.platforms[0]; + const platformId = community?.platforms[0].id; const [loading, setLoading] = useState(true); const [activeMemberDate, setActiveMemberDate] = useState(1); diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index 9147b3ca..ec4f3994 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -146,6 +146,25 @@ export interface IPlatformProps { metadata: metaData; } +export interface ICommunityDiscordPlatfromProps { + id: string; + name: string; + metadata: { + id: string; + icon: string; + name: string; + selectedChannels: string[]; + period: string; + analyzerStartedAt: string; + }; + disconnectedAt: string | null; +} + export interface metaData { [key: string]: any; } + +export interface IDiscordModifiedCommunity + extends Omit { + platforms: ICommunityDiscordPlatfromProps[]; +} diff --git a/src/utils/privateRoute.tsx b/src/utils/privateRoute.tsx index 561dfa46..eddcb90a 100644 --- a/src/utils/privateRoute.tsx +++ b/src/utils/privateRoute.tsx @@ -3,7 +3,6 @@ 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,