Remove types in initiatives card

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/i18n.json

@@ -1,5 +1,5 @@
 {
-    "namespace": "initiativeListItem",
+    "namespace": "initiativeCard",
     "strings": {
         "initiativeFundNameTitle": "Fund Name",
         "initiativeYearApprovedTitle": "Year Approved",

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx

@@ -3,35 +3,25 @@ import { _cs } from '@togglecorp/fujs';
 import Container from '#components/Container';
 import TextOutput from '#components/TextOutput';
 import useTranslation from '#hooks/useTranslation';
+import { GoApiResponse } from '#utils/restRequest';
 
 import styles from './styles.module.css';
 import i18n from './i18n.json';
 
+type CountryResponse = NonNullable<GoApiResponse<'/api/v2/country/{id}/'>>
 interface Props {
     className?: string;
-    id: number;
-    allocation: number | null | undefined;
-    categories: string[] | null | undefined;
-    fund_type: string | null | undefined;
-    funding_period: number | null | undefined;
-    title: string | null | undefined;
-    year: string | null | undefined;
+    initiative: NonNullable<CountryResponse['initiatives']>[number];
 }
 
-function InitiativeListItem(props: Props) {
+function InitiativeCard(props: Props) {
     const {
         className,
-        id,
-        allocation,
-        categories,
-        fund_type,
-        funding_period,
-        title,
-        year,
+        initiative,
     } = props;
 
     const strings = useTranslation(i18n);
-    const categoriesItem = categories?.join(', ');
+    const categories = initiative.categories?.join(', ');
 
     return (
         <Container
@@ -40,54 +30,50 @@ function InitiativeListItem(props: Props) {
             headingLevel={4}
             withInternalPadding
             withHeaderBorder
-            withoutWrapInHeading
             // TODO: Verify Fund Name and and Fund Type
             headerDescription={(
                 <TextOutput
                     label={strings.initiativeFundNameTitle}
-                    value={fund_type}
+                    value={initiative.fund_type}
                     valueType="text"
                     strongLabel
                 />
             )}
         >
-            <div
-                className={styles.figure}
-                key={id}
-            >
+            <div className={styles.figure}>
                 <TextOutput
                     label={strings.initiativeYearApprovedTitle}
-                    value={year}
+                    value={initiative.year}
                     valueType="text"
                     strongValue
                 />
                 <TextOutput
                     label={strings.initiativeTitle}
-                    value={title}
+                    value={initiative.title}
                     valueType="text"
                     strongValue
                 />
                 <TextOutput
                     label={strings.initiativeFundingTypeTitle}
-                    value={fund_type}
+                    value={initiative.fund_type}
                     valueType="text"
                     strongValue
                 />
                 <TextOutput
                     label={strings.initiativeCategoriesTitle}
-                    value={categoriesItem}
+                    value={categories}
                     strongValue
                 />
                 <div className={styles.separator} />
                 <TextOutput
                     label={strings.initiativeAllocationTitle}
-                    value={allocation}
+                    value={initiative.allocation}
                     valueType="number"
                     strongValue
                 />
                 <TextOutput
                     label={strings.initiativeFundingPeriodTitle}
-                    value={`${funding_period} ${strings.initiativeMonthsSuffix}`}
+                    value={`${initiative.funding_period} ${strings.initiativeMonthsSuffix}`}
                     valueType="text"
                     strongValue
                 />
@@ -96,4 +82,4 @@ function InitiativeListItem(props: Props) {
     );
 }
 
-export default InitiativeListItem;
+export default InitiativeCard;

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json

@@ -1,7 +1,7 @@
 {
-    "namespace": "countryNSDirectoryInitiatives",
+    "namespace": "nsDirectoryInitiatives",
     "strings": {
-        "countryNSDirectoryInitiativesTitle": "NSD Initiatives",
-        "countryNSDirectoryInitiativesDescription": "The following data displays ongoing and implemented/closed Initiatives funded  by the different NSD funding mechanisms within the country, which are reported by the respective fund office. Contacts: CBF Office, NSIA Office, ESF Secretariat."
+        "nSDirectoryInitiativesTitle": "NSD Initiatives",
+        "nSDirectoryInitiativesDescription": "The following data displays ongoing and implemented/closed Initiatives funded  by the different NSD funding mechanisms within the country, which are reported by the respective fund office. Contacts: CBF Office, NSIA Office, ESF Secretariat."
     }
 }

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/index.tsx

@@ -6,16 +6,16 @@ import Grid from '#components/Grid';
 import useTranslation from '#hooks/useTranslation';
 import { type CountryOutletContext } from '#utils/outletContext';
 
-import InitiativeListItem from './InitiativeCard';
+import InitiativeCard from './InitiativeCard';
 import i18n from './i18n.json';
 
 interface Props {
     className?: string;
 }
 
-type CountryListItem = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['initiatives']>[number];
+type CountryInitiative = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['initiatives']>[number];
 
-const keySelector = (country: CountryListItem) => country.id;
+const keySelector = (initiative: CountryInitiative) => initiative.id;
 
 function NationalSocietyDirectoryInitiatives(props: Props) {
     const { className } = props;
@@ -24,25 +24,18 @@ function NationalSocietyDirectoryInitiatives(props: Props) {
     const { countryResponse } = useOutletContext<CountryOutletContext>();
 
     const rendererParams = useCallback(
-        (_: number, data: CountryListItem) => ({
-            id: data.id,
-            allocation: data?.allocation,
-            categories: data?.categories,
-            fund_type: data?.fund_type,
-            funding_period: data?.funding_period,
-            title: data?.title,
-            year: data?.year,
+        (_: number, data: CountryInitiative) => ({
+            initiative: data,
         }),
         [],
     );
 
     return (
         <Container
-            heading={strings.countryNSDirectoryInitiativesTitle}
+            heading={strings.nSDirectoryInitiativesTitle}
             // TODO: Add Contacts link in description
-            headerDescription={strings.countryNSDirectoryInitiativesDescription}
+            headerDescription={strings.nSDirectoryInitiativesDescription}
             withHeaderBorder
-            withInternalPadding
         >
             <Grid
                 className={className}
@@ -51,7 +44,7 @@ function NationalSocietyDirectoryInitiatives(props: Props) {
                 errored={false}
                 filtered={false}
                 keySelector={keySelector}
-                renderer={InitiativeListItem}
+                renderer={InitiativeCard}
                 rendererParams={rendererParams}
                 numPreferredColumns={3}
             />

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -10,8 +10,8 @@ import { resolveToString } from '#utils/translation';
 import NationalSocietyContacts from './NationalSocietyContacts';
 import NationalSocietyDirectory from './NationalSocietyDirectory';
 import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
-
 import NationalSocietyDirectoryInitiatives from './NsDirectoryInitiatives';
+
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -26,6 +26,7 @@ export function Component() {
                 <NationalSocietyLocalUnitsMap className={styles.map} />
                 <NationalSocietyDirectory className={styles.directory} />
             </div>
+            <NationalSocietyDirectoryInitiatives />
             <NationalSocietyContacts />
             {isDefined(countryResponse) && (
                 <Container
@@ -81,7 +82,6 @@ export function Component() {
                     )}
                 </Container>
             )}
-            <NationalSocietyDirectoryInitiatives />
         </div>
     );
 }