💁‍♂️ refactor Header component (#40)

# Purpose

<!--What is this pull request for?--> 

<!--Linking to the original ticket is a perfectly viable option-->

#38 

Also added button to bottom row on homescreen which opens the newly
designed winner modal

src/components/EditFeastForm.js

@@ -65,7 +65,7 @@ const submitFeast = async (selectedFeast, formData, user) => {
 }
 
 function EditFeastForm({ props }) {
-  const { onFeastEdited } = props
+  const { onFeastEdited, navigation } = props
   const selectedFeast = feastState.useValue()
   const { user } = useAuthContext()
   const [showAlert, setShowAlert] = useState(false)
@@ -116,7 +116,7 @@ function EditFeastForm({ props }) {
           rounded="full"
           variant="ghost"
           colorScheme="rose"
-          // onPress={() => }
+          onPress={() => navigation.goBack()}
         />
         {editFeast.isLoading ? (
           <LoadingIndicator />

src/components/Header.js

@@ -1,68 +1,69 @@
 import React from 'react'
-import { View, Text, TouchableOpacity } from 'react-native'
+import { View, Text, TouchableOpacity, Pressable, Image } from 'react-native'
 import tw from 'twrnc'
 import {
   AntDesign,
   Entypo,
   Ionicons,
   FontAwesome,
   Fontisto,
+  MaterialIcons,
   MaterialCommunityIcons,
 } from '@expo/vector-icons'
-import { useAppContext } from '../context/AppProvider'
 import { useNavigation } from '@react-navigation/native'
+import { useAppContext } from '../context/AppProvider'
+import { useAuthContext } from '../context/AuthProvider'
 
 const Header = () => {
   const navigation = useNavigation()
+  const { user } = useAuthContext()
   const { color, activeColor } = useAppContext()
-  const [activeScreen, setActiveScreen] = React.useState('Feasts')
+  const [activeScreen, setActiveScreen] = React.useState('Home')
 
   return (
-    <View style={tw`flex-row justify-around w-full p-2.5`}>
-      <TouchableOpacity
-        onPress={() => {
-          setActiveScreen('Home')
-          navigation.navigate('Home')
-        }}>
-        <Fontisto
-          name="tinder"
-          size={30}
-          color={activeScreen === 'Home' ? activeColor : color}
-        />
-      </TouchableOpacity>
-      <TouchableOpacity
+    <View style={tw`flex-row items-center justify-between mx-2 -mt-3 p-5`}>
+      <Pressable
         onPress={() => {
           setActiveScreen('Feasts')
           navigation.navigate('Feasts')
         }}>
-        <MaterialCommunityIcons
+        <MaterialIcons name="restaurant-menu" size={33} color={activeColor} />
+        {/* <MaterialCommunityIcons
           name="star-four-points"
           size={30}
-          color={activeScreen === 'Feasts' ? activeColor : color}
-        />
-      </TouchableOpacity>
-      <TouchableOpacity
+          color={activeColor}
+          // color={activeScreen === 'Feasts' ? activeColor : color}
+        /> */}
+      </Pressable>
+      <Pressable
         onPress={() => {
-          setActiveScreen('Winner')
-          navigation.navigate('Winner')
-        }}>
-        <Ionicons
-          name="ios-chatbubbles"
-          size={30}
-          color={activeScreen === 'Winner' ? activeColor : color}
+          setActiveScreen('Home')
+          navigation.navigate('Home')
+        }}
+        style={tw`rounded-full`}>
+        <Image
+          style={tw`w-16 h-16`}
+          source={require('../../assets/images/flamelogo.png')}
         />
-      </TouchableOpacity>
-      <TouchableOpacity
+      </Pressable>
+      <Pressable
         onPress={() => {
           setActiveScreen('Profile')
           navigation.navigate('Profile')
         }}>
-        <FontAwesome
-          name="user"
-          size={30}
-          color={activeScreen === 'Profile' ? activeColor : color}
-        />
-      </TouchableOpacity>
+        {user?.image ? (
+          <Image
+            source={{ uri: user.image }}
+            style={tw`w-10 h-10 rounded-full`}
+          />
+        ) : (
+          <FontAwesome
+            name="user"
+            size={30}
+            color={activeScreen === 'Profile' ? activeColor : color}
+          />
+        )}
+      </Pressable>
     </View>
   )
 }

src/navigation/index.js

@@ -51,13 +51,13 @@ const Navigation = () => {
           </>
         ) : (
           <>
+            <Stack.Screen name="Home" component={HomeScreen} />
             <Stack.Screen name="Feasts" component={FeastScreen} />
             <Stack.Group screenOptions={{ presentation: 'modal' }}>
               <Stack.Screen name="NewFeast" component={NewFeastScreen} />
               <Stack.Screen name="EditFeast" component={EditFeastScreen} />
+              <Stack.Screen name="Winner" component={WinnerScreen} />
             </Stack.Group>
-            <Stack.Screen name="Home" component={HomeScreen} />
-            <Stack.Screen name="Winner" component={WinnerScreen} />
             <Stack.Screen name="Profile" component={ProfileScreen} />
           </>
         )}

src/screens/EditFeastScreen.js

@@ -297,7 +297,7 @@ const EditFeastScreen = ({ navigation }) => {
   return (
     <ScrollView showsVerticalScrollIndicator={false}>
       <Center w="100%" padding={10}>
-        <EditFeastForm props={{ onFeastEdited }} />
+        <EditFeastForm props={{ onFeastEdited, navigation }} />
       </Center>
     </ScrollView>
   )

src/screens/HomeScreen.js

@@ -7,6 +7,7 @@ import {
   Image,
   StyleSheet,
   Alert,
+  Pressable,
 } from 'react-native'
 // import Animated from 'react-native-reanimated'
 import tw from 'twrnc'
@@ -39,7 +40,7 @@ const HomeScreen = ({ route, navigation }) => {
   const swipeRef = useRef(null)
   const { user } = useAuthContext()
   const feastId = route.params?.feast
-  // const feast = feastState.useValue()
+  const feast = feastState.useValue()
   // const feastId = feast.id
   const places = useFeast()
   const queryClient = useQueryClient()
@@ -115,7 +116,7 @@ const HomeScreen = ({ route, navigation }) => {
       {/* Cards */}
       <View style={tw`flex-1 -mt-6`}>
         <Text style={tw`text-2xl text-center mt-4 font-bold`}>
-          {feastId ? feastId.name : 'No Feast Selected'}
+          {feast ? feast.name : 'No Feast Selected'}
         </Text>
         {places.length > 0 ? (
           <Swiper
@@ -211,17 +212,22 @@ const HomeScreen = ({ route, navigation }) => {
         (yassMutation.isLoading && <Text>Submitting Vote...</Text>)}
 
       {/* Bottom Buttons */}
-      <View style={tw`flex flex-row justify-evenly`}>
-        <TouchableOpacity
+      <View style={tw`flex flex-row justify-evenly mb-1`}>
+        <Pressable
           onPress={() => swipeRef.current.swipeLeft()}
           style={tw`items-center justify-center rounded-full w-16 h-16 bg-red-200`}>
           <Entypo name="cross" size={24} color="red" />
-        </TouchableOpacity>
-        <TouchableOpacity
+        </Pressable>
+        <Pressable
+          onPress={() => navigation.navigate('Winner')}
+          style={tw`items-center justify-center rounded-full w-16 h-16 bg-purple-200`}>
+          <Ionicons name="flash" size={30} color="#A65CD2" />
+        </Pressable>
+        <Pressable
           onPress={() => swipeRef.current.swipeRight()}
           style={tw`items-center justify-center rounded-full w-16 h-16 bg-green-200`}>
           <AntDesign name="heart" size={24} color="green" />
-        </TouchableOpacity>
+        </Pressable>
       </View>
     </SafeAreaView>
   )

src/screens/WinnerScreen.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { View, Text, Pressable, Image, SafeAreaView } from 'react-native'
+import { Center, IconButton, CloseIcon, Box } from 'native-base'
 import tw from 'twrnc'
 import { useQuery } from '@tanstack/react-query'
 import { queryKeys } from '../lib/constants'
@@ -18,12 +19,12 @@ const getFeastPulse = async (currentFeast, user) => {
     },
   )
 
-  console.warn(
-    'getFeastPulse result: STATUS =>',
-    JSON.stringify(response.status),
-    'DATA =>',
-    JSON.stringify(response.data),
-  )
+  // console.warn(
+  //   'getFeastPulse result: STATUS =>',
+  //   JSON.stringify(response.status),
+  //   'DATA =>',
+  //   JSON.stringify(response.data),
+  // )
 
   return response.data
 }
@@ -55,43 +56,43 @@ const WinnerScreen = ({ navigation, route }) => {
 
   return (
     <SafeAreaView style={[tw`h-full bg-red-500 pt-20`, { opacity: 0.89 }]}>
-      <View style={tw`justify-center px-10 pt-20`}>
-        <Image
-          style={tw`h-20 w-full`}
-          source={{ uri: 'https://links.papareact.com/mg9' }}
-        />
-      </View>
-
       {winner ? (
         <>
-          <Text style={tw`text-white text-center text-xl mt-5`}>
-            {winner
-              ? `${winner.name} wins best place to eat for the ${currentFeast.name} feast!`
-              : `The winning place will be determined after ${currentFeast.name}'s voting closes.`}
-          </Text>
+          <Box safeArea flex={1} w="100%">
+            <IconButton
+              icon={<CloseIcon size="sm" color="white" />}
+              position="absolute"
+              top={3}
+              right={3}
+              rounded="full"
+              variant="ghost"
+              colorScheme="white"
+              onPress={() => navigation.goBack()}
+            />
+            <View style={tw`justify-center px-10 pt-20`}>
+              <Image
+                style={tw`h-20 w-full`}
+                source={{ uri: 'https://links.papareact.com/mg9' }}
+              />
+            </View>
 
-          <Pressable
-            style={tw`bg-white m-5 px-10 py-8 rounded-full mt-20`}
-            onPress={() => refetch()}>
-            <Text style={tw`text-center`}>Check Feast Pulse</Text>
-          </Pressable>
+            <Text style={tw`text-white text-center text-xl m-5`}>
+              {winner
+                ? `${winner.name} wins best place to eat for the ${currentFeast.name} feast!`
+                : `The winning place will be determined after ${currentFeast.name}'s voting closes.`}
+            </Text>
 
-          <View style={tw`flex-row justify-evenly mt-5`}>
-            <Image
-              style={tw`h-32 w-32 rounded-full`}
-              source={{
-                uri: winner.photos
-                  ? winner.photos[0]
-                  : 'https://loremflickr.com/640/480/food',
-              }}
-            />
-            <Image
-              style={tw`h-32 w-32 rounded-full`}
-              source={{
-                uri: currentFeast.image ? currentFeast.image : user.image,
-              }}
-            />
-          </View>
+            <Center>
+              <Image
+                style={tw`h-50 w-50 rounded-full`}
+                source={{
+                  uri: winner.photos
+                    ? winner.photos[0]
+                    : 'https://loremflickr.com/640/480/food',
+                }}
+              />
+            </Center>
+          </Box>
         </>
       ) : isError ? (
         <Text>Error: {error.message}</Text>
@@ -100,13 +101,19 @@ const WinnerScreen = ({ navigation, route }) => {
       ) : (
         <Text>Not ready...</Text>
       )}
-
       <View>{isFetching ? <Text>Refreshing...</Text> : null}</View>
 
+      {/* // probably don't need a check button? just go back to feasts ? */}
+
+      {/* <Pressable
+        style={tw`bg-white m-5 px-10 py-8 rounded-full mt-20`}
+        onPress={() => refetch()}>
+        <Text style={tw`text-center`}>Check Feast Pulse</Text>
+      </Pressable> */}
       <Pressable
         style={tw`bg-white m-5 px-10 py-8 rounded-full mt-20`}
         onPress={() => navigation.navigate('Feasts')}>
-        <Text style={tw`text-center`}>Share result</Text>
+        <Text style={tw`text-center`}>Your Feasts</Text>
       </Pressable>
     </SafeAreaView>
   )