fixed tree data rendering

calblueprint · Dec 7, 2024 · 609ddf8 · 609ddf8
1 parent 8223ce2
commit 609ddf8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/src/screens/TreeSearch/TreeSearch.tsx b/src/screens/TreeSearch/TreeSearch.tsx
@@ -28,7 +28,7 @@ export default function TreeSearch({ navigation }: TreeSearchProps) {
         setLoading(true);
         const { data, error } = await supabase
           .from('trees')
-          .select('tree_id, species, sold, species(image_link)');
+          .select('tree_id, species, sold, species (name, image_link)');
 
         if (error) {
           throw new Error(`Error fetching tree data: ${error.message}`);
@@ -37,24 +37,28 @@ export default function TreeSearch({ navigation }: TreeSearchProps) {
         const treeCounts: Record<string, number> = data.reduce(
           (acc, tree) => {
             if (!tree.sold) {
-              acc[tree.species] = (acc[tree.species] || 0) + 1;
+              acc[tree.species.name] = (acc[tree.species.name] || 0) + 1;
             }
             return acc;
           },
           {} as Record<string, number>,
         );
 
-        const treesData: TreeItem[] = Object.keys(treeCounts).map(species => {
-          const treeSample = data.find(tree => tree.species === species);
+        const treesData: TreeItem[] = Object.keys(treeCounts).map(
+          speciesName => {
+            const treeSample = data.find(
+              tree => tree.species.name === speciesName,
+            );
 
-          return {
-            tree_id: treeSample?.tree_id || 0,
-            species: species,
-            image_link: treeSample?.species?.image_link || '',
-            sold: false,
-            stockCount: treeCounts[species],
-          };
-        });
+            return {
+              tree_id: treeSample?.tree_id || 0,
+              species: speciesName,
+              image_link: treeSample?.species?.image_link || '',
+              sold: false,
+              stockCount: treeCounts[speciesName],
+            };
+          },
+        );
 
         setTrees(treesData);
         setError(null);

diff --git a/src/screens/TreeSearch/styles.ts b/src/screens/TreeSearch/styles.ts
@@ -5,6 +5,8 @@ const { width, height } = Dimensions.get('window');
 
 const responsivePadding = width * 0.05;
 
+const screenWidth = Dimensions.get('window').width;
+
 export const styles = StyleSheet.create({
   backgroundContainer: {
     flexGrow: 1,
@@ -45,11 +47,13 @@ export const styles = StyleSheet.create({
   // Tree Cards
 
   treeGrid: {
-    gap: 10,
+    width: '100%',
+    gap: 16,
+    paddingHorizontal: width * 0.04,
     flexDirection: 'row',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    width: '100%',
+    alignItems: 'flex-start',
   },
 
   treeCard: {
@@ -63,7 +67,7 @@ export const styles = StyleSheet.create({
 
   treeImage: {
     width: '100%',
-    height: 135,
+    height: 150,
     flexShrink: 0,
     borderRadius: 5,
     resizeMode: 'cover',