Warning! This project is very old at this point! Some of the ideas may be fine would not recommend you use it as a modern reference
This project describes the process of connecting a bank account to your own Account. So when you log in you are taken to the choose a bank account, then as one bank is chosen you are asked to finish adding login data to complete login in. As the form is send you are send to a page where your latest bank transactions data is displayed.
Execute npm install to install dependencies
Execute npm run dev to run the development server on localhost:8080
or
Execute npm run prod to run the production server. For testing use localhost:4000
-
CSS Approach: I have changed boilerplate to add post-css and css-modules. Also, added redux-devtools to be able to work with redux data in a development setting. See wiki pages CSS-Methodology
-
Implement a bank selection that persists the login screen: Bank selection is done by saving the user selected bank to the redux store. To paint the buttons: We map through an inline array calling a BankListItem component to render on each iterate, passing th eprops necesary for each button. BankListItem resides on the components folder and it just renders the bank images as buttons. Each button will have an onClick handler triggering the action to save the bank name to the redux store when triggered. Special carefulness have been made into no binding but instead using arrow functions when declaring handlers within react classes. See BankListItem while the ChooseBankPage container is here.
-
Implement sensible form validation: I have implemented a HOC that wraps the form component and that deals with form state and actions present in the form. Additionally I have detached actual validations from the form state so the user only needs to define the validation rules and pass them onto the validation's HOC as a config object. So these are not hard-coded into the HOC. See more on the wiki pages Form-Validation
The container component is LoginPage.js and the HOC is called Revalidation.js, both are found here and the login form is here.
- Build the transactions screen using the api end-point localhost:3000/api/transactions: First, a server have been implemented to serve json from the data folder, enabling CORS to handle calls to localhost. I this sense I use the concurrently library to run both the development server and the API at the same time, with just one script. See scripts on the package.json file here and the dev API server here
Then, creating the views is just a mater of rendering the actual components defined on the components/statements folder. In more detail, the statementPage container renders AccDetails and ListView components, also declares and passes down to ListView the renderRow markup. Detaching the renderRow from the ListView permits us to reuse the ListView in any other part of the app. From there on, ListView maps through the passed props (renderRow) which calls and pains a row for each iterate of the map function.
See StatementPage here ListView and ListRow are here
Another thing is that I am using selectors for the first time in this app to prepare and digest data before passing it to the rendering component. See getTransactions selector in the reducers/bank reducer file. What the getTransactions selector does is prepare and return an array of transactions by id and the actual collection of transactions. Later on, the ListView component will iterate through the array of ids, taking from the collection the current transaction and rendering the row with the data. Selectors in the reducers/bank code is here
-
Fix and expand the unit tests: I am testing presentational components by creating snapshops. Also, testing event handlers and state where appropriate. On unit tests, there are behavioral tests for actions and reducers. See wiki pages Tests for more on this.
-
Login and authentication: I have used a HOC component that wraps the private routes and confirms the loggedIn state of user. See wiki pages Login-and-Authentication
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
TODO: Write history
TODO: Write credits
TODO: Write license