feat: refactor capture tagging UX Greenstand#995 (Greenstand#1014)

* feat: refactor capture tagging UX Greenstand#995 * feat: refactor capture tagging UX Greenstand#995 * feat: refactor capture tagging UX Greenstand#995 * feat: refactor capture tagging UX Greenstand#995 --------- Co-authored-by: Nick Charlton <[email protected]>
gwynndp · Feb 4, 2023 · e541c49 · e541c49
1 parent 659bc87
commit e541c49
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/src/components/CaptureTags.js b/src/components/CaptureTags.js
@@ -122,6 +122,26 @@ const CaptureTags = (props) => {
     tagsContext.setTagInput(result);
   };
 
+  const mainSuggestions = [
+    { name: 'simple_leaf' },
+    { name: 'mangrove' },
+    { name: 'acacia_like' },
+    { name: 'fruit' },
+    { name: 'timber' },
+    { name: 'complex_leaf' },
+    { name: 'conifer' },
+    { name: 'palm' },
+  ];
+
+  const secondarySuggestions = tagsContext.tagList.filter((t) => {
+    const tagName = t.name.toLowerCase();
+    return (
+      (textFieldInput.length === 0 ||
+        tagName.startsWith(textFieldInput.toLowerCase())) &&
+      !tagsContext.tagInput.find((i) => i.toLowerCase() === tagName)
+    );
+  });
+
   return (
     <Autosuggest
       data-testid="tag-autosuggest"
@@ -132,19 +152,17 @@ const CaptureTags = (props) => {
         suggestion: classes.suggestion,
       }}
       renderInputComponent={renderInput}
-      suggestions={tagsContext.tagList.filter((t) => {
-        const tagName = t.name.toLowerCase();
-        return (
-          (textFieldInput.length === 0 ||
-            tagName.startsWith(textFieldInput.toLowerCase())) &&
-          !tagsContext.tagInput.find((i) => i.toLowerCase() === tagName)
-        );
-      })}
+      suggestions={
+        textFieldInput === '' ? mainSuggestions : secondarySuggestions
+      }
       onSuggestionsFetchRequested={() => {}}
       onSuggestionsClearRequested={() => {}}
       renderSuggestionsContainer={renderSuggestionsContainer}
       getSuggestionValue={getSuggestionValue}
       renderSuggestion={renderSuggestion}
+      shouldRenderSuggestions={() => {
+        return true;
+      }}
       onSuggestionSelected={(e, { suggestionValue }) => {
         handleAddChip(suggestionValue);
         e.preventDefault();

diff --git a/src/components/SidePanel.js b/src/components/SidePanel.js
@@ -24,16 +24,6 @@ import { getDistance } from 'geolib';
 // const log = loglevel.getLogger('./SidePanel.js');
 
 const SIDE_PANEL_WIDTH = 315;
-const CAP_APP_TAG = [
-  { value: 'simple_leaf', label: 'Simple leaf' },
-  { value: 'complex_leaf', label: 'Complex leaf' },
-  { value: 'acacia_like', label: 'Acacia-like' },
-  { value: 'conifer', label: 'Conifer' },
-  { value: 'fruit', label: 'Fruit' },
-  { value: 'mangrove', label: 'Mangrove' },
-  { value: 'palm', label: 'Palm' },
-  { value: 'timber', label: 'Timber' },
-];
 const CAP_MORPH_TAG = [
   { value: 'seedling', label: 'Seedling' },
   { value: 'direct_seedling', label: 'Direct seedling' },
@@ -173,10 +163,6 @@ function SidePanel(props) {
     );
   };
 
-  const captureApprovalTags = CAP_APP_TAG.map((tag) => {
-    return radioPrototype(tag, setCaptureApprovalTag);
-  });
-
   const captureMorphologyTags = CAP_MORPH_TAG.map((tag) => {
     return radioPrototype(tag, setMorphology);
   });
@@ -290,14 +276,9 @@ function SidePanel(props) {
               </Box>
 
               <Box mt={1}>
-                <Typography variant="h6">Additional tags</Typography>
-                <Box mt={1}>
+                <Typography variant="h6">Tags</Typography>
+                <Box mt={1} sx={{ paddingBottom: '23px' }}>
                   <CaptureTags placeholder="Add other text tags" />
-                  <Box mt={4}>
-                    <RadioGroup value={captureApprovalTag}>
-                      {captureApprovalTags}
-                    </RadioGroup>
-                  </Box>
                 </Box>
               </Box>
             </>

diff --git a/src/components/Verify.js b/src/components/Verify.js
@@ -318,12 +318,13 @@ const Verify = (props) => {
     }
 
     /*
-     * if approved, add captureApprovalTag to tagInput, create new tags, and return all the applied tags
+     * if approved, create new tags, and return all the applied tags
      */
     if (approveAction.isApproved) {
-      const tags = await tagsContext.createTags(
-        approveAction.captureApprovalTag
-      );
+      const tags = await tagsContext
+        .createTags
+        //approveAction.captureApprovalTag
+        ();
       approveAction.tags = tags.map((t) => t.id);
       delete approveAction.captureApprovalTag;
     }

diff --git a/src/context/TagsContext.js b/src/context/TagsContext.js
@@ -34,12 +34,12 @@ export function TagsProvider(props) {
   /*
    * check for new tags in tagInput and add them to the database
    */
-  const createTags = async (newTag) => {
+  const createTags = async () => {
     const newTagTemplate = {
       isPublic: orgId ? false : true,
       owner_id: orgId,
     };
-    const promises = [...tagInput, newTag].map(async (t) => {
+    const promises = [...tagInput].map(async (t) => {
       const existingTag = tagList.find((tag) => tag.name === t);
       if (!existingTag) {
         return api.createTag({ ...newTagTemplate, name: t });