Skip to content

Commit

Permalink
fix filter modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@christophertorres1
christophertorres1 committed Jan 11, 2025
1 parent 92bfcca commit 7bd11a4
Show file tree
Hide file tree
Showing 5 changed files with 186 additions and 163 deletions.
8 changes: 4 additions & 4 deletions src/components/SearchBar/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
activeFilters,
onActiveFilterChange,
}) => {
const [isFilterOpen, setIsFilterOpen] = useState(false);
const [isModalVisible, setIsModalVisible] = useState(false);

const openFilter = () => setIsFilterOpen(true);
const closeFilter = () => setIsFilterOpen(false);
const openFilter = () => setIsModalVisible(true);
const closeFilter = () => setIsModalVisible(false);

return (
<View style={styles.searchContainer}>
Expand All @@ -52,7 +52,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
</View>
</TouchableOpacity>
<SearchFilter
isOpen={isFilterOpen}
isModalVisible={isModalVisible}
onClose={closeFilter}
activeFilters={activeFilters}
onActiveFilterChange={onActiveFilterChange}
Expand Down
287 changes: 152 additions & 135 deletions src/components/SearchFilter/SearchFilter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { TreeSpeciesShape } from '@/types/tree_species';
import { styles } from './styles';

type SearchFilterProps = {
isOpen: boolean;
isModalVisible: boolean;
onClose: () => void;
activeFilters: {
height: string[];
Expand All @@ -34,7 +34,7 @@ type SearchFilterProps = {
};

export const SearchFilter: React.FC<SearchFilterProps> = ({
isOpen,
isModalVisible,
onClose,
activeFilters,
onActiveFilterChange,
Expand Down Expand Up @@ -68,6 +68,16 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
lowRootDamage: activeFilters.other.includes('lowRootDamage'),
});

const anyFiltersActive = () => {
return (
Object.values(activeHeightFilters).some(Boolean) ||
!!selectedTreeShape ||
Object.values(activeLitterFilters).some(Boolean) ||
Object.values(activeWaterFilters).some(Boolean) ||
Object.values(activeOtherFilters).some(Boolean)
);
};

useEffect(() => {
onActiveFilterChange({
height: Object.keys(activeHeightFilters).filter(
Expand Down Expand Up @@ -163,156 +173,163 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({
return (
<SafeAreaView>
<Modal
animationType="slide"
transparent={true}
visible={isOpen}
visible={isModalVisible}
onRequestClose={onClose}
animationType="slide"
presentationStyle="pageSheet"
>
<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}
<View style={styles.filterContainer}>
<View style={styles.grabber}></View>
<View style={styles.filterHeading}>
<Text style={styles.headerText}>Filter Trees</Text>
<TouchableOpacity
style={
anyFiltersActive()
? styles.resetButtonActive
: styles.resetButtonInactive
}
onPress={resetFilters}
>
<Text
style={
anyFiltersActive()
? styles.resetTextActive
: styles.resetTextInactive
}
>
<Text style={styles.resetText}>Reset</Text>
</TouchableOpacity>
</View>
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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</View>
</View>
</ScrollView>
</View>
</ScrollView>

{/* Complete Button */}
<TouchableOpacity style={styles.completeButton} onPress={onClose}>
<Text style={styles.completeButtonText}>Complete</Text>
</TouchableOpacity>
</View>
{/* Complete Button */}
<TouchableOpacity style={styles.completeButton} onPress={onClose}>
<Text style={styles.completeButtonText}>Complete</Text>
</TouchableOpacity>
</View>
</Modal>
</SafeAreaView>
Expand Down
Loading

0 comments on commit 7bd11a4

Please sign in to comment.