[reactions] Styling for reactions to stories (#91)

* progress on database functions to pull genre information * pushing changes before rebase * ran prettier * finished styling genre preview card component * styling complete for genre screen, need to implement tone, topic dropdown selection logic * semi finished genre screen, need to debug drop down logic * figuring out filter context * reaction styling * Run prettier * Remove filter modal * Made reaction picker horizontal * Reactions implemented * Generalized pubsub * Fix reations * Fix home screen saved stories not working * Fix reaction bugs * Fix reaction bugs --------- Co-authored-by: Aditya Pawar <[email protected]> Co-authored-by: Aditya Pawar <[email protected]>
calblueprint · Apr 24, 2024 · 3d5abcc · 3d5abcc
1 parent a3f3530
commit 3d5abcc
Show file tree

Hide file tree

Showing 21 changed files with 406 additions and 114 deletions.
diff --git a/app.json b/app.json
@@ -17,16 +17,24 @@
       "supportsTablet": true
     },
     "android": {
+      "package": "org.calblueprint.girlswritenow",
       "softwareKeyboardLayoutMode": "pan",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      },
-      "softwareKeyboardLayoutMode": "pan"
+      }
     },
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"]
+    "plugins": ["expo-router"],
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "12e1580c-e57a-466e-bc0d-c7a051565998"
+      }
+    }
   }
 }
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",

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,13 +7,14 @@ import {
   Text,
   FlatList,
 } from 'react-native';
-import { MultiSelect } from 'react-native-element-dropdown';
+import { Dropdown, 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';

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,
   },

diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
@@ -7,6 +7,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import styles from './styles';
 import ContentCard from '../../../components/ContentCard/ContentCard';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
+
 import { fetchUsername } from '../../../queries/profiles';
 import {
   fetchFeaturedStoriesDescription,

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -230,14 +230,14 @@ function SearchScreen() {
           }}
         />
 
-        {search && (
-          <View style={styles.default}>
-            <Button
-              title="Show Filter Modal"
-              onPress={() => setFilterVisible(true)}
-            />
-          </View>
-        )}
+        {/* {search && ( */}
+        {/*   <View style={styles.default}> */}
+        {/*     <Button */}
+        {/*       title="Show Filter Modal" */}
+        {/*       onPress={() => setFilterVisible(true)} */}
+        {/*     /> */}
+        {/*   </View> */}
+        {/* )} */}
 
         {showRecents &&
           (search && searchResults.length > 0 ? (
@@ -424,11 +424,11 @@ function SearchScreen() {
           />
         )}
 
-        <FilterModal
-          isVisible={filterVisible}
-          setIsVisible={setFilterVisible}
-          title="Genre"
-        />
+        {/* <FilterModal */}
+        {/*   isVisible={filterVisible} */}
+        {/*   setIsVisible={setFilterVisible} */}
+        {/*   title="Genre" */}
+        {/* /> */}
       </View>
     </SafeAreaView>
   );

diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
@@ -16,6 +16,7 @@ import { RenderHTML } from 'react-native-render-html';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
+import ReactionPicker from '../../../components/ReactionPicker/ReactionPicker';
 import BackButton from '../../../components/BackButton/BackButton';
 import { fetchStory } from '../../../queries/stories';
 import { Story } from '../../../queries/types';
@@ -201,6 +202,9 @@ function StoryScreen() {
           >
             <Text style={globalStyles.bodyBoldUnderline}>Back To Top</Text>
           </Button>
+          <View style={styles.bottomReactionContainer}>
+            <ReactionPicker storyId={parseInt(storyId as string, 10)} />
+          </View>
         </ScrollView>
       )}
     </SafeAreaView>

diff --git a/src/app/(tabs)/story/styles.ts b/src/app/(tabs)/story/styles.ts
@@ -57,6 +57,17 @@ const styles = StyleSheet.create({
   process: {
     marginBottom: 16,
   },
+  backToTopButtonText: {
+    fontFamily: 'Manrope-Regular',
+    fontSize: 12,
+    fontWeight: '800',
+    textAlign: 'left',
+    color: 'black',
+  },
+  bottomReactionContainer: {
+    flex: 1,
+    justifyContent: 'space-around',
+  },
 });
 
 export default styles;
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
@@ -39,7 +39,7 @@ function ContentCard({
     (async () => {
       const temp = await fetchAllReactionsToStory(id);
       if (temp != null) {
-        setReactions(temp.map(r => r.reaction));
+        setReactions(temp);
         return;
       }
 
@@ -76,8 +76,8 @@ function ContentCard({
             </Text>
           </View>
           <View style={styles.buttons}>
-            <ReactionDisplay reactions={reactions ?? []} />
-            <TouchableOpacity>
+            <ReactionDisplay storyId={storyId} reactions={reactions ?? []} />
+            <TouchableOpacity style={{ marginTop: 'auto' }}>
               <SaveStoryButton storyId={storyId} />
             </TouchableOpacity>
           </View>

diff --git a/src/components/FilterModal/ChildFilter.tsx b/src/components/FilterModal/ChildFilter.tsx
@@ -0,0 +1,27 @@
+import { CheckBox } from '@rneui/themed';
+import { memo } from 'react';
+
+type ChildFilterProps = {
+  id: number;
+  name: string;
+  checked: boolean;
+  onPress: (id: number) => void;
+};
+
+function ChildFilter({ id, name, checked, onPress }: ChildFilterProps) {
+  return (
+    <CheckBox
+      textStyle={{ color: 'purple' }}
+      key={id}
+      title={name}
+      checked={checked}
+      onPress={() => onPress(id)}
+      iconType="material-community"
+      checkedIcon="checkbox-marked"
+      uncheckedIcon="checkbox-blank-outline"
+      checkedColor="black"
+    />
+  );
+}
+
+export default memo(ChildFilter);