JSAEM2-4 feat: implemented the transaction insertion page (#4)

* JSAEM2-4 feat: implemented the transaction insertion page

* JSAEM2-4 fix: font issue on android and a small typo

* fix: removed the extra empty lines

* fixed: finished the most of requested changes from QA

except for removing local states from redux store.

* JSAEM2-4 fixed: apply requested changes from QA

* JSAEM2-4 fixed: store date as timestamp

* JSAEN2-4 fixed: re-init the variables after transaction creation

* fixed: applied required changes

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.6",
     "expo": "^35.0.0",
+    "moment": "^2.24.0",
     "native-base": "^2.13.8",
     "prop-types": "^15.7.2",
     "react": "16.8.3",
@@ -24,7 +25,8 @@
     "react-redux": "^7.1.3",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "expo-font": "~7.0.0"
   },
   "devDependencies": {
     "babel-preset-expo": "^7.1.0",

src/App.jsx

@@ -1,16 +1,42 @@
-import React from 'react';
-import { registerRootComponent } from 'expo';
+import React, { useState, useEffect } from 'react';
+import { registerRootComponent, AppLoading } from 'expo';
+import * as Font from 'expo-font';
 import { Provider } from 'react-redux';
 import { createAppContainer } from 'react-navigation';
+import { Alert } from 'react-native';
 import AppNavigator from './Navigator';
-import store from './redux/store';
+import store from './reduxStore';
+import Roboto from '../assets/Fonts/Roboto/Roboto-Regular.ttf';
+import RobotoMedium from '../assets/Fonts/Roboto/Roboto-Medium.ttf';
 
 const AppContainer = createAppContainer(AppNavigator);
 
-const App = () => (
-  <Provider store={store}>
-    <AppContainer />
-  </Provider>
-);
+const App = () => {
+  const [fontLoading, setFontLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadFont() {
+      try {
+        await Font.loadAsync({
+          Roboto,
+          Roboto_medium: RobotoMedium,
+        });
+        setFontLoading(false);
+      } catch (err) {
+        Alert.alert(
+          'Failed to load custom Font',
+        );
+      }
+    }
+    loadFont();
+  }, []);
+
+  return fontLoading ? <AppLoading />
+    : (
+      <Provider store={store}>
+        <AppContainer />
+      </Provider>
+    );
+};
 
 registerRootComponent(App);

src/Stats/actionCreator.jsx

@@ -0,0 +1,12 @@
+export const actionType = {
+  ADD_TRANS: 'ADD_TRANS',
+};
+
+export function addNewTransaction(type, date, amount) {
+  return {
+    type: actionType.ADD_TRANS,
+    data: {
+      type, date, amount,
+    },
+  };
+}

src/Stats/reducer.jsx

@@ -0,0 +1,17 @@
+import { actionType } from './actionCreator';
+
+const initialState = {
+  transactions: [],
+};
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+    case actionType.ADD_TRANS:
+      return {
+        ...state,
+        transactions: [...state.transactions, { ...action.data }],
+      };
+    default:
+      return state;
+  }
+};

src/TransCreator/AmountInput.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MaterialIcons } from '@expo/vector-icons';
+import { Input, Text } from 'native-base';
+import { Platform } from 'react-native';
+import styles from './Style';
+import numDecorator from './numericInputDecorator';
+
+const AmountInput = ({ transAmount, setTransAmount }) => (
+  <>
+    <MaterialIcons name="attach-money" style={styles.amountInputIcon} />
+    <Text>General</Text>
+    <Input
+      keyboardType={Platform.OS === 'ios' ? 'numeric' : 'decimal-pad'}
+      placeholder="0.00"
+      value={transAmount ? transAmount.toString() : null}
+      style={styles.amountInput}
+      onChangeText={(val) => setTransAmount(numDecorator(val))}
+    />
+  </>
+);
+
+AmountInput.propTypes = {
+  transAmount: PropTypes.string,
+  setTransAmount: PropTypes.func,
+};
+
+AmountInput.defaultProps = {
+  transAmount: null,
+  setTransAmount: null,
+};
+
+export default AmountInput;

src/TransCreator/DateSelector.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { MaterialIcons } from '@expo/vector-icons';
+import {
+  Text,
+  DatePicker,
+} from 'native-base';
+import { View } from 'react-native';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import styles from './Style';
+
+
+const DateSelector = ({ transDate, setTransDate }) => (
+  <>
+    <MaterialIcons name="date-range" style={styles.dateItemIcon} />
+    <Text>Date: </Text>
+    <View style={styles.dateView}>
+      <DatePicker
+        defaultDate={new Date()}
+        minimumDate={new Date(1990, 1, 1)}
+        maximumDate={new Date(2050, 12, 31)}
+        locale="en"
+        modalTransparent={false}
+        animationType="fade"
+        androidMode="default"
+        placeHolderText={moment.unix(transDate).format('MM/DD/YYYY')}
+        textStyle={{ color: '#5C6BC0' }}
+        placeHolderTextStyle={{ color: '#5C6BC0' }}
+        onDateChange={(newDate) => setTransDate(moment(newDate).unix())}
+        disabled={false}
+      />
+    </View>
+  </>
+);
+
+DateSelector.propTypes = {
+  transDate: PropTypes.number,
+  setTransDate: PropTypes.func,
+};
+
+DateSelector.defaultProps = {
+  transDate: moment().unix(),
+  setTransDate: null,
+};
+
+export default DateSelector;

src/TransCreator/PageFooter.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Text,
+  Button,
+  Footer,
+  FooterTab,
+} from 'native-base';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import styles from './Style';
+
+
+const PageFooter = ({ createHandler }) => (
+  <Footer style={Platform.OS === 'ios' ? styles.footerIOS : styles.footerAndroid}>
+    <FooterTab style={styles.footerAndroid}>
+      <Button
+        bordered
+        style={styles.confirmButton}
+        onPress={() => createHandler()}
+      >
+        <Text style={styles.confirmButtonText}>Add</Text>
+      </Button>
+    </FooterTab>
+  </Footer>
+);
+
+
+PageFooter.propTypes = {
+  createHandler: PropTypes.func,
+};
+
+PageFooter.defaultProps = {
+  createHandler: null,
+};
+
+export default PageFooter;

src/TransCreator/PageHeader.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  Header, Text, Left, Right, Button, Body, Segment,
+} from 'native-base';
+import PropTypes from 'prop-types';
+import styles from './Style';
+
+const PageHeader = ({ transType, setTransType }) => (
+  <Header transparent>
+    <Left />
+    <Body>
+      <Segment style={styles.headerSegment}>
+        <Button bordered first active={transType === 'Expense'} onPress={() => setTransType('Expense')}>
+          <Text style={transType !== 'Expense' ? styles.nonActive : {}}>Expense</Text>
+        </Button>
+        <Button bordered last active={transType === 'Income'} onPress={() => setTransType('Income')}>
+          <Text style={transType !== 'Income' ? styles.nonActive : {}}>Income</Text>
+        </Button>
+      </Segment>
+    </Body>
+    <Right />
+  </Header>
+);
+
+PageHeader.propTypes = {
+  transType: PropTypes.string,
+  setTransType: PropTypes.func,
+};
+
+PageHeader.defaultProps = {
+  transType: 'Expense',
+  setTransType: null,
+};
+
+export default PageHeader;

src/TransCreator/Style.jsx

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  headerSegment: {
+    backgroundColor: 'transparent',
+  },
+  headerIcon: {
+    fontSize: 30,
+  },
+  amountInputOuter: {
+    borderBottomColor: 'rgb(221,218,223)',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderTopColor: 'rgb(221,218,223)',
+  },
+  amountInputIcon: {
+    fontSize: 25,
+    marginRight: 15,
+  },
+  amountInput: {
+    textAlign: 'right',
+    fontSize: 40,
+  },
+  footerIOS: {
+    backgroundColor: 'transparent',
+    borderTopWidth: 0,
+  },
+  footerAndroid: {
+    backgroundColor: 'transparent',
+  },
+  nonActive: {
+    color: 'grey',
+  },
+  dateItem: {
+    borderBottomWidth: 0,
+    marginTop: 30,
+  },
+  dateItemIcon: {
+    fontSize: 25,
+    marginRight: 15,
+  },
+  dateView: {
+    borderWidth: 1,
+    borderColor: '#5C6BC0',
+    borderRadius: 10,
+    marginLeft: 20,
+  },
+  confirmButton: {
+    marginLeft: 30,
+    marginRight: 30,
+    height: 40,
+    borderColor: '#5C6BC0',
+  },
+  confirmButtonText: {
+    color: '#5C6BC0',
+    fontSize: 15,
+  },
+});