feat: complete project form migration (#2055)

* refactor: migrate BasicInfoForm * refactor: migrate LocationForm * refactor: migrate MetadataForm * fix: metadata typing issue * fix: handle review feedback
regen-network · Sep 5, 2023 · 75cebea · 75cebea
1 parent 2f4d49b
commit 75cebea
Show file tree

Hide file tree

Showing 34 changed files with 752 additions and 473 deletions.
diff --git a/web-components/src/components/inputs/new/LocationField/LocationField.styles.ts b/web-components/src/components/inputs/new/LocationField/LocationField.styles.ts
@@ -0,0 +1,11 @@
+import { Theme } from '../../../../theme/muiTheme';
+import { makeStyles } from 'tss-react/mui';
+
+export const useLocationStyles = makeStyles()((theme: Theme) => ({
+  result: {
+    border: `1px solid ${theme.palette.info.light}`,
+    backgroundColor: theme.palette.primary.main,
+    padding: theme.spacing(1.25),
+    cursor: 'pointer',
+  },
+}));
diff --git a/web-components/src/components/inputs/new/LocationField/LocationField.tsx b/web-components/src/components/inputs/new/LocationField/LocationField.tsx
@@ -0,0 +1,154 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import MapboxClient from '@mapbox/mapbox-sdk';
+import mbxGeocoder, {
+  GeocodeFeature,
+  GeocodeQueryType,
+} from '@mapbox/mapbox-sdk/services/geocoding';
+
+import FieldFormControl from '../FieldFormControl/FieldFormControl';
+import Input from '../Input/Input';
+import { useLocationStyles } from './LocationField.styles';
+import { isGeocodingFeature } from './LocationField.types';
+
+interface LocationFieldProps {
+  className?: string;
+  description?: string;
+  label?: string;
+  error?: boolean;
+  helperText?: string;
+  optional?: boolean | string;
+  disabled?: boolean;
+  placeholder?: string;
+  types?: GeocodeQueryType[];
+  token: string;
+  value: string | GeocodeFeature;
+  handleChange: (value: string | GeocodeFeature) => void;
+  onBlur: (
+    value: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>,
+  ) => void;
+}
+
+type Props = React.PropsWithChildren<LocationFieldProps>;
+
+const LocationField = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      className,
+      label,
+      description,
+      optional,
+      placeholder,
+      disabled,
+      // https://docs.mapbox.com/api/search/geocoding/#data-types
+      types = [
+        'country',
+        'region',
+        'postcode',
+        'district',
+        'place',
+        'locality',
+        'neighborhood',
+        'address',
+        'poi',
+      ],
+      token: accessToken,
+      value,
+      handleChange,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const baseClient = MapboxClient({ accessToken });
+    const geocoderService = mbxGeocoder(baseClient);
+    const [features, setFeatures] = useState<GeocodeFeature[]>([]);
+    const [showResults, setShowResults] = useState(true);
+
+    const { classes } = useLocationStyles();
+
+    return (
+      <FieldFormControl
+        className={className}
+        label={label}
+        description={description}
+        disabled={disabled}
+        optional={optional}
+      >
+        <>
+          <Input
+            {...props}
+            placeholder={placeholder}
+            value={isGeocodingFeature(value) ? value.place_name : value}
+            onBlur={e => {
+              onBlur(e);
+              setTimeout(() => {
+                setShowResults(false);
+              }, 800);
+            }}
+            onChange={({ target: { value } }) => {
+              handleChange(value);
+              if (value.length >= 1) {
+                const isCoordinates =
+                  /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/.test(
+                    value,
+                  );
+                if (isCoordinates) {
+                  const [longitude, latitude] = value
+                    .split(',')
+                    .map(Number) as [number, number];
+                  const coordinates: [number, number] = [longitude, latitude];
+                  geocoderService
+                    .reverseGeocode({
+                      mode: 'mapbox.places',
+                      query: coordinates,
+                    })
+                    .send()
+                    .then(({ body }) => {
+                      setFeatures(body.features);
+                      setShowResults(true);
+                    });
+                } else {
+                  geocoderService
+                    .forwardGeocode({
+                      types,
+                      mode: 'mapbox.places',
+                      query: value,
+                    })
+                    .send()
+                    .then(res => {
+                      setFeatures(res.body.features);
+                      setShowResults(true);
+                    });
+                }
+              }
+            }}
+            ref={ref}
+          />
+          {showResults &&
+            features.map((item, index) => (
+              <div
+                key={index}
+                className={classes.result}
+                onClick={() => {
+                  handleChange({
+                    // @ts-ignore
+                    '@context': {
+                      '@vocab': 'https://purl.org/geojson/vocab#',
+                      type: '@type',
+                      coordinates: { '@container': '@list' },
+                    },
+                    ...item,
+                  });
+                  setShowResults(false);
+                }}
+              >
+                {item.place_name}
+              </div>
+            ))}
+        </>
+      </FieldFormControl>
+    );
+  },
+);
+
+export default LocationField;
diff --git a/web-components/src/components/inputs/new/LocationField/LocationField.types.ts b/web-components/src/components/inputs/new/LocationField/LocationField.types.ts
@@ -0,0 +1,7 @@
+import { GeocodeFeature } from '@mapbox/mapbox-sdk/services/geocoding';
+
+export function isGeocodingFeature(
+  input: string | GeocodeFeature,
+): input is GeocodeFeature {
+  return typeof input !== 'string' && 'place_name' in input;
+}
diff --git a/web-components/src/components/inputs/new/SelectTextField/SelectTextField.tsx b/web-components/src/components/inputs/new/SelectTextField/SelectTextField.tsx
@@ -18,14 +18,18 @@ export interface SelectTextFieldProps extends DefaultStyleProps {
   native?: boolean;
   value?: string;
   disabled?: boolean;
-  label: string;
+  label?: string;
   error?: boolean;
   helperText?: string;
+  className?: string;
 }
 
 const SelectTextField = forwardRef<HTMLDivElement, SelectTextFieldProps>(
-  ({ options, native = true, value, disabled, label, ...props }, ref) => {
-    const { classes: styles } = useSelectTextFieldStyles({
+  (
+    { options, native = true, value, disabled, label, className, ...props },
+    ref,
+  ) => {
+    const { classes: styles, cx } = useSelectTextFieldStyles({
       defaultStyle: !value,
     });
     const theme = useTheme();
@@ -37,7 +41,7 @@ const SelectTextField = forwardRef<HTMLDivElement, SelectTextFieldProps>(
         ref={ref}
         label={label}
         disabled={disabled}
-        className={styles.root}
+        className={cx(styles.root, className)}
         select
         SelectProps={{
           native,

diff --git a/web-components/src/components/inputs/new/TextField/TextField.styles.ts b/web-components/src/components/inputs/new/TextField/TextField.styles.ts
@@ -70,6 +70,19 @@ export const useTextFieldStyles = makeStyles<UseStylesParams>()(
           fontSize: theme.spacing(4),
           height: theme.spacing(12.5), // 8.75
         },
+        '& .MuiSvgIcon-root': {
+          width: theme.spacing(3.25),
+          height: theme.spacing(2.5),
+          top: 'calc(50% - 5px)',
+          [theme.breakpoints.up('sm')]: {
+            right: theme.spacing(3.75),
+          },
+          [theme.breakpoints.down('sm')]: {
+            right: theme.spacing(3.25),
+          },
+          position: 'absolute',
+          pointerEvents: 'none',
+        },
         '& .MuiInputAdornment-root p': {
           color: theme.palette.info.main,
         },

diff --git a/web-components/src/components/inputs/new/TextField/TextField.types.ts b/web-components/src/components/inputs/new/TextField/TextField.types.ts
@@ -9,7 +9,7 @@ export interface RegenTextFieldProps extends StandardTextFieldProps {
   step?: number | string;
   customInputProps?: { min?: number; max?: number; step?: string | number };
   description?: string | ReactNode;
-  label: ReactNode;
+  label?: ReactNode;
   className?: string;
   name?: string;
 }
diff --git a/web-marketplace/src/components/organisms/BasicInfoForm.tsx b/web-marketplace/src/components/organisms/BasicInfoForm.tsx
diff --git a/web-marketplace/src/components/organisms/BasicInfoForm/BasicInfoForm.constants.ts b/web-marketplace/src/components/organisms/BasicInfoForm/BasicInfoForm.constants.ts
@@ -0,0 +1,5 @@
+export const BASIC_INFO_NAME_LABEL = 'Project name';
+export const BASIC_INFO_NAME_DESCRIPTION =
+  'This is the name of the farm, ranch, property, or conservation project.';
+export const BASIC_INFO_NAME_PLACEHOLDER = 'i.e. Sunnybrook Farms';
+export const BASIC_INFO_SIZE_LABEL = 'Size in hectares or acres';