feat: Edit Growers: Allow user to specify Grower Image URL Greenstand…

…#845 (Greenstand#1039) * fix: changin the grower property in useEffect imageUrl for image_url * feat: create a input to choose a img with a custom url * fix: deleting my console.log * fix(changes): change requested and fix constant in ImageScroller * fix(changes): changes requested and fix error handle in CustomUrl * fix(changes): changes requested about .ENVs and updategrowers * fix(changes): changes Attributes in growerUpdate * fix(changes): changes in api growerupdate and organization_id in editgrower * fix(changes): creating a new Object in api growers
gwynndp · Mar 12, 2023 · 104fa36 · 104fa36
1 parent 84a09cd
commit 104fa36
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 19 deletions.
diff --git a/.env.development b/.env.development
@@ -1,7 +1,7 @@
 REACT_APP_WEBMAP_DOMAIN=https://beta-map.treetracker.org
 REACT_APP_API_ROOT=https://dev-k8s.treetracker.org/api/admin
 REACT_APP_EARNINGS_ROOT=https://dev-k8s.treetracker.org/earnings
-REACT_APP_FIELD_DATA_ROOT=https://dev-k8s.treetracker.org/field-data
+REACT_APP_FIELD_DATA_API_ROOT=https://dev-k8s.treetracker.org/field-data
 REACT_APP_GROWER_QUERY_API_ROOT=https://dev-k8s.treetracker.org/grower-account-query
 REACT_APP_IMAGES_API_ROOT=https://dev-k8s.treetracker.org/images
 REACT_APP_MESSAGING_ROOT=https://dev-k8s.treetracker.org/messaging

diff --git a/.env.production b/.env.production
@@ -1,10 +1,11 @@
 REACT_APP_WEBMAP_DOMAIN=https://beta-map.treetracker.org
 REACT_APP_API_ROOT=https://prod-k8s.treetracker.org/api/admin
 REACT_APP_EARNINGS_ROOT=https://prod-k8s.treetracker.org/earnings
+REACT_APP_FIELD_DATA_API_ROOT=https://prod-k8s.treetracker.org/field-data
 REACT_APP_GROWER_QUERY_API_ROOT=https://prod-k8s.treetracker.org/grower-account-query
 REACT_APP_IMAGES_API_ROOT=https://prod-k8s.treetracker.org/images
 REACT_APP_MESSAGING_ROOT=https://prod-k8s.treetracker.org/messaging
 REACT_APP_QUERY_API_ROOT=https://prod-k8s.treetracker.org/query
 REACT_APP_REPORTING_API_ROOT=https://prod-k8s.treetracker.org/reporting
 REACT_APP_REGION_API_ROOT=https://prod-k8s.treetracker.org/regions
-REACT_APP_TREETRACKER_API_ROOT=https://prod-k8s.treetracker.org/treetracker
+REACT_APP_TREETRACKER_API_ROOT=https://prod-k8s.treetracker.org/treetracker
diff --git a/.env.staging b/.env.staging
@@ -1,6 +1,7 @@
 REACT_APP_WEBMAP_DOMAIN=https://beta-map.treetracker.org
 REACT_APP_API_ROOT=https://prod-k8s.treetracker.org/api/admin
 REACT_APP_EARNINGS_ROOT=https://prod-k8s.treetracker.org/earnings
+REACT_APP_FIELD_DATA_API_ROOT=https://prod-k8s.treetracker.org/field-data
 REACT_APP_GROWER_QUERY_API_ROOT=https://prod-k8s.treetracker.org/grower-account-query
 REACT_APP_IMAGES_API_ROOT=https://prod-k8s.treetracker.org/images
 REACT_APP_MESSAGING_ROOT=https://prod-k8s.treetracker.org/messaging

diff --git a/.env.test b/.env.test
@@ -1,6 +1,7 @@
 REACT_APP_WEBMAP_DOMAIN=https://beta-map.treetracker.org
 REACT_APP_API_ROOT=https://test-k8s.treetracker.org/api/admin
 REACT_APP_EARNINGS_ROOT=https://test-k8s.treetracker.org/earnings
+REACT_APP_FIELD_DATA_API_ROOT=https://test-k8s.treetracker.org/field-data
 REACT_APP_GROWER_QUERY_API_ROOT=https://test-k8s.treetracker.org/grower-account-query
 REACT_APP_IMAGES_API_ROOT=https://test-k8s.treetracker.org/images
 REACT_APP_MESSAGING_ROOT=https://test-k8s.treetracker.org/messaging
@@ -11,3 +12,4 @@ REACT_APP_TREETRACKER_API_ROOT=https://test-k8s.treetracker.org/treetracker
 REACT_APP_ENABLE_CAPTURE_MATCHING=true
 REACT_APP_ENABLE_MESSAGING=true
 REACT_APP_ENABLE_TOOLTIPS=true
+
diff --git a/src/api/growers.js b/src/api/growers.js
@@ -2,7 +2,7 @@ import { handleResponse, handleError, makeQueryString } from './apiUtils';
 import { session } from '../models/auth';
 // import log from 'loglevel';
 
-const FIELD_DATA_API = process.env.REACT_APP_FIELD_DATA_API_ROOT;
+const TREETRACKER_API = process.env.REACT_APP_TREETRACKER_API_ROOT;
 const QUERY_API = process.env.REACT_APP_QUERY_API_ROOT;
 
 export default {
@@ -89,15 +89,17 @@ export default {
         growerUpdate = { ...growerUpdate, organizationId: null };
       }
       const { id } = growerUpdate;
-      const growerQuery = `${FIELD_DATA_API}/grower-accounts/${id}`;
+      const growerQuery = `${TREETRACKER_API}/grower_accounts/${id}`;
 
+      let newBody = Object.assign({}, growerUpdate);
+      delete newBody.id;
       return fetch(growerQuery, {
         method: 'PATCH',
         headers: {
           'content-type': 'application/json',
           Authorization: session.token,
         },
-        body: JSON.stringify(growerUpdate),
+        body: JSON.stringify(newBody),
       }).then(handleResponse);
     } catch (error) {
       handleError(error);

diff --git a/src/components/EditGrower.js b/src/components/EditGrower.js
@@ -48,25 +48,35 @@ const EditGrower = (props) => {
   const [growerUpdate, setGrowerUpdate] = useState(null);
   const [loadingGrowerImages, setLoadingGrowerImages] = useState(false);
   const [saveInProgress, setSaveInProgress] = useState(false);
-
+  const [customImageUrl, setCustomImageUrl] = useState(null);
+  const [customImageUrlError, setCustomImageUrlError] = useState({
+    label: '',
+    error: false,
+  });
+  const regex = /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i;
   useEffect(() => {
     async function loadGrowerImages() {
       if (grower?.id) {
         setLoadingGrowerImages(true);
         const selfies = await growerContext.getGrowerSelfies(grower.id);
         setLoadingGrowerImages(false);
-
         setGrowerImages([
-          ...(grower.imageUrl ? [grower.imageUrl] : []),
-          ...(selfies || []).filter((img) => img !== grower.imageUrl),
+          customImageUrl === '' ? null : customImageUrl,
+          ...(grower.image_url ? [grower.image_url] : []),
+          ...(selfies || []).filter((img) => img != grower.image_url),
         ]);
       }
     }
-
+    setCustomImageUrl(null);
     setGrowerUpdate(null);
     loadGrowerImages();
   }, [grower]);
-
+  function isImgURL(url) {
+    if (typeof url === 'object') {
+      return url === null ? false : regex.test(url.image_url);
+    }
+    return regex.test(url);
+  }
   async function handleSave() {
     if (growerUpdate) {
       setSaveInProgress(true);
@@ -80,8 +90,25 @@ const EditGrower = (props) => {
     onClose();
   }
 
+  function handleCustomUrlError(url) {
+    if (url === '' || isImgURL(url)) {
+      setCustomImageUrlError({
+        error: false,
+        label: '',
+      });
+
+      return;
+    }
+    if (!isImgURL(url)) {
+      setCustomImageUrlError({
+        error: true,
+        label: 'Please insert a valid Image URL',
+      });
+    }
+  }
   function handleCancel() {
     setGrowerUpdate(null);
+    setCustomImageUrl(null);
     onClose();
   }
 
@@ -92,7 +119,6 @@ const EditGrower = (props) => {
     const changed = Object.keys(newGrower).some((key) => {
       return newGrower[key] !== grower[key];
     });
-
     changed ? setGrowerUpdate(newGrower) : setGrowerUpdate(null);
   }
 
@@ -104,11 +130,11 @@ const EditGrower = (props) => {
   const inputs = [
     [
       {
-        attr: 'firstName',
+        attr: 'first_name',
         label: 'First Name',
       },
       {
-        attr: 'lastName',
+        attr: 'last_name',
         label: 'Last Name',
       },
     ],
@@ -127,15 +153,31 @@ const EditGrower = (props) => {
       <DialogContent>
         <Grid container direction="column" className={classes.container}>
           <ImageScroller
-            images={growerImages}
-            selectedImage={growerUpdate?.imageUrl || grower.imageUrl}
+            images={[
+              customImageUrl === '' ? null : customImageUrl,
+              ...growerImages,
+            ].filter((e) => e !== null)}
+            selectedImage={growerUpdate?.image_url || grower.image_url}
             loading={loadingGrowerImages}
             blankMessage="No grower images available"
             imageRotation={
               growerUpdate?.imageRotation || grower.imageRotation || 0
             }
             onSelectChange={handleChange}
           />
+          <TextField
+            className={classes.textInput}
+            label="Image Custom URL"
+            helperText={customImageUrlError.label}
+            error={customImageUrlError.error}
+            onChange={(e) => {
+              handleCustomUrlError(e.target.value);
+              if (isImgURL(e.target.value)) {
+                setCustomImageUrl(e.target.value);
+                handleChange('image_url', e.target.value);
+              } else setCustomImageUrl(null);
+            }}
+          />
           {inputs.map((row, rowIdx) => (
             <Grid
               item
@@ -175,7 +217,7 @@ const EditGrower = (props) => {
           </Typography>
 
           <SelectOrg
-            orgId={getValue('organizationId')}
+            orgId={getValue('organization_id')}
             defaultOrgs={[
               {
                 id: ORGANIZATION_NOT_SET,
@@ -185,7 +227,7 @@ const EditGrower = (props) => {
               },
             ]}
             handleSelection={(org) => {
-              handleChange('organizationId', org?.id || null);
+              handleChange('organization_id', org?.id || null);
             }}
           />
         </Grid>

diff --git a/src/components/ImageScroller.js b/src/components/ImageScroller.js
@@ -122,7 +122,7 @@ export default function ImageScroller(props) {
   }
 
   function handleImageChange(img) {
-    onSelectChange('imageUrl', img);
+    onSelectChange('image_url', img);
     if (images.length > 1) {
       setRotation(0);
     }