From 37e2e862d4680481daf9e4f4d60f2260e7f05aa9 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <apawar@berkeley.edu>
Date: Sat, 7 Dec 2024 11:14:30 -0800
Subject: [PATCH] Changes to display value

---
 src/components/Dropdown/Dropdown.tsx | 11 +++++++----
 src/components/TreeEdit/TreeEdit.tsx | 24 +++++++++++++++++-------
 src/types/tree.ts                    |  7 +++++++
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 0b4fb98..d1d379d 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -8,17 +8,20 @@ type DropdownProps<T extends string[]> = {
   options: T;
   setValue: (value: T[number]) => any;
   value: string;
+  displayValue?: (s: string) => string;
 };
 
 type Option = {
-  i: number;
+  label: string;
   value: string;
+  i: number;
 };
 
 function Dropdown<T extends string[]>({
   options,
   setValue,
   value,
+  displayValue = s => s,
 }: DropdownProps<T>) {
   return (
     <View>
@@ -33,10 +36,10 @@ function Dropdown<T extends string[]>({
         dropdownPosition="bottom"
         iconStyle={styles.iconStyle}
         data={options.map((option: T[number], i: number) => {
-          return { i, value: option };
+          return { i, label: displayValue(option), value: option };
         })}
         maxHeight={400}
-        labelField="value"
+        labelField="label"
         valueField="value"
         placeholder="Select..."
         value={value}
@@ -57,7 +60,7 @@ function Dropdown<T extends string[]>({
                 },
               ]}
             >
-              {item.value}
+              {item.label}
             </Text>
           );
         }}
diff --git a/src/components/TreeEdit/TreeEdit.tsx b/src/components/TreeEdit/TreeEdit.tsx
index 60dfc29..4b2db0a 100644
--- a/src/components/TreeEdit/TreeEdit.tsx
+++ b/src/components/TreeEdit/TreeEdit.tsx
@@ -7,7 +7,12 @@ import SvgRepeat from '@/icons/Repeat';
 import SvgUser from '@/icons/User';
 import colors from '@/styles/colors';
 import { updateTree } from '@/supabase/queries/trees';
-import { Tree, TreeHealth, TreeReservedFor } from '@/types/tree';
+import {
+  Tree,
+  TreeHealth,
+  TreeProductionStatus,
+  TreeReservedFor,
+} from '@/types/tree';
 import Dropdown from '../Dropdown/Dropdown';
 import styles from './styles';
 
@@ -25,6 +30,8 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
       text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),
     );
 
+  const displayValue = (s: string) => titleCase(s.replace('_', ' '));
+
   const saveTreeData = async () => {
     setIsEditing(false);
     if (typeof treeData.row !== 'number') return;
@@ -108,6 +115,7 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
           {isEditing ? (
             <Dropdown
               options={Object.values(TreeHealth)}
+              displayValue={displayValue}
               setValue={value =>
                 setTreeData({ ...treeData, health_status: value })
               }
@@ -117,7 +125,7 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
             <View style={styles.iconTextView}>
               <SvgHeart />
               <Text style={[styles.displayText, styles.greenText]}>
-                {titleCase(treeData.health_status ?? '')}
+                {displayValue(treeData.health_status ?? '')}
               </Text>
             </View>
           )}
@@ -127,17 +135,18 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
           <Text style={styles.label}>Production Status</Text>
           {isEditing ? (
             <Dropdown
-              options={Object.values(TreeReservedFor)}
+              options={Object.values(TreeProductionStatus)}
+              displayValue={displayValue}
               setValue={value =>
-                setTreeData({ ...treeData, reserved_for: value })
+                setTreeData({ ...treeData, production_status: value })
               }
-              value={treeData.reserved_for ?? ''}
+              value={treeData.production_status ?? ''}
             />
           ) : (
             <View style={styles.iconTextView}>
               <SvgRepeat />
               <Text style={[styles.displayText, styles.greenText]}>
-                {titleCase(treeData.reserved_for ?? '')}
+                {displayValue(treeData.reserved_for ?? '')}
               </Text>
             </View>
           )}
@@ -148,6 +157,7 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
           {isEditing ? (
             <Dropdown
               options={Object.values(TreeReservedFor)}
+              displayValue={displayValue}
               setValue={value =>
                 setTreeData({ ...treeData, reserved_for: value })
               }
@@ -157,7 +167,7 @@ export default function TreeEdit({ treeData, setTreeData }: TreeEditProps) {
             <View style={styles.iconTextView}>
               <SvgUser />
               <Text style={[styles.displayText, styles.greenText]}>
-                {titleCase(treeData.reserved_for ?? '')}
+                {displayValue(treeData.reserved_for ?? '')}
               </Text>
             </View>
           )}
diff --git a/src/types/tree.ts b/src/types/tree.ts
index 5472fd7..599198c 100644
--- a/src/types/tree.ts
+++ b/src/types/tree.ts
@@ -11,6 +11,7 @@ export type Tree = {
   sold?: boolean;
   reserved?: boolean;
   reserved_for?: TreeReservedFor;
+  production_status?: TreeProductionStatus;
   street_ready?: boolean;
   required_action?: string;
   source?: string;
@@ -28,4 +29,10 @@ export enum TreeHealth {
 export enum TreeReservedFor {
   Resident = 'resident',
   CommunityPlanting = 'community_planting',
+  Sold = 'sold',
+}
+
+export enum TreeProductionStatus {
+  InProduction = 'in_production',
+  StreetReady = 'street_ready',
 }