Skip to content

Commit

Permalink
.
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophertorres1
christophertorres1 committed Jan 10, 2025
1 parent f96663f commit 92bfcca
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 215 deletions.
281 changes: 148 additions & 133 deletions src/components/SearchFilter/SearchFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import React, { useEffect, useState } from 'react';
import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import {
Modal,
SafeAreaView,
ScrollView,
Text,
TouchableOpacity,
View,
} from 'react-native';
import { Checkbox } from '@/components/Checkbox/Checkbox';
import { Dropdown } from '@/components/Dropdown/Dropdown';
import { TreeSpeciesShape } from '@/types/tree_species';
Expand Down Expand Up @@ -154,152 +161,160 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
};

return (
<Modal
animationType="slide"
transparent={true}
visible={isOpen}
onRequestClose={onClose}
>
<View style={styles.filterBackground}>
<View style={styles.filterContainer}>
<View style={styles.grabber}></View>
<View style={styles.filterHeading}>
<Text style={styles.headerText}>Filter Trees</Text>
<TouchableOpacity style={styles.resetButton} onPress={resetFilters}>
<Text style={styles.resetText}>Reset</Text>
</TouchableOpacity>
</View>
<SafeAreaView>
<Modal
animationType="slide"
transparent={true}
visible={isOpen}
onRequestClose={onClose}
>
<View style={styles.filterBackground}>
<View style={styles.filterContainer}>
<View style={styles.grabber}></View>
<View style={styles.filterHeading}>
<Text style={styles.headerText}>Filter Trees</Text>
<TouchableOpacity
style={styles.resetButton}
onPress={resetFilters}
>
<Text style={styles.resetText}>Reset</Text>
</TouchableOpacity>
</View>

<ScrollView horizontal={false} showsHorizontalScrollIndicator={false}>
{/* Height */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Height</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.small}
onChange={() => toggleHeightFilter('small')}
/>
<Text style={styles.checkboxLabel}>Small (&lt; 40')</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.medium}
onChange={() => toggleHeightFilter('medium')}
/>
<Text style={styles.checkboxLabel}>Medium (40 - 60')</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.large}
onChange={() => toggleHeightFilter('large')}
/>
<Text style={styles.checkboxLabel}>Large (60' +)</Text>
<ScrollView
horizontal={false}
showsHorizontalScrollIndicator={false}
>
{/* Height */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Height</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.small}
onChange={() => toggleHeightFilter('small')}
/>
<Text style={styles.checkboxLabel}>Small (&lt; 40')</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.medium}
onChange={() => toggleHeightFilter('medium')}
/>
<Text style={styles.checkboxLabel}>Medium (40 - 60')</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeHeightFilters.large}
onChange={() => toggleHeightFilter('large')}
/>
<Text style={styles.checkboxLabel}>Large (60' +)</Text>
</View>
</View>
</View>
</View>

{/* Tree Shape */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Tree Shape</Text>
<Dropdown
options={Object.values(TreeSpeciesShape)}
value={selectedTreeShape}
onChange={setSelectedTreeShape}
/>
</View>
{/* Tree Shape */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Tree Shape</Text>
<Dropdown
options={Object.values(TreeSpeciesShape)}
value={selectedTreeShape}
onChange={setSelectedTreeShape}
/>
</View>

{/* Litter Type */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Litter Type</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeLitterFilters.wet}
onChange={() => toggleLitterFilter('wet')}
/>
<Text style={styles.checkboxLabel}>Wet Fruit</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeLitterFilters.dry}
onChange={() => toggleLitterFilter('dry')}
/>
<Text style={styles.checkboxLabel}>Dry Fruit</Text>
{/* Litter Type */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Litter Type</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeLitterFilters.wet}
onChange={() => toggleLitterFilter('wet')}
/>
<Text style={styles.checkboxLabel}>Wet Fruit</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeLitterFilters.dry}
onChange={() => toggleLitterFilter('dry')}
/>
<Text style={styles.checkboxLabel}>Dry Fruit</Text>
</View>
</View>
</View>
</View>

{/* Water Use */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Water Use</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.low}
onChange={() => toggleWaterFilter('low')}
/>
<Text style={styles.checkboxLabel}>Low</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.moderate}
onChange={() => toggleWaterFilter('moderate')}
/>
<Text style={styles.checkboxLabel}>Moderate</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.high}
onChange={() => toggleWaterFilter('high')}
/>
<Text style={styles.checkboxLabel}>High</Text>
{/* Water Use */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Water Use</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.low}
onChange={() => toggleWaterFilter('low')}
/>
<Text style={styles.checkboxLabel}>Low</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.moderate}
onChange={() => toggleWaterFilter('moderate')}
/>
<Text style={styles.checkboxLabel}>Moderate</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeWaterFilters.high}
onChange={() => toggleWaterFilter('high')}
/>
<Text style={styles.checkboxLabel}>High</Text>
</View>
</View>
</View>
</View>

{/* Other Properties */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Other Properties</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.californiaNative}
onChange={() => toggleOtherFilter('californiaNative')}
/>
<Text style={styles.checkboxLabel}>California native</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.evergreen}
onChange={() => toggleOtherFilter('evergreen')}
/>
<Text style={styles.checkboxLabel}>Evergreen</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.powerlineFriendly}
onChange={() => toggleOtherFilter('powerlineFriendly')}
/>
<Text style={styles.checkboxLabel}>Powerline friendly</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.lowRootDamage}
onChange={() => toggleOtherFilter('lowRootDamage')}
/>
<Text style={styles.checkboxLabel}>Low root damage</Text>
{/* Other Properties */}
<View style={styles.filterProperties}>
<Text style={styles.subheaderText}>Other Properties</Text>
<View style={styles.checkboxGroup}>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.californiaNative}
onChange={() => toggleOtherFilter('californiaNative')}
/>
<Text style={styles.checkboxLabel}>California native</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.evergreen}
onChange={() => toggleOtherFilter('evergreen')}
/>
<Text style={styles.checkboxLabel}>Evergreen</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.powerlineFriendly}
onChange={() => toggleOtherFilter('powerlineFriendly')}
/>
<Text style={styles.checkboxLabel}>Powerline friendly</Text>
</View>
<View style={styles.checkboxContainer}>
<Checkbox
isChecked={activeOtherFilters.lowRootDamage}
onChange={() => toggleOtherFilter('lowRootDamage')}
/>
<Text style={styles.checkboxLabel}>Low root damage</Text>
</View>
</View>
</View>
</View>
</ScrollView>
</ScrollView>

{/* Complete Button */}
<TouchableOpacity style={styles.completeButton} onPress={onClose}>
<Text style={styles.completeButtonText}>Complete</Text>
</TouchableOpacity>
{/* Complete Button */}
<TouchableOpacity style={styles.completeButton} onPress={onClose}>
<Text style={styles.completeButtonText}>Complete</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</Modal>
</SafeAreaView>
);
};
2 changes: 1 addition & 1 deletion src/screens/TreeSpeciesSearch/TreeSpeciesSearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export const TreeSpeciesSearchScreen: React.FC<
);

return (
<SafeAreaView style={styles.safeContainer}>
<SafeAreaView>
<View style={styles.headerContainer}>
<Text style={styles.headerText}>
{isUserAdmin ? 'All Trees' : 'Available Trees'}
Expand Down
74 changes: 0 additions & 74 deletions styles.ts
View file

This file was deleted.

Loading

0 comments on commit 92bfcca

Please sign in to comment.