Resolve TS errors: TreeMapper

src/features/common/types/plantLocation.d.ts

@@ -1,5 +1,6 @@
 import { DateString } from './common';
 import { Polygon, Point } from 'geojson';
+import { Links } from './payments';
 
 export interface PlantLocationBase {
   hid: string;
@@ -144,3 +145,30 @@ export interface Species {
   scientificName: string;
   scientificSpecies: string;
 }
+
+interface Filters {
+  all: string;
+  'location-partial': string;
+  'location-complete': string;
+  'location-single': string;
+  'location-multi': string;
+  'location-sample': string;
+  'revision-pending': string;
+}
+
+export interface ExtendedPlantLocations {
+  items: PlantLocation[] | SamplePlantLocation[];
+  total: number;
+  count: number;
+  _links: Links;
+  _filters: Filters;
+}
+
+export interface Species {
+  aliases: string;
+  description: string | null;
+  id: string;
+  image: string | null;
+  scientificName: string;
+  scientificSpecies: string;
+}

src/features/user/TreeMapper/Analytics/components/TreePlanted/index.tsx

@@ -157,14 +157,8 @@ export const TreePlanted = () => {
     xaxis: {
       labels: {
         rotate: -90,
-        formatter: function (
-          value:
-            | DaysCategories
-            | WeeksCategories
-            | MonthsCategories
-            | YearsCategories
-        ) {
-          return value ? value.label : '';
+        formatter: function (value: string) {
+          return value ? value : '';
         },
       },
       categories: [],

src/features/user/TreeMapper/Import/components/PlantingLocation.tsx

@@ -1,5 +1,12 @@
 import React, { ReactElement } from 'react';
-import { Controller, useForm, useFieldArray, Control } from 'react-hook-form';
+import {
+  Controller,
+  useForm,
+  useFieldArray,
+  FieldErrors,
+  FieldArrayWithId,
+  Control,
+} from 'react-hook-form';
 import styles from '../Import.module.scss';
 import { useTranslation } from 'next-i18next';
 import { localeMapForDate } from '../../../../../utils/language/getLanguageName';
@@ -23,7 +30,10 @@
 import { handleError, APIError } from '@planet-sdk/common';
 import { ErrorHandlingContext } from '../../../../common/Layout/ErrorHandlingContext';
 import { MapProject } from '../../../../common/types/ProjectPropsContextInterface';
+import { Treemapper } from '../../Treemapper';
+import { FeatureCollection, GeometryObject } from 'geojson';
 import { Species } from '../../../../common/types/plantLocation';
+import { Geometry } from '@turf/turf';
 
 const dialogSx: SxProps = {
   '& .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
@@ -46,9 +56,9 @@
   index: number;
   t: Function;
   remove: Function;
-  errors: any;
-  item: Record<'id', string>;
-  control: Control<any, any>;
+  errors: FieldErrors<Treemapper.PlantLocation>;
+  item: FieldArrayWithId<Treemapper.PlantLocation, 'plantedSpecies', 'id'>;
+  control: Control<Treemapper.PlantLocation, any>;
 }
 
 function PlantedSpecies({
@@ -79,12 +89,12 @@
               value={value}
               error={
                 errors.plantedSpecies &&
-                errors.plantedSpecies[index]?.otherSpecies
+                errors.plantedSpecies[index]?.otherSpecies !== undefined
               }
               helperText={
                 errors.plantedSpecies &&
                 errors.plantedSpecies[index]?.otherSpecies &&
-                errors.plantedSpecies[index]?.otherSpecies.message
+                (errors.plantedSpecies[index]?.otherSpecies?.message ?? '')
               }
             />
           )}
@@ -96,7 +106,7 @@
           control={control}
           rules={{
             required: index > 0 ? false : t('treemapper:treesRequired'),
-            validate: (value: any) => {
+            validate: (value) => {
               return parseInt(value, 10) >= 1
                 ? true
                 : t('treemapper:treesRequired');
@@ -106,19 +116,20 @@
             <TextField
               label={t('treemapper:count')}
               variant="outlined"
-              onChange={(e: any) => {
+              onChange={(e) => {
                 e.target.value = e.target.value.replace(/[^0-9]/g, '');
                 onChange(e.target.value);
               }}
               value={value > 0 ? value : ''}
               onBlur={onBlur}
               error={
-                errors.plantedSpecies && errors.plantedSpecies[index]?.treeCount
+                errors.plantedSpecies &&
+                errors.plantedSpecies[index]?.treeCount !== undefined
               }
               helperText={
                 errors.plantedSpecies &&
                 errors.plantedSpecies[index]?.treeCount &&
-                errors.plantedSpecies[index]?.treeCount.message
+                (errors.plantedSpecies[index]?.treeCount?.message ?? '')
               }
             />
           )}
@@ -141,9 +152,9 @@
 interface Props {
   handleNext: () => void;
   userLang: string;
-  plantLocation: any;
+  plantLocation: Treemapper.PlantLocation | null;
   setPlantLocation: Function;
-  geoJson: any;
+  geoJson: Geometry | null;
   setGeoJson: Function;
   activeMethod: string;
   setActiveMethod: Function;
@@ -165,12 +176,12 @@
   const [projects, setProjects] = React.useState<MapProject[]>([]);
   const importMethods = ['import', 'editor'];
   const [geoJsonError, setGeoJsonError] = React.useState(false);
-  const [mySpecies, setMySpecies] = React.useState<Species[] | null>(null);
+  const [mySpecies, setMySpecies] = React.useState<Species | null>(null);
   const { setErrors } = React.useContext(ErrorHandlingContext);
 
   const { t } = useTranslation(['treemapper', 'common', 'maps']);
   const defaultValues = {
-    plantDate: new Date(),
+    plantDate: '',
     plantProject: '',
     geometry: {},
     plantedSpecies: [
@@ -227,8 +238,12 @@
     }
   }, [contextLoaded]);
 
-  const normalizeGeoJson = (geoJson: any) => {
-    if (gjv.isGeoJSONObject(geoJson) && geoJson.features?.length > 0) {
+  const normalizeGeoJson = (geoJson: GeometryObject | FeatureCollection) => {
+    if (
+      gjv.isGeoJSONObject(geoJson) &&
+      'features' in geoJson &&
+      geoJson.features?.length > 0
+    ) {
       const flattened = flatten(geoJson);
       if (flattened.features[0]?.geometry?.type === 'Polygon') {
         setGeoJsonError(false);
@@ -246,8 +261,8 @@
     }
   };
 
-  const onDrop = React.useCallback((acceptedFiles: File[]) => {
-    acceptedFiles.forEach((file) => {
+  const onDrop = React.useCallback((acceptedFiles) => {
+    acceptedFiles.forEach((file: File) => {
       const reader = new FileReader();
       reader.readAsText(file);
       reader.onabort = () => console.log('file reading was aborted');
@@ -304,15 +319,15 @@
     onFileDialogCancel: () => setIsUploadingData(false),
   });
 
-  const onSubmit = async (data: any) => {
+  const onSubmit = async (data: Treemapper.PlantLocation) => {
     if (geoJson) {
       setIsUploadingData(true);
       const submitData = {
         type: 'multi',
         captureMode: 'external',
         geometry: geoJson,
         plantedSpecies: data.plantedSpecies,
-        plantDate: data.plantDate.toISOString(),
+        plantDate: new Date(data.plantDate).toISOString(),
         registrationDate: new Date().toISOString(),
         plantProject: data.plantProject,
       };
@@ -437,7 +452,7 @@
                 onChange={onChange}
                 onBlur={onBlur}
                 value={value}
-                error={errors.plantProject}
+                error={errors.plantProject !== undefined}
                 helperText={errors.plantProject && errors.plantProject.message}
               >
                 {projects.map((option) => (
@@ -492,6 +507,12 @@
           append({
             otherSpecies: '',
             treeCount: 0,
+            // Set to default or empty value for type match
+            scientificName: '',
+            created: '',
+            scientificSpecies: '',
+            id: '',
+            updated: '',
           });
         }}
         className={styles.addSpeciesButton}

src/features/user/TreeMapper/Import/components/ReviewSubmit.tsx

@@ -3,11 +3,11 @@ import styles from '../Import.module.scss';
 import { useTranslation } from 'next-i18next';
 import formatDate from '../../../../../utils/countryCurrency/getFormattedDate';
 import { useRouter } from 'next/router';
-import { PlantLocation } from '../../Treemapper';
 import { Button } from '@mui/material';
+import { Treemapper } from '../../Treemapper';
 
 interface Props {
-  plantLocation: PlantLocation | null;
+  plantLocation: Treemapper.PlantLocation | null;
   handleBack: () => void;
   errorMessage: string;
   setErrorMessage: (errorMessage: string) => void;
@@ -16,8 +16,6 @@ interface Props {
 export default function ReviewSubmit({
   plantLocation,
   handleBack,
-  errorMessage,
-  setErrorMessage,
 }: Props): ReactElement {
   const router = useRouter();
   const { t } = useTranslation(['treemapper', 'common']);
@@ -80,7 +78,7 @@ export default function ReviewSubmit({
               <div className={styles.gridItemValue}>
                 <span>
                   {plantLocation.plantedSpecies
-                    ? plantLocation.plantedSpecies.map((species: any) => {
+                    ? plantLocation.plantedSpecies.map((species) => {
                         return (
                           <p key={species.id}>
                             {species.treeCount}{' '}
@@ -103,12 +101,12 @@ export default function ReviewSubmit({
                   <div className={styles.gridItemValue}>
                     {plantLocation.samplePlantLocations &&
                       plantLocation.samplePlantLocations.map(
-                        (spl: any, index: number) => {
+                        (spl, index: number) => {
                           return (
                             <div key={index} className={styles.value}>
                               {index + 1}.{' '}
                               <span className={styles.link}>
-                                {spl.otherSpecies}
+                                {'otherSpecies' in spl && spl.otherSpecies}
                               </span>
                               <br />
                               {spl.tag

src/features/user/TreeMapper/Import/components/SampleTreeCard.tsx

@@ -10,7 +10,7 @@ import { MobileDatePicker as MuiDatePicker } from '@mui/x-date-pickers/MobileDat
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import themeProperties from '../../../../../theme/themeProperties';
-import { PlantLocation, PlantedSpecies } from '../../Treemapper';
+import { Treemapper } from '../../Treemapper';
 
 const dialogSx: SxProps = {
   '& .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
@@ -36,7 +36,7 @@ interface Props {
   control: any;
   userLang: string;
   item: any;
-  plantLocation: PlantLocation;
+  plantLocation: Treemapper.PlantLocation | null;
   errors: any;
   key: string;
 }
@@ -52,7 +52,7 @@ export default function SampleTreeCard({
   errors,
 }: Props): ReactElement {
   const sampleTrees = getValues();
-  const { t, ready } = useTranslation(['treemapper', 'common']);
+  const { t } = useTranslation(['treemapper', 'common']);
   return (
     <div className={styles.sampleTreeFieldGroup}>
       <div className={styles.sampleTreeName}>
@@ -251,9 +251,10 @@ export default function SampleTreeCard({
                 value={value}
                 select
               >
-                {plantLocation.plantedSpecies.map(
-                  (species: PlantedSpecies, index: number) => {
-                    if (plantLocation.plantedSpecies.length === 1) {
+                {plantLocation?.plantedSpecies.map(
+                  (species: Treemapper.PlantedSpecies, index: number) => {
+                    if (!species.otherSpecies) return;
+                    if (plantLocation?.plantedSpecies.length === 1) {
                       return (
                         <MenuItem
                           key={index}