diff --git a/src/components/Species.js b/src/components/Species.js index 6913af037..7d98568f3 100644 --- a/src/components/Species.js +++ b/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) => ( )} diff --git a/src/components/SpeciesTable.js b/src/components/SpeciesTable.js index c55633f25..848031b1c 100644 --- a/src/components/SpeciesTable.js +++ b/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); }; diff --git a/src/components/Verify.js b/src/components/Verify.js index b69a89416..4109fc7f6 100644 --- a/src/components/Verify.js +++ b/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) { diff --git a/src/models/species.js b/src/models/species.js index ffcc5997d..516a16a5d 100644 --- a/src/models/species.js +++ b/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 diff --git a/src/models/species.test.js b/src/models/species.test.js index 2c07ef0cb..c5b56f526 100644 --- a/src/models/species.test.js +++ b/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' }); });