refactored state reducers, added menu nav

janithl · janithl · commit 6e3ec9c26e96 · 2020-06-11T22:12:31.000+05:30
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -20,10 +20,8 @@ const initialSize = () => ({
 
 export default ({
   dispatch,
-  division,
-  fileType,
-  proportion,
-  selectedColours,
+  flag: { division, proportion, selectedColours },
+  ui: { fileType },
 }: OwnProps): JSX.Element => {
   const [size, setSize] = useState(initialSize());
   const flag = useRef(null);
@@ -100,10 +98,14 @@ export default ({
 };
 
 type OwnProps = {
-  division: number;
-  fileType: FileTypes;
-  proportion: number;
-  selectedColours: string[];
+  flag: {
+    division: number;
+    proportion: number;
+    selectedColours: string[];
+  };
+  ui: {
+    fileType: FileTypes;
+  };
   dispatch: (action: ReducerAction) => void;
 };
 
diff --git a/src/components/EditorModal.tsx b/src/components/EditorModal.tsx
@@ -3,12 +3,13 @@ import { View } from 'react-native';
 
 import { ColourSelector, FileSaver, Modal } from '@components';
 import Actions from '@lib/actions';
-import { ModalActions, ReducerAction } from '@lib/state';
+import { ModalActions } from '@lib/reducers';
+import { ReducerAction } from '@lib/state';
 
 export default ({
   dispatch,
-  modalAction,
-  selectedColours,
+  flag: { selectedColours },
+  ui: { modalAction },
 }: OwnProps): JSX.Element => {
   const renderModalBody = () => {
     switch (modalAction) {
@@ -47,7 +48,11 @@ export default ({
 };
 
 type OwnProps = {
-  selectedColours: string[];
-  modalAction: ModalActions;
+  flag: {
+    selectedColours: string[];
+  };
+  ui: {
+    modalAction: ModalActions;
+  };
   dispatch: (action: ReducerAction) => void;
 };
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,7 +5,8 @@ import { Text, Row } from '@components';
 import { DivisionList } from '@lib/divisions';
 import { ProportionsList } from '@lib/proportions';
 import Actions from '@lib/actions';
-import { ModalActions, ReducerAction } from '@lib/state';
+import { ModalActions } from '@lib/reducers';
+import { ReducerAction } from '@lib/state';
 import colours from '@res/colours';
 
 export const FooterButton = ({
@@ -27,59 +28,62 @@ export const FooterButton = ({
 type FooterButtonProps = {
   title: string;
   value: string;
-  short: boolean;
+  short?: boolean;
   onPress?: () => void;
 };
 
 export default ({
-  division,
-  proportion,
-  selectedColours,
+  flag: { division, proportion, selectedColours },
   dispatch,
-}: OwnProps): JSX.Element => (
-  <View style={styles.footer}>
-    <Row>
-      <FooterButton
-        title="Division"
-        value={DivisionList[division]}
-        short={false}
-        onPress={() => dispatch({ type: Actions.INCREMENT_DIVISION })}
-      />
-      <FooterButton
-        title="Proportion"
-        value={ProportionsList[proportion].name}
-        onPress={() => dispatch({ type: Actions.INCREMENT_PROPORTION })}
-      />
-      <FooterButton
-        title="Colours"
-        value={String(selectedColours.length)}
-        onPress={() =>
-          dispatch({
-            type: Actions.SET_MODAL_ACTION,
-            payload: ModalActions.EditColours,
-          })
-        }
-      />
-      <FooterButton
-        title="Charges"
-        value="5"
-        onPress={() => dispatch({ type: Actions.INCREMENT_PROPORTION })}
-      />
-    </Row>
-  </View>
-);
+}: OwnProps): JSX.Element => {
+  const openModal = (payload: ModalActions) =>
+    dispatch({
+      type: Actions.SET_MODAL_ACTION,
+      payload,
+    });
+
+  return (
+    <View style={styles.footer}>
+      <Row>
+        <FooterButton
+          title="Division"
+          value={DivisionList[division]}
+          short={false}
+          onPress={() => dispatch({ type: Actions.INCREMENT_DIVISION })}
+        />
+        <FooterButton
+          title="Proportion"
+          value={ProportionsList[proportion].name}
+          onPress={() => dispatch({ type: Actions.INCREMENT_PROPORTION })}
+        />
+        <FooterButton
+          title="Colours"
+          value={String(selectedColours.length)}
+          onPress={() => openModal(ModalActions.EditColours)}
+        />
+        <FooterButton
+          title="Charges"
+          value="0"
+          onPress={() => openModal(ModalActions.EditCharges)}
+        />
+      </Row>
+    </View>
+  );
+};
 
 type OwnProps = {
-  division: number;
-  proportion: number;
-  selectedColours: string[];
+  flag: {
+    division: number;
+    proportion: number;
+    selectedColours: string[];
+  };
   dispatch: (action: ReducerAction) => void;
 };
 
 const styles = StyleSheet.create({
   footer: {
     alignSelf: 'stretch',
-    height: Platform.OS === 'android' ? 50 : 80,
+    height: Platform.OS === 'android' ? 60 : 80,
     backgroundColor: colours.primaryBlue,
   },
   footerButton: {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -9,7 +9,8 @@ import {
 
 import { Text } from '@components';
 import Actions from '@lib/actions';
-import { ModalActions, ReducerAction } from '@lib/state';
+import { ModalActions } from '@lib/reducers';
+import { ReducerAction } from '@lib/state';
 import colours from '@res/colours';
 import { Download, Menu } from '@res/icons';
 
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -1,18 +1,44 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
+  Animated,
+  Dimensions,
   Image,
   Modal,
   SafeAreaView,
   StyleSheet,
   TouchableOpacity,
   View,
+  StyleProp,
 } from 'react-native';
 
 import Actions from '@lib/actions';
 import { ReducerAction } from '@lib/state';
 import colours from '@res/colours';
 
-export default ({ menuOpen, dispatch }: OwnProps): JSX.Element => (
+const width = Math.floor(Dimensions.get('screen').width / 1.2);
+const SlideInMenu = ({ style = {}, children }: SlideInMenuProps) => {
+  const translateX = useRef(new Animated.Value(-width)).current;
+  useEffect(() => {
+    Animated.timing(translateX, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true,
+    }).start();
+  });
+
+  return (
+    <Animated.View style={{ ...style, transform: [{ translateX }] }}>
+      {children}
+    </Animated.View>
+  );
+};
+
+type SlideInMenuProps = {
+  style?: StyleProp;
+  children?: JSX.Element | JSX.Element[];
+};
+
+export default ({ ui: { menuOpen }, dispatch }: OwnProps): JSX.Element => (
   <Modal
     transparent={true}
     visible={menuOpen}
@@ -22,45 +48,51 @@ export default ({ menuOpen, dispatch }: OwnProps): JSX.Element => (
       })
     }>
     <View style={styles.container}>
-      <View style={styles.modalBody}>
-        <SafeAreaView>
-          <Image style={styles.logo} source={require('res/app_icon.png')} />
-        </SafeAreaView>
-      </View>
       <TouchableOpacity
-        style={styles.modalEmpty}
+        style={styles.background}
         onPress={() =>
           dispatch({
             type: Actions.TOGGLE_MENU,
           })
-        }
-      />
+        }>
+        <SlideInMenu style={styles.modalBody}>
+          <SafeAreaView>
+            <View style={styles.logoContainer}>
+              <Image style={styles.logo} source={require('res/app_icon.png')} />
+            </View>
+          </SafeAreaView>
+        </SlideInMenu>
+      </TouchableOpacity>
     </View>
   </Modal>
 );
 
 type OwnProps = {
-  menuOpen: boolean;
+  ui: { menuOpen: boolean };
   dispatch: (action: ReducerAction) => void;
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  background: {
+    flex: 1,
   },
   modalBody: {
-    flex: 2,
+    flex: 1,
+    width: width,
     backgroundColor: colours.white,
     alignItems: 'center',
-  },
-  modalEmpty: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.4)',
+    transform: [{ translateX: -width }],
   },
   logo: {
-    width: 100,
-    height: 100,
-    padding: 20,
+    width: 200,
+    height: 200,
+  },
+  logoContainer: {
+    margin: 20,
   },
 });
diff --git a/src/lib/reducers/flag.ts b/src/lib/reducers/flag.ts
@@ -0,0 +1,66 @@
+import Actions from '@lib/actions';
+import { DivisionList } from '@lib/divisions';
+import { ProportionsList } from '@lib/proportions';
+import { initialColours } from '@res/colours';
+
+export type FlagStateType = {
+  division: number;
+  proportion: number;
+  selectedColours: string[];
+};
+
+const initialState: FlagStateType = {
+  division: 2,
+  proportion: 2,
+  selectedColours: initialColours,
+};
+
+const nextIndex = (currentIndex: number, list: { length: number }): number =>
+  currentIndex + 1 === list.length ? 0 : currentIndex + 1;
+
+const minimumColours = 2;
+
+export type FlagReducerAction = {
+  type: Actions;
+  payload?: string | number;
+};
+
+export default (
+  state = initialState,
+  action?: FlagReducerAction,
+): FlagStateType => {
+  switch (action?.type) {
+    case Actions.INCREMENT_DIVISION:
+      return {
+        ...state,
+        division: nextIndex(state.division, DivisionList),
+      };
+
+    case Actions.INCREMENT_PROPORTION:
+      return {
+        ...state,
+        proportion: nextIndex(state.proportion, ProportionsList),
+      };
+
+    case Actions.ADD_COLOUR:
+      return {
+        ...state,
+        selectedColours: [...state.selectedColours, String(action.payload)],
+      };
+
+    case Actions.REMOVE_COLOUR:
+      if (state.selectedColours.length === minimumColours) {
+        return state;
+      }
+
+      return {
+        ...state,
+        selectedColours: state.selectedColours.filter(
+          (_, index) => index !== Number(action.payload),
+        ),
+      };
+
+    default:
+      return state;
+  }
+};
diff --git a/src/lib/reducers/index.ts b/src/lib/reducers/index.ts
@@ -0,0 +1,7 @@
+export { default as flag } from './flag';
+export type { FlagReducerAction } from './flag';
+export type { FlagStateType } from './flag';
+
+export { default as ui, ModalActions } from './ui';
+export type { UIReducerAction } from './ui';
+export type { UIStateType } from './ui';
diff --git a/src/lib/reducers/ui.ts b/src/lib/reducers/ui.ts
diff --git a/src/lib/state.ts b/src/lib/state.ts
