Merge branch 'development' into master

Author: erkobridee

README.md

@@ -3,37 +3,6 @@
 A simple chat application that uses react.js, redux and socket.io.
 
 
-## things left to have the v1
-
-- [x] finish UI/layout components and styles with light/dark color themes
-
-- [x] finish the redux code to manage the application data/states
-
-- [x] socket.io
-
-  - [x] socket.io-client mock
-
-  - [x] connect to the socket.io server to handle the messages 
-
-    - [x] build a local socket.io server
-
-    - [x] connect to the local socket.io server
-
-    - [x] deploy socket.io server to a now.sh instance
-
-    - [x] connect to the remote socket.io server
-
-- [x] use the settings theme state to switch between the themes
-
-- [x] add local storage support to persist the changes on the settings page
-
-- [x] add i18n (internationalization) support
-
-- [x] add the unreaded messages to the chat tab when user is on the settings tab
-
-- [ ] write down the documentation under the `docs/` directory
-
-
 ## Prerequisites
 
 * Must have [Git](https://git-scm.com/) installed
@@ -72,95 +41,27 @@ A simple chat application that uses react.js, redux and socket.io.
 * deploy the production build to the github gh-pages: `yarn do-deploy` or `npm run do-deploy`
 
 
-## Useful links
-
-### Styles (CSS and SASS)
-
-* [Understanding and Using rem Units in CSS — SitePoint](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)
-
-* [Sass's `@content` Directive Use Cases](https://robots.thoughtbot.com/sasss-content-directive)
-
-* [BEM](http://getbem.com/)
-
-  * [Using Sass to Control Scope With BEM Naming | CSS-Tricks](https://css-tricks.com/using-sass-control-scope-bem-naming/) - 2018/02/28
-
-  * [Modular CSS with Sass & BEM | Mat Hayward](http://mathayward.com/modular-css-with-sass-and-bem/) - 2014/01/17
-
-
-### Webpack
-
-* [Webpack](https://webpack.js.org/)
-
-* [How to use Webpack with React: an in-depth tutorial | freeCodeCamp](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060)
-
-* [Optimizing front-end delivery with Webpack 4 | Jasel Gadhia](https://jes.al/2018/04/optimizing-front-end-delivery-with-Webpack-4/)
-
-
-### React and Redux( middleware( thunk )  )
-
-* [React](https://reactjs.org/)
-
-  * [[YouTube] 6 Pro Tips from React Developers](https://www.youtube.com/watch?v=xa-_FIy2NgE)
-
-  * [React Stateless Functional Components: Nine Wins You Might Have Overlooked | Hackernoon](https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc) - 2016/03/28
-
-  * [[YouTube] Get derived state from props in React 16.3 | hackages.tv](https://www.youtube.com/watch?v=p_m4TrYGtCo) - 2018/03/14
-
-
-* Forms
-
-  * [Forms | React Docs](https://reactjs.org/docs/forms.html)
-
-  * [React Forms: Using Refs | CSS-Tricks](https://css-tricks.com/react-forms-using-refs/)
-
-  * [Better Form Management | Robbie Dela Victoria – Medium](https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c)
-
-
-* i18n
-
-  * [i18n next](https://www.i18next.com/)
-
-  * [react i18n next](https://react.i18next.com/)
-
-    * [I18n with React and i18next | Danny Hurlburt - Alligator.io](https://alligator.io/react/i18n-with-react-and-i18next)
-
-    * [[GitHub] i18next / react-i18next / examples](https://github.com/i18next/react-i18next/tree/master/example)
-
-    * [[SandBox Editor] react i18n next example](https://codesandbox.io/s/l4qrory2nl)
-
---
-
-* [Redux Integration | React Router Docs](https://reacttraining.com/react-router/web/guides/redux-integration)
-
---
-
-* [Redux](https://redux.js.org/)
-
-  * [[Sandbox Editor] Todos](https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos)
-
-  * [A Dummy's Guide to Redux and Thunk in React | Matt Stow on CodePen](https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react)
-
-    * [[GitHub] stowball / dummys-guide-to-redux-and-thunk-react](https://github.com/stowball/dummys-guide-to-redux-and-thunk-react)
+## [Documentation](docs/README.md)
 
-  * [Redux: Persisting the State to the Local Storage | @dan_abramov on @eggheadio](https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage)
+* [Versioning system](docs/README.md#versioning-system)
 
-* [[GitHub] reduxjs / redux-thunk](https://github.com/reduxjs/redux-thunk) - use [withExtraArgument](https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument) to inject the SocketIO service and localstorage service API
+* [Application requirements](docs/README.md#application-requirements)
 
-  * [Super Simple Redux Thunk Example | Tyler Buchea](http://blog.tylerbuchea.com/super-simple-redux-thunk-example/) - 2017/10/10 ([Sandbox Editor](https://codesandbox.io/s/github/tylerbuchea/my-simple-async-app))
+  * [Features](docs/requirements/features.md)
 
-* Multiple actions
+  * [Techinal](docs/requirements/techinal.md)
 
-  * [Can I dispatch multiple actions from Redux action creators?](http://jamesknelson.com/can-i-dispatch-multiple-actions-from-redux-action-creators/)
+* [About the project](docs/README.md#about-the-project)
 
-  * [Redux Thunk – how to populate various reducers](http://frontendinsights.com/redux-thunk-populate-various-reducers/)
+  * [Architecture](docs/project/README.md#architecture)
 
+  * [Folders](docs/project/README.md#folders)
 
-#### Code Style Guide
+  * [Code](docs/project/README.md#code)
 
-* [[Gist] datchley / react-redux-style-guide.md](https://gist.github.com/datchley/4e0d05c526d532d1b05bf9b48b174faf) - React + [Redux](https://gist.github.com/datchley/4e0d05c526d532d1b05bf9b48b174faf#redux) Style Guide
+  * [Dependencies](docs/project/README.md#dependencies)
 
-* Project architecture re-ducks: [Scaling your Redux App with ducks | freeCodeCamp](https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be)
+  * [Features](docs/project/features.md)
 
-  * [[GitHub] alexnm / re-ducks](https://github.com/alexnm/re-ducks) - An attempt to extend the original proposal for redux modular architecture
+  * [Useful references](docs/project/useful-references.md)
 
-  * [[GitHub] FortechRomania / react-redux-complete-example](https://github.com/FortechRomania/react-redux-complete-example) - A react+redux example project based on the re-ducks folder structure

docs/README.md

@@ -0,0 +1,27 @@
+# React Socket Simple Chat - Documentation
+
+## Versioning system
+
+* This project follows the [Semantic Versioning](https://semver.org/) pattern
+
+
+## Application requirements
+
+* [Features](requirements/features.md)
+
+* [Techinal](requirements/techinal.md)
+
+
+## [About the project](project)
+
+* [Architecture](project/README.md#architecture)
+
+* [Folders](project/README.md#folders)
+
+* [Code](project/README.md#code)
+
+* [Dependencies](project/README.md#dependencies)
+
+* [Features](project/features.md)
+
+* [Useful references](project/useful-references.md)

docs/assets/mobile-ui-mockups.png

@@ -0,0 +1,127 @@
+# Project
+
+
+## Architecture
+
+### Frontend
+
+* It uses React to build the UI, React Router to handle its pages, Redux to manage its data/states, Redux Thunk to have a middleware where is possible to inject the socket.io client to send the messages and the function to switch between languages. ([useful references](useful-references.md#react-and-redux-middleware-thunk---) about them)
+
+* It follows the redux re-ducks pattern and try to follow some react + redux code style guide ([useful references](useful-references.md#code-style-guide) about it)
+
+* It uses SASS to handle the styles, follows the BEM pattern and uses the flexbox to handle the layout ([useful references](useful-references.md#styles-css-and-sass))
+
+
+### Backend - socket.io server
+
+* It has it own socket.io server and also has a deployed version of it over the now.sh ([read more about](../../server/README.md))
+
+
+### Tools
+
+* It uses the [node.js](https://nodejs.org/) LTS (v8)
+
+* It uses the [Webpack](https://webpack.js.org/) v4 with the HMR support and is tunned to enable a multi devices development ([useful references](useful-references.md#webpack))
+
+  * It is also has a configuration to make it possible to do imports where the `./src/` is the root folder, so we can do imports like `import constants from 'chat/constants';` from anywhere in the project code
+
+* It has support for dotenv files to configure the application variables through them
+
+  * [.env.example](/.env.example) (present on the repository and serve as model)
+
+  * [load](/webpack.config.js#L45-L85) the file following the search order
+
+```
+1. .env.(production|development)
+2. .env.local
+3. .env
+4. .env.example
+```
+
+## Folders
+
+* main folders
+
+  ```
+  ./
+    docs/
+    server/
+    src/
+  ```
+  
+  * `docs/` - documentation
+
+  * `server/` - socket.io server code
+
+  * `src/` - project code
+
+* build folder
+
+  * when executes a command `yarn build` or `npm run build` the build content will be placed at the `./dist` folder
+
+
+## Code
+
+* on the root `./`
+
+  * It uses the ES6+ through Webpack + Babel ([.babelrc](/.babelrc) file)
+
+  * It defines the web browsers support on the [.browserslistrc](/.browserslistrc) file, that is loaded and used by the Webpack to generate the production build
+
+* on the `./src/`
+
+  * `index.html` - html template, where is define the injection point to be used by the `ReactDOM.render`
+
+  * `index.scss` - main scss (SASS) file
+
+  * `index.js` - loads the main scss file, the application component and inject it on the html
+
+  * each inner folder has it own `index.js` file that exposes its content as a module, to be imported like `import localStorageService from 'chat/services/localstorage';`
+
+* sass styles
+
+  * global definitions `./src/styles/`
+
+    * main file `_all.scss` - has the imports of all `.scss` files on the folder
+
+  * all others scss files area placed with each module/component folder
+
+    * `./src/index.scss` imports `./src/styles/_all.scss` and `./src/chat/_styles.scss` files
+
+    * `./src/chat/_styles.scss` imports `./src/chat/(components/containers)/_styles.scss`
+
+    * and so one, where each `_style.scss` will import the `_styles.scss` from it's inner folders
+
+* dumb/presentation components: `./src/chat/components/`
+
+  * only used to presentation, where most of them are stateless/functional components
+
+* container components: `./src/chat/container`
+
+  * components that will receive data through injection, following the HOC ([Hight-Order Components](https://reactjs.org/docs/higher-order-components.html)): Redux > React Router > i18next (internationalization)
+
+* services: `./src/chat/services`
+
+  * hash - used to generate a random id to the initial user name, following the pattern `Guest_{random}`
+
+  * i18n - internationalization config and resources
+
+  * is-mobile - check if the application was loaded over a device mobile/tablet
+
+  * localstorage - handle and manages the web browser localstorage to persist the application data/states
+
+  * socketclient - uses socket.io client to connect or uses a mock client that emulates the socket.io client expected behaviors
+
+* states - redux re-ducks modules ([useful references](useful-references.md#code-style-guide) about it): `./src/chat/states`
+
+  * each redux module should expose its reducer by default
+
+  * those modules are imported on the `./src/chat/states/store.js`
+
+  * it manage 3 datasets/states of the application: connection, messages, settings (this last one has all of its inner reducers assigned at the redux root state)
+
+## Dependencies
+
+* defined on the [package.json](/package.json#L27-L74) file
+
+**TODO:** list them and its links

docs/balsamiq-mocks/mobile-ui-mock.bmpr

@@ -0,0 +1,37 @@
+# Project features by versions
+
+## 1.0.0
+
+* Simple chat application which uses a socket.io server to handle and deliver its messages
+
+  * This project has it own socker.io server implementation, which is used on the local development environment and has a deployed version of it, learn more about it on the [server/README.md](../../server/README.md)
+
+* Mobile first with responsible layout that adjusts on the mobile/table devices to the portrait or landspace orientation
+
+* It has light or dark color themes
+
+* It has internationalization with the available languages: English, Portuguese and Spanish
+
+  * The application detects which is the users language and apply it as the default settings
+
+* It has a shortcut keyboard to submit the messages, where on the mobile/table devices is `ENTER` and on the desktop is `CTRL + ENTER`
+
+  * By default it is active, but the user can disable it on the settings page
+
+* The application uses the localstorage to persist its data
+
+  * Messages
+
+  * Selected settings
+
+  * On the settings page has options to cleanup the cached messages or reset to default settings
+
+* It has a socket.io server connection status, online or offline, displayed on the navigation bar at right
+
+* It has an unread counter displayed over the chat tab when the user is on the settings page
+
+## next
+
+* Improve the documentation
+
+* Review/improve services