updated directory, tree search & filter

calblueprint · Dec 11, 2024 · 2568a0d · 2568a0d
1 parent 1da5097
commit 2568a0d
Show file tree

Hide file tree

Showing 11 changed files with 479 additions and 89 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
   "dependencies": {
     "@expo/metro-runtime": "~4.0.0",
     "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/blur": "^4.4.1",
+    "@react-native-community/checkbox": "^0.5.17",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
     "@supabase/supabase-js": "^2.45.6",

diff --git a/src/components/TreeFilter.tsx b/src/components/TreeFilter.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import CheckBox from '@react-native-community/checkbox';
+import { styles } from '../screens/TreeSearch/styles';
+
+type TreeFilterModalProps = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+// type SelectedHeightFilters = {
+//   [key: string]: boolean;
+// };
+
+const TreeFilterModal: React.FC<TreeFilterModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  // const [selectedHeightFilters, setSelectedHeightFilters] = useState<SelectedHeightFilters>({
+  //   small: false,
+  //   medium: false,
+  //   large: false,
+  // });
+
+  // const handleCheckboxChange = (filter: string) => {
+  //   setSelectedHeightFilters(prevState => ({
+  //     ...prevState,
+  //     [filter]: !prevState[filter],
+  //   }));
+  // };
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <View style={styles.filterContainer}>
+        <View style={styles.filterContent}>
+          <View style={styles.filterHeading}>
+            <Text style={styles.filterHeadingText}>Filter</Text>
+          </View>
+
+          {/* <View style={styles.checkboxContainer}>
+            <View style={styles.checkboxRow}>
+              <CheckBox
+                value={selectedHeightFilters.small}
+                onValueChange={() => handleCheckboxChange('small')}
+              />
+              <Text style={styles.checkboxLabel}>Small(< 40’) </Text>
+            </View>
+
+            <View style={styles.checkboxRow}>
+              <CheckBox
+                value={selectedHeightFilters.medium}
+                onValueChange={() => handleCheckboxChange('medium')}
+              />
+              <Text style={styles.checkboxLabel}>Medium (40 - 60’)</Text>
+            </View>
+
+            <View style={styles.checkboxRow}>
+              <CheckBox
+                value={selectedHeightFilters.Large}
+                onValueChange={() => handleCheckboxChange('large')}
+              />
+              <Text style={styles.checkboxLabel}>Large(60’ +) </Text>
+          </View> */}
+
+          <TouchableOpacity style={styles.completeButton} onPress={onClose}>
+            <Text style={styles.completeButtonText}>Complete</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default TreeFilterModal;
diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx
@@ -1,24 +1,35 @@
-import React from 'react';
-import { TextInput, View } from 'react-native';
+import React, { useState } from 'react';
+import { TextInput, TouchableOpacity, View } from 'react-native';
+import TreeFilterModal from '@/components/TreeFilter';
+import Search from '@/icons/Search';
+import Filter from '@/icons/Sort';
 import { styles } from '../screens/TreeSearch/styles';
 
-interface SearchBarProps {
+type SearchBarProps = {
   value: string;
   onChange: (text: string) => void;
-}
+};
 
 const SearchBar: React.FC<SearchBarProps> = ({ value, onChange }) => {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const openModal = () => setModalVisible(true);
+  const closeModal = () => setModalVisible(false);
+
   return (
     <View style={styles.searchContainer}>
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <View style={styles.inputContainer}>
+        <Search />
         <TextInput
           style={styles.searchBarInput}
-          placeholder="Search species..."
+          placeholder="Find a species..."
           value={value}
           onChangeText={onChange}
-          autoCapitalize="none"
-          autoCorrect={false}
         />
+        <TouchableOpacity onPress={openModal}>
+          <Filter style={styles.filterIconContainer} />
+        </TouchableOpacity>
+        <TreeFilterModal visible={modalVisible} onClose={closeModal} />
       </View>
     </View>
   );

diff --git a/src/icons/ScanBarcode.tsx → src/icons/Scanner.tsx b/src/icons/ScanBarcode.tsx → src/icons/Scanner.tsx
diff --git a/src/screens/Contact/Contact.tsx b/src/screens/Contact/Contact.tsx
@@ -67,8 +67,8 @@ export default function Contact({ navigation }: ContactProps) {
   console.log('Rendering Contact screen');
 
   return (
-    <View style={styles.backgroundContainer}>
-      <View style={styles.headerContainer}>
+    <View style={styles.contactContainer}>
+      <View style={styles.contactHeaderContainer}>
         <Image source={require('assets/OCF.png')} />
         <Text style={styles.contactHeading}>Contact Us</Text>
       </View>
@@ -112,7 +112,9 @@ export default function Contact({ navigation }: ContactProps) {
       />
 
       <View style={styles.logoutContainer}>
-        <Text style={styles.logoutText}>Logout</Text>
+        <TouchableOpacity>
+          <Text style={styles.logoutText}>Log Out</Text>
+        </TouchableOpacity>
       </View>
     </View>
   );

diff --git a/src/screens/Contact/Directory.tsx b/src/screens/Contact/Directory.tsx
@@ -9,17 +9,78 @@ import { styles } from './styles';
 type DirectoryProps = NativeStackScreenProps<RootStackParamList, 'Directory'>;
 
 export default function Directory({ navigation }: DirectoryProps) {
+  const handleGoBack = () => {
+    navigation.navigate('Contact');
+  };
+
   return (
-    <View style={styles.backgroundContainer}>
-      <TouchableOpacity
-        style={styles.backButton}
-        onPress={() => navigation.goBack()}
-      >
+    <ScrollView style={styles.directoryContainer}>
+      <TouchableOpacity style={styles.backButton} onPress={handleGoBack}>
         <BackArrow style={styles.backIcon} />
       </TouchableOpacity>
-      <View>
-        <View></View>
+
+      <View style={styles.directoryHeader}>
+        <Call style={styles.callIcon} />
+        <Text style={styles.contactHeading}>Directory</Text>
+      </View>
+
+      <View style={styles.directoryContent}>
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryHeading}>Nursery</Text>
+          <Text style={styles.directorySubHeading}>
+            For inventory and availability
+          </Text>
+          <Text style={styles.directoryTextLight}>408-123-2345 Ext: 123</Text>
+          <Text style={styles.directoryTextLight}>
+            [email protected]
+          </Text>
+        </View>
+
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryHeading}>Planting</Text>
+          <Text style={styles.directorySubHeading}>
+            For delivery and planting status{' '}
+          </Text>
+        </View>
+
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryTextBold}>San Jose</Text>
+          <Text style={styles.directoryTextLight}>408-123-2345 Ext: 123</Text>
+          <Text style={styles.directoryTextLight}>
+            [email protected]{' '}
+          </Text>
+        </View>
+
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryTextBold}>
+            Campbell, Morgan Hill, Saratoga, Gilroy
+          </Text>
+          <Text style={styles.directoryTextLight}>408-123-2345 Ext: 123</Text>
+          <Text style={styles.directoryTextLight}>
+            [email protected]{' '}
+          </Text>
+        </View>
+
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryHeading}>Tree Care</Text>
+          <Text style={styles.directorySubHeading}>
+            Inquiries of already-planted trees
+          </Text>
+          <Text style={styles.directoryTextLight}>408-123-2345 Ext: 123</Text>
+          <Text style={styles.directoryTextLight}>
+            [email protected]{' '}
+          </Text>
+        </View>
+
+        <View style={styles.directoryDetailsContainer}>
+          <Text style={styles.directoryHeading}>Lawn Busters</Text>
+          <Text style={styles.directorySubHeading}>Lawn conversions</Text>
+          <Text style={styles.directoryTextLight}>408-123-2345 Ext: 123</Text>
+          <Text style={styles.directoryTextLight}>
+            [email protected]{' '}
+          </Text>
+        </View>
       </View>
-    </View>
+    </ScrollView>
   );
 }
diff --git a/src/screens/Contact/styles.ts b/src/screens/Contact/styles.ts
@@ -4,14 +4,14 @@ import colors from '@/styles/colors';
 const { height } = Dimensions.get('window');
 
 export const styles = StyleSheet.create({
-  backgroundContainer: {
+  contactContainer: {
     flexGrow: 1,
     flexDirection: 'column',
     backgroundColor: 'white',
     alignItems: 'center',
   },
 
-  headerContainer: {
+  contactHeaderContainer: {
     paddingTop: height * 0.1,
     height: height / 3,
     flexDirection: 'column',
@@ -122,7 +122,65 @@ export const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
 
-  backButton: {},
+  // Directory
 
-  backIcon: {},
+  directoryContainer: {
+    paddingTop: height * 0.07,
+    paddingLeft: 42,
+    paddingRight: 42,
+    paddingBottom: 42,
+  },
+
+  directoryHeader: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  backButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  backIcon: {
+    width: 24,
+    height: 24,
+  },
+
+  callIcon: {
+    width: 64,
+    height: 64,
+    paddingTop: 45,
+    paddingBottom: 45,
+  },
+
+  directoryContent: {
+    gap: 29,
+  },
+
+  directoryDetailsContainer: {
+    gap: 10,
+  },
+
+  directoryHeading: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: 'black',
+  },
+
+  directorySubHeading: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: colors.gray2,
+  },
+
+  directoryTextBold: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: colors.gray2,
+  },
+
+  directoryTextLight: {
+    fontSize: 14,
+    color: colors.gray3,
+  },
 });