Add signals to all the pages

mustafasaifee42 · mustafasaifee42 · commit 14786d3c1168 · 2024-06-21T15:14:19.000+03:00
diff --git a/src/Apps/AccessAllDataApp.tsx b/src/Apps/AccessAllDataApp.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from 'antd';
 import { useEffect, useState } from 'react';
-import DataExplorer from '../Components/DataExplorer';
-import { DataSetList } from '../Components/DataSetList';
+import DataExplorer from '../DataExplorer';
+import { DataSetList } from '../DataSetList';
 import { AggregatedRegionVisualization } from '../RegionVisualization';
 import { CheckIfLoginOrNot } from '../Utils/CheckIfLoginOrNot';
 import { LoginBanner } from '../Components/LoginBanner';
diff --git a/src/Apps/CountryApp/TabSection.tsx b/src/Apps/CountryApp/TabSection.tsx
@@ -10,14 +10,16 @@ import { SubNationalVisualization } from '../../CountryPage/SubNationalVisualiza
 import { CountryHomePageForCountryPage } from '../../CountryPage';
 import { SubNationalMetaDataType } from '../../Types';
 import { WDLVisualization } from '../../WDLVisualization';
+import { SignalsPage } from '../../SignalsPage';
 
 interface Props {
   countryId: string;
   loginState: boolean;
+  countryName: string;
 }
 
 export function TabSection(props: Props) {
-  const { countryId, loginState } = props;
+  const { countryId, loginState, countryName } = props;
   const [subNationalDataAvailability, setSubNationalDataAvailability] =
     useState<SubNationalMetaDataType[] | undefined | 'error'>(undefined);
   useEffect(() => {
@@ -57,6 +59,18 @@ export function TabSection(props: Props) {
                   />
                 ),
               },
+              {
+                key: 'signals',
+                label: 'UNDP Signals 🔒',
+                children: (
+                  <SignalsPage
+                    id={countryName}
+                    loginState={loginState}
+                    link={`/countries-and-territories/${countryId || 'AFG'}`}
+                    type='country'
+                  />
+                ),
+              },
               {
                 key: 'sdgTracker',
                 label: 'SDG Tracker',
@@ -89,6 +103,17 @@ export function TabSection(props: Props) {
                   />
                 ),
               },
+              {
+                key: 'demographicData',
+                label: 'Demographic Data 🔒',
+                children: (
+                  <WDLVisualization
+                    loginState={loginState}
+                    link={`/countries-and-territories/${countryId || 'AFG'}`}
+                    countryCode={countryId || 'AFG'}
+                  />
+                ),
+              },
               {
                 key: 'subNationalVisualization',
                 label: 'Sub National Data',
@@ -99,6 +124,18 @@ export function TabSection(props: Props) {
                   />
                 ),
               },
+              {
+                key: 'signals',
+                label: 'UNDP Signals 🔒',
+                children: (
+                  <SignalsPage
+                    id={countryName}
+                    loginState={loginState}
+                    link={`/countries-and-territories/${countryId || 'AFG'}`}
+                    type='country'
+                  />
+                ),
+              },
               {
                 key: 'sdgTracker',
                 label: 'SDG Tracker',
diff --git a/src/Apps/CountryApp/index.tsx b/src/Apps/CountryApp/index.tsx
@@ -103,6 +103,11 @@ export function CountryApp(props: CountryProps) {
               <TabSection
                 countryId={countryId || 'AFG'}
                 loginState={loginState}
+                countryName={
+                  countryData[
+                    countryData.findIndex(d => d['Alpha-3 code'] === countryId)
+                  ]['Country or Area']
+                }
               />
             </>
           )}
diff --git a/src/Apps/RegionApp.tsx b/src/Apps/RegionApp.tsx
@@ -1,13 +1,14 @@
 import { Tabs } from 'antd';
 import { useState, useEffect } from 'react';
-import { DataSetList } from '../Components/DataSetList';
-import DataExplorer from '../Components/DataExplorer';
+import { DataSetList } from '../DataSetList';
+import DataExplorer from '../DataExplorer';
 import { COUNTRIES_BY_UNDP_REGIONS } from '../Constants';
 import { AboutPage } from '../AboutPage';
 import { AggregatedRegionVisualization } from '../RegionVisualization';
 import { INTRO_TEXT } from '../IntroductionText';
 import { CheckIfLoginOrNot } from '../Utils/CheckIfLoginOrNot';
 import { LoginBanner } from '../Components/LoginBanner';
+import { SignalsPage } from '../SignalsPage';
 
 interface Props {
   region?: string;
@@ -48,6 +49,30 @@ export function RegionApp(props: Props) {
             />
           ),
         },
+        {
+          key: 'signals',
+          label: 'UNDP Signals 🔒',
+          children: (
+            <SignalsPage
+              id={
+                COUNTRIES_BY_UNDP_REGIONS[
+                  COUNTRIES_BY_UNDP_REGIONS.findIndex(
+                    el => el.region === `UNDP_${region}`,
+                  )
+                ].bureauName
+              }
+              loginState={d}
+              link={
+                COUNTRIES_BY_UNDP_REGIONS[
+                  COUNTRIES_BY_UNDP_REGIONS.findIndex(
+                    el => el.region === `UNDP_${region}`,
+                  )
+                ].link
+              }
+              type='region'
+            />
+          ),
+        },
         {
           key: 'datasets',
           label: 'Datasets',
diff --git a/src/Apps/SignatureSolutionApp.tsx b/src/Apps/SignatureSolutionApp.tsx
@@ -1,7 +1,7 @@
 import { Tabs } from 'antd';
 import { useState, useEffect } from 'react';
-import DataExplorer from '../Components/DataExplorer';
-import { DataSetList } from '../Components/DataSetList';
+import DataExplorer from '../DataExplorer';
+import { DataSetList } from '../DataSetList';
 import { AboutPage } from '../AboutPage';
 import { INTRO_TEXT } from '../IntroductionText';
 import { PovertyAndInequalityKeyInsights } from '../KeyInsights/PovertyAndInequalityKeyInsights';
@@ -52,7 +52,7 @@ export function SignatureSolutionApp(props: Props) {
           children: (
             <SignalsPage
               id={signatureSolution || 'Poverty and Inequality'}
-              loginState
+              loginState={d}
               link={
                 INTRO_TEXT[
                   INTRO_TEXT.findIndex(el => el.id === signatureSolution)
diff --git a/src/Constants.tsx b/src/Constants.tsx
@@ -98,6 +98,8 @@ export const COUNTRIES_BY_UNDP_REGIONS = [
   {
     region: 'UNDP_AP',
     name: 'Asia and the Pacific',
+    link: '/regions/asi-and-the-pacific',
+    bureauName: 'RBAP',
     Countries: [
       'AFG',
       'BGD',
@@ -139,6 +141,8 @@ export const COUNTRIES_BY_UNDP_REGIONS = [
   {
     region: 'UNDP_AS',
     name: 'Arab States',
+    link: '/regions/arab-states',
+    bureauName: 'RBAS',
     Countries: [
       'ARE',
       'BHR',
@@ -165,6 +169,8 @@ export const COUNTRIES_BY_UNDP_REGIONS = [
   {
     region: 'UNDP_ECA',
     name: 'Europe and Central Asia',
+    link: '/regions/europe-and-central-asia',
+    bureauName: 'RBEC',
     Countries: [
       'ALB',
       'ARM',
@@ -189,6 +195,8 @@ export const COUNTRIES_BY_UNDP_REGIONS = [
   {
     region: 'UNDP_LAC',
     name: 'Latin America and the Caribbean',
+    link: '/regions/latin-america-and-the-caribbean',
+    bureauName: 'RBLAC',
     Countries: [
       'ARG',
       'ATG',
@@ -228,6 +236,8 @@ export const COUNTRIES_BY_UNDP_REGIONS = [
   {
     region: 'UNDP_SSA',
     name: 'Africa',
+    bureauName: 'RBA',
+    link: '/regions/africa',
     Countries: [
       'AGO',
       'BDI',
diff --git a/src/CountryPage/index.tsx b/src/CountryPage/index.tsx
@@ -20,7 +20,7 @@ import {
   METADATALINK,
   SIGNATURE_SOLUTIONS_LIST,
 } from '../Constants';
-import CountryVisualization from '../Components/CountryVisualization';
+import CountryVisualization from '../DataExplorer/CountryVisualization';
 
 interface PropsWithoutSS {
   countryId?: string;
diff --git a/src/DataExplorer/CountryVisualization.tsx b/src/DataExplorer/CountryVisualization.tsx
diff --git a/src/DataExplorer/index.tsx b/src/DataExplorer/index.tsx
diff --git a/src/DataSetList/DownloadModal.tsx b/src/DataSetList/DownloadModal.tsx
@@ -12,14 +12,14 @@ import {
   CountryTaxonomyDataType,
   IndicatorMetaDataType,
   IndicatorSimplifiedDataType,
-} from '../../Types';
+} from '../Types';
 import {
   COUNTRIES_BY_UNDP_REGIONS,
   SDG_GOALS,
   TAGS_LIST,
   DATALINK,
-} from '../../Constants';
-import { GetYearsArrayFromIndicator } from '../../Utils/GetYearsArray';
+} from '../Constants';
+import { GetYearsArrayFromIndicator } from '../Utils/GetYearsArray';
 
 interface Props {
   indicatorsListMain: IndicatorMetaDataType[];
diff --git a/src/DataSetList/index.tsx b/src/DataSetList/index.tsx
@@ -14,15 +14,15 @@ import {
   CountryTaxonomyDataType,
   IndicatorMetaDataType,
   IndicatorSimplifiedDataType,
-} from '../../Types';
+} from '../Types';
 import {
   COUNTRYTAXONOMYLINK,
   METADATALINK,
   SDG_GOALS,
   SIGNATURE_SOLUTIONS_LIST,
   TAGS_LIST,
   DATALINK,
-} from '../../Constants';
+} from '../Constants';
 import { DownloadModal } from './DownloadModal';
 
 interface Props {
diff --git a/src/SignalsPage/index.tsx b/src/SignalsPage/index.tsx
@@ -28,8 +28,12 @@ export function SignalsPage(props: Props) {
   );
 
   const GetURL = (queryParameter: string) => {
-    const ss1QueryParameter = `&${queryParameter}=${id.replaceAll(' ', '%20')}`;
-    const urlForListing = `${SIGNAL_API_LINK}signals/list?page=${paginationValue}&per_page=${pageSize}${ss1QueryParameter}&statuses=Approved`;
+    const linkQueryParameter = `&${queryParameter}=${id.replaceAll(
+      ' ',
+      '%20',
+    )}`;
+    console.log(linkQueryParameter);
+    const urlForListing = `${SIGNAL_API_LINK}signals/list?page=${paginationValue}&per_page=${pageSize}${linkQueryParameter}&statuses=Approved`;
     return urlForListing;
   };
 
@@ -61,11 +65,20 @@ export function SignalsPage(props: Props) {
   useEffect(() => {
     setSignalList(undefined);
     axios
-      .get(GetURL('signature_primary'), {
-        headers: {
-          access_token: SIGNAL_ACCESS_CODE,
+      .get(
+        GetURL(
+          type === 'signatureSolution'
+            ? 'signature_primary'
+            : type === 'region'
+            ? 'bureau'
+            : 'location',
+        ),
+        {
+          headers: {
+            access_token: SIGNAL_ACCESS_CODE,
+          },
         },
-      })
+      )
       .then((response: AxiosResponse) => {
         setSignalList(
           sortBy(response.data.data, d => Date.parse(d.created_at)).reverse(),
@@ -90,11 +103,20 @@ export function SignalsPage(props: Props) {
     setError(undefined);
     setSignalList(undefined);
     axios
-      .get(GetURL('signature_primary'), {
-        headers: {
-          access_token: SIGNAL_ACCESS_CODE,
+      .get(
+        GetURL(
+          type === 'signatureSolution'
+            ? 'signature_primary'
+            : type === 'region'
+            ? 'bureau'
+            : 'location',
+        ),
+        {
+          headers: {
+            access_token: SIGNAL_ACCESS_CODE,
+          },
         },
-      })
+      )
       .then((response: AxiosResponse) => {
         setSignalList(
           sortBy(response.data.data, d => Date.parse(d.created_at)).reverse(),
@@ -176,20 +198,7 @@ export function SignalsPage(props: Props) {
                 <div className='flex-div flex-wrap listing'>
                   {signalList.length > 0 ? (
                     <CardList data={signalList} choices={choices} />
-                  ) : (
-                    <h5
-                      className='undp-typography bold'
-                      style={{
-                        backgroundColor: 'var(--gray-200)',
-                        textAlign: 'center',
-                        padding: 'var(--spacing-07)',
-                        width: 'calc(100% - 4rem)',
-                        border: '1px solid var(--gray-400)',
-                      }}
-                    >
-                      No signals available matching your criteria
-                    </h5>
-                  )}
+                  ) : null}
                 </div>
                 {signalList.length > 0 ? (
                   <div className='flex-div flex-hor-align-center margin-top-07'>
