Quality of Life improvements 24-Q2

src/Navigation.tsx

@@ -31,7 +31,7 @@ export type RootStackParamList = {
     List: undefined;
     Game: undefined;
     Settings: {
-        reason?: string;
+        source?: string;
     };
     AppInfo: undefined;
     Share: undefined;

src/components/Buttons/CheckButton.test.tsx

@@ -9,7 +9,7 @@ describe('CheckButton', () => {
     const navigation = useNavigationMock();
 
     it.skip('should navigate to Game screen when pressed', async () => {
-        const { getByRole } = render(<CheckButton navigation={navigation} route={{ key: 'Settings', name: 'Settings', params: { reason: 'new_game' } }} />);
+        const { getByRole } = render(<CheckButton navigation={navigation} route={{ key: 'Settings', name: 'Settings', params: { source: 'new_game' } }} />);
         const button = getByRole('button');
         await waitFor(() => {
             fireEvent.press(button);
@@ -18,7 +18,7 @@ describe('CheckButton', () => {
     });
 
     it.skip('should navigate back a screen when pressed', async () => {
-        const { getByRole } = render(<CheckButton navigation={navigation} route={{ key: 'Settings', name: 'Settings', params: { reason: '' } }} />);
+        const { getByRole } = render(<CheckButton navigation={navigation} route={{ key: 'Settings', name: 'Settings', params: { source: '' } }} />);
         const button = getByRole('button');
         await waitFor(() => {
             fireEvent.press(button);

src/components/Buttons/CheckButton.tsx

@@ -11,7 +11,7 @@ import HeaderButton from './HeaderButton';
 
 type RouteParams = {
     Settings: {
-        reason?: string;
+        source?: string;
     };
 };
 interface Props {
@@ -24,11 +24,10 @@ const CheckButton: React.FunctionComponent<Props> = ({ navigation, route }) => {
     return (
         <HeaderButton accessibilityLabel='Save Game' onPress={async () => {
             await analytics().logEvent('save_game');
-            if (route?.params?.reason === 'new_game') {
-                navigation.navigate('Game');
+            if (route?.params?.source === 'list_screen') {
+                navigation.navigate('List');
             } else {
-                //TODO: when the game is first created, this will go back instead of to game screen
-                navigation.goBack();
+                navigation.navigate('Game');
             }
         }}>
             <Text style={{ color: systemBlue, fontSize: 20 }}>Done</Text>

src/components/Buttons/NewGameButton.tsx

@@ -35,7 +35,7 @@ const NewGameButton: React.FunctionComponent<Props> = ({ navigation }) => {
             })
         ).then(() => {
             setTimeout(() => {
-                navigation.navigate('Settings', { reason: 'new_game' });
+                navigation.navigate('Settings', { source: 'new_game' });
             }, 500);
         });
     };

src/components/Headers/GameHeader.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 import analytics from '@react-native-firebase/analytics';
 import { ParamListBase } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Text, StyleSheet, TouchableOpacity } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { Button } from 'react-native-elements';
 import { Icon } from 'react-native-elements/dist/icons/Icon';
 
-import { roundNext, roundPrevious , selectGameById } from '../../../redux/GamesSlice';
+import { roundNext, roundPrevious, selectGameById } from '../../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { systemBlue } from '../../constants';
 import AddendButton from '../Buttons/AddendButton';
@@ -38,9 +39,10 @@ const PrevRoundButton: React.FunctionComponent<PrevRoundButtonProps> = ({ prevRo
 interface NextRoundButtonProps {
     nextRoundHandler: () => void;
     visible: boolean;
+    showPlus?: boolean;
 }
 
-const NextRoundButton: React.FunctionComponent<NextRoundButtonProps> = ({ nextRoundHandler, visible }) => {
+const NextRoundButton: React.FunctionComponent<NextRoundButtonProps> = ({ nextRoundHandler, visible, showPlus = false }) => {
     return (
         <TouchableOpacity style={[styles.headerButton]}
             onPress={nextRoundHandler}>
@@ -50,6 +52,19 @@ const NextRoundButton: React.FunctionComponent<NextRoundButtonProps> = ({ nextRo
                 color={systemBlue}
                 style={{ opacity: visible ? 0 : 1 }}
             />
+            {showPlus &&
+                <Icon name="plus"
+                    type="font-awesome-5"
+                    size={7}
+                    color={systemBlue}
+                    containerStyle={{
+                        position: 'absolute',
+                        top: 9,
+                        right: 9,
+                        opacity: visible ? 0 : 1
+                    }}
+                />
+            }
         </TouchableOpacity>
     );
 };
@@ -83,20 +98,31 @@ const GameHeader: React.FunctionComponent<Props> = ({ navigation }) => {
     const nextRoundHandler = async () => {
         if (isLastRound && currentGame.locked) return;
 
+        if (isLastRound) {
+            // Stronger haptics if creating a new round
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        } else {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+
         dispatch(roundNext(currentGame.id));
-        await analytics().logEvent('round_change', {
+        analytics().logEvent('round_change', {
             game_id: currentGameId,
             source: 'next button',
+            round: roundCurrent,
         });
     };
 
     const prevRoundHandler = async () => {
         if (isFirstRound) return;
 
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+
         dispatch(roundPrevious(currentGame.id));
-        await analytics().logEvent('round_change', {
+        analytics().logEvent('round_change', {
             game_id: currentGameId,
             source: 'previous button',
+            round: roundCurrent,
         });
     };
 
@@ -109,7 +135,10 @@ const GameHeader: React.FunctionComponent<Props> = ({ navigation }) => {
             headerCenter={<>
                 <PrevRoundButton prevRoundHandler={prevRoundHandler} visible={isFirstRound} />
                 <Text style={styles.title}>Round {roundCurrent + 1}</Text>
-                <NextRoundButton nextRoundHandler={nextRoundHandler} visible={isLastRound && (currentGame.locked || false)} />
+                <NextRoundButton nextRoundHandler={nextRoundHandler}
+                    visible={isLastRound && (currentGame.locked || false)}
+                    showPlus={isLastRound && !currentGame.locked}
+                />
             </>}
             headerRight={!currentGame.locked && <AddendButton />}
         />

src/components/Headers/SettingsHeader.tsx

@@ -10,7 +10,7 @@ import CustomHeader from './CustomHeader';
 
 type RouteParams = {
     Settings: {
-        reason?: string;
+        source?: string;
     };
 };
 

src/components/PopupMenu/AbstractPopupMenu.tsx

@@ -47,7 +47,7 @@ const AbstractPopupMenu: React.FC<Props> = (props) => {
      */
     const editGameHandler = async () => {
         props.setCurrentGameCallback();
-        props.navigation.navigate('Settings', { reason: 'edit_game' });
+        props.navigation.navigate('Settings', { source: 'list_screen' });
 
         await analytics().logEvent('menu_edit', {
             round_count: roundTotal,

src/screens/SettingsScreen.tsx

@@ -20,7 +20,7 @@ import logger from '../Logger';
 
 type RouteParams = {
     Settings: {
-        reason?: string;
+        source?: string;
     };
 };