feat: add Clear button to Settings alongside Randomize

src/components/pages/machine/settings/Settings.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ENCRYPT_MESSAGE_BUTTON } from '../../../../constants';
+import { CLEAR_BUTTON, ENCRYPT_MESSAGE_BUTTON } from '../../../../constants';
 import { initialReflectorState } from '../../../../features/reflector';
 import { initialRotorState } from '../../../../features/rotors/features';
 import { fireEvent, render, screen } from '../../../../utils/test-utils';
@@ -41,4 +41,10 @@ describe(`Settings`, () => {
     await render(<Settings />);
     expect(screen.getByTestId(ENCRYPT_MESSAGE_BUTTON)).toBeDisabled();
   });
+
+  it(`clears rotor and plugboard state when Clear button is pressed`, async () => {
+    await render(<Settings />, { preloadedState: allRotorsSelectedState });
+    await fireEvent.press(screen.getByTestId(CLEAR_BUTTON));
+    expect(screen.getByTestId(ENCRYPT_MESSAGE_BUTTON)).toBeDisabled();
+  });
 });

src/components/pages/machine/settings/Settings.tsx

@@ -6,6 +6,8 @@ import { Button, IconButton } from 'react-native-paper';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
+  CLEAR_BUTTON,
+  CLEAR_SETTINGS,
   ENCRYPT_MESSAGE,
   ENCRYPT_MESSAGE_BUTTON,
   INFO_BUTTON,
@@ -55,6 +57,13 @@ const makeStyles = (colors: ColorPalette) =>
       paddingBottom: 16,
       gap: 8,
     },
+    buttonRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    rowButton: {
+      flex: 1,
+    },
   });
 
 export const Settings: FunctionComponent = () => {
@@ -91,6 +100,11 @@ export const Settings: FunctionComponent = () => {
     navigation.navigate('Keyboard');
   };
 
+  const clearSettings = () => {
+    dispatch(resetRotors());
+    dispatch(clearPlugboard());
+  };
+
   const randomizeSettings = () => {
     dispatch(resetRotors());
     dispatch(clearPlugboard());
@@ -123,15 +137,26 @@ export const Settings: FunctionComponent = () => {
         <Plugboard />
       </View>
       <View style={styles.bottomSection}>
-        <Button
-          testID={RANDOMIZE_BUTTON}
-          mode='outlined'
-          textColor={colors.textPrimary}
-          style={{ borderColor: colors.border }}
-          onPress={randomizeSettings}
-        >
-          {RANDOMIZE_SETTINGS}
-        </Button>
+        <View style={styles.buttonRow}>
+          <Button
+            testID={CLEAR_BUTTON}
+            mode='outlined'
+            textColor={colors.textPrimary}
+            style={[{ borderColor: colors.border }, styles.rowButton]}
+            onPress={clearSettings}
+          >
+            {CLEAR_SETTINGS}
+          </Button>
+          <Button
+            testID={RANDOMIZE_BUTTON}
+            mode='outlined'
+            textColor={colors.textPrimary}
+            style={[{ borderColor: colors.border }, styles.rowButton]}
+            onPress={randomizeSettings}
+          >
+            {RANDOMIZE_SETTINGS}
+          </Button>
+        </View>
         <Button
           mode='contained'
           onPress={navigateToNextItem}

src/constants/labels.tsx

@@ -53,6 +53,7 @@ export const SETTINGS_RESET_CONFIRM = 'Reset';
 export const SETTINGS_RESET_CANCEL = 'Cancel';
 
 export const RANDOMIZE_SETTINGS = 'Randomize';
+export const CLEAR_SETTINGS = 'Clear';
 
 export const PASTE_TEXT = 'Feed text';
 export const PASTE_TEXT_PLACEHOLDER = 'Enter text to encrypt / decrypt';

src/constants/selectors.tsx

@@ -37,6 +37,7 @@ export const INFO_SIDEBAR = 'infoSidebar';
 export const INFO_SIDEBAR_CLOSE = 'infoSidebarClose';
 
 export const RANDOMIZE_BUTTON = 'randomizeButton';
+export const CLEAR_BUTTON = 'clearButton';
 export const PASTE_TEXT_BUTTON = 'pasteTextButton';
 export const PASTE_TEXT_INPUT = 'pasteTextInput';
 export const PASTE_CONFIRM_BUTTON = 'pasteConfirmButton';