App is done

calblueprint · Apr 24, 2024 · e989663 · e989663
1 parent 32b8493
commit e989663
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 41 deletions.
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
@@ -307,8 +307,18 @@ function GenreScreen() {
         </View>
 
         <View style={[styles.dropdownContainer, styles.firstDropdown]}>
-          <FilterDropdown placeholder='Topic' value={selectedTopicsForFiltering} data={topicFilterOptions} setter={setSelectedTopicsForFiltering} />
-          <FilterDropdown placeholder='Tone' value={selectedTonesForFiltering} data={toneFilterOptions} setter={setSelectedTonesForFiltering} />
+          <FilterDropdown
+            placeholder="Topic"
+            value={selectedTopicsForFiltering}
+            data={topicFilterOptions}
+            setter={setSelectedTopicsForFiltering}
+          />
+          <FilterDropdown
+            placeholder="Tone"
+            value={selectedTonesForFiltering}
+            data={toneFilterOptions}
+            setter={setSelectedTonesForFiltering}
+          />
         </View>
 
         {genreStoryIds.length === 0 && !isLoading ? (

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -29,7 +29,10 @@ import {
 import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { GenreType } from '../genre';
-import { FilterDropdown, FilterSingleDropdown } from '../../../components/FilterDropdown/FilterDropdown';
+import {
+  FilterDropdown,
+  FilterSingleDropdown,
+} from '../../../components/FilterDropdown/FilterDropdown';
 
 const getRecentSearch = async () => {
   try {
@@ -195,7 +198,7 @@ function SearchScreen() {
       getRecentStory().then((viewed: StoryPreview[]) =>
         setRecentlyViewed(viewed),
       );
-    })().then(() => { });
+    })().then(() => {});
   }, []);
 
   useEffect(() => {
@@ -425,24 +428,39 @@ function SearchScreen() {
           <ScrollView
             horizontal={true}
             showsHorizontalScrollIndicator={false}
-            contentContainerStyle={[
-              styles.dropdownContainer,
-            ]}
+            contentContainerStyle={[styles.dropdownContainer]}
           >
-            {search
-              ?
-              <FilterDropdown placeholder='Genre' value={selectedMultipleGenresForFiltering} data={genreFilterOptions} setter={setSelectedMultipleGenresForFiltering} />
-              :
-              <FilterSingleDropdown placeholder='Genre' value={selectedGenre} data={genreFilterOptions} setter={setSelectedGenre} />
-            }
-
-            <FilterDropdown placeholder='Topic' value={selectedTopicsForFiltering} data={topicFilterOptions} setter={setSelectedTopicsForFiltering} />
-            <FilterDropdown placeholder='Tone' value={selectedTonesForFiltering} data={toneFilterOptions} setter={setSelectedTonesForFiltering} />
+            {search ? (
+              <FilterDropdown
+                placeholder="Genre"
+                value={selectedMultipleGenresForFiltering}
+                data={genreFilterOptions}
+                setter={setSelectedMultipleGenresForFiltering}
+              />
+            ) : (
+              <FilterSingleDropdown
+                placeholder="Genre"
+                value={selectedGenre}
+                data={genreFilterOptions}
+                setter={setSelectedGenre}
+              />
+            )}
 
+            <FilterDropdown
+              placeholder="Topic"
+              value={selectedTopicsForFiltering}
+              data={topicFilterOptions}
+              setter={setSelectedTopicsForFiltering}
+            />
+            <FilterDropdown
+              placeholder="Tone"
+              value={selectedTonesForFiltering}
+              data={toneFilterOptions}
+              setter={setSelectedTonesForFiltering}
+            />
           </ScrollView>
         )}
 
-
         {/* {search && ( */}
         {/*   <View style={styles.default}> */}
         {/*     <Button */}
@@ -459,8 +477,13 @@ function SearchScreen() {
                 Showing results 1-{searchResults.length}
               </Text>
 
-              <TouchableOpacity style={styles.clearFiltersButton} onPress={() => clearFilters()}>
-                <Text style={[globalStyles.bodyUnderline, styles.clearFilters]}>Clear Filters</Text>
+              <TouchableOpacity
+                style={styles.clearFiltersButton}
+                onPress={() => clearFilters()}
+              >
+                <Text style={[globalStyles.bodyUnderline, styles.clearFilters]}>
+                  Clear Filters
+                </Text>
               </TouchableOpacity>
             </View>
           ) : search && searchResults.length === 0 ? (
@@ -475,7 +498,13 @@ function SearchScreen() {
               </View>
               <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
                 Try searching by title or author,{' '}
-                <Text onPress={clearFilters} style={[globalStyles.bodyUnderline, styles.clearFilters]}>clearing filters</Text>,
+                <Text
+                  onPress={clearFilters}
+                  style={[globalStyles.bodyUnderline, styles.clearFilters]}
+                >
+                  clearing filters
+                </Text>
+                ,
               </Text>
               <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
                 or check if your spelling is correct.
@@ -648,7 +677,7 @@ function SearchScreen() {
         {/*   title="Genre" */}
         {/* /> */}
       </View>
-    </SafeAreaView >
+    </SafeAreaView>
   );
 }
 

diff --git a/src/app/(tabs)/search/styles.ts b/src/app/(tabs)/search/styles.ts
@@ -57,7 +57,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
   },
   numDisplay: {
-    marginTop: 24,
+    marginTop: 20,
     marginBottom: 8,
   },
   contentContainerRecents: {
@@ -125,12 +125,12 @@ const styles = StyleSheet.create({
     marginLeft: 45,
   },
   clearFilters: {
-    color: colors.fadedBlack
+    color: colors.fadedBlack,
   },
   clearFiltersButton: {
     marginBottom: 8,
-    marginTop: 'auto'
-  }
+    marginTop: 'auto',
+  },
 });
 
 export default styles;
diff --git a/src/components/FilterDropdown/FilterDropdown.tsx b/src/components/FilterDropdown/FilterDropdown.tsx
@@ -1,7 +1,7 @@
-import { Dropdown, MultiSelect } from "react-native-element-dropdown";
-import globalStyles from "../../styles/globalStyles";
-import styles from "./styles"
-import { View } from "react-native";
+import { Dropdown, MultiSelect } from 'react-native-element-dropdown';
+import globalStyles from '../../styles/globalStyles';
+import styles from './styles';
+import { View } from 'react-native';
 import { Icon } from 'react-native-elements';
 
 import colors from '../../styles/colors';
@@ -13,7 +13,12 @@ type FilterDropdownProps = {
   setter: React.Dispatch<React.SetStateAction<string[]>>;
 };
 
-function FilterDropdown({ placeholder, value, data, setter }: FilterDropdownProps) {
+function FilterDropdown({
+  placeholder,
+  value,
+  data,
+  setter,
+}: FilterDropdownProps) {
   return (
     <MultiSelect
       mode="default"
@@ -34,7 +39,9 @@ function FilterDropdown({ placeholder, value, data, setter }: FilterDropdownProp
       labelField="label"
       valueField="value"
       placeholder={placeholder}
-      renderRightIcon={() => <Icon color={colors.darkGrey} name="arrow-drop-down" type="material" />}
+      renderRightIcon={() => (
+        <Icon color={colors.darkGrey} name="arrow-drop-down" type="material" />
+      )}
       onChange={item => {
         if (item) {
           setter(item);
@@ -47,11 +54,16 @@ function FilterDropdown({ placeholder, value, data, setter }: FilterDropdownProp
 type FilterSingleDropdownProps = {
   placeholder: string;
   value: string;
-  data: string[]
+  data: string[];
   setter: React.Dispatch<React.SetStateAction<string>>;
-}
+};
 
-function FilterSingleDropdown({ placeholder, value, data, setter }: FilterSingleDropdownProps) {
+function FilterSingleDropdown({
+  placeholder,
+  value,
+  data,
+  setter,
+}: FilterSingleDropdownProps) {
   return (
     <Dropdown
       mode="default"
@@ -71,7 +83,9 @@ function FilterSingleDropdown({ placeholder, value, data, setter }: FilterSingle
       labelField="label"
       valueField="value"
       placeholder={placeholder}
-      renderRightIcon={() => <Icon color={colors.darkGrey} name="arrow-drop-down" type="material" />}
+      renderRightIcon={() => (
+        <Icon color={colors.darkGrey} name="arrow-drop-down" type="material" />
+      )}
       onChange={item => {
         if (item) {
           setter(item.value);
@@ -82,5 +96,3 @@ function FilterSingleDropdown({ placeholder, value, data, setter }: FilterSingle
 }
 
 export { FilterDropdown, FilterSingleDropdown };
-
-
diff --git a/src/components/FilterDropdown/styles.ts b/src/components/FilterDropdown/styles.ts
@@ -20,8 +20,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-start',
   },
-  firstDropdown: {
-  },
+  firstDropdown: {},
   iconStyle: {
     width: 20,
     height: 20,
@@ -34,7 +33,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: colors.darkGrey,
   },
-
 });
 
 export default styles;
diff --git a/src/components/GenreCard/GenreCard.tsx b/src/components/GenreCard/GenreCard.tsx
@@ -19,7 +19,9 @@ function GenreCard({ subgenres, pressFunction, cardColor }: GenreCardProps) {
   return (
     <TouchableOpacity onPress={pressFunction}>
       <View style={[styles.card, { backgroundColor: cardColor }]}>
-        <Text style={[globalStyles.subHeading1, styles.overlayText]}>{subgenres}</Text>
+        <Text style={[globalStyles.subHeading1, styles.overlayText]}>
+          {subgenres}
+        </Text>
       </View>
     </TouchableOpacity>
   );