feat: disable species creation from Verify and reduce species count queries

src/components/Species.js

@@ -27,14 +27,10 @@ function Species(props) {
       getOptionLabel={(option) => option.name}
       style={{ width: 300 }}
       onChange={(_event, value) => {
-        props.speciesDispatch.onChange((value && value.name) || '');
-      }}
-      onInputChange={(_event, value) => {
-        props.speciesDispatch.onChange(value || '');
+        props.speciesDispatch.setSelectedSpecies(value);
       }}
       className={props.classes.root}
-      freeSolo={true}
-      inputValue={props.speciesState.speciesInput}
+      value={props.speciesState.selectedSpecies}
       renderInput={(params) => (
         <TextField {...params} placeholder="e.g. Mango" variant="outlined" />
       )}

src/components/SpeciesTable.js

@@ -401,7 +401,7 @@ const EditModal = ({
         name: speciesEdit.name,
         desc: speciesEdit.desc,
       });
-      loadSpeciesList();
+      loadSpeciesList(true);
       setSpeciesEdit(undefined);
     }
   };
@@ -482,7 +482,7 @@ const CombineModal = ({
 
     setShow(false);
     await combineSpecies({ combine: selected, name, desc });
-    loadSpeciesList();
+    loadSpeciesList(true);
     setName('');
     setDesc('');
   };
@@ -560,7 +560,7 @@ const DeleteDialog = ({
 }) => {
   const handleDelete = async () => {
     await deleteSpecies({ id: speciesEdit.id });
-    loadSpeciesList();
+    loadSpeciesList(true);
     setOpenDelete(false);
     setSpeciesEdit(undefined);
   };

src/components/Verify.js

@@ -253,7 +253,7 @@ const Verify = (props) => {
 
   function resetApprovalFields() {
     props.tagDispatch.setTagInput([]);
-    props.speciesDispatch.setSpeciesInput('');
+    props.speciesDispatch.setSelectedSpecies(null);
   }
 
   async function handleSubmit(approveAction) {
@@ -263,29 +263,7 @@ const Verify = (props) => {
       window.alert('Please select one or more captures');
       return;
     }
-    /*
-     * check species
-     */
-    const isNew = await props.speciesDispatch.isNewSpecies();
-    if (isNew) {
-      const answer = await new Promise((resolve) => {
-        if (
-          window.confirm(
-            `The species ${props.speciesState.speciesInput} is a new one, create it?`,
-          )
-        ) {
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      });
-      if (!answer) {
-        return;
-      } else {
-        //create new species
-        await props.speciesDispatch.createSpecies();
-      }
-    }
+
     const speciesId = await props.speciesDispatch.getSpeciesId();
     if (speciesId) {
       approveAction.speciesId = speciesId;
@@ -304,6 +282,7 @@ const Verify = (props) => {
       resetApprovalFields();
     }
     props.verifyDispatch.loadCaptureImages();
+    props.speciesDispatch.updateSpeciesCount(approveAction.speciesId);
   }
 
   async function handleShowPlanterDetail(e, capture) {

src/models/species.js

@@ -9,8 +9,7 @@ const log = loglevel.getLogger('../models/species');
 const species = {
   state: {
     speciesList: [],
-    speciesInput: '',
-    speciesDesc: '',
+    selectedSpecies: null,
   },
   reducers: {
     setSpeciesList(state, speciesList) {
@@ -22,79 +21,52 @@ const species = {
         speciesList: sortedSpeciesList,
       };
     },
-    setSpeciesInput(state, text) {
+    setSelectedSpecies(state, selectedSpecies) {
       return {
         ...state,
-        speciesInput: text,
-      };
-    },
-    setSpeciesDesc(state, text) {
-      return {
-        ...state,
-        speciesDesc: text,
+        selectedSpecies,
       };
     },
   },
   effects: {
-    async loadSpeciesList() {
+    async loadSpeciesList(forceReload = false, state) {
+      if (state.species.speciesList.length && !forceReload) {
+        return;
+      }
       const speciesList = await api.getSpecies();
+      // Initially set the species list without counts
+      this.setSpeciesList(speciesList);
       log.debug('load species from api:', speciesList.length);
-      const sepcieListWithCount = await Promise.all(
-        speciesList.map(async (species) => {
-          let captureCount = await api.getCaptureCountPerSpecies(species.id);
-          species.captureCount = captureCount.count;
-          return species;
-        }),
-      );
-      this.setSpeciesList(sepcieListWithCount);
-    },
-    onChange(text) {
-      console.log('on change:"', text, '"');
-      this.setSpeciesInput(text);
     },
-    isNewSpecies(payload, state) {
-      //if there are some input, and it don't exist, then new species
-      if (!state.species.speciesInput) {
-        log.debug('empty species, false');
-        return false;
+    async updateSpeciesCount(speciesId, state) {
+      if (speciesId == null) {
+        return;
       }
-      log.debug(
-        'to find species %s in list:%d',
-        state.species.speciesInput,
-        state.species.speciesList.length,
-      );
-      return state.species.speciesList.every(
-        (c) =>
-          c.name.toLowerCase() !== state.species.speciesInput.toLowerCase(),
-      );
+      const captureCount = await api.getCaptureCountPerSpecies(speciesId);
+      const speciesList = state.species.speciesList.map((species) => {
+        if (species.id === speciesId) {
+          return {
+            ...species,
+            captureCount: captureCount.count,
+          };
+        } else {
+          return species;
+        }
+      });
+      this.setSpeciesList(speciesList);
     },
     async createSpecies(payload, state) {
-      const species = await api.createSpecies(
-        payload || {
-          name: state.species.speciesInput,
-          desc: '',
-        },
-      );
+      const species = await api.createSpecies(payload);
       console.debug('created new species:', species);
       //update the list
       this.setSpeciesList([species, ...state.species.speciesList]);
       return species;
     },
     /*
-     * to get the species id according the input
+     * to get the selected species id
      */
     getSpeciesId(payload, state) {
-      if (state.species.speciesInput) {
-        return state.species.speciesList.reduce((a, c) => {
-          if (a) {
-            return a;
-          } else if (c.name === state.species.speciesInput) {
-            return c.id;
-          } else {
-            return a;
-          }
-        }, undefined);
-      }
+      return state.species.selectedSpecies?.id;
     },
     /*
      * to edit the species

src/models/species.test.js

@@ -63,9 +63,8 @@ describe('species', () => {
         expect(speciesNames).toStrictEqual(['apple', 'Pine']);
       });
 
-      describe('input: water melon, create species', () => {
+      describe('create species', () => {
         beforeEach(async () => {
-          await store.dispatch.species.onChange('water melon');
           await store.dispatch.species.createSpecies({ name: 'water melon' });
         });