diff --git a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
index e4dbac8d16..b5b1f36d81 100644
--- a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
+++ b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
@@ -29,6 +29,7 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import themeProperties from '../../../theme/themeProperties';
import StyledForm from '../../common/Layout/StyledForm';
import InlineFormDisplayGroup from '../../common/Layout/Forms/InlineFormDisplayGroup';
+import { ViewportProps } from '../../common/types/map';
import {
RegisterTreesFormProps,
RegisterTreeGeometry,
@@ -84,7 +85,7 @@ function RegisterTreesForm({
const [geometry, setGeometry] = React.useState<
RegisterTreeGeometry | undefined
>(undefined);
- const [viewport, setViewPort] = React.useState({
+ const [viewport, setViewPort] = React.useState
({
height: '100%',
width: '100%',
latitude: defaultMapCenter[0],
@@ -95,15 +96,17 @@ function RegisterTreesForm({
const [userLocation, setUserLocation] = React.useState(null);
const [projects, setProjects] = React.useState([]);
const { setErrors, redirect } = React.useContext(ErrorHandlingContext);
+ const [isStyleReady, setIsStyleReady] = React.useState(false);
React.useEffect(() => {
const promise = getMapStyle('openStreetMap');
promise.then((style) => {
if (style) {
setMapState({ ...mapState, mapStyle: style });
+ setIsStyleReady(true);
}
});
- }, []);
+ }, [isStyleReady]);
React.useEffect(() => {
if (localStorage.getItem('language')) {
@@ -224,7 +227,6 @@ function RegisterTreesForm({
}, [contextLoaded]);
const _onStateChange = (state: any) => setMapState({ ...state });
-
const _onViewportChange = (view: any) => setViewPort({ ...view });
return (
<>
@@ -347,7 +349,7 @@ function RegisterTreesForm({
)}
- {isMultiple ? (
+ {isMultiple && isStyleReady ? (
) : (
Date: Thu, 21 Sep 2023 11:22:16 +0530
Subject: [PATCH 07/23] fix: add species of Import tree
---
.../Import/components/PlantingLocation.tsx | 205 ++++++++++--------
1 file changed, 109 insertions(+), 96 deletions(-)
diff --git a/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx b/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
index ebf90e6366..52e5c02691 100644
--- a/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
+++ b/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
@@ -51,6 +51,101 @@ interface Props {
activeMethod: string;
setActiveMethod: Function;
}
+interface SpeciesProps {
+ index: number;
+ t: Function;
+ remove: Function;
+ errors: any;
+ item: any;
+ control: any;
+}
+
+function PlantedSpecies({
+ index,
+ t,
+ remove,
+ errors,
+ item,
+ control,
+}: SpeciesProps): ReactElement {
+ return (
+
+
+ {/* */}
+ 0 ? false : t('treemapper:atLeastOneSpeciesRequired'),
+ }}
+ render={({ field: { onChange, onBlur, value } }) => (
+
+ )}
+ />
+
+
+ 0 ? false : t('treemapper:treesRequired'),
+ validate: (value: any) => {
+ return parseInt(value, 10) >= 1
+ ? true
+ : t('treemapper:treesRequired');
+ },
+ }}
+ render={({ field: { onChange, onBlur, value } }) => (
+ {
+ 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
+ }
+ helperText={
+ errors.plantedSpecies &&
+ errors.plantedSpecies[index]?.treeCount &&
+ errors.plantedSpecies[index]?.treeCount.message
+ }
+ />
+ )}
+ />
+
+ {index > 0 ? (
+
remove(index)}
+ className={`${styles.speciesDeleteField} ${styles.deleteActive}`}
+ >
+
+
+ ) : (
+
+ )}
+
{
append({
@@ -404,98 +512,3 @@ export default function PlantingLocation({
);
}
-interface SpeciesProps {
- index: number;
- t: Function;
- remove: Function;
- errors: any;
- item: any;
- control: any;
-}
-
-function PlantedSpecies({
- index,
- t,
- remove,
- errors,
- item,
- control,
-}: SpeciesProps): ReactElement {
- return (
-
-
- {/* */}
- 0 ? false : t('treemapper:atLeastOneSpeciesRequired'),
- }}
- render={({ field: { onChange, onBlur, value } }) => (
-
- )}
- />
-
-
- 0 ? false : t('treemapper:treesRequired'),
- validate: (value: any) => {
- return parseInt(value, 10) >= 1
- ? true
- : t('treemapper:treesRequired');
- },
- }}
- render={({ field: { onChange, onBlur, value } }) => (
- {
- 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
- }
- helperText={
- errors.plantedSpecies &&
- errors.plantedSpecies[index]?.treeCount &&
- errors.plantedSpecies[index]?.treeCount.message
- }
- />
- )}
- />
-
- {index > 0 ? (
-
remove(index)}
- className={`${styles.speciesDeleteField} ${styles.deleteActive}`}
- >
-
-
- ) : (
-
- )}
-
- );
-}
From 0dadc03b67c1c836923a5bfaede91134955618a8 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Thu, 21 Sep 2023 13:15:41 +0530
Subject: [PATCH 08/23] fix: Eslint error
---
.../Import/components/PlantingLocation.tsx | 21 ++++++++++---------
1 file changed, 11 insertions(+), 10 deletions(-)
diff --git a/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx b/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
index 52e5c02691..ef2ff98b9b 100644
--- a/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
+++ b/src/features/user/TreeMapper/Import/components/PlantingLocation.tsx
@@ -41,16 +41,6 @@ const dialogSx: SxProps = {
},
};
-interface Props {
- handleNext: () => void;
- userLang: string;
- plantLocation: any;
- setPlantLocation: Function;
- geoJson: any;
- setGeoJson: Function;
- activeMethod: string;
- setActiveMethod: Function;
-}
interface SpeciesProps {
index: number;
t: Function;
@@ -147,6 +137,17 @@ function PlantedSpecies({
);
}
+interface Props {
+ handleNext: () => void;
+ userLang: string;
+ plantLocation: any;
+ setPlantLocation: Function;
+ geoJson: any;
+ setGeoJson: Function;
+ activeMethod: string;
+ setActiveMethod: Function;
+}
+
export default function PlantingLocation({
handleNext,
userLang,
From b47be7929ec238bfc166fc5335a80928daf9259e Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Thu, 28 Sep 2023 11:45:42 +0530
Subject: [PATCH 09/23] doc: adds comment reg DrawMap functionality
---
src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
index f1d4513948..f68b584a76 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
@@ -109,6 +109,8 @@ export default function MapComponent({
width: '100%',
}}
>
+ {/* NOTE: this functionality does not seem to work locally using React 18.
+ To test, a temporary fix is to set `reactStrictMode=false` in next.config.js */}
Date: Thu, 28 Sep 2023 15:46:58 +0530
Subject: [PATCH 10/23] refactor: renames ContributionProps for clarity
---
src/features/common/types/map.d.ts | 119 +++++++++---------
.../RegisterTrees/SingleContribution.tsx | 4 +-
.../RegisterTrees/RegisterTreesWidget.tsx | 4 +-
3 files changed, 62 insertions(+), 65 deletions(-)
diff --git a/src/features/common/types/map.d.ts b/src/features/common/types/map.d.ts
index 9c464c8e68..27148c1539 100644
--- a/src/features/common/types/map.d.ts
+++ b/src/features/common/types/map.d.ts
@@ -1,70 +1,67 @@
import {
- TreeProjectClassification,
- CountryCode,
- CurrencyCode,
- TreeProjectMetadata,
- DefaultPaymentConfig,
- Tpo,
- UnitTypes
-} from "@planet-sdk/common"
+ TreeProjectClassification,
+ CountryCode,
+ CurrencyCode,
+ TreeProjectMetadata,
+ DefaultPaymentConfig,
+ Tpo,
+ UnitTypes,
+} from '@planet-sdk/common';
import { Nullable } from '@planet-sdk/common/build/types/util';
-import { ContributionProps } from "../../user/RegisterTrees/RegisterTrees/SingleContribution";
-
-
+import { ContributionProperties } from '../../user/RegisterTrees/RegisterTrees/SingleContribution';
export interface ViewportProps {
- height: string | number;
- width: string | number;
- latitude?: number;
- longitude?: number;
- zoom: number[] | number
- center?: number[]
+ height: string | number;
+ width: string | number;
+ latitude?: number;
+ longitude?: number;
+ zoom: number[] | number;
+ center?: number[];
}
export interface ProjectGeoJsonProps {
- type: 'Feature';
- geometry: {
- type: string;
- coordinates: number[];
- };
- properties: {
- allowDonations: boolean;
- classification: TreeProjectClassification;
- countPlanted: number;
- countTarget: number;
- country: CountryCode;
- currency: CurrencyCode;
- id: string;
- image: string;
- isApproved: boolean;
- isFeatured: boolean;
- isTopProject: boolean;
- location: Nullable;
- metadata: TreeProjectMetadata;
- minTreeCount: number;
- name: string;
- paymentDefaults: Nullable;
- purpose: 'trees';
- unit: 'tree';
- slug: string;
- taxDeductionCountries: CountryCode[];
- tpo: Tpo;
- treeCost: number;
- unitCost: number;
- unitType: UnitTypes;
- };
- }
-
-
- export interface RegisterTreeGeometry {
- coordinates: [number, number] | number[][];
- type: 'Polygon' | 'Point';
+ type: 'Feature';
+ geometry: {
+ type: string;
+ coordinates: number[];
+ };
+ properties: {
+ allowDonations: boolean;
+ classification: TreeProjectClassification;
+ countPlanted: number;
+ countTarget: number;
+ country: CountryCode;
+ currency: CurrencyCode;
+ id: string;
+ image: string;
+ isApproved: boolean;
+ isFeatured: boolean;
+ isTopProject: boolean;
+ location: Nullable;
+ metadata: TreeProjectMetadata;
+ minTreeCount: number;
+ name: string;
+ paymentDefaults: Nullable;
+ purpose: 'trees';
+ unit: 'tree';
+ slug: string;
+ taxDeductionCountries: CountryCode[];
+ tpo: Tpo;
+ treeCost: number;
+ unitCost: number;
+ unitType: UnitTypes;
+ };
}
- export interface RegisterTreesFormProps {
- setContributionGUID: React.Dispatch>;
- setContributionDetails: React.Dispatch<
- React.SetStateAction
- >;
- setRegistered: React.Dispatch>;
- }
\ No newline at end of file
+export interface RegisterTreeGeometry {
+ coordinates: [number, number] | number[][];
+ type: 'Polygon' | 'Point';
+}
+
+export interface RegisterTreesFormProps {
+ setContributionGUID: React.Dispatch>;
+ setContributionDetails: React.Dispatch<
+ React.SetStateAction
+ >;
+ setRegistered: React.Dispatch>;
+}
diff --git a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
index 4ffafe2587..c5fafe7d12 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
@@ -9,7 +9,7 @@ import formatDate from '../../../../utils/countryCurrency/getFormattedDate';
import { Button } from '@mui/material';
import { Image } from '@planet-sdk/common';
-export interface ContributionProps {
+export interface ContributionProperties {
contributionImages: Image[];
id: string;
plantDate: string;
@@ -21,7 +21,7 @@ export interface ContributionProps {
}
interface SingleContributionProps {
token: string | null;
- contribution: ContributionProps;
+ contribution: ContributionProperties;
contributionGUID: string;
slug?: string | null;
}
diff --git a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
index b5b1f36d81..e4adc09447 100644
--- a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
+++ b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
@@ -19,7 +19,7 @@ import { getStoredConfig } from '../../../utils/storeConfig';
import { useUserProps } from '../../common/Layout/UserPropsContext';
import styles from './RegisterModal.module.scss';
import SingleContribution, {
- ContributionProps,
+ ContributionProperties,
} from './RegisterTrees/SingleContribution';
import { ErrorHandlingContext } from '../../common/Layout/ErrorHandlingContext';
import { handleError, APIError } from '@planet-sdk/common';
@@ -182,7 +182,7 @@ function RegisterTreesForm({
geometry: geometry,
};
try {
- const res = await postAuthenticatedRequest(
+ const res = await postAuthenticatedRequest(
`/app/contributions`,
submitData,
token,
From 24df054131f73fffae1f2e9609a96714193e6407 Mon Sep 17 00:00:00 2001
From: mohitb35 <44917347+mohitb35@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:41:21 +0530
Subject: [PATCH 11/23] fix: resolve TS warning for TreesIcon usage
---
src/features/user/Profile/components/MyTrees/MyTrees.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/features/user/Profile/components/MyTrees/MyTrees.tsx b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
index 2f2c56f64f..9004cc5fa5 100644
--- a/src/features/user/Profile/components/MyTrees/MyTrees.tsx
+++ b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
@@ -85,7 +85,7 @@ function TreeList({ contribution }: any) {
color={
contribution.properties.type === 'registration'
? '#3D67B1'
- : null
+ : undefined
}
/>
) : (
@@ -93,7 +93,7 @@ function TreeList({ contribution }: any) {
color={
contribution.properties.type === 'registration'
? '#3D67B1'
- : null
+ : undefined
}
/>
)}
From 01d32915431b8ed0a0b3d2efb021066730bbc570 Mon Sep 17 00:00:00 2001
From: adityasabat34
Date: Mon, 9 Oct 2023 11:08:23 +0530
Subject: [PATCH 12/23] fix: TS errors
---
src/features/common/types/map.d.ts | 145 +++++++++++++++++-
src/features/common/types/plantLocation.d.ts | 23 ++-
.../Profile/components/MyTrees/MyTreesMap.tsx | 5 +-
.../RegisterTrees/SingleContribution.tsx | 7 +-
.../RegisterTrees/RegisterTreesWidget.tsx | 14 +-
.../user/TreeMapper/Import/components/Map.tsx | 6 +-
.../user/TreeMapper/components/Map.tsx | 90 ++++++-----
src/features/user/TreeMapper/index.tsx | 1 +
8 files changed, 230 insertions(+), 61 deletions(-)
diff --git a/src/features/common/types/map.d.ts b/src/features/common/types/map.d.ts
index 9c464c8e68..80ae7f8049 100644
--- a/src/features/common/types/map.d.ts
+++ b/src/features/common/types/map.d.ts
@@ -9,16 +9,20 @@ import {
} from "@planet-sdk/common"
import { Nullable } from '@planet-sdk/common/build/types/util';
import { ContributionProps } from "../../user/RegisterTrees/RegisterTrees/SingleContribution";
+import { FlyToInterpolator } from "react-map-gl";
export interface ViewportProps {
- height: string | number;
- width: string | number;
+ height: number | string ;
+ width: number | string ;
+ zoom: number[] | number;
latitude?: number;
longitude?: number;
- zoom: number[] | number
- center?: number[]
+ center?: number[];
+ transitionDuration?: number | undefined;
+ transitionInterpolator?: FlyToInterpolator | undefined;
+ transitionEasing?: (normalizedTime: number) => number
}
export interface ProjectGeoJsonProps {
@@ -57,6 +61,7 @@ export interface ProjectGeoJsonProps {
export interface RegisterTreeGeometry {
+ features?: [];
coordinates: [number, number] | number[][];
type: 'Polygon' | 'Point';
}
@@ -64,7 +69,135 @@ export interface ProjectGeoJsonProps {
export interface RegisterTreesFormProps {
setContributionGUID: React.Dispatch>;
setContributionDetails: React.Dispatch<
- React.SetStateAction
+ React.SetStateAction
>;
setRegistered: React.Dispatch>;
- }
\ No newline at end of file
+ }
+
+
+
+ // Map styling
+
+ export interface MapStyle {
+ version: number
+ sprite: string
+ glyphs: string
+ sources: Sources
+ layers: Layer[]
+ metadata: Metadata
+ }
+
+ export type RequiredMapStyle = Omit
+
+ export interface Sources {
+ esri: Esri
+ }
+
+ export interface Esri {
+ type: string
+ scheme: string
+ tilejson: string
+ format: string
+ maxzoom: number
+ tiles: string[]
+ name: string
+ }
+
+ export interface Layer {
+ id: string
+ type: string
+ paint: Paint
+ layout: Layout
+ showProperties?: boolean
+ source?: string
+ "source-layer"?: string
+ minzoom?: number
+ maxzoom?: number
+ filter?: any[]
+ }
+
+ export interface Paint {
+ "background-color"?: string
+ "fill-color": any
+ "fill-outline-color"?: string
+ "fill-pattern"?: string
+ "fill-opacity"?: number
+ "line-color": any
+ "line-width": any
+ "line-dasharray"?: number[]
+ "text-color"?: string
+ "text-halo-color"?: string
+ "fill-translate"?: FillTranslate
+ "fill-translate-anchor"?: string
+ "line-opacity"?: number
+ "text-halo-blur"?: number
+ "text-halo-width"?: number
+ }
+
+ export interface FillTranslate {
+ stops: [number, number[]][]
+ }
+
+ export interface Layout {
+ visibility?: string
+ "line-join"?: string
+ "line-cap"?: string
+ "symbol-placement"?: string
+ "symbol-avoid-edges"?: boolean
+ "icon-image"?: string
+ "symbol-spacing"?: number
+ "icon-rotation-alignment"?: string
+ "icon-allow-overlap"?: boolean
+ "icon-padding"?: number
+ "text-font"?: string[]
+ "text-size": any
+ "text-letter-spacing": any
+ "text-line-height"?: number
+ "text-max-width"?: number
+ "text-field"?: string
+ "text-padding"?: number
+ "text-max-angle"?: number
+ "text-offset"?: number[]
+ "text-rotation-alignment"?: string
+ "text-transform"?: string
+ "text-optional"?: boolean
+ }
+
+ export interface Metadata {
+ arcgisStyleUrl: string
+ arcgisOriginalItemTitle: string
+ arcgisQuickEditorWarning: boolean
+ arcgisQuickEditor: ArcgisQuickEditor
+ arcgisEditorExtents: ArcgisEditorExtent[]
+ arcgisMinimapVisibility: boolean
+ }
+
+ export interface ArcgisQuickEditor {
+ labelTextColor: string
+ labelHaloColor: string
+ baseColor: string
+ spriteProcessing: boolean
+ labelContrast: number
+ labelColorMode: string
+ colorMode: string
+ colors: Colors
+ boundaries: string
+ }
+
+ export interface Colors {
+ boundaries: string
+ }
+
+ export interface ArcgisEditorExtent {
+ spatialReference: SpatialReference
+ xmin: number
+ ymin: number
+ xmax: number
+ ymax: number
+ }
+
+ export interface SpatialReference {
+ wkid: number
+ latestWkid?: number
+ }
+
\ No newline at end of file
diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts
index e62f077538..521c13c649 100644
--- a/src/features/common/types/plantLocation.d.ts
+++ b/src/features/common/types/plantLocation.d.ts
@@ -1,5 +1,21 @@
import { DateString } from './common';
-import { Polygon, Point } from 'geojson';
+import { Polygon, Point} from 'geojson';
+
+
+export interface Geometry {
+ coordinates: number[][][]
+ type: string
+ properties: Properties
+}
+export interface GeometryOfSinglePlant {
+ coordinates: number[]
+ type: string
+ properties: Properties
+}
+
+export interface Properties {
+ id: string
+}
export interface PlantLocationBase {
hid: string;
@@ -30,7 +46,8 @@ export interface PlantLocationSingle extends PlantLocationBase {
tag: string | null;
measurements: Measurements;
originalGeometry: Point;
- geometry: Point;
+ geometry: GeometryOfSinglePlant
+
}
export interface PlantLocationMulti extends PlantLocationBase {
@@ -42,7 +59,7 @@ export interface PlantLocationMulti extends PlantLocationBase {
samplePlantLocations: SamplePlantLocation[];
plantedSpecies: PlantedSpecies[];
originalGeometry: Polygon;
- geometry: Polygon;
+ geometry: Geometry
}
export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
diff --git a/src/features/user/Profile/components/MyTrees/MyTreesMap.tsx b/src/features/user/Profile/components/MyTrees/MyTreesMap.tsx
index 63f8c1133e..17ad40f587 100644
--- a/src/features/user/Profile/components/MyTrees/MyTreesMap.tsx
+++ b/src/features/user/Profile/components/MyTrees/MyTreesMap.tsx
@@ -29,10 +29,7 @@ interface Props {
contributions: any;
}
-export default function MyTreesMap({
- contributions,
- authenticatedType,
-}: Props): ReactElement {
+export default function MyTreesMap({ contributions }: Props): ReactElement {
const { i18n, t } = useTranslation('me');
const defaultMapCenter = [-28.5, 36.96];
const defaultZoom = 1.4;
diff --git a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
index 4ffafe2587..5778bb6bad 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'next-i18next';
import formatDate from '../../../../utils/countryCurrency/getFormattedDate';
import { Button } from '@mui/material';
import { Image } from '@planet-sdk/common';
+import { Point, Polygon } from 'geojson';
export interface ContributionProps {
contributionImages: Image[];
@@ -18,10 +19,12 @@ export interface ContributionProps {
treeCount: number;
treeScientificName: string | null;
treeSpecies: string;
+ geometry?: Polygon | Point;
}
+
interface SingleContributionProps {
token: string | null;
- contribution: ContributionProps;
+ contribution: ContributionProps | null;
contributionGUID: string;
slug?: string | null;
}
@@ -44,7 +47,7 @@ export default function SingleContribution({
};
const { t, ready } = useTranslation(['me', 'common']);
- return ready ? (
+ return ready && contribution !== null ? (
diff --git a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
index b5b1f36d81..fe9b40ce2f 100644
--- a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
+++ b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
@@ -158,7 +158,9 @@ function RegisterTreesForm({
defaultValues: defaultBasicDetails,
});
- const onTreeCountChange = (e: any) => {
+ const onTreeCountChange = (
+ e: React.ChangeEvent
+ ) => {
if (Number(e.target.value) < 25) {
setIsMultiple(false);
} else {
@@ -171,7 +173,9 @@ function RegisterTreesForm({
if (treeCount < 10000000) {
if (
geometry &&
- (geometry.type === 'Point' || geometry.features?.length >= 1)
+ (geometry.type === 'Point' ||
+ (geometry.features?.length !== undefined &&
+ geometry.features?.length >= 1))
) {
setIsUploadingData(true);
const submitData = {
@@ -433,16 +437,16 @@ export default function RegisterTreesWidget() {
const { user, token } = useUserProps();
const { ready } = useTranslation(['me', 'common']);
const [contributionGUID, setContributionGUID] = React.useState('');
- const [contributionDetails, setContributionDetails] = React.useState({});
+ const [contributionDetails, setContributionDetails] =
+ React.useState(null);
const [registered, setRegistered] = React.useState(false);
const ContributionProps = {
token,
- contribution: contributionDetails,
+ contribution: contributionDetails !== null ? contributionDetails : null,
contributionGUID,
slug: user !== null ? user.slug : null,
};
-
return ready ? (
<>
{!registered ? (
diff --git a/src/features/user/TreeMapper/Import/components/Map.tsx b/src/features/user/TreeMapper/Import/components/Map.tsx
index 6c9b165736..9e8df34067 100644
--- a/src/features/user/TreeMapper/Import/components/Map.tsx
+++ b/src/features/user/TreeMapper/Import/components/Map.tsx
@@ -5,6 +5,8 @@ import MapGL, { NavigationControl } from 'react-map-gl';
import LayerIcon from '../../../../../../public/assets/images/icons/LayerIcon';
import LayerDisabled from '../../../../../../public/assets/images/icons/LayerDisabled';
import SatelliteLayer from '../../../../projects/components/maps/SatelliteLayer';
+import { RequiredMapStyle } from '../../../../common/types/map';
+import { ViewPort } from '../../../../common/types/project';
export default function MyTreesMap(): ReactElement {
const [satellite, setSatellite] = React.useState(false);
@@ -27,14 +29,14 @@ export default function MyTreesMap(): ReactElement {
React.useEffect(() => {
const promise = getMapStyle('default');
- promise.then((style: any) => {
+ promise.then((style: RequiredMapStyle) => {
if (style) {
setStyle(style);
}
});
}, []);
- const _onViewportChange = (view: any) => setViewPort({ ...view });
+ const _onViewportChange = (view: ViewPort) => setViewPort({ ...view });
return (
(null);
const [plIds, setPlIds] = React.useState(null);
const [style, setStyle] = React.useState({
version: 8,
sources: {},
layers: [],
});
- const getPlTreeCount = (pl: any) => {
+ const getPlTreeCount = (pl: PlantLocationMulti) => {
let count = 0;
if (pl && pl.plantedSpecies) {
for (const key in pl.plantedSpecies) {
@@ -69,7 +82,7 @@ export default function MyTreesMap({
}
};
- const getPlArea = (pl: any) => {
+ const getPlArea = (pl: PlantLocationMulti) => {
if (pl && pl.type === 'multi') {
const area = turf.area(pl.geometry);
return area / 10000;
@@ -78,7 +91,7 @@ export default function MyTreesMap({
}
};
- const getPolygonColor = (pl: any) => {
+ const getPolygonColor = (pl: PlantLocationMulti) => {
const treeCount = getPlTreeCount(pl);
const plantationArea = getPlArea(pl);
const density = treeCount / plantationArea;
@@ -95,25 +108,25 @@ export default function MyTreesMap({
}
};
- const getDateDiff = (pl: any) => {
- const today = new Date();
- const plantationDate = new Date(pl.plantDate?.substr(0, 10));
- const differenceInTime = today.getTime() - plantationDate.getTime();
- const differenceInDays = differenceInTime / (1000 * 3600 * 24);
- if (differenceInDays < 1) {
- return t('today');
- } else if (differenceInDays < 2) {
- return t('yesterday');
- } else if (differenceInDays < 30) {
- return t('daysAgo', {
- days: localizedAbbreviatedNumber(i18n.language, differenceInDays, 0),
- });
- } else {
- return null;
- }
- };
+ // const getDateDiff = (pl: PlantLocation) => {
+ // const today = new Date();
+ // const plantationDate = new Date(pl.plantDate?.substr(0, 10));
+ // const differenceInTime = today.getTime() - plantationDate.getTime();
+ // const differenceInDays = differenceInTime / (1000 * 3600 * 24);
+ // if (differenceInDays < 1) {
+ // return t('today');
+ // } else if (differenceInDays < 2) {
+ // return t('yesterday');
+ // } else if (differenceInDays < 30) {
+ // return t('daysAgo', {
+ // days: localizedAbbreviatedNumber(i18n.language, differenceInDays, 0),
+ // });
+ // } else {
+ // return null;
+ // }
+ // };
- const zoomToLocation = (geometry: string) => {
+ const zoomToLocation = (geometry: turf.AllGeoJSON) => {
if (viewport.width && viewport.height) {
const bbox = turf.bbox(geometry);
const { longitude, latitude, zoom } = new WebMercatorViewport(
@@ -154,7 +167,7 @@ export default function MyTreesMap({
React.useEffect(() => {
const promise = getMapStyle('default');
- promise.then((style: any) => {
+ promise.then((style: RequiredMapStyle) => {
if (style) {
setStyle(style);
}
@@ -199,11 +212,11 @@ export default function MyTreesMap({
}
}, [geoJson, selectedLocation]);
- const _onViewportChange = (view: any) => setViewPort({ ...view });
+ const _onViewportChange = (view: ViewPort) => setViewPort({ ...view });
const onMapClick = (e: MapEvent) => {
setselectedLocation(null);
- if (e.features?.length !== 0) {
+ if (e.features !== undefined && e.features?.length !== 0) {
if (e.features[0].layer?.source) {
const source = e.features[0].layer.source;
for (const key in locations) {
@@ -235,12 +248,11 @@ export default function MyTreesMap({
>
{satellite && plIds && }
{locations &&
- locations.map((pl: any) => {
+ locations.map((pl: PlantLocation) => {
const newPl = pl.geometry;
- newPl.properties = {};
+ newPl.properties = { id: '' };
newPl.properties.id = pl.id;
if (pl.type === 'multi') {
- const dateDiff = getDateDiff(pl);
return (
<>
{
+ .filter((item) => {
if (item.captureStatus === 'complete') {
return true;
} else {
return false;
}
})
- .map((spl: any) => {
+ .map((spl) => {
return (
Date: Tue, 17 Oct 2023 08:55:27 +0530
Subject: [PATCH 13/23] fix: Type issue for Map
---
src/features/common/types/plantLocation.d.ts | 6 ++++--
.../projects/components/maps/Markers.tsx | 4 ++--
.../Profile/components/MyTrees/MyTrees.tsx | 1 +
.../RegisterTrees/SingleContribution.tsx | 2 +-
.../RegisterTrees/RegisterTreesWidget.tsx | 2 +-
.../Import/components/MapComponent.tsx | 13 +++++++-----
.../user/TreeMapper/components/Map.tsx | 5 +++--
.../components/PlantLocationPage.tsx | 9 +++++++--
.../TreeMapper/components/TreeMapperList.tsx | 9 +++++----
src/features/user/TreeMapper/index.tsx | 20 +++++++++----------
10 files changed, 42 insertions(+), 29 deletions(-)
diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts
index 4dd1563bf8..0092eb5a2d 100644
--- a/src/features/common/types/plantLocation.d.ts
+++ b/src/features/common/types/plantLocation.d.ts
@@ -48,7 +48,7 @@ export interface PlantLocationSingle extends PlantLocationBase {
measurements: Measurements;
originalGeometry: Point;
geometry: GeometryOfSinglePlant
-
+ sampleTrees: SamplePlantLocation[]
}
export interface PlantLocationMulti extends PlantLocationBase {
@@ -60,7 +60,8 @@ export interface PlantLocationMulti extends PlantLocationBase {
samplePlantLocations: SamplePlantLocation[];
plantedSpecies: PlantedSpecies[];
originalGeometry: Polygon;
- geometry: Geometry
+ geometry: Geometry;
+ sampleTrees: SamplePlantLocation[]
}
export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
@@ -80,6 +81,7 @@ export interface SamplePlantLocation
measurements: Measurements;
originalGeometry: Point;
geometry: Point;
+ sampleTrees?: PlantLocation[]
}
export interface Metadata {
diff --git a/src/features/projects/components/maps/Markers.tsx b/src/features/projects/components/maps/Markers.tsx
index 08d2baddde..26ca0fe424 100644
--- a/src/features/projects/components/maps/Markers.tsx
+++ b/src/features/projects/components/maps/Markers.tsx
@@ -81,7 +81,7 @@ export default function Markers({
}
);
}}
- onKeyPress={() => {
+ onKeyDown={() => {
router.push(
`/${projectMarker.properties.slug}/${
embed === 'true'
@@ -168,7 +168,7 @@ export default function Markers({
}
}
}}
- onKeyPress={() => {
+ onKeyDown={() => {
router.push(
`/${popupData.project.properties.slug}/${
embed === 'true'
diff --git a/src/features/user/Profile/components/MyTrees/MyTrees.tsx b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
index 9004cc5fa5..c83278ebf4 100644
--- a/src/features/user/Profile/components/MyTrees/MyTrees.tsx
+++ b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
@@ -25,6 +25,7 @@ interface Props {
}
function TreeList({ contribution }: any) {
+ console.log(contribution, '==');
const date = formatDate(contribution.properties.plantDate);
const { t, i18n } = useTranslation(['country', 'me']);
diff --git a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
index 0dbbd1d0e3..a9fbb71b46 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
@@ -24,7 +24,7 @@ export interface ContributionProperties {
interface SingleContributionProps {
token: string | null;
- contribution: ContributionProperties;
+ contribution: ContributionProperties | null;
contributionGUID: string;
slug?: string | null;
}
diff --git a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
index 85bd8c72f6..80302d03ac 100644
--- a/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
+++ b/src/features/user/RegisterTrees/RegisterTreesWidget.tsx
@@ -438,7 +438,7 @@ export default function RegisterTreesWidget() {
const { ready } = useTranslation(['me', 'common']);
const [contributionGUID, setContributionGUID] = React.useState('');
const [contributionDetails, setContributionDetails] =
- React.useState(null);
+ React.useState(null);
const [registered, setRegistered] = React.useState(false);
const ContributionProps = {
diff --git a/src/features/user/TreeMapper/Import/components/MapComponent.tsx b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
index cf949bdc65..03be537cb6 100644
--- a/src/features/user/TreeMapper/Import/components/MapComponent.tsx
+++ b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
@@ -5,12 +5,13 @@ import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import WebMercatorViewport from '@math.gl/web-mercator';
import getMapStyle from '../../../../../utils/maps/getMapStyle';
import { GeoJSON } from 'geojson';
+import { RequiredMapStyle } from '../../../../common/types/map';
interface Props {
geoJson: GeoJSON | null;
}
-const Map = ReactMapboxGl({ maxZoom: 15, accessToken: undefined });
+const Map = ReactMapboxGl({ maxZoom: 15, accessToken: '' });
export default function MapComponent({ geoJson }: Props): ReactElement {
const defaultMapCenter = [0, 0];
@@ -22,12 +23,14 @@ export default function MapComponent({ geoJson }: Props): ReactElement {
center: defaultMapCenter,
zoom: [defaultZoom],
});
- const [viewport2, setViewPort2] = React.useState({
+
+ const _viewport2 = {
height: 1000,
width: 500,
center: defaultMapCenter,
zoom: defaultZoom,
- });
+ };
+
const [style, setStyle] = React.useState({
version: 8,
sources: {},
@@ -35,7 +38,7 @@ export default function MapComponent({ geoJson }: Props): ReactElement {
});
React.useEffect(() => {
const promise = getMapStyle('openStreetMap');
- promise.then((style: any) => {
+ promise.then((style: RequiredMapStyle) => {
if (style) {
setStyle(style);
}
@@ -49,7 +52,7 @@ export default function MapComponent({ geoJson }: Props): ReactElement {
]);
const bbox = turf.bbox(geo);
const { longitude, latitude, zoom } = new WebMercatorViewport(
- viewport2
+ _viewport2
).fitBounds([
[bbox[0], bbox[1]],
[bbox[2], bbox[3]],
diff --git a/src/features/user/TreeMapper/components/Map.tsx b/src/features/user/TreeMapper/components/Map.tsx
index 38bc8f7d30..846f310cd0 100644
--- a/src/features/user/TreeMapper/components/Map.tsx
+++ b/src/features/user/TreeMapper/components/Map.tsx
@@ -20,13 +20,14 @@ import SatelliteLayer from '../../../projects/components/maps/SatelliteLayer';
import {
PlantLocation,
PlantLocationMulti,
+ SamplePlantLocation,
} from '../../../common/types/plantLocation';
import { RequiredMapStyle } from '../../../common/types/map';
import { ViewPort } from '../../../common/types/ProjectPropsContextInterface';
interface Props {
- locations: PlantLocation[];
- selectedLocation: PlantLocationMulti;
+ locations: PlantLocation[] | SamplePlantLocation[] | null;
+ selectedLocation: PlantLocation | SamplePlantLocation | null;
setselectedLocation: Function;
}
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index c4790bc567..a94e1ba5a9 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -7,10 +7,15 @@ import { getFormattedNumber } from '../../../../utils/getFormattedNumber';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import CopyToClipboard from '../../../common/CopyToClipboard';
+import {
+ PlantLocation,
+ SamplePlantLocation,
+} from '../../../common/types/plantLocation';
+import { SetState } from '../../../common/types/common';
interface Props {
- setselectedLocation: Function;
- location: Object;
+ setselectedLocation: SetState;
+ location: PlantLocation | SamplePlantLocation | null;
plantLocations: any;
}
diff --git a/src/features/user/TreeMapper/components/TreeMapperList.tsx b/src/features/user/TreeMapper/components/TreeMapperList.tsx
index 05050613ae..1942af3db4 100644
--- a/src/features/user/TreeMapper/components/TreeMapperList.tsx
+++ b/src/features/user/TreeMapper/components/TreeMapperList.tsx
@@ -1,7 +1,6 @@
import React, { ReactElement } from 'react';
import TransactionListLoader from '../../../../../public/assets/images/icons/TransactionListLoader';
import TransactionsNotFound from '../../../../../public/assets/images/icons/TransactionsNotFound';
-import PlantLocation from './PlantLocation';
import styles from '../TreeMapper.module.scss';
import { useTranslation } from 'next-i18next';
import {
@@ -9,13 +8,15 @@ import {
PlantLocation as PlantLocationType,
} from '../../../common/types/plantLocation';
import { Links } from '../../../common/types/payments';
+import PlantLocation from './PlantLocation';
+import { SetState } from '../../../common/types/common';
interface Props {
- selectedLocation: string;
- setselectedLocation: Function;
+ selectedLocation: PlantLocationType | SamplePlantLocation | null;
+ setselectedLocation: SetState;
plantLocations: PlantLocationType[] | SamplePlantLocation[] | null;
isDataLoading: boolean;
- location: string;
+ location: PlantLocationType | SamplePlantLocation;
fetchTreemapperData: Function;
links: Links | undefined;
}
diff --git a/src/features/user/TreeMapper/index.tsx b/src/features/user/TreeMapper/index.tsx
index 3ca337c83e..6d1bd2f37d 100644
--- a/src/features/user/TreeMapper/index.tsx
+++ b/src/features/user/TreeMapper/index.tsx
@@ -30,10 +30,11 @@ function TreeMapper(): ReactElement {
const [plantLocations, setPlantLocations] = React.useState<
PlantLocation[] | SamplePlantLocation[] | null
>(null);
- const [selectedLocation, setselectedLocation] = React.useState('');
+ const [selectedLocation, setselectedLocation] = React.useState<
+ PlantLocation | SamplePlantLocation | null
+ >(null);
const [links, setLinks] = React.useState();
const { redirect, setErrors } = React.useContext(ErrorHandlingContext);
-
async function fetchTreemapperData(next = false) {
setIsDataLoading(true);
setProgress(70);
@@ -49,8 +50,8 @@ function TreeMapper(): ReactElement {
undefined,
'1.0.4'
);
- if (response.items) {
- const newPlantLocations = response?.items;
+ if (response?.items) {
+ const newPlantLocations = response.items;
for (const itr in newPlantLocations) {
if (Object.prototype.hasOwnProperty.call(newPlantLocations, itr)) {
const ind = Number(itr);
@@ -90,15 +91,15 @@ function TreeMapper(): ReactElement {
undefined,
'1.0.4'
);
- if (response.items) {
- const plantLocations = response?.items;
+ if (response?.items) {
+ const plantLocations = response.items;
if (plantLocations?.length === 0) {
setPlantLocations(null);
} else {
for (const itr in plantLocations) {
if (Object.prototype.hasOwnProperty.call(plantLocations, itr)) {
const location = plantLocations[itr];
- if (location.type === 'multi') {
+ if (location && location.type === 'multi') {
location.sampleTrees = [];
for (const key in plantLocations) {
if (
@@ -107,7 +108,7 @@ function TreeMapper(): ReactElement {
const item = plantLocations[key];
if (item.type === 'sample') {
if (item.parent === location.id) {
- plantLocations[itr].sampleTrees.push(item);
+ location.sampleTrees.push(item);
}
}
}
@@ -141,14 +142,13 @@ function TreeMapper(): ReactElement {
const plantLocation = plantLocations[key];
if (plantLocation.id === router.query.l) {
setselectedLocation(plantLocation);
- console.log(selectedLocation, '==');
break;
}
}
}
}
} else {
- setselectedLocation('');
+ setselectedLocation(null);
}
}, [router.query.l, plantLocations]);
From b14548d94495ee12f8f85bcb46786eb0aa41cd4d Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 22 Nov 2023 15:43:42 +0530
Subject: [PATCH 14/23] type for Map(feedback)
---
package-lock.json | 8 ++--
package.json | 2 +-
src/features/common/CopyToClipboard/index.tsx | 2 +-
src/features/common/types/map.d.ts | 2 +-
src/features/common/types/plantLocation.d.ts | 8 ++--
.../projects/components/ProjectsMap.tsx | 15 ++++---
.../projects/components/maps/Markers.tsx | 2 +-
.../Profile/components/MyTrees/MyTrees.tsx | 1 -
.../RegisterTrees/RegisterTrees/DrawMap.tsx | 1 +
.../RegisterTrees/RegisterTrees/StaticMap.tsx | 3 +-
.../components/PlantLocationPage.tsx | 40 ++++++++++++-------
src/features/user/TreeMapper/index.tsx | 2 +-
12 files changed, 52 insertions(+), 34 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 6e562913be..b468775668 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -108,7 +108,7 @@
"@types/react": "^16.9.49",
"@types/react-dom": "^18.0.11",
"@types/react-json-editor-ajrm": "^2.5.3",
- "@types/react-map-gl": "^5.2.11",
+ "@types/react-map-gl": "^6.1.3",
"@types/styled-jsx": "^2.2.8",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^5.41.0",
@@ -13725,9 +13725,9 @@
}
},
"node_modules/@types/react-map-gl": {
- "version": "5.2.11",
- "resolved": "https://registry.npmjs.org/@types/react-map-gl/-/react-map-gl-5.2.11.tgz",
- "integrity": "sha512-yK9O7szpEgWiYZVBZKuWXCTk+elSn/g1GFUc2MYE38XSWSE0zdCbFRRbTwMZjG6WxbJ/UkC8sHyKI73xC2a8ew==",
+ "version": "6.1.6",
+ "resolved": "https://registry.npmjs.org/@types/react-map-gl/-/react-map-gl-6.1.6.tgz",
+ "integrity": "sha512-nrczNIcLmyhj53sYdAGqqAzRJg0lnGUZKdp1YohJfAzM5ialyo2iQxVxo0zpPPXe6oRfxlUTzHMjWGL2wt+EFA==",
"dev": true,
"dependencies": {
"@types/geojson": "*",
diff --git a/package.json b/package.json
index a877afd795..c72f93e93c 100644
--- a/package.json
+++ b/package.json
@@ -141,7 +141,7 @@
"@types/react": "^16.9.49",
"@types/react-dom": "^18.0.11",
"@types/react-json-editor-ajrm": "^2.5.3",
- "@types/react-map-gl": "^5.2.11",
+ "@types/react-map-gl": "^6.1.3",
"@types/styled-jsx": "^2.2.8",
"@types/uuid": "^8.3.0",
"@typescript-eslint/eslint-plugin": "^5.41.0",
diff --git a/src/features/common/CopyToClipboard/index.tsx b/src/features/common/CopyToClipboard/index.tsx
index b62f844763..298fce2b16 100644
--- a/src/features/common/CopyToClipboard/index.tsx
+++ b/src/features/common/CopyToClipboard/index.tsx
@@ -14,7 +14,7 @@ const Alert = styled(MuiAlert)(({ theme }) => {
interface Props {
text: string;
- isButton: boolean;
+ isButton?: boolean;
}
export default function CopyToClipboard({
diff --git a/src/features/common/types/map.d.ts b/src/features/common/types/map.d.ts
index 2115485bb5..96407ed5e2 100644
--- a/src/features/common/types/map.d.ts
+++ b/src/features/common/types/map.d.ts
@@ -16,7 +16,7 @@ import { FlyToInterpolator } from "react-map-gl";
export interface ViewportProps {
height: number | string ;
width: number | string ;
- zoom: number[] | number;
+ zoom: number | undefined;
latitude?: number;
longitude?: number;
center?: number[];
diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts
index 0092eb5a2d..f5c01b8e51 100644
--- a/src/features/common/types/plantLocation.d.ts
+++ b/src/features/common/types/plantLocation.d.ts
@@ -39,9 +39,9 @@ export interface PlantLocationBase {
status: string | null; // currently always null. Should we do something here?
statusReason: string | null; // currently always null. Should we do something here?
}
-
+type Type = 'single'| 'multi' | 'sample'
export interface PlantLocationSingle extends PlantLocationBase {
- type: 'single';
+ type: Type;
scientificName: string | null;
scientificSpecies: string | null;
tag: string | null;
@@ -52,7 +52,7 @@ export interface PlantLocationSingle extends PlantLocationBase {
}
export interface PlantLocationMulti extends PlantLocationBase {
- type: 'multi';
+ type: Type;
nextMeasurementDate: DateString | null;
plantDateStart: DateString | null;
plantDateEnd: DateString | null;
@@ -68,7 +68,7 @@ export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
export interface SamplePlantLocation
extends Omit {
- type: 'sample';
+ type: Type;
/** parent plant location */
parent: string;
/** tpo profile id */
diff --git a/src/features/projects/components/ProjectsMap.tsx b/src/features/projects/components/ProjectsMap.tsx
index a073d6cebf..1e49e3c735 100644
--- a/src/features/projects/components/ProjectsMap.tsx
+++ b/src/features/projects/components/ProjectsMap.tsx
@@ -13,6 +13,11 @@ import { useTranslation } from 'next-i18next';
import { ParamsContext } from '../../common/Layout/QueryParamsContext';
import { PopupData } from './maps/Markers';
+interface ShowDetailsProps {
+ coordinates: [number, number] | null;
+ show: boolean
+}
+
export default function ProjectsMap(): ReactElement {
const {
project,
@@ -63,8 +68,8 @@ export default function ProjectsMap(): ReactElement {
loadMapStyle();
}, []);
- const [showDetails, setShowDetails] = React.useState({
- coordinates: [],
+ const [showDetails, setShowDetails] = React.useState({
+ coordinates: null,
show: false,
});
@@ -106,7 +111,7 @@ export default function ProjectsMap(): ReactElement {
if (e.features && e.features?.length !== 0) {
if (!hoveredPl || hoveredPl.type !== 'sample') {
if (e.features[0].layer?.source && plantLocations) {
- for (const key of plantLocations) {
+ for (const key in plantLocations) {
if (Object.prototype.hasOwnProperty.call(plantLocations, key)) {
const element = plantLocations[key];
if (element.id === e.features[0].layer?.source) {
@@ -186,8 +191,8 @@ export default function ProjectsMap(): ReactElement {
{showDetails.show && (
setPopupData({ show: false })}
diff --git a/src/features/projects/components/maps/Markers.tsx b/src/features/projects/components/maps/Markers.tsx
index 26ca0fe424..7c5f3b8b12 100644
--- a/src/features/projects/components/maps/Markers.tsx
+++ b/src/features/projects/components/maps/Markers.tsx
@@ -149,7 +149,7 @@ export default function Markers({
shallow: true,
}
);
- } else if (!popupRef.current.contains(event.target as Node)) {
+ } else if (event.target instanceof Node && !popupRef.current.contains(event.target)) {
router.push(
`/${popupData.project.properties.slug}/${
embed === 'true'
diff --git a/src/features/user/Profile/components/MyTrees/MyTrees.tsx b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
index c83278ebf4..9004cc5fa5 100644
--- a/src/features/user/Profile/components/MyTrees/MyTrees.tsx
+++ b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
@@ -25,7 +25,6 @@ interface Props {
}
function TreeList({ contribution }: any) {
- console.log(contribution, '==');
const date = formatDate(contribution.properties.plantDate);
const { t, i18n } = useTranslation(['country', 'me']);
diff --git a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
index f68b584a76..b1fd32d758 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
@@ -15,6 +15,7 @@ interface Props {
const Map = ReactMapboxGl({
customAttribution:
'© OpenStreetMap contributors',
+ accessToken: ''
});
export default function MapComponent({
diff --git a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
index 88eb72b47b..7952b5ec9f 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
@@ -10,6 +10,7 @@ const Map = ReactMapboxGl({
interactive: false,
customAttribution:
'© OpenStreetMap contributors',
+ accessToken: ''
});
interface Props {
@@ -107,7 +108,7 @@ export default function StaticMap({ geoJson }: Props): ReactElement {
'line-width': 2,
}}
/>
- ) : null}
+ ) : ""}
);
}
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index a94e1ba5a9..658e7e5df2 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -9,16 +9,12 @@ import { useRouter } from 'next/router';
import CopyToClipboard from '../../../common/CopyToClipboard';
import {
PlantLocation,
+ PlantLocationMulti,
+ PlantLocationSingle,
SamplePlantLocation,
} from '../../../common/types/plantLocation';
import { SetState } from '../../../common/types/common';
-interface Props {
- setselectedLocation: SetState;
- location: PlantLocation | SamplePlantLocation | null;
- plantLocations: any;
-}
-
const ImageSlider = dynamic(
() => import('../../../projects/components/PlantLocation/ImageSlider'),
{
@@ -35,12 +31,23 @@ const ImageSliderSingle = dynamic(
}
);
+interface LocationDetailsProps {
+ location: PlantLocationMulti | null
+ setselectedLocation: SetState
+}
+
+interface SampleTreeImageProps {
+ image: string | undefined
+ description: string | undefined
+}
+
+
export function LocationDetails({
location,
setselectedLocation,
-}: DetailsProps): ReactElement {
+}: LocationDetailsProps): ReactElement {
const { t, i18n, ready } = useTranslation(['treemapper', 'maps']);
- const [sampleTreeImages, setSampleTreeImages] = React.useState([]);
+ const [sampleTreeImages, setSampleTreeImages] = React.useState([]);
const text = `${location?.deviceLocation?.coordinates.map((coord: any) => {
return getFormattedNumber(i18n.language, Number(coord));
@@ -78,7 +85,7 @@ export function LocationDetails({
setSampleTreeImages([]);
}
}, [location, ready]);
- return (
+ return location ? (
<>
{location.type === 'multi' && sampleTreeImages.length > 0 && (
@@ -242,8 +249,15 @@ export function LocationDetails({
)}
- );
+ ):(<>);
}
+
+interface Props {
+ setselectedLocation: SetState;
+ location:PlantLocationMulti ;
+ plantLocations: PlantLocation[]
+}
+
export default function PlantLocationPage({
location,
setselectedLocation,
@@ -252,6 +266,7 @@ export default function PlantLocationPage({
const router = useRouter();
const handleBackButton = () => {
+ console.log(plantLocations,"==")
if (location.type === 'sample') {
for (const i in plantLocations) {
if (Object.prototype.hasOwnProperty.call(plantLocations, i)) {
@@ -271,6 +286,7 @@ export default function PlantLocationPage({
location,
setselectedLocation,
};
+ console.log(location,"==")
return (
@@ -295,7 +311,3 @@ export default function PlantLocationPage({
);
}
-interface DetailsProps {
- setselectedLocation: Function;
- location: Object;
-}
diff --git a/src/features/user/TreeMapper/index.tsx b/src/features/user/TreeMapper/index.tsx
index 6d1bd2f37d..9d13022b99 100644
--- a/src/features/user/TreeMapper/index.tsx
+++ b/src/features/user/TreeMapper/index.tsx
@@ -31,7 +31,7 @@ function TreeMapper(): ReactElement {
PlantLocation[] | SamplePlantLocation[] | null
>(null);
const [selectedLocation, setselectedLocation] = React.useState<
- PlantLocation | SamplePlantLocation | null
+ PlantLocation | null
>(null);
const [links, setLinks] = React.useState
();
const { redirect, setErrors } = React.useContext(ErrorHandlingContext);
From 27440c11d8a02382f1255568696dc3c4c20bdf0a Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Tue, 28 Nov 2023 15:10:03 +0530
Subject: [PATCH 15/23] resolve type errors for PlantLocationPage
---
src/features/common/types/plantLocation.d.ts | 33 ++--
.../Import/components/MapComponent.tsx | 39 ++--
.../user/TreeMapper/components/Map.tsx | 2 +-
.../components/PlantLocationPage.tsx | 186 +++++++++---------
src/features/user/TreeMapper/index.tsx | 11 +-
5 files changed, 145 insertions(+), 126 deletions(-)
diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts
index f5c01b8e51..4bd617e45d 100644
--- a/src/features/common/types/plantLocation.d.ts
+++ b/src/features/common/types/plantLocation.d.ts
@@ -1,21 +1,20 @@
import { DateString } from './common';
import { Links } from './payments';
-import { Polygon, Point} from 'geojson';
-
+import { Polygon, Point } from 'geojson';
export interface Geometry {
- coordinates: number[][][]
- type: string
- properties: Properties
+ coordinates: number[][][];
+ type: string;
+ properties: Properties;
}
export interface GeometryOfSinglePlant {
- coordinates: number[]
- type: string
- properties: Properties
+ coordinates: number[];
+ type: string;
+ properties: Properties;
}
export interface Properties {
- id: string
+ id: string;
}
export interface PlantLocationBase {
@@ -39,7 +38,7 @@ export interface PlantLocationBase {
status: string | null; // currently always null. Should we do something here?
statusReason: string | null; // currently always null. Should we do something here?
}
-type Type = 'single'| 'multi' | 'sample'
+type Type = 'single' | 'multi' | 'sample';
export interface PlantLocationSingle extends PlantLocationBase {
type: Type;
scientificName: string | null;
@@ -47,12 +46,12 @@ export interface PlantLocationSingle extends PlantLocationBase {
tag: string | null;
measurements: Measurements;
originalGeometry: Point;
- geometry: GeometryOfSinglePlant
- sampleTrees: SamplePlantLocation[]
+ geometry: GeometryOfSinglePlant;
+ sampleTrees: SamplePlantLocation[];
}
export interface PlantLocationMulti extends PlantLocationBase {
- type: Type;
+ type: Type;
nextMeasurementDate: DateString | null;
plantDateStart: DateString | null;
plantDateEnd: DateString | null;
@@ -60,15 +59,15 @@ export interface PlantLocationMulti extends PlantLocationBase {
samplePlantLocations: SamplePlantLocation[];
plantedSpecies: PlantedSpecies[];
originalGeometry: Polygon;
- geometry: Geometry;
- sampleTrees: SamplePlantLocation[]
+ geometry: Geometry;
+ sampleTrees: SamplePlantLocation[];
}
export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
export interface SamplePlantLocation
extends Omit {
- type: Type;
+ type: Type;
/** parent plant location */
parent: string;
/** tpo profile id */
@@ -81,7 +80,7 @@ export interface SamplePlantLocation
measurements: Measurements;
originalGeometry: Point;
geometry: Point;
- sampleTrees?: PlantLocation[]
+ sampleTrees?: PlantLocation[];
}
export interface Metadata {
diff --git a/src/features/user/TreeMapper/Import/components/MapComponent.tsx b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
index 03be537cb6..ed9b3a15e3 100644
--- a/src/features/user/TreeMapper/Import/components/MapComponent.tsx
+++ b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
@@ -11,13 +11,20 @@ interface Props {
geoJson: GeoJSON | null;
}
+interface viewportProps {
+ height: string;
+ width: string;
+ center: number[];
+ zoom: number[];
+}
+
const Map = ReactMapboxGl({ maxZoom: 15, accessToken: '' });
export default function MapComponent({ geoJson }: Props): ReactElement {
const defaultMapCenter = [0, 0];
const defaultZoom = 1.4;
- const [viewport, setViewPort] = React.useState({
+ const [viewport, setViewPort] = React.useState({
height: '100%',
width: '100%',
center: defaultMapCenter,
@@ -83,20 +90,22 @@ export default function MapComponent({ geoJson }: Props): ReactElement {
}}
// onClick={() => setActiveMethod('draw')}
>
- {geoJson ? (
-
- ) : null}
-
+ <>
+ {geoJson ? (
+
+ ) : null}
+
+
);
diff --git a/src/features/user/TreeMapper/components/Map.tsx b/src/features/user/TreeMapper/components/Map.tsx
index 846f310cd0..0dc18e2166 100644
--- a/src/features/user/TreeMapper/components/Map.tsx
+++ b/src/features/user/TreeMapper/components/Map.tsx
@@ -200,7 +200,7 @@ export default function MyTreesMap({
features,
});
setPlIds(ids);
- zoomToLocation(locations[0].geometry);
+ zoomToLocation(locations[0]?.geometry);
} else {
setPlIds(null);
setGeoJson(null);
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index 658e7e5df2..e0da44b65d 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -31,61 +31,73 @@ const ImageSliderSingle = dynamic(
}
);
-interface LocationDetailsProps {
- location: PlantLocationMulti | null
- setselectedLocation: SetState
+interface Props {
+ setselectedLocation: SetState<
+ PlantLocationMulti | PlantLocationSingle | null
+ >;
+ location:
+ | PlantLocationMulti
+ | PlantLocationSingle
+ | SamplePlantLocation
+ | null;
+ plantLocations?: PlantLocation[];
}
interface SampleTreeImageProps {
- image: string | undefined
- description: string | undefined
+ image: string | undefined;
+ description: string | undefined;
}
-
export function LocationDetails({
location,
setselectedLocation,
-}: LocationDetailsProps): ReactElement {
+}: Props): ReactElement {
const { t, i18n, ready } = useTranslation(['treemapper', 'maps']);
- const [sampleTreeImages, setSampleTreeImages] = React.useState([]);
+ const [sampleTreeImages, setSampleTreeImages] = React.useState<
+ SampleTreeImageProps[]
+ >([]);
const text = `${location?.deviceLocation?.coordinates.map((coord: any) => {
return getFormattedNumber(i18n.language, Number(coord));
})}`;
React.useEffect(() => {
- if (
- ready &&
- location &&
- location.samplePlantLocations &&
- location.samplePlantLocations.length > 0
- ) {
- const images = [];
- for (const key in location.samplePlantLocations) {
- if (
- Object.prototype.hasOwnProperty.call(
- location.samplePlantLocations,
- key
- )
- ) {
- const element = location.samplePlantLocations[key];
+ if (location?.type === 'multi') {
+ if (
+ ready &&
+ location &&
+ (location as PlantLocationMulti).samplePlantLocations &&
+ (location as PlantLocationMulti).samplePlantLocations.length > 0
+ ) {
+ const images = [];
+ for (const key in (location as PlantLocationMulti)
+ .samplePlantLocations) {
+ if (
+ Object.prototype.hasOwnProperty.call(
+ (location as PlantLocationMulti).samplePlantLocations,
+ key
+ )
+ ) {
+ const element = (location as PlantLocationMulti)
+ .samplePlantLocations[key];
- if (element.coordinates?.[0]) {
- images.push({
- image: element.coordinates[0].image,
- description: `${t('maps:sampleTree')} ${
- element.tag ? '#' + element.tag : ''
- }`,
- });
+ if (element.coordinates?.[0]) {
+ images.push({
+ image: element.coordinates[0].image,
+ description: `${t('maps:sampleTree')} ${
+ element.tag ? '#' + element.tag : ''
+ }`,
+ });
+ }
}
}
+ setSampleTreeImages(images);
+ } else {
+ setSampleTreeImages([]);
}
- setSampleTreeImages(images);
- } else {
- setSampleTreeImages([]);
}
}, [location, ready]);
- return location ? (
+ return location ? (
<>
{location.type === 'multi' && sampleTreeImages.length > 0 && (
@@ -144,7 +156,7 @@ export function LocationDetails({
{formatDate(location.registrationDate)}
- {location.measurements && (
+ {(location as PlantLocationSingle).measurements && (
<>
@@ -179,7 +191,7 @@ export function LocationDetails({
)}
- {location.plantProject && (
+ {(location as PlantLocationMulti | PlantLocation).plantProject && (
{t('plantProject')}
@@ -187,31 +199,33 @@ export function LocationDetails({
// className={styles.link}
// onClick={() => router.push(`/[p]`, `/${location.plantProject}`)}
>
- {location.plantProject}
+ {(location as PlantLocationMulti | PlantLocation).plantProject}
)}
- {location.plantedSpecies && (
+ {(location as PlantLocationMulti)?.plantedSpecies && (
{t('species')}
- {location?.plantedSpecies?.map((species: any) => {
- return (
-
- {species.treeCount}{' '}
- {species.scientificName
- ? species.scientificName
- : species.otherSpecies &&
- species.otherSpecies !== 'Unknown'
- ? species.otherSpecies
- : t('maps:unknown')}
-
- );
- })}
+ {(location as PlantLocationMulti)?.plantedSpecies?.map(
+ (species: any) => {
+ return (
+
+ {species.treeCount}{' '}
+ {species.scientificName
+ ? species.scientificName
+ : species.otherSpecies &&
+ species.otherSpecies !== 'Unknown'
+ ? species.otherSpecies
+ : t('maps:unknown')}
+
+ );
+ }
+ )}
@@ -220,42 +234,40 @@ export function LocationDetails({
{t('maps:sampleTree')}
{/*
*/}
- {location.samplePlantLocations &&
- location.samplePlantLocations.map((spl: any, index: number) => {
- return (
-
- {index + 1}.{' '}
- setselectedLocation(spl)}
- className={styles.link}
- >
- {spl.scientificName
- ? spl.scientificName
- : spl.scientificSpecies &&
- spl.scientificSpecies !== 'Unknown'
- ? spl.scientificSpecies
- : t('maps:unknown')}
-
-
- {spl.tag ? `${t('maps:tag')} #${spl.tag} • ` : null}
- {spl?.measurements?.height}
- {t('maps:meterHigh')} • {spl?.measurements?.width}
- {t('maps:cmWide')}
-
- );
- })}
+ {(location as PlantLocationMulti).samplePlantLocations &&
+ (location as PlantLocationMulti).samplePlantLocations.map(
+ (spl: any, index: number) => {
+ return (
+
+ {index + 1}.{' '}
+ setselectedLocation(spl)}
+ className={styles.link}
+ >
+ {spl.scientificName
+ ? spl.scientificName
+ : spl.scientificSpecies &&
+ spl.scientificSpecies !== 'Unknown'
+ ? spl.scientificSpecies
+ : t('maps:unknown')}
+
+
+ {spl.tag ? `${t('maps:tag')} #${spl.tag} • ` : null}
+ {spl?.measurements?.height}
+ {t('maps:meterHigh')} • {spl?.measurements?.width}
+ {t('maps:cmWide')}
+
+ );
+ }
+ )}
{/*
*/}
)}
- ):(<>);
-}
-
-interface Props {
- setselectedLocation: SetState
;
- location:PlantLocationMulti ;
- plantLocations: PlantLocation[]
+ ) : (
+ <>
+ );
}
export default function PlantLocationPage({
@@ -266,12 +278,11 @@ export default function PlantLocationPage({
const router = useRouter();
const handleBackButton = () => {
- console.log(plantLocations,"==")
- if (location.type === 'sample') {
+ if (location?.type === 'sample') {
for (const i in plantLocations) {
if (Object.prototype.hasOwnProperty.call(plantLocations, i)) {
- const pl = plantLocations[i];
- if (pl.id === location.parent) {
+ const pl = plantLocations[i as any];
+ if (pl.id === (location as SamplePlantLocation)?.parent) {
setselectedLocation(pl);
break;
}
@@ -286,7 +297,7 @@ export default function PlantLocationPage({
location,
setselectedLocation,
};
- console.log(location,"==")
+
return (
@@ -310,4 +321,3 @@ export default function PlantLocationPage({
);
}
-
diff --git a/src/features/user/TreeMapper/index.tsx b/src/features/user/TreeMapper/index.tsx
index 9d13022b99..a1e3f77a2b 100644
--- a/src/features/user/TreeMapper/index.tsx
+++ b/src/features/user/TreeMapper/index.tsx
@@ -13,6 +13,8 @@ import { handleError, APIError } from '@planet-sdk/common';
import {
ExtendedScopePlantLocations,
PlantLocation,
+ PlantLocationMulti,
+ PlantLocationSingle,
SamplePlantLocation,
} from '../../common/types/plantLocation';
import { Links } from '../../common/types/payments';
@@ -27,11 +29,11 @@ function TreeMapper(): ReactElement {
const { t } = useTranslation(['treemapper']);
const [progress, setProgress] = React.useState(0);
const [isDataLoading, setIsDataLoading] = React.useState(false);
- const [plantLocations, setPlantLocations] = React.useState<
- PlantLocation[] | SamplePlantLocation[] | null
- >(null);
+ const [plantLocations, setPlantLocations] = React.useState
(
+ []
+ );
const [selectedLocation, setselectedLocation] = React.useState<
- PlantLocation | null
+ PlantLocationSingle | PlantLocationMulti | null
>(null);
const [links, setLinks] = React.useState();
const { redirect, setErrors } = React.useContext(ErrorHandlingContext);
@@ -161,7 +163,6 @@ function TreeMapper(): ReactElement {
fetchTreemapperData,
links,
};
-
return (
{progress > 0 && (
From 674e19b33ddff122fddfeb1c014b3d923b498ea1 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 29 Nov 2023 10:59:44 +0530
Subject: [PATCH 16/23] feedback(MapComponent)
---
src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx | 4 ++--
.../user/TreeMapper/Import/components/MapComponent.tsx | 8 ++++----
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
index b1fd32d758..0a212c5c8d 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
@@ -15,7 +15,7 @@ interface Props {
const Map = ReactMapboxGl({
customAttribution:
'
© OpenStreetMap contributors',
- accessToken: ''
+ accessToken: '',
});
export default function MapComponent({
@@ -28,7 +28,7 @@ export default function MapComponent({
height: '100%',
width: '100%',
center: defaultMapCenter,
- zoom: [defaultZoom],
+ zoom: defaultZoom,
});
const [style, setStyle] = React.useState({
diff --git a/src/features/user/TreeMapper/Import/components/MapComponent.tsx b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
index ed9b3a15e3..31fcfab9ee 100644
--- a/src/features/user/TreeMapper/Import/components/MapComponent.tsx
+++ b/src/features/user/TreeMapper/Import/components/MapComponent.tsx
@@ -14,14 +14,14 @@ interface Props {
interface viewportProps {
height: string;
width: string;
- center: number[];
- zoom: number[];
+ center: [number, number];
+ zoom: [number];
}
const Map = ReactMapboxGl({ maxZoom: 15, accessToken: '' });
export default function MapComponent({ geoJson }: Props): ReactElement {
- const defaultMapCenter = [0, 0];
+ const defaultMapCenter: [number, number] = [0, 0];
const defaultZoom = 1.4;
const [viewport, setViewPort] = React.useState
({
@@ -64,7 +64,7 @@ export default function MapComponent({ geoJson }: Props): ReactElement {
[bbox[0], bbox[1]],
[bbox[2], bbox[3]],
]);
- const newViewport = {
+ const newViewport: viewportProps = {
...viewport,
center: [longitude, latitude],
zoom: [zoom],
From cfb95c8ed38276291304a90f60484ee0ad9316d4 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Mon, 4 Dec 2023 14:18:42 +0530
Subject: [PATCH 17/23] fix type_issue for staticMap
---
.../user/RegisterTrees/RegisterTrees/StaticMap.tsx | 13 ++++++++-----
1 file changed, 8 insertions(+), 5 deletions(-)
diff --git a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
index ba872daa93..d7bcc0adf0 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
@@ -10,7 +10,7 @@ const Map = ReactMapboxGl({
interactive: false,
customAttribution:
'© OpenStreetMap contributors',
- accessToken: ''
+ accessToken: '',
});
interface Props {
@@ -18,7 +18,7 @@ interface Props {
}
export default function StaticMap({ geoJson }: Props): ReactElement {
- const defaultMapCenter = [-28.5, 36.96];
+ const defaultMapCenter: [number, number] = [-28.5, 36.96];
const defaultZoom = 1.4;
const [viewport, setViewPort] = React.useState({
height: '100%',
@@ -76,8 +76,8 @@ export default function StaticMap({ geoJson }: Props): ReactElement {
]);
const newViewport = {
...viewport,
- center: [longitude, latitude],
- zoom: [zoom - 0.5],
+ center: [longitude, latitude] as [number, number],
+ zoom: [zoom - 0.5] as [number],
};
setViewPort(newViewport);
}
@@ -86,6 +86,7 @@ export default function StaticMap({ geoJson }: Props): ReactElement {
return (
- ) : ""}
+ ) : (
+ <>
+ )}
);
}
From 74f28b831f9f29a9006419bf3e6aae8aca4552ec Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:15:03 +0530
Subject: [PATCH 18/23] fix type issue for PlantLocation component
---
src/features/common/types/plantLocation.d.ts | 5 +-
.../user/TreeMapper/components/Map.tsx | 6 +-
.../TreeMapper/components/PlantLocation.tsx | 63 ++++++++++++++-----
.../TreeMapper/components/TreeMapperList.tsx | 10 ++-
src/features/user/TreeMapper/index.tsx | 23 ++++---
5 files changed, 74 insertions(+), 33 deletions(-)
diff --git a/src/features/common/types/plantLocation.d.ts b/src/features/common/types/plantLocation.d.ts
index 4bd617e45d..d8a833d085 100644
--- a/src/features/common/types/plantLocation.d.ts
+++ b/src/features/common/types/plantLocation.d.ts
@@ -38,9 +38,8 @@ export interface PlantLocationBase {
status: string | null; // currently always null. Should we do something here?
statusReason: string | null; // currently always null. Should we do something here?
}
-type Type = 'single' | 'multi' | 'sample';
export interface PlantLocationSingle extends PlantLocationBase {
- type: Type;
+ type: PlantLocationType;
scientificName: string | null;
scientificSpecies: string | null;
tag: string | null;
@@ -51,7 +50,7 @@ export interface PlantLocationSingle extends PlantLocationBase {
}
export interface PlantLocationMulti extends PlantLocationBase {
- type: Type;
+ type: PlantLocationType;
nextMeasurementDate: DateString | null;
plantDateStart: DateString | null;
plantDateEnd: DateString | null;
diff --git a/src/features/user/TreeMapper/components/Map.tsx b/src/features/user/TreeMapper/components/Map.tsx
index 6ac523007e..b1e653bb7d 100644
--- a/src/features/user/TreeMapper/components/Map.tsx
+++ b/src/features/user/TreeMapper/components/Map.tsx
@@ -127,7 +127,8 @@ export default function MyTreesMap({
// };
const zoomToLocation = (geometry: turf.AllGeoJSON) => {
- if (viewport.width && viewport.height) {
+ console.log(geometry, '==');
+ if (viewport.width && viewport.height && geometry) {
const bbox = turf.bbox(geometry);
const { longitude, latitude, zoom } = new WebMercatorViewport(
viewport
@@ -175,6 +176,7 @@ export default function MyTreesMap({
}, []);
React.useEffect(() => {
+ console.log(locations, '==');
if (locations) {
const features = [];
const ids = [];
@@ -199,6 +201,7 @@ export default function MyTreesMap({
features,
});
setPlIds(ids);
+ console.log(locations[0]?.geometry, '==1');
zoomToLocation(locations[0]?.geometry);
} else {
setPlIds(null);
@@ -208,6 +211,7 @@ export default function MyTreesMap({
React.useEffect(() => {
if (selectedLocation) {
+ console.log(selectedLocation.geometry, '==2');
zoomToLocation(selectedLocation.geometry);
}
}, [geoJson, selectedLocation]);
diff --git a/src/features/user/TreeMapper/components/PlantLocation.tsx b/src/features/user/TreeMapper/components/PlantLocation.tsx
index ed8a5e04eb..9ebc337e85 100644
--- a/src/features/user/TreeMapper/components/PlantLocation.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocation.tsx
@@ -6,12 +6,23 @@ import * as turf from '@turf/turf';
import { localizedAbbreviatedNumber } from '../../../../utils/getFormattedNumber';
import TreeIcon from '../../../../../public/assets/images/icons/TreeIcon';
import { useRouter } from 'next/router';
+import {
+ PlantLocation as PlantLocationType,
+ PlantLocationBase,
+ PlantLocationMulti,
+ PlantLocationSingle,
+} from '../../../common/types/plantLocation';
+import { SamplePlantLocation } from '../Treemapper';
interface Props {
location: Object;
index: number;
locations: Object;
- selectedLocation: string;
+ selectedLocation:
+ | PlantLocationSingle
+ | PlantLocationMulti
+ | SamplePlantLocation
+ | null;
setselectedLocation: Function;
}
@@ -25,17 +36,25 @@ function PlantLocation({
const { t, i18n } = useTranslation('treemapper');
const router = useRouter();
let treeCount = 0;
- if (location?.plantedSpecies?.length !== 0) {
- for (const key in location.plantedSpecies) {
- if (Object.prototype.hasOwnProperty.call(location.plantedSpecies, key)) {
- const species = location.plantedSpecies[key];
+ if ((location as PlantLocationMulti)?.plantedSpecies?.length !== 0) {
+ for (const key in (location as PlantLocationMulti).plantedSpecies) {
+ if (
+ Object.prototype.hasOwnProperty.call(
+ (location as PlantLocationMulti).plantedSpecies,
+ key
+ )
+ ) {
+ const species = (location as PlantLocationMulti).plantedSpecies[key];
treeCount += species.treeCount;
}
}
}
function selectLocation(location: any) {
- if (selectedLocation && selectedLocation.id === location.id) {
+ if (
+ selectedLocation &&
+ (selectedLocation as PlantLocationBase).id === location.id
+ ) {
setselectedLocation(null);
} else {
router.replace(`/profile/treemapper/?l=${location.id}`);
@@ -45,8 +64,8 @@ function PlantLocation({
const [plantationArea, setPlantationArea] = React.useState(0);
React.useEffect(() => {
- if (location && location.type === 'multi') {
- const area = turf.area(location.geometry);
+ if (location && (location as PlantLocationMulti).type === 'multi') {
+ const area = turf.area((location as PlantLocationMulti).geometry);
setPlantationArea(area / 10000);
}
}, [location]);
@@ -61,11 +80,13 @@ function PlantLocation({
{`${
- location.hid
- ? location.hid.substring(0, 3) + '-' + location.hid.substring(3)
+ (location as PlantLocationBase).hid
+ ? (location as PlantLocationBase).hid.substring(0, 3) +
+ '-' +
+ (location as PlantLocationBase).hid.substring(3)
: null
} ${
- location.type === 'multi'
+ (location as PlantLocationMulti).type === 'multi'
? '• ' +
localizedAbbreviatedNumber(
i18n.language,
@@ -73,23 +94,31 @@ function PlantLocation({
2
) +
'ha'
- : location.tag
- ? '• ' + location.tag
+ : (location as SamplePlantLocation).tag
+ ? '• ' + (location as SamplePlantLocation).tag
: ''
}`}
-
{formatDate(location.registrationDate)}
+
+ {formatDate((location as PlantLocationBase).registrationDate)}
+
- {location.type === 'multi' && treeCount ? `${treeCount}` : `1`}
+ {(location as PlantLocationMulti).type === 'multi' && treeCount
+ ? `${treeCount}`
+ : `1`}
-
{t(location.captureStatus)}
+
+ {t((location as PlantLocationBase).captureStatus)}
+
);
}
diff --git a/src/features/user/TreeMapper/components/TreeMapperList.tsx b/src/features/user/TreeMapper/components/TreeMapperList.tsx
index 1942af3db4..0a3e1d926c 100644
--- a/src/features/user/TreeMapper/components/TreeMapperList.tsx
+++ b/src/features/user/TreeMapper/components/TreeMapperList.tsx
@@ -6,15 +6,19 @@ import { useTranslation } from 'next-i18next';
import {
SamplePlantLocation,
PlantLocation as PlantLocationType,
+ PlantLocationSingle,
+ PlantLocationMulti,
} from '../../../common/types/plantLocation';
import { Links } from '../../../common/types/payments';
import PlantLocation from './PlantLocation';
import { SetState } from '../../../common/types/common';
interface Props {
- selectedLocation: PlantLocationType | SamplePlantLocation | null;
- setselectedLocation: SetState;
- plantLocations: PlantLocationType[] | SamplePlantLocation[] | null;
+ selectedLocation: PlantLocation | SamplePlantLocation | null;
+ setselectedLocation: SetState<
+ PlantLocationSingle | PlantLocationMulti | null
+ >;
+ plantLocations: PlantLocationType[] | null;
isDataLoading: boolean;
location: PlantLocationType | SamplePlantLocation;
fetchTreemapperData: Function;
diff --git a/src/features/user/TreeMapper/index.tsx b/src/features/user/TreeMapper/index.tsx
index 851154e7ee..603c615e14 100644
--- a/src/features/user/TreeMapper/index.tsx
+++ b/src/features/user/TreeMapper/index.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next';
import { handleError, APIError } from '@planet-sdk/common';
import {
ExtendedScopePlantLocations,
- PlantLocation,
+ PlantLocation as PlantLocationType,
PlantLocationMulti,
PlantLocationSingle,
SamplePlantLocation,
@@ -29,9 +29,9 @@ function TreeMapper(): ReactElement {
const { t } = useTranslation(['treemapper']);
const [progress, setProgress] = React.useState(0);
const [isDataLoading, setIsDataLoading] = React.useState(false);
- const [plantLocations, setPlantLocations] = React.useState(
- []
- );
+ const [plantLocations, setPlantLocations] = React.useState<
+ PlantLocationType[]
+ >([]);
const [selectedLocation, setselectedLocation] = React.useState<
PlantLocationSingle | PlantLocationMulti | null
>(null);
@@ -64,7 +64,8 @@ function TreeMapper(): ReactElement {
if (
Object.prototype.hasOwnProperty.call(newPlantLocations, key)
) {
- const item = newPlantLocations[key];
+ const item = newPlantLocations[key] as PlantLocationMulti &
+ SamplePlantLocation;
if (item.type === 'sample') {
if (item.parent === location.id) {
location.sampleTrees.push(item);
@@ -75,7 +76,10 @@ function TreeMapper(): ReactElement {
}
}
}
- setPlantLocations([...plantLocations, ...newPlantLocations]);
+ setPlantLocations([
+ ...plantLocations,
+ ...newPlantLocations,
+ ] as PlantLocationType[]);
}
} catch (err) {
setErrors(handleError(err as APIError));
@@ -96,7 +100,7 @@ function TreeMapper(): ReactElement {
if (response?.items) {
const plantLocations = response.items;
if (plantLocations?.length === 0) {
- setPlantLocations(null);
+ setPlantLocations([]);
} else {
for (const itr in plantLocations) {
if (Object.prototype.hasOwnProperty.call(plantLocations, itr)) {
@@ -107,7 +111,8 @@ function TreeMapper(): ReactElement {
if (
Object.prototype.hasOwnProperty.call(plantLocations, key)
) {
- const item = plantLocations[key];
+ const item = plantLocations[key] as PlantLocationMulti &
+ SamplePlantLocation;
if (item.type === 'sample') {
if (item.parent === location.id) {
location.sampleTrees.push(item);
@@ -118,7 +123,7 @@ function TreeMapper(): ReactElement {
}
}
}
- setPlantLocations(plantLocations);
+ setPlantLocations(plantLocations as PlantLocationType[]);
setLinks(response._links);
}
}
From 79d114e65fd2ccbfc238b548e90bdbfb07d9fa2f Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:00:32 +0530
Subject: [PATCH 19/23] fix type issue for PlantLocationPage
---
.../RegisterTrees/RegisterTrees/SingleContribution.tsx | 2 +-
.../user/RegisterTrees/RegisterTrees/StaticMap.tsx | 4 +++-
src/features/user/TreeMapper/components/PlantLocation.tsx | 2 +-
.../user/TreeMapper/components/PlantLocationPage.tsx | 4 ++--
.../user/TreeMapper/components/TreeMapperList.tsx | 8 ++++----
5 files changed, 11 insertions(+), 9 deletions(-)
diff --git a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
index a9fbb71b46..015c26be83 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
@@ -45,7 +45,7 @@ export default function SingleContribution({
contributionGUID,
token,
};
-
+ console.log(contribution, '==');
const { t, ready } = useTranslation(['me', 'common']);
return ready && contribution !== null ? (
diff --git a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
index d7bcc0adf0..8fc1882500 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
@@ -5,6 +5,7 @@ import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import WebMercatorViewport from '@math.gl/web-mercator';
import styles from '../RegisterModal.module.scss';
import getMapStyle from '../../../../utils/maps/getMapStyle';
+import { Polygon, Point } from 'geojson';
const Map = ReactMapboxGl({
interactive: false,
@@ -18,6 +19,7 @@ interface Props {
}
export default function StaticMap({ geoJson }: Props): ReactElement {
+ console.log(geoJson, '==');
const defaultMapCenter: [number, number] = [-28.5, 36.96];
const defaultZoom = 1.4;
const [viewport, setViewPort] = React.useState({
@@ -41,7 +43,7 @@ export default function StaticMap({ geoJson }: Props): ReactElement {
React.useEffect(() => {
const promise = getMapStyle('openStreetMap');
- promise.then((style: any) => {
+ promise.then((style) => {
if (style) {
setStyle(style);
}
diff --git a/src/features/user/TreeMapper/components/PlantLocation.tsx b/src/features/user/TreeMapper/components/PlantLocation.tsx
index 9ebc337e85..d9e977629a 100644
--- a/src/features/user/TreeMapper/components/PlantLocation.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocation.tsx
@@ -116,7 +116,7 @@ function PlantLocation({
- {index !== (locations as PlantLocation[])?.length - 1 && (
+ {index !== (locations as PlantLocationType[])?.length - 1 && (
)}
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index e0da44b65d..4f8ffc13fb 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -57,7 +57,7 @@ export function LocationDetails({
SampleTreeImageProps[]
>([]);
- const text = `${location?.deviceLocation?.coordinates.map((coord: any) => {
+ const text = `${location?.deviceLocation?.coordinates.map((coord) => {
return getFormattedNumber(i18n.language, Number(coord));
})}`;
@@ -212,7 +212,7 @@ export function LocationDetails({
{(location as PlantLocationMulti)?.plantedSpecies?.map(
- (species: any) => {
+ (species) => {
return (
{species.treeCount}{' '}
diff --git a/src/features/user/TreeMapper/components/TreeMapperList.tsx b/src/features/user/TreeMapper/components/TreeMapperList.tsx
index 0a3e1d926c..f3ebfd8235 100644
--- a/src/features/user/TreeMapper/components/TreeMapperList.tsx
+++ b/src/features/user/TreeMapper/components/TreeMapperList.tsx
@@ -14,13 +14,13 @@ import PlantLocation from './PlantLocation';
import { SetState } from '../../../common/types/common';
interface Props {
- selectedLocation: PlantLocation | SamplePlantLocation | null;
+ selectedLocation: PlantLocationSingle | PlantLocationMulti | null;
setselectedLocation: SetState<
PlantLocationSingle | PlantLocationMulti | null
>;
- plantLocations: PlantLocationType[] | null;
+ plantLocations: PlantLocationType[];
isDataLoading: boolean;
- location: PlantLocationType | SamplePlantLocation;
+ location: PlantLocationSingle | PlantLocationMulti | null;
fetchTreemapperData: Function;
links: Links | undefined;
}
@@ -35,7 +35,7 @@ export default function TreeMapperList({
links,
}: Props): ReactElement {
const { t } = useTranslation('treemapper');
-
+ console.log(location, '==');
return (
Date: Fri, 8 Dec 2023 14:43:01 +0530
Subject: [PATCH 20/23] Don't show slider if image is missing
---
.../components/maps/PlantLocations.tsx | 6 ++++-
.../components/projectDetails/ImageSlider.tsx | 25 +++++++++++--------
.../RegisterTrees/SingleContribution.tsx | 1 -
.../RegisterTrees/RegisterTrees/StaticMap.tsx | 1 -
.../user/TreeMapper/components/Map.tsx | 9 +++----
.../TreeMapper/components/TreeMapperList.tsx | 1 -
6 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/src/features/projects/components/maps/PlantLocations.tsx b/src/features/projects/components/maps/PlantLocations.tsx
index 264303c9ec..9113ed3a57 100644
--- a/src/features/projects/components/maps/PlantLocations.tsx
+++ b/src/features/projects/components/maps/PlantLocations.tsx
@@ -30,6 +30,7 @@ export default function PlantLocations(): ReactElement {
const { i18n, t } = useTranslation(['maps', 'common']);
const openPl = (pl: PlantLocationSingle | SamplePlantLocation) => {
+ console.log(pl, '==');
switch (pl.type) {
case 'sample':
setSamplePlantLocation(pl);
@@ -231,7 +232,10 @@ export default function PlantLocations(): ReactElement {
{viewport.zoom > 14 && (
openPl(pl)}
+ onClick={() => {
+ console.log('I ran');
+ openPl(pl);
+ }}
onMouseEnter={() => onHover(pl)}
onMouseLeave={onHoverEnd}
className={`${styles.single} ${
diff --git a/src/features/projects/components/projectDetails/ImageSlider.tsx b/src/features/projects/components/projectDetails/ImageSlider.tsx
index 926ab3bacc..dd4a2afbbf 100644
--- a/src/features/projects/components/projectDetails/ImageSlider.tsx
+++ b/src/features/projects/components/projectDetails/ImageSlider.tsx
@@ -21,7 +21,7 @@ export default function ImageSlider({
imageSize,
type,
}: Props) {
- const [slider, setSlider] = React.useState
();
+ const [slider, setSlider] = React.useState();
const projectImages: { content: () => ReactElement }[] = [];
const loadImageSource = (imageName: string): string => {
@@ -33,7 +33,6 @@ export default function ImageSlider({
images.forEach((sliderImage) => {
if (sliderImage.image) {
const imageURL = loadImageSource(sliderImage.image);
-
projectImages.push({
content: () => (
{
- setSlider(
-
- );
+ if (projectImages.length > 0) {
+ setSlider(
+
+ );
+ } else {
+ setSlider(
);
+ }
}, [images]);
return <>{slider};
diff --git a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
index 015c26be83..b8c16f8fcd 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/SingleContribution.tsx
@@ -45,7 +45,6 @@ export default function SingleContribution({
contributionGUID,
token,
};
- console.log(contribution, '==');
const { t, ready } = useTranslation(['me', 'common']);
return ready && contribution !== null ? (
diff --git a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
index 8fc1882500..15d28fe184 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/StaticMap.tsx
@@ -5,7 +5,6 @@ import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import WebMercatorViewport from '@math.gl/web-mercator';
import styles from '../RegisterModal.module.scss';
import getMapStyle from '../../../../utils/maps/getMapStyle';
-import { Polygon, Point } from 'geojson';
const Map = ReactMapboxGl({
interactive: false,
diff --git a/src/features/user/TreeMapper/components/Map.tsx b/src/features/user/TreeMapper/components/Map.tsx
index b1e653bb7d..72f2b0458c 100644
--- a/src/features/user/TreeMapper/components/Map.tsx
+++ b/src/features/user/TreeMapper/components/Map.tsx
@@ -127,7 +127,6 @@ export default function MyTreesMap({
// };
const zoomToLocation = (geometry: turf.AllGeoJSON) => {
- console.log(geometry, '==');
if (viewport.width && viewport.height && geometry) {
const bbox = turf.bbox(geometry);
const { longitude, latitude, zoom } = new WebMercatorViewport(
@@ -176,7 +175,6 @@ export default function MyTreesMap({
}, []);
React.useEffect(() => {
- console.log(locations, '==');
if (locations) {
const features = [];
const ids = [];
@@ -201,7 +199,6 @@ export default function MyTreesMap({
features,
});
setPlIds(ids);
- console.log(locations[0]?.geometry, '==1');
zoomToLocation(locations[0]?.geometry);
} else {
setPlIds(null);
@@ -211,7 +208,6 @@ export default function MyTreesMap({
React.useEffect(() => {
if (selectedLocation) {
- console.log(selectedLocation.geometry, '==2');
zoomToLocation(selectedLocation.geometry);
}
}, [geoJson, selectedLocation]);
@@ -338,7 +334,10 @@ export default function MyTreesMap({
{viewport.zoom > 14 && (
setselectedLocation(pl)}
+ onClick={() => {
+ // console.log(pl, '==');
+ setselectedLocation(pl);
+ }}
// onMouseEnter={() => onHover(pl)}
// onMouseLeave={() => onHoverEnd(pl)}
className={`${styles.single} ${
diff --git a/src/features/user/TreeMapper/components/TreeMapperList.tsx b/src/features/user/TreeMapper/components/TreeMapperList.tsx
index f3ebfd8235..eea37b085a 100644
--- a/src/features/user/TreeMapper/components/TreeMapperList.tsx
+++ b/src/features/user/TreeMapper/components/TreeMapperList.tsx
@@ -35,7 +35,6 @@ export default function TreeMapperList({
links,
}: Props): ReactElement {
const { t } = useTranslation('treemapper');
- console.log(location, '==');
return (
Date: Tue, 12 Dec 2023 14:09:09 +0530
Subject: [PATCH 21/23] remove any from the Mytrees
---
src/features/user/Profile/components/MyTrees/MyTrees.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/features/user/Profile/components/MyTrees/MyTrees.tsx b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
index 177b467977..65af8a432c 100644
--- a/src/features/user/Profile/components/MyTrees/MyTrees.tsx
+++ b/src/features/user/Profile/components/MyTrees/MyTrees.tsx
@@ -187,7 +187,7 @@ export default function MyTrees({ profile, authenticatedType, token }: Props) {
- {contributions.map((contribution: any, index: any) => {
+ {contributions.map((contribution, index) => {
return ;
})}
From 3d016a5d55af90464beba172a6399efa3da738a6 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Tue, 12 Dec 2023 16:00:56 +0530
Subject: [PATCH 22/23] remove any from the PlantLocationPage
---
.../user/TreeMapper/components/PlantLocationPage.tsx | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/src/features/user/TreeMapper/components/PlantLocationPage.tsx b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
index 4f8ffc13fb..727b814e70 100644
--- a/src/features/user/TreeMapper/components/PlantLocationPage.tsx
+++ b/src/features/user/TreeMapper/components/PlantLocationPage.tsx
@@ -33,7 +33,7 @@ const ImageSliderSingle = dynamic(
interface Props {
setselectedLocation: SetState<
- PlantLocationMulti | PlantLocationSingle | null
+ SamplePlantLocation | PlantLocationMulti | PlantLocationSingle | null
>;
location:
| PlantLocationMulti
@@ -236,7 +236,7 @@ export function LocationDetails({
{/*
*/}
{(location as PlantLocationMulti).samplePlantLocations &&
(location as PlantLocationMulti).samplePlantLocations.map(
- (spl: any, index: number) => {
+ (spl, index: number) => {
return (
{index + 1}.{' '}
@@ -279,9 +279,10 @@ export default function PlantLocationPage({
const handleBackButton = () => {
if (location?.type === 'sample') {
- for (const i in plantLocations) {
+ for (const iKey in plantLocations) {
+ const i = iKey as keyof typeof plantLocations;
if (Object.prototype.hasOwnProperty.call(plantLocations, i)) {
- const pl = plantLocations[i as any];
+ const pl = plantLocations[i] as PlantLocation;
if (pl.id === (location as SamplePlantLocation)?.parent) {
setselectedLocation(pl);
break;
From 39221be9964c3af43263fd29f506a72151e8b3f8 Mon Sep 17 00:00:00 2001
From: sunilsabatp <101264823+sunilsabatp@users.noreply.github.com>
Date: Wed, 17 Jan 2024 16:22:04 +0530
Subject: [PATCH 23/23] fix application side error
---
src/features/common/types/map.d.ts | 369 +++++++++---------
.../RegisterTrees/RegisterTrees/DrawMap.tsx | 6 +-
2 files changed, 185 insertions(+), 190 deletions(-)
diff --git a/src/features/common/types/map.d.ts b/src/features/common/types/map.d.ts
index 96407ed5e2..b43d7a9fdb 100644
--- a/src/features/common/types/map.d.ts
+++ b/src/features/common/types/map.d.ts
@@ -8,195 +8,190 @@ import {
UnitTypes,
} from '@planet-sdk/common';
import { Nullable } from '@planet-sdk/common/build/types/util';
-import { ContributionProps } from "../../user/RegisterTrees/RegisterTrees/SingleContribution";
-import { FlyToInterpolator } from "react-map-gl";
-
-
+import { ContributionProps } from '../../user/RegisterTrees/RegisterTrees/SingleContribution';
+import { FlyToInterpolator } from 'react-map-gl';
export interface ViewportProps {
- height: number | string ;
- width: number | string ;
- zoom: number | undefined;
- latitude?: number;
- longitude?: number;
- center?: number[];
- transitionDuration?: number | undefined;
- transitionInterpolator?: FlyToInterpolator | undefined;
- transitionEasing?: (normalizedTime: number) => number
+ height: number | string;
+ width: number | string;
+ zoom: [number] | number | undefined;
+ latitude?: number;
+ longitude?: number;
+ center?: [number, number];
+ transitionDuration?: number | undefined;
+ transitionInterpolator?: FlyToInterpolator | undefined;
+ transitionEasing?: (normalizedTime: number) => number;
}
export interface ProjectGeoJsonProps {
- type: 'Feature';
- geometry: {
- type: string;
- coordinates: number[];
- };
- properties: {
- allowDonations: boolean;
- classification: TreeProjectClassification;
- countPlanted: number;
- countTarget: number;
- country: CountryCode;
- currency: CurrencyCode;
- id: string;
- image: string;
- isApproved: boolean;
- isFeatured: boolean;
- isTopProject: boolean;
- location: Nullable;
- metadata: TreeProjectMetadata;
- minTreeCount: number;
- name: string;
- paymentDefaults: Nullable;
- purpose: 'trees';
- unit: 'tree';
- slug: string;
- taxDeductionCountries: CountryCode[];
- tpo: Tpo;
- treeCost: number;
- unitCost: number;
- unitType: UnitTypes;
- };
- }
-
-
- export interface RegisterTreeGeometry {
- features?: [];
- coordinates: [number, number] | number[][];
- type: 'Polygon' | 'Point';
-}
-
- export interface RegisterTreesFormProps {
- setContributionGUID: React.Dispatch>;
- setContributionDetails: React.Dispatch<
- React.SetStateAction
- >;
- setRegistered: React.Dispatch>;
- }
-
-
-
- // Map styling
-
- export interface MapStyle {
- version: number
- sprite: string
- glyphs: string
- sources: Sources
- layers: Layer[]
- metadata: Metadata
- }
-
- export type RequiredMapStyle = Omit
-
- export interface Sources {
- esri: Esri
- }
-
- export interface Esri {
- type: string
- scheme: string
- tilejson: string
- format: string
- maxzoom: number
- tiles: string[]
- name: string
- }
-
- export interface Layer {
- id: string
- type: string
- paint: Paint
- layout: Layout
- showProperties?: boolean
- source?: string
- "source-layer"?: string
- minzoom?: number
- maxzoom?: number
- filter?: any[]
- }
-
- export interface Paint {
- "background-color"?: string
- "fill-color": any
- "fill-outline-color"?: string
- "fill-pattern"?: string
- "fill-opacity"?: number
- "line-color": any
- "line-width": any
- "line-dasharray"?: number[]
- "text-color"?: string
- "text-halo-color"?: string
- "fill-translate"?: FillTranslate
- "fill-translate-anchor"?: string
- "line-opacity"?: number
- "text-halo-blur"?: number
- "text-halo-width"?: number
- }
-
- export interface FillTranslate {
- stops: [number, number[]][]
- }
-
- export interface Layout {
- visibility?: string
- "line-join"?: string
- "line-cap"?: string
- "symbol-placement"?: string
- "symbol-avoid-edges"?: boolean
- "icon-image"?: string
- "symbol-spacing"?: number
- "icon-rotation-alignment"?: string
- "icon-allow-overlap"?: boolean
- "icon-padding"?: number
- "text-font"?: string[]
- "text-size": any
- "text-letter-spacing": any
- "text-line-height"?: number
- "text-max-width"?: number
- "text-field"?: string
- "text-padding"?: number
- "text-max-angle"?: number
- "text-offset"?: number[]
- "text-rotation-alignment"?: string
- "text-transform"?: string
- "text-optional"?: boolean
- }
-
- export interface Metadata {
- arcgisStyleUrl: string
- arcgisOriginalItemTitle: string
- arcgisQuickEditorWarning: boolean
- arcgisQuickEditor: ArcgisQuickEditor
- arcgisEditorExtents: ArcgisEditorExtent[]
- arcgisMinimapVisibility: boolean
- }
-
- export interface ArcgisQuickEditor {
- labelTextColor: string
- labelHaloColor: string
- baseColor: string
- spriteProcessing: boolean
- labelContrast: number
- labelColorMode: string
- colorMode: string
- colors: Colors
- boundaries: string
- }
-
- export interface Colors {
- boundaries: string
- }
-
- export interface ArcgisEditorExtent {
- spatialReference: SpatialReference
- xmin: number
- ymin: number
- xmax: number
- ymax: number
- }
-
- export interface SpatialReference {
- wkid: number
- latestWkid?: number
- }
+ type: 'Feature';
+ geometry: {
+ type: string;
+ coordinates: number[];
+ };
+ properties: {
+ allowDonations: boolean;
+ classification: TreeProjectClassification;
+ countPlanted: number;
+ countTarget: number;
+ country: CountryCode;
+ currency: CurrencyCode;
+ id: string;
+ image: string;
+ isApproved: boolean;
+ isFeatured: boolean;
+ isTopProject: boolean;
+ location: Nullable;
+ metadata: TreeProjectMetadata;
+ minTreeCount: number;
+ name: string;
+ paymentDefaults: Nullable;
+ purpose: 'trees';
+ unit: 'tree';
+ slug: string;
+ taxDeductionCountries: CountryCode[];
+ tpo: Tpo;
+ treeCost: number;
+ unitCost: number;
+ unitType: UnitTypes;
+ };
+}
+
+export interface RegisterTreeGeometry {
+ features?: [];
+ coordinates: [number, number] | number[][];
+ type: 'Polygon' | 'Point';
+}
+
+export interface RegisterTreesFormProps {
+ setContributionGUID: React.Dispatch>;
+ setContributionDetails: React.Dispatch<
+ React.SetStateAction
+ >;
+ setRegistered: React.Dispatch>;
+}
+
+// Map styling
+
+export interface MapStyle {
+ version: number;
+ sprite: string;
+ glyphs: string;
+ sources: Sources;
+ layers: Layer[];
+ metadata: Metadata;
+}
+
+export type RequiredMapStyle = Omit;
+
+export interface Sources {
+ esri: Esri;
+}
+
+export interface Esri {
+ type: string;
+ scheme: string;
+ tilejson: string;
+ format: string;
+ maxzoom: number;
+ tiles: string[];
+ name: string;
+}
+
+export interface Layer {
+ id: string;
+ type: string;
+ paint: Paint;
+ layout: Layout;
+ showProperties?: boolean;
+ source?: string;
+ 'source-layer'?: string;
+ minzoom?: number;
+ maxzoom?: number;
+ filter?: any[];
+}
+
+export interface Paint {
+ 'background-color'?: string;
+ 'fill-color': any;
+ 'fill-outline-color'?: string;
+ 'fill-pattern'?: string;
+ 'fill-opacity'?: number;
+ 'line-color': any;
+ 'line-width': any;
+ 'line-dasharray'?: number[];
+ 'text-color'?: string;
+ 'text-halo-color'?: string;
+ 'fill-translate'?: FillTranslate;
+ 'fill-translate-anchor'?: string;
+ 'line-opacity'?: number;
+ 'text-halo-blur'?: number;
+ 'text-halo-width'?: number;
+}
+
+export interface FillTranslate {
+ stops: [number, number[]][];
+}
+
+export interface Layout {
+ visibility?: string;
+ 'line-join'?: string;
+ 'line-cap'?: string;
+ 'symbol-placement'?: string;
+ 'symbol-avoid-edges'?: boolean;
+ 'icon-image'?: string;
+ 'symbol-spacing'?: number;
+ 'icon-rotation-alignment'?: string;
+ 'icon-allow-overlap'?: boolean;
+ 'icon-padding'?: number;
+ 'text-font'?: string[];
+ 'text-size': any;
+ 'text-letter-spacing': any;
+ 'text-line-height'?: number;
+ 'text-max-width'?: number;
+ 'text-field'?: string;
+ 'text-padding'?: number;
+ 'text-max-angle'?: number;
+ 'text-offset'?: number[];
+ 'text-rotation-alignment'?: string;
+ 'text-transform'?: string;
+ 'text-optional'?: boolean;
+}
+
+export interface Metadata {
+ arcgisStyleUrl: string;
+ arcgisOriginalItemTitle: string;
+ arcgisQuickEditorWarning: boolean;
+ arcgisQuickEditor: ArcgisQuickEditor;
+ arcgisEditorExtents: ArcgisEditorExtent[];
+ arcgisMinimapVisibility: boolean;
+}
+
+export interface ArcgisQuickEditor {
+ labelTextColor: string;
+ labelHaloColor: string;
+ baseColor: string;
+ spriteProcessing: boolean;
+ labelContrast: number;
+ labelColorMode: string;
+ colorMode: string;
+ colors: Colors;
+ boundaries: string;
+}
+
+export interface Colors {
+ boundaries: string;
+}
+
+export interface ArcgisEditorExtent {
+ spatialReference: SpatialReference;
+ xmin: number;
+ ymin: number;
+ xmax: number;
+ ymax: number;
+}
+
+export interface SpatialReference {
+ wkid: number;
+ latestWkid?: number;
+}
diff --git a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
index 0a212c5c8d..00979036ea 100644
--- a/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
+++ b/src/features/user/RegisterTrees/RegisterTrees/DrawMap.tsx
@@ -9,7 +9,7 @@ import { ViewportProps } from '../../../common/types/map';
interface Props {
setGeometry: Function;
- userLocation: number[] | null;
+ userLocation: [number, number] | null;
}
const Map = ReactMapboxGl({
@@ -22,8 +22,8 @@ export default function MapComponent({
setGeometry,
userLocation,
}: Props): ReactElement {
- const defaultMapCenter = [-28.5, 36.96];
- const defaultZoom = 1.4;
+ const defaultMapCenter: [number, number] = [-28.5, 36.96];
+ const defaultZoom: [number] = [1.4];
const [viewport, setViewPort] = React.useState({
height: '100%',
width: '100%',