feat(region): added regions and fix issues

app/components/AdditionalLinkList/index.tsx

@@ -16,13 +16,12 @@ import useFilterState from '#hooks/useFilterState';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const PUBLIC_LINKS_QUERY = gql`
     query PublicLinks(
-        $limit: Int = 10
-        $offset: Int = 0
-        $linkType: LinkTypeEnum
+        $pagination: OffsetPaginationInput,
+        $filters: LinkFilter
     ) {
         publicLinks(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { linkType: $linkType }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -54,9 +53,13 @@ function AdditionalLinkList({ linkType }: LinkListProps) {
 
     const [{ data, fetching }] = usePublicLinksQuery({
         variables: {
-            linkType,
-            limit,
-            offset,
+            filters: {
+                linkType,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     });
 

app/components/DocumentList/index.tsx

@@ -15,13 +15,12 @@ import {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const DOCUMENT_LIST_QUERY = gql`
     query DocumentList(
-        $reportType: ReportTypeEnum
-        $limit: Int = 10
-        $offset: Int = 0
+        $pagination: OffsetPaginationInput,
+        $filters: ReportFilter
     ) {
         reports(
-            filters: { reportType: $reportType }
-            pagination: { limit: $limit, offset: $offset }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -55,7 +54,9 @@ function DocumentList(props: Props) {
 
     const [{ data, fetching }] = useDocumentListQuery({
         variables: {
-            reportType,
+            filters: {
+                reportType,
+            },
         },
     });
 

app/components/GoMapContainer/index.tsx

@@ -26,12 +26,13 @@ import {
     isDefined,
 } from '@togglecorp/fujs';
 import { MapContainer } from '@togglecorp/re-map';
+import FileSaver from 'file-saver';
+import { toPng } from 'html-to-image';
 
 import Link from '#components/Link';
+import useAlert from '#hooks/useAlert';
 import goLogo from '#resources/image/logo.png';
 
-// import FileSaver from 'file-saver';
-// import { toPng } from 'html-to-image';
 import styles from './styles.module.css';
 
 interface Props {
@@ -128,20 +129,20 @@ function GoMapContainer(props: Props) {
         }
     }, [presentationMode, onPresentationModeChange]);
 
-    // const alert = useAlert();
-    // const handleDownloadClick = useCallback(() => {
-    //     if (!containerRef?.current) {
-    //         alert.show(
-    //             "Failed to download map. Try again.",
-    //             { variant: 'danger' },
-    //         );
-    //         exitPrintMode();
-    //         return;
-    //     }
-    //     toPng(containerRef.current, { skipAutoScale: false })
-    //         .then((data) => FileSaver.saveAs(data, title))
-    //         .finally(exitPrintMode);
-    // }, [exitPrintMode, title, alert]);
+    const alert = useAlert();
+    const handleDownloadClick = useCallback(() => {
+        if (!containerRef?.current) {
+            alert.show(
+                'Failed to download map. Try again.',
+                { variant: 'danger' },
+            );
+            exitPrintMode();
+            return;
+        }
+        toPng(containerRef.current, { skipAutoScale: false })
+            .then((data) => FileSaver.saveAs(data, title))
+            .finally(exitPrintMode);
+    }, [exitPrintMode, title, alert]);
 
     return (
         <Container
@@ -181,7 +182,7 @@ function GoMapContainer(props: Props) {
                             <ListView>
                                 <Button
                                     name={undefined}
-                                    onClick={() => {}}
+                                    onClick={handleDownloadClick}
                                     before={(
                                         <DownloadTwoLineIcon />
                                     )}

app/components/RegionSelectInput/index.tsx

@@ -1,45 +1,90 @@
-import { SelectInput } from '@ifrc-go/ui';
+import {
+    SelectInput,
+    type SelectInputProps,
+} from '@ifrc-go/ui';
+import { gql } from 'urql';
 
 import {
-    keySelector,
-    labelSelector,
-    type Selector,
+    AdminAreaLevel,
+    type AdminAreasQuery,
+    useAdminAreasQuery,
+} from '#generated/types/graphql';
+import {
+    idSelector,
+    nameSelector,
 } from '#utils/utils';
 
-// Note: This will dynamically fetch from server
-const ethiopiaRegions: Selector[] = [
-    { key: 'AA', label: 'Addis Ababa' },
-    { key: 'AF', label: 'Afar' },
-    { key: 'AM', label: 'Amhara' },
-    { key: 'BE', label: 'Benishangul-Gumuz' },
-    { key: 'CERS', label: 'Central Ethiopia Regional State' },
-    { key: 'DR', label: 'Dire Dawa' },
-    { key: 'GA', label: 'Gambela' },
-    { key: 'HA', label: 'Harari' },
-    { key: 'OR', label: 'Oromia' },
-    { key: 'SI', label: 'Sidama' },
-    { key: 'SO', label: 'Somali' },
-    { key: 'SW', label: 'South West Ethiopia' },
-    { key: 'SNNP', label: 'SNNPR' },
-    { key: 'TI', label: 'Tigray' },
-];
-
-type Props = {
-  name: string;
-  value: string | undefined;
-  onChange: (value: string | undefined, name: string) => void;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const REGION_QUERY = gql`
+    query AdminAreas($filters: AdminAreaFilter) {
+        adminAreas(filters: $filters) {
+            results {
+                centroidLat
+                centroidLon
+                id
+                level
+                levelDisplay
+                name
+                parentId
+                pcode
+            }
+            totalCount
+        }
+    }
+`;
+
+export type RegionItem = NonNullable<AdminAreasQuery['adminAreas']['results']>[number];
+
+type Props<NAME> = SelectInputProps<
+    string,
+    NAME,
+    RegionItem,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any,
+    'value' | 'name' | 'options' | 'keySelector' | 'labelSelector'
+> & {
+    className?: string;
+    name: NAME;
+    value: string | undefined | null;
+    onChange: (
+        newValue: string | undefined,
+        name: NAME,
+        option: RegionItem | undefined,
+    ) => void;
 };
 
-function RegionSelectInput(props: Props) {
-    const { name, value, onChange } = props;
+function RegionSelectInput<const NAME>(props: Props<NAME>) {
+    const {
+        className,
+        name,
+        value,
+        onChange,
+        disabled,
+        ...otherProps
+    } = props;
+
+    const [{ data, fetching }] = useAdminAreasQuery({
+        variables: {
+            filters: {
+                level: AdminAreaLevel.Region,
+            },
+        },
+    });
+
+    const regions = data?.adminAreas.results;
+
     return (
         <SelectInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...otherProps}
+            className={className}
             name={name}
-            options={ethiopiaRegions}
-            keySelector={keySelector}
-            labelSelector={labelSelector}
+            options={regions}
+            keySelector={idSelector}
+            labelSelector={nameSelector}
             value={value}
             onChange={onChange}
+            disabled={disabled || fetching}
             placeholder="Select region"
         />
     );

app/utils/utils.ts

@@ -123,19 +123,22 @@ export interface ClickedPoint {
     lngLat: mapboxgl.LngLatLike;
 }
 
-export type Selector = {
-    key?: string;
-    id?: string;
-    label: string | null | undefined;
+export function labelSelector<T>(item: { label: T }) {
+    return item.label;
 }
 
-export function keySelector(type: Selector) {
-    return type.key ?? '';
+export function keySelector<T>(item: { key: T }) {
+    return item.key;
 }
-export function labelSelector(type: Selector) {
-    return type.label ?? '?';
+
+export function idSelector<T>(item: { id: T }) {
+    return item.id;
+}
+
+export function nameSelector<T>(item: { name: T }) {
+    return item.name;
 }
 
-export function idSelector(type: Selector) {
-    return type.id ?? '';
+export function valueSelector<T>(item: { value: T }) {
+    return item.value;
 }

app/views/CapacityAndResources/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { SearchLineIcon } from '@ifrc-go/icons';
 import {
     Container,
@@ -23,15 +24,12 @@ import useFilterState from '#hooks/useFilterState';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const CAPACITY_AND_RESOURCES_QUERY = gql`
     query CapacityAndResources(
-        $limit: Int = 10
-        $offset: Int = 0
-        $search: String = ""
-        $regions: [ID!]
-        $isActive: Boolean 
+        $pagination: OffsetPaginationInput,
+        $filters: CapacityAndResourceFilter
     ) {
         capacityAndResources(
-            pagination: { limit: $limit, offset: $offset }
-            filters: { search: $search, regions: $regions, isActive: $isActive }
+            filters: $filters
+            pagination: $pagination
         ) {
             totalCount
             results {
@@ -58,6 +56,8 @@ function ResourcesActions({ id }: {id: string}) {
 }
 
 function CapacityAndResourcesList() {
+    const [regionId, setRegionId] = useState<string | undefined>(undefined);
+
     const {
         limit,
         page,
@@ -75,11 +75,15 @@ function CapacityAndResourcesList() {
     });
     const [{ data, fetching }] = useCapacityAndResourcesQuery({
         variables: {
-            // regionId: '',
-            isActive: true,
-            search: filter.searchText,
-            limit,
-            offset,
+            filters: {
+                regions: [regionId ?? ''],
+                isActive: true,
+                search: filter.searchText,
+            },
+            pagination: {
+                limit,
+                offset,
+            },
         },
     });
     const capacityAndResourcesData = data?.capacityAndResources.results ?? [];
@@ -107,11 +111,10 @@ function CapacityAndResourcesList() {
     return (
         <Page
             actions={(
-                // TODO: add region filter
                 <RegionSelectInput
                     name="region"
-                    value={undefined}
-                    onChange={() => {}}
+                    value={regionId}
+                    onChange={setRegionId}
                 />
             )}
             heading="Capacity and Resources"