Feat: All track Level Analytics

ALI-SULAIMAN-ALI · Apr 25, 2024 · af42a84 · af42a84
1 parent 6181240
commit af42a84
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 19 deletions.
diff --git a/pages/all-posts/index.tsx b/pages/all-posts/index.tsx
@@ -10,7 +10,6 @@ import React, { FC, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { getNetworkFromReqHeaders } from '~src/api-utils';
 import { redisGet, redisSet } from '~src/auth/redis';
-import TrackListingCard from '~src/components/Listing/Tracks/TrackListingCard';
 import { LISTING_LIMIT } from '~src/global/listingLimit';
 import { getSubsquidProposalType, ProposalType } from '~src/global/proposalType';
 import SEOHead from '~src/global/SEOHead';
@@ -21,6 +20,7 @@ import { ErrorState } from '~src/ui-components/UIStates';
 import checkRouteNetworkWithRedirect from '~src/util/checkRouteNetworkWithRedirect';
 import { generateKey } from '~src/util/getRedisKeys';
 import { OverviewIcon } from '~src/ui-components/CustomIcons';
+import TrackListingTabs from '~src/components/Listing/Tracks/TrackListingTabs';
 
 export const getServerSideProps: GetServerSideProps = async ({ req, query }) => {
 	const network = getNetworkFromReqHeaders(req.headers);
@@ -131,7 +131,7 @@ const OverviewListing: FC<IOverviewListingProps> = (props) => {
 				<OverviewIcon className='text-lg font-medium text-lightBlue  dark:text-icon-dark-inactive' />
 				<h2 className='mb-0 text-xl font-semibold leading-8 text-bodyBlue dark:text-blue-dark-high'>All Referenda</h2>
 			</div>
-			<TrackListingCard
+			<TrackListingTabs
 				className='mt-8'
 				posts={posts}
 				trackName='All Tracks'

diff --git a/src/components/TrackLevelAnalytics/AnalyticsDelegation/index.tsx b/src/components/TrackLevelAnalytics/AnalyticsDelegation/index.tsx
@@ -18,11 +18,29 @@ import NoVotesIcon from '~assets/icons/analytics/no-votes.svg';
 
 const { Panel } = Collapse;
 
-const AnalyticsDelegation = ({ trackId }: { className?: string; trackId: number }) => {
+const AnalyticsDelegation = ({ trackId }: { className?: string; trackId?: number }) => {
 	const { resolvedTheme: theme } = useTheme();
 	const dispatch = useDispatch();
 	const [noData, setNoData] = useState<boolean>(false);
 
+	const getAllData = async () => {
+		const { data, error } = await nextApiClientFetch<IDelegationAnalytics>('/api/v1/trackLevelAnalytics/all-track-delegation-analytics');
+
+		if (data) {
+			if (!data?.totalDelegates && !data?.totalDelegators) {
+				setNoData(true);
+			}
+			dispatch(setTrackLevelDelegationAnalyticsData(data));
+		}
+		if (error) console.log(error);
+	};
+
+	useEffect(() => {
+		if (trackId) return;
+		getAllData();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const getData = async () => {
 		const { data, error } = await nextApiClientFetch<IDelegationAnalytics>('/api/v1/trackLevelAnalytics/track-delegation-analytics-stats', {
 			trackId
@@ -33,12 +51,13 @@ const AnalyticsDelegation = ({ trackId }: { className?: string; trackId: number
 				setNoData(true);
 			}
 			dispatch(setTrackLevelDelegationAnalyticsData(data));
+			setNoData(false);
 		}
 		if (error) console.log(error);
 	};
 
 	useEffect(() => {
-		if (isNaN(trackId)) return;
+		if (trackId && isNaN(trackId)) return;
 		getData();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [trackId]);

diff --git a/src/components/TrackLevelAnalytics/AnalyticsVotingTrends/index.tsx b/src/components/TrackLevelAnalytics/AnalyticsVotingTrends/index.tsx
@@ -27,7 +27,7 @@ interface ITabItem {
 	children: React.ReactNode;
 }
 
-const AnalyticsVotingTrends = ({ trackId }: { trackId: number }) => {
+const AnalyticsVotingTrends = ({ trackId }: { trackId?: number }) => {
 	const { resolvedTheme: theme } = useTheme();
 	const dispatch = useDispatch();
 	const [activeTab, setActiveTab] = useState<string>(ETrackLevelAnalyticsFilterBy.CONVICTION_VOTES);
@@ -36,6 +36,30 @@ const AnalyticsVotingTrends = ({ trackId }: { trackId: number }) => {
 	const [noData, setNoData] = useState<boolean>(false);
 	const isSmallScreen = window.innerWidth < 640;
 
+	const getAllVoteData = async () => {
+		try {
+			setIsLoading(true);
+			const { data } = await nextApiClientFetch<{ votes: IAnalyticsVoteTrends[] }>('/api/v1/trackLevelAnalytics/all-track-votes-analytics');
+
+			if (data && data?.votes) {
+				dispatch(setTrackLevelVotesAnalyticsData(data?.votes));
+				setNoData(false);
+				setIsLoading(false);
+			}
+			if (data && data?.votes.length === 0) {
+				setNoData(true);
+			}
+		} catch (error) {
+			console.error(error);
+			setIsLoading(false);
+		}
+	};
+	useEffect(() => {
+		if (trackId) return;
+		getAllVoteData();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const getVoteData = async () => {
 		try {
 			setIsLoading(true);
@@ -57,7 +81,7 @@ const AnalyticsVotingTrends = ({ trackId }: { trackId: number }) => {
 	};
 
 	useEffect(() => {
-		if (isNaN(trackId)) return;
+		if (trackId && isNaN(trackId)) return;
 		getVoteData();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [trackId]);

diff --git a/src/components/TrackLevelAnalytics/TrackAnalyticsStats.tsx b/src/components/TrackLevelAnalytics/TrackAnalyticsStats.tsx
@@ -14,7 +14,7 @@ import { useTrackLevelAnalytics } from '~src/redux/selectors';
 
 interface IProps {
 	className?: string;
-	trackId: number;
+	trackId?: number;
 }
 
 const TrackAnalyticsStats: FC<IProps> = (props) => {
@@ -23,6 +23,25 @@ const TrackAnalyticsStats: FC<IProps> = (props) => {
 	const { activeProposals, allProposals } = useTrackLevelAnalytics();
 	const [loading, setLoading] = useState<boolean>(false);
 
+	const getAllData = async () => {
+		setLoading(true);
+		const { data, error } = await nextApiClientFetch<ITrackAnalyticsStats | MessageType>('/api/v1/trackLevelAnalytics/all-track-analytics-stats');
+		if (data) {
+			dispatch(setTrackLevelAnalyticsStats(data));
+			setLoading(false);
+		}
+		if (error) {
+			console.log(error);
+			setLoading(false);
+		}
+	};
+
+	useEffect(() => {
+		if (trackId) return;
+		getAllData();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const getData = async () => {
 		setLoading(true);
 		const { data, error } = await nextApiClientFetch<ITrackAnalyticsStats | MessageType>('/api/v1/trackLevelAnalytics/track-analytics-stats', {
@@ -40,7 +59,7 @@ const TrackAnalyticsStats: FC<IProps> = (props) => {
 	};
 
 	useEffect(() => {
-		if (isNaN(trackId)) return;
+		if (trackId && typeof trackId === 'undefined' && isNaN(trackId)) return;
 		getData();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [trackId]);

diff --git a/src/components/TrackLevelAnalytics/index.tsx b/src/components/TrackLevelAnalytics/index.tsx
@@ -14,20 +14,34 @@ const TrackLevelAnalytics = ({ className, trackName }: { className?: string; tra
 	const [trackId, setTrackId] = useState<number | null>(null);
 
 	useEffect(() => {
-		if (!network) return;
+		if (trackName === 'All Tracks' || !network) return;
+
 		setTrackId(networkTrackInfo?.[network]?.[trackName]?.trackId);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [network]);
+	}, [network, trackName]);
+
+	const isAllTracks = trackName === 'All Tracks';
 
 	return (
-		<Spin spinning={trackId == null}>
-			{trackId !== null && (
-				<div className={`${className} flex flex-col gap-8`}>
-					<TrackAnalyticsStats trackId={trackId} />
-					<AnalyticsVotingTrends trackId={trackId} />
-					<AnalyticsDelegation trackId={trackId} />
-				</div>
-			)}
+		<Spin spinning={!isAllTracks && trackId == null}>
+			<div className={`${className} flex flex-col gap-8`}>
+				{isAllTracks ? (
+					<>
+						<TrackAnalyticsStats />
+						<AnalyticsVotingTrends />
+						<AnalyticsDelegation />
+					</>
+				) : (
+					<>
+						{trackId !== null && (
+							<>
+								<TrackAnalyticsStats trackId={trackId} />
+								<AnalyticsVotingTrends trackId={trackId} />
+								<AnalyticsDelegation trackId={trackId} />
+							</>
+						)}
+					</>
+				)}
+			</div>
 		</Spin>
 	);
 };