Frontend: split species list into plants and birds

eleurent · Jan 13, 2024 · 910a97e · 910a97e
1 parent ba9c56d
commit 910a97e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/frontend/screens/Home.js b/frontend/screens/Home.js
@@ -34,7 +34,7 @@ export default function HomeScreen({ navigation }) {
                     <View style={styles.categoryRowContainer}>
                         <View style={{ flex: 1 }}></View>
                         <CategoryButton 
-                            onPress={() => navigation.navigate('SpeciesList')}
+                            onPress={() => navigation.navigate('SpeciesList', {type: 'plant'})}
                             imageSource={require('../assets/images/botany.png')}
                             label={'BOTANY'}
                         />
@@ -48,7 +48,7 @@ export default function HomeScreen({ navigation }) {
                         />
                         <View style={{ flex: 1 }}></View>
                         <CategoryButton
-                            disabled
+                            onPress={() => navigation.navigate('SpeciesList', {type: 'bird'})}
                             imageSource={require('../assets/images/ornithology.png')}
                             label={'ORNITHOLOGY'}
                         />

diff --git a/frontend/screens/ObservationSelect.js b/frontend/screens/ObservationSelect.js
@@ -15,11 +15,12 @@ const PROBABILITY_THRESHOLD = 0.01; // Minimum probability to display a candidat
 
 
 const SpeciesCandidate = (props) => {
+    imageUri = (props.item.images.size > 0 && props.item.images[0]?.url?.s) ? props.item.images[0]?.url?.s : null;
     return (
         <View style={styles.candidateContainer}>
             <Image style={styles.candidateImage}
                 resizeMode='contain'
-                source={{ uri: props.item.images[0].url.s }}
+                source={{ uri: imageUri }}
             />
             <View style={styles.textContainer}>
                 <Text style={styles.speciesName}>{props.item.species.commonNames.length ? props.item.species.commonNames[0] : props.item.species.scientificNameWithoutAuthor}</Text>
@@ -81,7 +82,7 @@ const goToSpeciesDetails = (navigation, observationData) => {
     navigation.dispatch((state) => {
         const routes = [
             { name: 'Home' },
-            { name: 'SpeciesList' },
+            { name: 'SpeciesList' , params: {type: observationData.type}},
             { name: 'SpeciesDetail', params: { id: observationData.species } },
         ];
 

diff --git a/frontend/screens/SpeciesList.js b/frontend/screens/SpeciesList.js
@@ -44,7 +44,11 @@ export default function SpeciesListScreen({ navigation, route }) {
 
     useEffect(() => {
         const fetchSpeciesList = async () => {
-            const response = await axios.get(SPECIES_LIST_URL);
+            if (!route?.params?.type) {
+                console.log('Must specify a valid species type.');
+                return;
+            }
+            const response = await axios.get(SPECIES_LIST_URL + route.params.type + '/');
             setSpeciesList(response.data);
         };