Merge pull request #1406 from Vizzuality/chore/types-cleanup

[FE]: types cleanup

app/hooks/administrative-areas/index.ts

@@ -1,25 +1,19 @@
-import { useMemo } from 'react';
-
 import { useQuery } from 'react-query';
 
 import { useSession } from 'next-auth/react';
 
-import { Region } from 'types/country-model';
+import { Region, SubRegion } from 'types/api/location';
 
 import ADMINISTRATIVE_AREAS from 'services/administrative-areas';
 
-import { UseAdministrativeAreasProps, UseAdministrativeAreasResponse } from './types';
-
-export function useAdministrativeAreas(
-  props: UseAdministrativeAreasProps
-): UseAdministrativeAreasResponse {
+export function useAdministrativeAreas(props: { id: Region['id']; includeAll?: boolean }) {
   const { data: session } = useSession();
   const { includeAll, id } = props;
 
-  const query = useQuery(
+  return useQuery(
     ['administrative areas', id],
     async () =>
-      ADMINISTRATIVE_AREAS.request({
+      ADMINISTRATIVE_AREAS.request<{ data: SubRegion[] }>({
         method: 'GET',
         url: `/${id}/subdivisions`,
         params: {
@@ -33,26 +27,18 @@ export function useAdministrativeAreas(
       }),
     {
       enabled: !!id,
+      select: (data) => {
+        const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
+
+        return parsedData.map((r) => ({
+          name: r.name2,
+          id: r.id,
+          level: 2,
+          bbox: r.bbox,
+          minPuAreaSize: r.minPuAreaSize,
+          maxPuAreaSize: r.maxPuAreaSize,
+        }));
+      },
     }
   );
-
-  const { data } = query;
-
-  return useMemo(() => {
-    const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
-
-    const regions: Region[] = parsedData.map((r) => ({
-      name: r.name2,
-      id: r.id,
-      level: 2,
-      bbox: r.bbox,
-      minPuAreaSize: r.minPuAreaSize,
-      maxPuAreaSize: r.maxPuAreaSize,
-    }));
-
-    return {
-      ...query,
-      data: regions,
-    };
-  }, [query, data?.data?.data]);
 }

app/hooks/countries/index.ts

@@ -1,67 +1,57 @@
-import { useMemo } from 'react';
-
 import { useQuery } from 'react-query';
 
 import { useSession } from 'next-auth/react';
 
-import { Country, Region } from 'types/country-model';
+import { Country, Region, RegionLevel } from 'types/api/location';
 
 import COUNTRIES from 'services/countries';
 
-import {
-  UseCountriesProps,
-  UseCountriesResponse,
-  UseCountryRegionsProps,
-  UseCountryRegionsResponse,
-} from './types';
-
-export function useCountries(filters: UseCountriesProps): UseCountriesResponse {
+export function useCountries(filters: { includeAll?: boolean }) {
   const { data: session } = useSession();
   const { includeAll } = filters;
 
-  const query = useQuery('countries', async () =>
-    COUNTRIES.request({
-      method: 'GET',
-      url: '/',
-      params: {
-        ...(includeAll && { disablePagination: true }),
-        sort: 'name0',
-        omitFields: 'theGeom',
-      },
-      headers: {
-        Authorization: `Bearer ${session.accessToken}`,
+  return useQuery(
+    ['countries'],
+    async () =>
+      COUNTRIES.request<{ data: Country[] }>({
+        method: 'GET',
+        params: {
+          ...(includeAll && { disablePagination: true }),
+          sort: 'name0',
+          omitFields: 'theGeom',
+        },
+        headers: {
+          Authorization: `Bearer ${session.accessToken}`,
+        },
+      }),
+    {
+      select: (data) => {
+        const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
+
+        return parsedData.map((c) => ({
+          name: c.name0,
+          id: c.gid0,
+          bbox: c.bbox,
+          minPuAreaSize: c.minPuAreaSize,
+          maxPuAreaSize: c.maxPuAreaSize,
+        }));
       },
-    })
+    }
   );
-
-  const { data } = query;
-
-  return useMemo(() => {
-    const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
-
-    const countries: Country[] = parsedData.map((c) => ({
-      name: c.name0,
-      id: c.gid0,
-      bbox: c.bbox,
-      minPuAreaSize: c.minPuAreaSize,
-      maxPuAreaSize: c.maxPuAreaSize,
-    }));
-
-    return {
-      ...query,
-      data: countries,
-    };
-  }, [query, data?.data?.data]);
 }
 
-export function useCountryRegions(props: UseCountryRegionsProps): UseCountryRegionsResponse {
+export function useCountryRegions(props: {
+  id: Region['id'];
+  includeAll?: boolean;
+  level: RegionLevel;
+}) {
   const { data: session } = useSession();
   const { includeAll, id, level } = props;
 
-  const query = useQuery(
+  return useQuery(
     ['country regions', id],
     async () =>
-      COUNTRIES.request({
+      COUNTRIES.request<{ data: Region[] }>({
         method: 'GET',
         url: `/${id}/administrative-areas`,
         params: {
@@ -76,26 +66,18 @@ export function useCountryRegions(props: UseCountryRegionsProps): UseCountryRegi
       }),
     {
       enabled: !!id,
+      select: (data) => {
+        const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
+
+        return parsedData.map((r) => ({
+          name: r.name1,
+          id: r.id,
+          level: 1,
+          bbox: r.bbox,
+          minPuAreaSize: r.minPuAreaSize,
+          maxPuAreaSize: r.maxPuAreaSize,
+        }));
+      },
     }
   );
-
-  const { data } = query;
-
-  return useMemo(() => {
-    const parsedData = Array.isArray(data?.data?.data) ? data?.data?.data : [];
-
-    const regions: Region[] = parsedData.map((r) => ({
-      name: r.name1,
-      id: r.id,
-      level: 1,
-      bbox: r.bbox,
-      minPuAreaSize: r.minPuAreaSize,
-      maxPuAreaSize: r.maxPuAreaSize,
-    }));
-
-    return {
-      ...query,
-      data: regions,
-    };
-  }, [query, data?.data?.data]);
 }

app/hooks/projects/index.ts

@@ -17,7 +17,6 @@ import UPLOADS from 'services/uploads';
 
 import {
   UseProjectsOptionsProps,
-  UseProjectsResponse,
   UseSaveProjectProps,
   SaveProjectProps,
   UseDeleteProjectProps,
@@ -52,7 +51,7 @@ import {
   LegacyProjectValidationResultsProps,
 } from './types';
 
-export function useProjects(options: UseProjectsOptionsProps): UseProjectsResponse {
+export function useProjects(options: UseProjectsOptionsProps) {
   const { push } = useRouter();
   const { data: session } = useSession();
 

app/hooks/projects/types.ts

@@ -1,14 +1,11 @@
 import { AxiosRequestConfig } from 'axios';
 
-import { Response } from 'types/api-model';
-
 // useProjects
 export interface UseProjectsOptionsProps {
   search?: string;
   sort?: string;
   filters?: Record<string, unknown>;
 }
-export type UseProjectsResponse = Response;
 
 // useSaveProject
 export interface UseSaveProjectProps {

app/hooks/scenarios/index.ts

@@ -20,7 +20,7 @@ import { useMe } from 'hooks/me';
 import { useProjectUsers } from 'hooks/project-users';
 
 import { ItemProps } from 'components/scenarios/item/component';
-import type { Project } from 'types/project-model';
+import type { Project } from 'types/api/project';
 
 import DOWNLOADS from 'services/downloads';
 import PROJECTS from 'services/projects';

app/hooks/solutions/mock.ts

@@ -1,4 +1,4 @@
-import { Solution } from 'types/project-model';
+import { Solution } from 'types/api/project';
 
 const ITEMS: Solution[] = [
   {

app/layout/projects/all/list/item/component.tsx

@@ -11,7 +11,7 @@ import { useProjectUsers } from 'hooks/project-users';
 import Avatar from 'components/avatar';
 import Button from 'components/button';
 import Icon from 'components/icon';
-import type { Project } from 'types/project-model';
+import type { Project } from 'types/api/project';
 import { ROLES } from 'utils/constants-roles';
 
 import ARROW_RIGHT_2_SVG from 'svgs/ui/arrow-right-2.svg?sprite';

app/layout/projects/new/form/constants.ts

@@ -1,8 +1,8 @@
-import { PlanningUnit } from 'types/project-model';
+import { PlanningArea } from 'types/api/project';
 
-export const DEFAULT_AREA = {
+export const DEFAULT_AREA: Omit<PlanningArea, 'country'> = {
   planningUnitAreakm2: 10,
-  planningUnitGridShape: PlanningUnit.HEXAGON,
+  planningUnitGridShape: 'hexagon',
 };
 
 export const PA_OPTIONS = [

app/layout/projects/new/form/country-region-selector/component.tsx → app/layout/projects/new/form/country-region-selector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, MouseEvent } from 'react';
 
 import { Field as FieldRFF } from 'react-final-form';
 import { useDispatch } from 'react-redux';
@@ -12,16 +12,19 @@ import Field from 'components/forms/field';
 import Select from 'components/forms/select';
 import { composeValidators } from 'components/forms/validations';
 import Loading from 'components/loading';
-import { RegionLevel } from 'types/country-model';
+import { Country, Region, SubRegion } from 'types/api/location';
 
-import CountryRegionSelectorProps from './types';
-
-export const CountryRegionSelector: React.FC<CountryRegionSelectorProps> = ({
+export const CountryRegionSelector = ({
   country,
   region,
   subRegion,
   onClick,
-}: CountryRegionSelectorProps) => {
+}: {
+  country?: Country['id'];
+  region?: Region['id'];
+  subRegion?: SubRegion['id'];
+  onClick?: (evt: MouseEvent<HTMLDivElement>) => void;
+}): JSX.Element => {
   const [selectedCountry, setSelectedCountry] = useState(country);
   const [selectedRegion, setSelectedRegion] = useState(region);
   const [selectedSubRegion, setSelectedSubRegion] = useState(subRegion);
@@ -37,7 +40,7 @@ export const CountryRegionSelector: React.FC<CountryRegionSelectorProps> = ({
     data: regionsData,
     isFetching: isFetchingRegions,
     isFetched: isFetchedRegions,
-  } = useCountryRegions({ id: selectedCountry, includeAll: true, level: RegionLevel.ONE });
+  } = useCountryRegions({ id: selectedCountry, includeAll: true, level: 1 });
 
   const {
     data: subRegionsData,