TreeInfo and SpeciesInfo fixes

calblueprint · Dec 13, 2024 · f9d2b4f · f9d2b4f
1 parent a264f2a
commit f9d2b4f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 14 deletions.
diff --git a/src/components/SpeciesDisplay/SpeciesDisplay.tsx b/src/components/SpeciesDisplay/SpeciesDisplay.tsx
@@ -22,6 +22,10 @@ export default function SpeciesDisplay({
   speciesData,
   treeData,
 }: SpeciesDisplayProps) {
+  const uniqueLocations = treeData.filter(
+    (tree, index, self) =>
+      index === self.findIndex(t => t.bank === tree.bank && t.row === tree.row),
+  );
   return (
     <View style={styles.main}>
       <Text style={styles.text}>{speciesData.description}</Text>
@@ -112,8 +116,11 @@ export default function SpeciesDisplay({
         <>
           <Text style={styles.header}>Location</Text>
           <View style={styles.locations}>
-            {treeData?.map(tree => (
-              <View style={styles.locationEntry} key={tree.tree_id}>
+            {uniqueLocations?.map((tree, index) => (
+              <View
+                style={styles.locationEntry}
+                key={`${tree.bank}-${tree.row}-${index}`}
+              >
                 <SvgLocationPin />
                 <Text style={styles.propertyText}>
                   Bank #{tree.bank ?? 0} {'  '}|{'  '} Row #{tree.row ?? 0}

diff --git a/src/components/TreeDisplay/TreeDisplay.tsx b/src/components/TreeDisplay/TreeDisplay.tsx
@@ -14,8 +14,16 @@ import styles from './styles';
 
 type TreeDisplayProps = {
   treeData: Tree;
+  allTreesData: Tree[];
 };
-export default function TreeDisplay({ treeData }: TreeDisplayProps) {
+export default function TreeDisplay({
+  treeData,
+  allTreesData,
+}: TreeDisplayProps) {
+  const uniqueLocations = allTreesData.filter(
+    (t, index, self) =>
+      index === self.findIndex(u => u.bank === t.bank && u.row === t.row),
+  );
   return (
     <View style={styles.main}>
       <Text style={styles.text}>{treeData.species?.description}</Text>
@@ -37,13 +45,18 @@ export default function TreeDisplay({ treeData }: TreeDisplayProps) {
 
       <Text style={styles.header}>Location</Text>
       <View style={styles.locations}>
-        <View style={styles.locationEntry}>
-          <SvgLocationPin />
-          <Text style={styles.propertyText}>
-            Bank #{treeData.bank} {'  '}|{'  '} Row #{treeData.row}
-            {/* TODO: Needs to support range of rows */}
-          </Text>
-        </View>
+        {uniqueLocations.map((location, index) => (
+          <View
+            style={styles.locationEntry}
+            key={`${location.bank}-${location.row}-${index}`}
+          >
+            <SvgLocationPin />
+            <Text style={styles.propertyText}>
+              Bank #{location.bank} {'  '}|{'  '} Row #{location.row}
+              {/* TODO: Needs to support range of rows */}
+            </Text>
+          </View>
+        ))}
       </View>
 
       <Text style={styles.header}>Properties</Text>

diff --git a/src/screens/SpeciesInfo/SpeciesInfo.tsx b/src/screens/SpeciesInfo/SpeciesInfo.tsx
@@ -29,7 +29,7 @@ export default function SpeciesInfoScreen({
   route,
   navigation,
 }: SpeciesInfoScreenProps) {
-  const speciesName = route.params?.speciesName ?? 'California Buckwheat';
+  const speciesName = route.params?.speciesName ?? '';
   const [speciesData, setSpeciesData] = useState<Partial<Species>>({
     name: speciesName,
   });
@@ -61,7 +61,7 @@ export default function SpeciesInfoScreen({
             style={styles.imageBg}
           >
             <View style={styles.topBar}>
-              <TouchableOpacity>
+              <TouchableOpacity onPress={() => navigation.goBack()}>
                 <SvgBackArrow />
               </TouchableOpacity>
               <TouchableOpacity

diff --git a/src/screens/TreeInfo/TreeInfo.tsx b/src/screens/TreeInfo/TreeInfo.tsx
@@ -13,6 +13,7 @@ import ToggleSwitch from '@/components/ToggleSwitch/ToggleSwitch';
 import TreeDisplay from '@/components/TreeDisplay/TreeDisplay';
 import TreeEdit from '@/components/TreeEdit/TreeEdit';
 import colors from '@/styles/colors';
+import { getAllTreesForSpecies } from '@/supabase/queries/species';
 import { getTreeInfo } from '@/supabase/queries/trees';
 import { HomeStackParamList } from '@/types/navigation';
 import { Tree } from '@/types/tree';
@@ -29,14 +30,19 @@ export default function TreeInfoPage({ route }: TreeInfoScreenProps) {
   const [treeData, setTreeData] = useState<Tree>({
     tree_id: treeId,
   });
+  const [allTreesData, setAllTreesData] = useState<Tree[]>([]);
   const treeBgImage = treeData.species?.image_link;
 
   useEffect(() => {
     (async () => {
       const data = await getTreeInfo(treeId);
       setTreeData(data);
     })();
-  }, [treeId]);
+    (async () => {
+      const data = await getAllTreesForSpecies(treeData.species?.name ?? '');
+      setAllTreesData(data);
+    })();
+  }, [treeData.species?.name, treeId]);
 
   return (
     <View style={{ flex: 1, backgroundColor: colors.white }}>
@@ -81,7 +87,7 @@ export default function TreeInfoPage({ route }: TreeInfoScreenProps) {
             {isSpecies ? (
               <TreeEdit treeData={treeData} setTreeData={setTreeData} />
             ) : (
-              <TreeDisplay treeData={treeData} />
+              <TreeDisplay treeData={treeData} allTreesData={allTreesData} />
             )}
           </View>
         </ScrollView>

diff --git a/src/supabase/queries/trees.ts b/src/supabase/queries/trees.ts
@@ -55,6 +55,18 @@ export async function removeMultipleTrees(treeIds: string[]) {
   }
 }
 
+// Retrieves a JSON array of available tree species in the format:
+// [{ "species_name": "Oak", "image_link": "https://example.com/oak.jpg", "count": 10 }, ...]
+export async function getAvailableTreeSpecies() {
+  const { data, error } = await supabase.rpc('get_available_tree_species');
+
+  if (error) {
+    throw new Error(`Error retrieving available species: ${error.message}`);
+  }
+
+  return data;
+}
+
 // Retrieves tree info by UUID, returns properties as JSON: { "bank": null, "date": null, "health_status": null, ... }
 export async function getTreeInfo(treeId: string) {
   const { data, error } = await supabase.rpc('get_tree_by_uuid', {