[Resolved Conlfict] Merge origin next to local.

README.md

@@ -138,6 +138,8 @@ There are three main layers:
   - Using [InversifyJS](http://inversify.io/) in project give us the ability to switch between custom dependencies easily. Specially for *data layer*, if you are the user working with [AWS](https://aws.amazon.com/) you only need to call `useAws()` or using [Firebase](https://firebase.google.com/) call `useFirestore()` in [SocialEngine](https://github.com/Qolzam/react-social-network/blob/next/src/socialEngine.ts#L20) file.
 ### Features
   - We moved from custom webpack to [create-react-app](https://github.com/facebook/create-react-app).
+  - Moving on [redux-saga](https://redux-saga.js.org/) managing async request and side effects.
+  - Supporting [Async Component/Lazy loading](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) for each container.
   - Support Localization by [react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux). Providing this feature we support variety of languages. To contribute :heart: your language you are able to add your local language. You only need to edit `en.json` from `react-social-network` root project and `src/locale/en.json`. You should name your file according ISO 639-1 Language Codes. For example for Spanish you should name `es.json`. Which `es` is the standard code of Spanish language.
   - [InversifyJS](http://inversify.io/) as IOC container
   - Add auto compile on changing code for `webpack`
@@ -184,6 +186,7 @@ There are three main layers:
   * [Material-UI](http://www.material-ui.com/#/) A Set of React Components that Implement Google's Material Design.
   * [react-redux](https://github.com/reactjs/react-redux) Official React bindings for Redux.
   * [Firebase](https://firebase.google.com/) products like Analytics, Realtime Database, Messaging, and Crash Reporting let you move quickly and focus on your users.
+  * [redux-saga](https://redux-saga.js.org/) is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, simple to test, and better at handling failures.
   * [redux-thunk](https://github.com/gaearon/redux-thunk) Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.
   * [React Router V4](https://github.com/ReactTraining/react-router) for routing website location
   * [Sass](http://sass-lang.com/) CSS with superpowers. Sass boasts more features and abilities than any other CSS extension language out there.

package.json

@@ -37,7 +37,7 @@
     "jss-rtl": "^0.2.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
-    "material-ui": "1.0.0-beta.38",
+    "material-ui": "^1.0.0-beta.40",
     "material-ui-icons": "^1.0.0-beta.17",
     "moment": "^2.18.1",
     "morgan": "^1.8.1",
@@ -83,7 +83,7 @@
     "@types/classnames": "^2.2.3",
     "@types/jest": "^22.1.1",
     "@types/lodash": "^4.14.77",
-    "@types/node": "^9.4.0",
+    "@types/node": "^9.6.2",
     "@types/prop-types": "^15.5.2",
     "@types/react": "^16.0.36",
     "@types/react-dom": "^16.0.3",
@@ -95,12 +95,12 @@
     "@types/react-tap-event-plugin": "0.0.30",
     "@types/redux-logger": "^3.0.4",
     "@types/uuid": "^3.4.3",
-    "redux-logger": "^3.0.1",
+    "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.2.3",
-    "ts-node": "^3.3.0",
-    "tslint": "^5.7.0",
+    "ts-node": "^5.0.1",
+    "tslint": "^5.9.1",
     "tslint-config-standard": "^6.0.1",
-    "typescript": "^2.7.1"
+    "typescript": "^2.7.2"
   },
   "engines": {
     "node": "8.9.4",

src/api/FileAPI.ts

@@ -1,14 +1,3 @@
-
-// - Interface declaration
-interface FileReaderEventTarget extends EventTarget {
-  result: string
-}
-
-interface FileReaderEvent extends Event {
-  target: FileReaderEventTarget
-  getMessage (): string
-}
-
 // - Get file Extension
 const getExtension = (fileName: string) => {
   let re: RegExp = /(?:\.([^.]+))?$/
@@ -36,9 +25,9 @@ const constraintImage = (file: File,fileName: string, maxWidth?: number, maxHeig
   if (file.type.match(/image.*/)) {
         // Load the image
     let reader = new FileReader()
-    reader.onload = function (readerEvent: FileReaderEvent) {
+    reader.onload = (readerEvent: any) => {
       let image = new Image()
-      image.onload = function (imageEvent: Event) {
+      image.onload = (imageEvent: Event) => {
 
                 // Resize the image
         let canvas: HTMLCanvasElement = document.createElement('canvas')

src/components/circle/CircleComponent.tsx

@@ -389,4 +389,4 @@ const mapStateToProps = (state: Map<string, any>, ownProps: ICircleComponentProp
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(CircleComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(CircleComponent as any) as any)

src/components/editProfile/EditProfileComponent.tsx

@@ -576,4 +576,4 @@ const mapStateToProps = (state: Map<string, any>, ownProps: IEditProfileComponen
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EditProfileComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(EditProfileComponent as any) as any)

src/components/img/ImgComponent.tsx

@@ -131,4 +131,4 @@ const mapStateToProps = (state: Map<string, any>, ownProps: IImgComponentProps)
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ImgComponent as any)as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(ImgComponent as any)as any)

src/components/notifyItem/NotifyItemComponent.tsx

@@ -167,4 +167,4 @@ const mapStateToProps = (state: any, ownProps: INotifyItemComponentProps) => {
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(NotifyItemComponent as any) as any )
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(NotifyItemComponent as any) as any )

src/components/sendFeedback/SendFeedbackComponent.tsx

@@ -256,4 +256,4 @@ const mapStateToProps = (state: Map<string, any>, ownProps: ISendFeedbackCompone
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)((withStyles(styles)(SendFeedbackComponent as any)) as any)
+export default connect(mapStateToProps, mapDispatchToProps)((withStyles(styles as any)(SendFeedbackComponent as any)) as any)

src/components/userBox/UserBoxComponent.tsx

@@ -475,4 +475,4 @@ const mapStateToProps = (state: Map<string, any>, ownProps: IUserBoxComponentPro
 }
 
 // - Connect component to redux store
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(UserBoxComponent as any) as any)
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(UserBoxComponent as any) as any)

src/containers/emailVerification/EmailVerificationComponent.tsx

@@ -149,4 +149,4 @@ const mapStateToProps = (state: any, ownProps: IEmailVerificationComponentProps)
 }
 
 // - Connect component to redux store
-export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(EmailVerificationComponent as any) as any)) as typeof EmailVerificationComponent
+export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(EmailVerificationComponent as any) as any)) as typeof EmailVerificationComponent

src/containers/resetPassword/ResetPasswordComponent.tsx

@@ -184,4 +184,4 @@ const mapStateToProps = (state: any, ownProps: IResetPasswordComponentProps) =>
 }
 
 // - Connect component to redux store
-export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ResetPasswordComponent as any) as any)) as typeof ResetPasswordComponent
+export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(ResetPasswordComponent as any) as any)) as typeof ResetPasswordComponent

src/containers/setting/SettingComponent.tsx

@@ -230,4 +230,4 @@ const mapStateToProps = (state: any, ownProps: ISettingComponentProps) => {
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SettingComponent as any) as any) as any)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(SettingComponent as any) as any) as any)

src/containers/signup/SignupComponent.tsx

@@ -292,4 +292,4 @@ const mapStateToProps = (state: any, ownProps: ISignupComponentProps) => {
 }
 
 // - Connect component to redux store
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SignupComponent as any) as any) as any)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any)(SignupComponent as any) as any) as any)