brian-react-test submission

[ghost]

Hi Micky,

Thanks for your patience. I just finished the code working and committed it through GitHub. Please look below for brief descriptions about file changes and new files. (*email has same contents and it should be easier to read)

-package.json

1. I added "prop-types" because of recommendation from React - https://facebook.github.io/react/warnings/dont-call-proptypes.html
2. I added "universal-cookie" to save contact locally.

-src/actions: I didn't put index.js here because, based on my experience, action gets larger very quickly so I believe it's more readable by accessing the actions by import { something } from 'actions/subaction'; rather than keep everything in actions/index.js

1. contacts.js has all the contact related actions - add, delete, save (after edit), favourite, delete favourite
2. types.js has types shared by action and reducer

-src/app

1. I replaced app.jsx from functional component to class to implement modal action. So when you click add button it gives you option to add contact rather than adding it automatically.
2. I also added a few components in app.jsx to complete the task (ex, contact list, favourite list).
   3)I added css classes into app.scss.

-src/components/controls

1. I added className prop to button.jsx.
2. contact-edit.jsx is contact editing form. It's rendered inside the modal.
3. contact-list.jsx is for showing the list of contact. I use it with two containers - normal contact list and favourite contact list.
4. contact.jsx is nested by contact-list. It shows favourite/unfavourite buttons based on favourite status.
5. index.js has more components.
6. modal.jsx is for showing some actions in modal rather than opening a new tab or window.

-src/components: index.js has more components.

-src/containers

1. contact-delete-button.jsx is shown at edit modal. I added delete option because I thought it's needed option.
2. contact-favourite-button.jsx is adding the contact to favourite list.
3. contact-save-button.jsx saves the changes in contact editing form.
4. contact-unfavourite-button.jsx is reverting the favourite status.
5. contacts.jsx is listing all contact list.
6. favourites.jsx is listing favourited contact list.
7. index.js is exposing the components.

-src/index.jsx: redux support is added.

-src/reducer

1. contact.jsx handles contact array data and cookies.
2. index.js exposes contact reducer externally.

Regards,
Brian