diff --git a/apps/frontend/src/components/platform-analytics/platform.analytics.tsx b/apps/frontend/src/components/platform-analytics/platform.analytics.tsx index 184664a9..0cca599a 100644 --- a/apps/frontend/src/components/platform-analytics/platform.analytics.tsx +++ b/apps/frontend/src/components/platform-analytics/platform.analytics.tsx @@ -2,13 +2,15 @@ import useSWR from 'swr'; import { useCallback, useMemo, useState } from 'react'; -import { orderBy } from 'lodash'; +import { capitalize, orderBy } from 'lodash'; import clsx from 'clsx'; import ImageWithFallback from '@gitroom/react/helpers/image.with.fallback'; import Image from 'next/image'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; import { RenderAnalytics } from '@gitroom/frontend/components/platform-analytics/render.analytics'; import { Select } from '@gitroom/react/form/select'; +import { Button } from '@gitroom/react/form/button'; +import { useRouter } from 'next/navigation'; const allowedIntegrations = [ 'facebook', @@ -16,11 +18,12 @@ const allowedIntegrations = [ 'linkedin-page', 'tiktok', 'youtube', - 'pinterest' + 'pinterest', ]; export const PlatformAnalytics = () => { const fetch = useFetch(); + const router = useRouter(); const [current, setCurrent] = useState(0); const [key, setKey] = useState(7); @@ -29,7 +32,7 @@ export const PlatformAnalytics = () => { return int.filter((f: any) => allowedIntegrations.includes(f.identifier)); }, []); - const { data } = useSWR('analytics-list', load, { + const { data, isLoading } = useSWR('analytics-list', load, { fallbackData: [], }); @@ -51,9 +54,13 @@ export const PlatformAnalytics = () => { } const arr = []; if ( - ['facebook', 'instagram', 'linkedin-page', 'pinterest', 'youtube'].indexOf( - currentIntegration.identifier - ) !== -1 + [ + 'facebook', + 'instagram', + 'linkedin-page', + 'pinterest', + 'youtube', + ].indexOf(currentIntegration.identifier) !== -1 ) { arr.push({ key: 7, @@ -62,9 +69,13 @@ export const PlatformAnalytics = () => { } if ( - ['facebook', 'instagram', 'linkedin-page', 'pinterest', 'youtube'].indexOf( - currentIntegration.identifier - ) !== -1 + [ + 'facebook', + 'instagram', + 'linkedin-page', + 'pinterest', + 'youtube', + ].indexOf(currentIntegration.identifier) !== -1 ) { arr.push({ key: 30, @@ -73,8 +84,9 @@ export const PlatformAnalytics = () => { } if ( - ['facebook', 'linkedin-page', 'pinterest', 'youtube'].indexOf(currentIntegration.identifier) !== - -1 + ['facebook', 'linkedin-page', 'pinterest', 'youtube'].indexOf( + currentIntegration.identifier + ) !== -1 ) { arr.push({ key: 90, @@ -96,6 +108,31 @@ export const PlatformAnalytics = () => { return options[0]?.key; }, [key, currentIntegration]); + if (isLoading) { + return null; + } + + if (!sortedIntegrations.length && !isLoading) { + return ( +
+
+ +
+
+ Can{"'"}t show analytics yet +
+ You have to add Social Media channels +
+
+ Supported: {allowedIntegrations.map(p => capitalize(p)).join(', ')} +
+ +
+ ); + } + return (
@@ -153,29 +190,31 @@ export const PlatformAnalytics = () => { ))}
-
-
- + {!!options.length && ( +
+
+ +
+
+ {!!keys && !!currentIntegration && ( + + )} +
-
- {!!keys && !!currentIntegration && ( - - )} -
-
+ )}
); };