refactoring, usage of constants, currency dropdown impl in TransferPage.

Author: mertakdut

BankApplicationFrontend/src/actions/index.js

@@ -1,30 +1,36 @@
-// TODO: Soft-coded action types.
-// export const ADD_TODO = 'ADD_TODO'
+import {
+    ACTIONTYPE_SHOWDIALOG,
+    ACTIONTYPE_HIDEDIALOG,
+    ACTIONTYPE_LOGIN,
+    ACTIONTYPE_LOGOUT,
+    ACTIONTYPE_CURRENCIESOBSOLETE,
+    ACTIONTYPE_CURRENCIESUPTODATE
+} from '../config/constants'
 
 export const showDialog = (titleEnum, message, callback) => ({
-    type: 'SHOW_DIALOG',
+    type: ACTIONTYPE_SHOWDIALOG,
     titleEnum,
     message,
     callback
 })
 
 export const closeDialog = {
-    type: 'HIDE_DIALOG'
+    type: ACTIONTYPE_HIDEDIALOG
 }
 
 export const login = (username) => ({
-    type: 'LOGIN',
+    type: ACTIONTYPE_LOGIN,
     username
 })
 
 export const logout = {
-    type: 'LOGOUT'
+    type: ACTIONTYPE_LOGOUT
 }
 
 export const currenciesObsolete = {
-    type: 'CURRENCIES_OBSOLETE'
+    type: ACTIONTYPE_CURRENCIESOBSOLETE
 }
 
 export const currenciesUptodate = {
-    type: 'CURRENCIES_UPTODATE'
+    type: ACTIONTYPE_CURRENCIESUPTODATE
 }

BankApplicationFrontend/src/app.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import MainPage from './pages/MainPage/MainPage';
+import MainPage from './components/pages/MainPage/MainPage';
 
 import 'bootstrap/dist/css/bootstrap.min.css';
 

BankApplicationFrontend/src/components/MoneyBar/MoneyBar.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Alert } from 'react-bootstrap'
 import { connect } from 'react-redux'
-
 import Request from '../../services/Request'
 import { showDialog, currenciesUptodate } from '../../actions';
+import { URL_RETRIEVEWEALTH } from '../../config/constants'
 
 const mapStateToProps = state => ({
     loggedInUsername: state.login,
@@ -46,7 +46,7 @@ class MoneyBar extends React.Component {
             this.setState({ isProcessing: true });
 
             const request = new Request().getRequestInstance();
-            request.post('wealth/retrieve', { username: this.props.loggedInUsername })
+            request.post(URL_RETRIEVEWEALTH, { username: this.props.loggedInUsername })
                 .then((response) => {
                     Object.keys(response.data.wealthMap).map((key) => {
                         if (response.data.wealthMap[key] == 0) delete response.data.wealthMap[key];

BankApplicationFrontend/src/components/NavigationBar/NavigationBar.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import React from 'react'
+import { Link, Redirect } from 'react-router-dom'
 import { connect } from 'react-redux'
-import { Navbar, Nav, NavItem } from 'react-bootstrap';
-
-import { showDialog, logout } from '../../actions';
+import { Navbar, Nav, NavItem } from 'react-bootstrap'
+import { showDialog, logout } from '../../actions'
+import { LSKEY_USERNAME } from '../../config/constants'
 
 const mapStateToProps = state => ({
     loggedInUsername: state.login
@@ -34,7 +34,7 @@ class NavBarTop extends React.Component {
     }
 
     onLoggedOut() {
-        localStorage.removeItem('username');
+        localStorage.removeItem(LSKEY_USERNAME);
         this.props.logout();
         this.setState({ hasJustLoggedOut: true });
     }
@@ -46,11 +46,10 @@ class NavBarTop extends React.Component {
             return <Redirect to="/" />
         }
 
-
         const loginLogout = this.props.loggedInUsername == null ?
             <NavItem style={navbarStyling} componentclass="span"><Link to="/login">Login</Link></NavItem> :
             <NavItem style={navbarStyling} onClick={() =>
-                this.props.showPopup(1, 'Are sure you want to logout ' + this.props.loggedInUsername + '?', this.onLoggedOut())}>Logout</NavItem>
+                this.props.showPopup(1, 'Are sure you want to logout ' + this.props.loggedInUsername + '?', this.onLoggedOut)}>Logout</NavItem>
 
         return (
             <Navbar bg="light" expand="lg" >

BankApplicationFrontend/src/pages/CurrencyPage/CurrencyList/Currency/BuySellModal/BuySellModal.js renamed to BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyList/Currency/BuySellModal/BuySellModal.js

@@ -1,7 +1,8 @@
-import React from 'react';
-import NumberFormat from 'react-number-format';
-import { Modal, InputGroup, FormControl, Button } from 'react-bootstrap';
-import Request from '../../../../../services/Request';
+import React from 'react'
+import NumberFormat from 'react-number-format'
+import { Modal, InputGroup, FormControl, Button } from 'react-bootstrap'
+import Request from '../../../../../../services/Request'
+import {URL_MAKETRANSACTION} from '../../../../../../config/constants'
 
 class BuySellModal extends React.Component {
 
@@ -32,7 +33,7 @@ class BuySellModal extends React.Component {
         });
 
         const request = new Request().getRequestInstance();
-        request.post('transaction/make',
+        request.post(URL_MAKETRANSACTION,
             {
                 username: this.props.username,
                 buying: this.props.isBuying,

BankApplicationFrontend/src/pages/CurrencyPage/CurrencyList/Currency/Currency.js renamed to BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyList/Currency/Currency.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonToolbar, Button } from 'react-bootstrap';
 import { connect } from 'react-redux'
-import { showDialog, currenciesObsolete } from '../../../../actions';
+import { showDialog, currenciesObsolete } from '../../../../../actions';
 
 import BuySellModal from './BuySellModal/BuySellModal'
 

BankApplicationFrontend/src/pages/CurrencyPage/CurrencyList/CurrencyList.js renamed to BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyList/CurrencyList.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import CurrencyList from './CurrencyList/CurrencyList'
-import Request from '../../services/Request'
-
 import { connect } from 'react-redux'
-import { showDialog } from '../../actions';
+import CurrencyList from './CurrencyList/CurrencyList'
+import Request from '../../../services/Request';
+import { BASEURL_EXCHANGERATES, URL_EXCHANGERATES } from '../../../config/constants'
+import { showDialog } from '../../../actions'
 
 const mapDispatchToProps = dispatch => ({
     showPopup: (title, message) => dispatch(showDialog(title, message))
@@ -17,8 +17,8 @@ class CurrencyPage extends React.Component {
     }
 
     componentDidMount() {
-        const request = new Request().getRequestInstance('https://api.exchangeratesapi.io');
-        request.get('/latest?base=TRY').then((response) => {
+        const request = new Request().getRequestInstance(BASEURL_EXCHANGERATES);
+        request.get(URL_EXCHANGERATES).then((response) => {
             this.setState({ currencies: response.data.rates });
         }).catch((error) => {
             console.log(error);

BankApplicationFrontend/src/pages/CurrencyPage/CurrencyPage.js renamed to BankApplicationFrontend/src/components/pages/CurrencyPage/CurrencyPage.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React from 'react'
 import { connect } from 'react-redux'
-import Request from '../../services/Request'
-import { showDialog } from '../../actions';
+import { showDialog } from '../../../actions'
+import Request from '../../../services/Request';
+import { URL_RETRIEVEHISTORY } from '../../../config/constants'
 import EmptyListWrapper from './EmptyListWrapper/EmptyListWrapper'
 import HistoryList from './HistoryList/HistoryList'
 
@@ -30,7 +31,7 @@ class HistoryPage extends React.Component {
             this.setState({ isRetrievingRecords: true });
 
             const request = new Request().getRequestInstance();
-            request.post('transaction/findAllByUsername', {
+            request.post(URL_RETRIEVEHISTORY, {
                 username: this.props.loggedInUsername
             }).then((response) => {
                 console.log(response);

BankApplicationFrontend/src/pages/HistoryPage/EmptyListWrapper/EmptyListWrapper.js renamed to BankApplicationFrontend/src/components/pages/HistoryPage/EmptyListWrapper/EmptyListWrapper.js

@@ -1,13 +1,11 @@
-import React from 'react';
-import { Form, Button } from 'react-bootstrap';
-import { Redirect } from 'react-router-dom';
+import React from 'react'
+import { Form, Button } from 'react-bootstrap'
+import { Redirect } from 'react-router-dom'
 import { connect } from 'react-redux'
-
-import FormElement from '../../components/FormElement/FormElement';
-import Request from '../../services/Request';
-import { login, showDialog } from '../../actions';
-
-const ERROR_ALLFIELDSMANDATORY = 'All fields are mandatory.';
+import FormElement from '../../FormElement/FormElement'
+import Request from '../../../services/Request'
+import { login, showDialog } from '../../../actions'
+import { ERROR_ALLFIELDSMANDATORY, URL_LOGIN, LSKEY_USERNAME } from '../../../config/constants'
 
 const mapStateToProps = state => ({
     isLoggedIn: state.login != null
@@ -51,12 +49,12 @@ class LoginPage extends React.Component {
             });
 
             const request = new Request().getRequestInstance();
-            request.post('user/login', {
+            request.post(URL_LOGIN, {
                 username: this.state.username,
                 password: this.state.password
             }).then((response) => {
                 console.log(response);
-                localStorage.setItem('username', response.data.username);
+                localStorage.setItem(LSKEY_USERNAME, response.data.username);
                 this.setState({ isLoggedIn: true });
             }).catch((error) => {
                 console.log(error);

BankApplicationFrontend/src/pages/HistoryPage/HistoryList/History/History.js renamed to BankApplicationFrontend/src/components/pages/HistoryPage/HistoryList/History/History.js

@@ -3,21 +3,21 @@ import { Container } from 'react-bootstrap'
 import { BrowserRouter as Router, Route } from 'react-router-dom'
 import { connect } from 'react-redux'
 
-import NavBarTop from '../../components/NavigationBar/NavigationBar';
-import PopupDialog from '../../components/PopupDialog/PopupDialog';
+import NavBarTop from '../../NavigationBar/NavigationBar'
+import PopupDialog from '../../PopupDialog/PopupDialog'
+import MoneyBar from '../../MoneyBar/MoneyBar'
 
-import HomePage from '../HomePage/HomePage';
-import UsersPage from '../UsersPage/UsersPage';
-import CurrencyPage from '../CurrencyPage/CurrencyPage';
-import TransferPage from '../TransferPage/TransferPage';
-import HistoryPage from '../HistoryPage/HistoryPage';
+import HomePage from '../HomePage/HomePage'
+import UsersPage from '../UsersPage/UsersPage'
+import CurrencyPage from '../CurrencyPage/CurrencyPage'
+import TransferPage from '../TransferPage/TransferPage'
+import HistoryPage from '../HistoryPage/HistoryPage'
 
-import RegisterPage from '../RegisterPage/RegisterPage';
-import LoginPage from '../LoginPage/LoginPage';
+import RegisterPage from '../RegisterPage/RegisterPage'
+import LoginPage from '../LoginPage/LoginPage'
 
-import MoneyBar from '../../components/MoneyBar/MoneyBar';
-
-import { login } from '../../actions';
+import { login } from '../../../actions'
+import { LSKEY_USERNAME } from '../../../config/constants'
 
 const mapDispatchToProps = dispatch => ({
     login: (username) => dispatch(login(username))
@@ -28,7 +28,7 @@ class MainPage extends React.Component {
     constructor(props) {
         super(props);
 
-        const storedUsername = localStorage.getItem('username');
+        const storedUsername = localStorage.getItem(LSKEY_USERNAME);
         if (storedUsername != null) {
             this.props.login(storedUsername);
         }

BankApplicationFrontend/src/pages/HistoryPage/HistoryList/HistoryList.js renamed to BankApplicationFrontend/src/components/pages/HistoryPage/HistoryList/HistoryList.js

@@ -2,13 +2,10 @@ import React from 'react';
 import { Redirect } from 'react-router-dom';
 import { Form, Button } from 'react-bootstrap';
 import { connect } from 'react-redux'
-import FormElement from '../../components/FormElement/FormElement';
-import Request from '../../services/Request';
-import { login, showDialog } from '../../actions';
-
-const ERROR_ALLFIELDSMANDATORY = 'All fields are mandatory.';
-const ERROR_DIFFPASS = 'Password fields should be same.';
-const ERROR_TCNOLENGTH = 'Length of TC No must be 11. Currently it is: ';
+import FormElement from '../../FormElement/FormElement';
+import Request from '../../../services/Request';
+import { ERROR_ALLFIELDSMANDATORY, ERROR_DIFFPASS, ERROR_TCNOLENGTH, URL_REGISTER, LSKEY_USERNAME } from '../../../config/constants'
+import { login, showDialog } from '../../../actions';
 
 const mapStateToProps = state => ({
     isLoggedIn: state.login != null
@@ -59,7 +56,7 @@ class RegisterPage extends React.Component {
 
         if (this.state.firstPass != this.state.secondPass) {
             this.props.showPopup(1, ERROR_DIFFPASS);
-        } else if (this.state.username == '' || this.tcno == '' || this.state.firstPass == '') {
+        } else if (this.state.username == '' || this.state.tcno == '' || this.state.firstPass == '') {
             this.props.showPopup(1, ERROR_ALLFIELDSMANDATORY);
         } else if (this.state.tcno.length != 11) {
             this.props.showPopup(1, ERROR_TCNOLENGTH + this.state.tcno.length);
@@ -70,14 +67,14 @@ class RegisterPage extends React.Component {
             });
 
             const request = new Request().getRequestInstance();
-            request.post('user/new', {
+            request.post(URL_REGISTER, {
                 username: this.state.username,
                 password: this.state.firstPass,
                 tcno: this.state.tcno
             }).then((response) => {
                 console.log(response);
-                localStorage.setItem('username', response.data.username);
-                this.props.login(localStorage.getItem('username'));
+                localStorage.setItem(LSKEY_USERNAME, response.data.username);
+                this.props.login(localStorage.getItem(LSKEY_USERNAME));
             }).catch((error) => {
                 console.log(error);
                 var errorMessage = 'Network error';

BankApplicationFrontend/src/pages/HistoryPage/HistoryPage.js renamed to BankApplicationFrontend/src/components/pages/HistoryPage/HistoryPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form } from 'react-bootstrap';
-import Request from '../../../services/Request';
+import Request from '../../../../services/Request';
 import CurrencyDropdownItem from './CurrencyDropdownItem/CurrencyDropdownItem'
 
 class CurrencyDropdown extends React.Component {
@@ -13,6 +13,10 @@ class CurrencyDropdown extends React.Component {
         }
     }
 
+    onPickCurrency() {
+        this.props.onDropdownChanged(this.inputEl.value);
+    }
+
     componentDidMount() {
         const request = new Request().getRequestInstance('https://api.exchangeratesapi.io');
         request.get('/latest?base=TRY')
@@ -30,7 +34,8 @@ class CurrencyDropdown extends React.Component {
         );
 
         return (
-            <Form.Control as="select">
+            <Form.Control as="select" onChange={this.onPickCurrency.bind(this)} ref={el => this.inputEl = el}>
+                <option value="">Select</option>
                 {currencies}
             </Form.Control>
         )