From 512d517b520e7614d3c084aef59e6b420e845765 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <apawar@berkeley.edu>
Date: Sun, 29 Sep 2024 22:18:52 -0700
Subject: [PATCH] Fix filtering styling

---
 src/app/(tabs)/search/index.tsx                 | 11 +----------
 src/app/(tabs)/search/styles.ts                 | 10 +++++-----
 .../FilterDropdown/FilterDropdown.tsx           |  6 +++++-
 src/components/FilterDropdown/styles.ts         |  1 +
 src/components/FilterModal/FilterModal.tsx      | 17 ++++++++++-------
 src/utils/FilterContext.tsx                     |  2 +-
 6 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index 5a92f9a..452a171 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -401,7 +401,7 @@ function SearchScreen() {
           }}
         />
 
-        {((search && searchResults.length > 0) || showGenreCarousals) && (
+        {(search || showGenreCarousals) && (
           <ScrollView
             horizontal={true}
             showsHorizontalScrollIndicator={false}
@@ -441,15 +441,6 @@ function SearchScreen() {
           </ScrollView>
         )}
 
-        {/* {search && ( */}
-        {/*   <View style={styles.default}> */}
-        {/*     <Button */}
-        {/*       title="Show Filter Modal" */}
-        {/*       onPress={() => setFilterVisible(true)} */}
-        {/*     /> */}
-        {/*   </View> */}
-        {/* )} */}
-
         {showRecents &&
           (search && searchResults.length > 0 ? (
             <View style={styles.resultCounter}>
diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
index 0ae6035..7448d71 100644
--- a/src/app/(tabs)/search/styles.ts
+++ b/src/app/(tabs)/search/styles.ts
@@ -83,11 +83,10 @@ const styles = StyleSheet.create({
     textDecorationLine: 'underline',
   },
   emptySearch: {
-    display: 'flex',
-    flexDirection: 'column',
-    textAlign: 'center',
-    alignItems: 'center',
-    marginTop: '60%',
+    // display: 'flex',
+    // flexDirection: 'column',
+    // textAlign: 'center',
+    // alignItems: 'center',
   },
   cancelButton: {
     color: colors.grey,
@@ -103,6 +102,7 @@ const styles = StyleSheet.create({
     color: '#797979',
   },
   dropdownContainer: {
+    zIndex: 1,
     marginLeft: 10,
     marginTop: 13,
     marginBottom: 30,
diff --git a/src/components/FilterDropdown/FilterDropdown.tsx b/src/components/FilterDropdown/FilterDropdown.tsx
index 2806681..9051cb3 100644
--- a/src/components/FilterDropdown/FilterDropdown.tsx
+++ b/src/components/FilterDropdown/FilterDropdown.tsx
@@ -84,7 +84,11 @@ function FilterSingleDropdown({
       style={styles.dropdown}
       value={value}
       placeholderStyle={[globalStyles.body1, styles.placeholderStyle]}
-      selectedTextStyle={globalStyles.body1}
+      selectedTextStyle={[
+        globalStyles.body1,
+        styles.placeholderStyle,
+        { color: colors.black },
+      ]}
       inputSearchStyle={globalStyles.body1}
       itemTextStyle={globalStyles.body1}
       dropdownPosition="bottom"
diff --git a/src/components/FilterDropdown/styles.ts b/src/components/FilterDropdown/styles.ts
index 2ff390d..9d4eb7b 100644
--- a/src/components/FilterDropdown/styles.ts
+++ b/src/components/FilterDropdown/styles.ts
@@ -4,6 +4,7 @@ import colors from '../../styles/colors';
 
 const styles = StyleSheet.create({
   dropdown: {
+    zIndex: 1,
     borderColor: colors.darkGrey,
     flexGrow: 0,
     flexShrink: 0,
diff --git a/src/components/FilterModal/FilterModal.tsx b/src/components/FilterModal/FilterModal.tsx
index 16fc726..063e1e3 100644
--- a/src/components/FilterModal/FilterModal.tsx
+++ b/src/components/FilterModal/FilterModal.tsx
@@ -1,14 +1,17 @@
-import { BottomSheet, CheckBox } from '@rneui/themed';
-import { useCallback, useState } from 'react';
-import { View, Text, ScrollView, Pressable } from 'react-native';
+import { BottomSheet } from '@rneui/themed';
+import { useCallback } from 'react';
+import { View, Text, Pressable } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import ChildFilter from './ChildFilter';
-import ParentFilter from './ParentFilter';
 import styles from './styles';
 import Icon from '../../../assets/icons';
-import { TagFilter, useFilter } from '../../utils/FilterContext';
+import {
+  useFilter,
+  type ParentFilter as ParentFilterType,
+} from '../../utils/FilterContext';
+import ParentFilter from './ParentFilter';
 
 type FilterModalProps = {
   isVisible: boolean;
@@ -59,7 +62,7 @@ function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
             <FlatList
               data={Array.from(filters)}
               renderItem={({ item }) => {
-                const [_, parentFilter] = item;
+                const [_, parentFilter] = item as [number, ParentFilterType];
                 return (
                   <>
                     <ParentFilter
@@ -71,7 +74,7 @@ function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
 
                     <FlatList
                       data={parentFilter.children}
-                      renderItem={({ item }) => {
+                      renderItem={({ item }: { item: any }) => {
                         return (
                           <ChildFilter
                             id={item.id}
diff --git a/src/utils/FilterContext.tsx b/src/utils/FilterContext.tsx
index fa999b8..131d530 100644
--- a/src/utils/FilterContext.tsx
+++ b/src/utils/FilterContext.tsx
@@ -25,7 +25,7 @@ export type TagFilter = {
   parent: number | null;
 };
 
-type ParentFilter = { children: TagFilter[] } & TagFilter;
+export type ParentFilter = { children: TagFilter[] } & TagFilter;
 
 export interface FilterState {
   filters: Map<number, ParentFilter>;