Merge branch 'main' into adi/deployment

calblueprint · Apr 25, 2024 · 9fbe3e7 · 9fbe3e7
2 parents ba514f9 + 6f14c80
commit 9fbe3e7
Show file tree

Hide file tree

Showing 38 changed files with 1,352 additions and 345 deletions.
diff --git a/assets/icons.tsx b/assets/icons.tsx
@@ -4,10 +4,12 @@ import { SvgXml } from 'react-native-svg';
 
 export type IconType =
   | 'home_outline'
+  | 'share_outline'
   | 'document_outline'
   | 'search_outline'
   | 'close_modal_button'
   | 'red_x'
+  | 'share_outline'
   | 'green_check'
   | 'hide_password'
   | 'grey_dot'
@@ -21,6 +23,7 @@ export type IconType =
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
+  share_outline: <Ionicons name="share-outline" size={23} color="gray" />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   settings_gear: <Ionicons name="settings-outline" size={32} />,
@@ -110,7 +113,6 @@ const IconSvgs: Record<IconType, React.ReactElement> = {
           </svg>`}
     />
   ),
-
   home_inactive: (
     <SvgXml
       xml={`<svg

diff --git a/assets/save_story.png b/assets/save_story.png
diff --git a/assets/saved_story.png b/assets/saved_story.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,9 @@
     "@emotion/styled": "^11.11.0",
     "@expo-google-fonts/manrope": "^0.2.3",
     "@expo/vector-icons": "^13.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@mui/icons-material": "^5.14.13",
     "@mui/material": "^5.14.13",
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
@@ -38,6 +41,7 @@
     "expo": "~49.0.11",
     "expo-constants": "~14.4.2",
     "expo-font": "~11.4.0",
+    "expo-image": "~1.3.5",
     "expo-linking": "~5.0.2",
     "expo-router": "^2.0.0",
     "expo-status-bar": "~1.6.0",
@@ -52,6 +56,7 @@
     "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
+    "react-native-hyperlink": "^0.0.22",
     "react-native-ionicons": "^4.6.5",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-neat-date-picker": "^1.4.12",
@@ -69,11 +74,11 @@
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",
     "use-debounce": "^10.0.0",
-    "validator": "^13.11.0",
-    "expo-image": "~1.3.5"
+    "validator": "^13.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@iconify/react": "^4.1.1",
     "@types/react": "~18.2.14",
     "@types/react-native": "^0.72.3",
     "@types/react-native-htmlview": "^0.16.1",

diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -4,6 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Icon from '../../../assets/icons';
 import colors from '../../styles/colors';
+import globalStyles from '../../styles/globalStyles';
 
 function HomeIcon({ color }: { color: string }) {
   return (
@@ -36,7 +37,7 @@ function TabNav() {
     <Tabs
       backBehavior="history"
       screenOptions={{
-        tabBarLabelStyle: { fontSize: 14 },
+        tabBarLabelStyle: globalStyles.body1,
         tabBarHideOnKeyboard: true,
         tabBarActiveTintColor: colors.citrus,
         tabBarInactiveTintColor: colors.fadedBlack,

diff --git a/src/app/(tabs)/genre/_layout.tsx b/src/app/(tabs)/genre/_layout.tsx
@@ -1,10 +1,14 @@
 import { Stack } from 'expo-router';
 
+import { FilterContextProvider } from '../../../utils/FilterContext';
+
 function StackLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-    </Stack>
+    <FilterContextProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
+    </FilterContextProvider>
   );
 }
 

diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
@@ -7,18 +7,19 @@ import {
   Text,
   FlatList,
 } from 'react-native';
-import { MultiSelect } from 'react-native-element-dropdown';
-import { Icon } from 'react-native-elements';
+
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
+
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import { fetchGenreStoryById } from '../../../queries/genres';
 import { fetchStoryPreviewByIds } from '../../../queries/stories';
 import { StoryPreview, GenreStories } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
+import { FilterDropdown } from '../../../components/FilterDropdown/FilterDropdown';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -215,42 +216,6 @@ function GenreScreen() {
     );
   };
 
-  const renderFilterDropdown = (
-    placeholder: string,
-    value: string[],
-    data: string[],
-    setter: React.Dispatch<React.SetStateAction<string[]>>,
-  ) => {
-    return (
-      <MultiSelect
-        mode="default"
-        style={[styles.dropdown, styles.secondDropdown]}
-        value={value}
-        placeholderStyle={styles.placeholderStyle}
-        selectedTextStyle={globalStyles.body1}
-        inputSearchStyle={globalStyles.body1}
-        itemTextStyle={globalStyles.body1}
-        dropdownPosition="bottom"
-        itemContainerStyle={styles.itemContainer}
-        iconStyle={styles.iconStyle}
-        data={data.map(topic => {
-          return { label: topic, value: topic };
-        })}
-        renderSelectedItem={() => <View />}
-        maxHeight={400}
-        labelField="label"
-        valueField="value"
-        placeholder={placeholder}
-        renderRightIcon={() => <Icon name="arrow-drop-down" type="material" />}
-        onChange={item => {
-          if (item) {
-            setter(item);
-          }
-        }}
-      />
-    );
-  };
-
   const renderNoStoryText = () => {
     return (
       <View>
@@ -304,18 +269,18 @@ function GenreScreen() {
         </View>
 
         <View style={[styles.dropdownContainer, styles.firstDropdown]}>
-          {renderFilterDropdown(
-            'Tone',
-            selectedTonesForFiltering,
-            toneFilterOptions,
-            setSelectedTonesForFiltering,
-          )}
-          {renderFilterDropdown(
-            'Topic',
-            selectedTopicsForFiltering,
-            topicFilterOptions,
-            setSelectedTopicsForFiltering,
-          )}
+          <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)/genre/styles.tsx b/src/app/(tabs)/genre/styles.tsx
@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import colors from '../../../styles/colors';
+import globalStyles from '../../../styles/globalStyles';
 
 const styles = StyleSheet.create({
   textSelected: {
@@ -12,7 +13,6 @@ const styles = StyleSheet.create({
     width: '100%',
     flex: 1,
   },
-
   flatListStyle: {
     paddingTop: 15,
   },