Add typing a container doc

SUMMARY.MD

@@ -22,7 +22,8 @@
   - [[MO] Set up Detox with Jest and automate it on Bitrise *(~ 1h)*](/react-native/tests/setup-detox-jest.mo.md)
   - [[Standard] Handle Errors and Exceptions in Javascript](/backend/node-js/handle-errors-and-exceptions-in-javascript.s.md)
 - Flowtype
- - [[Standard] Flowtype](/flowtype/flowtype.s.md)
+  - [[Standard] Flowtype](/flowtype/flowtype.s.md)
+  - [[Standard] Typing a Container](/flowtype/typing-a-container.s.md)
 - Project Standards
   - [Project Success](/project-standards/project-success/index.md)
     - [[Standard] Deployed in production](/project-standards/project-success/production.s.md)

flowtype/typing-a-container.s.md

@@ -0,0 +1,100 @@
+# [Standard] Flow Typing a container
+
+## Owner: [Yann Leflour](https://github.com/yleflour)
+
+## Checks
+
+- [ ] The component's ownprops have to be typed in `TOWnProps`
+- [ ] The containers exposes its resulting props through a `TContainerProps` type
+- [ ] Your component uses your `TContainerProps` in its `TProps`
+
+## How
+
+### 0. Add a `$Return` utils type (1 min)
+
+- In your flowtypes folder a _utils.js_ folder
+- Add the following type, it will help you extract the result of a function
+
+```
+// flowtypes/utils.js
+// @flow
+
+type Return_<R, F: (...args: Array<any>) => R> = R;
+declare type $Return<T> = Return_<*, T>;
+
+```
+
+### 1. Type your ownprops (2 min)
+
+- In your _mycomponent.container.js_ file, declare your ownprops type. Those are the props required by the mapStateToProps or mapDispatchToProps methods.
+
+```
+// mycomponent.container.js
+// @flow
+
+type TOwnProps = {
+  myItemId: string,
+}
+
+const mapStateToProps = (state: TRootState, ownProps: TOwnProps) => ({...});
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: TOwnProps) => ({...});
+```
+
+### 2. Type your _mapStateToProps_ (2 min)
+
+- In your _mycomponent.container.js_ once you've written the _mapStateToProps_ method, declare your _TStateProps_
+
+```
+// mycomponent.container.js
+// @flow
+
+const mapStateToProps = (state: TRootState, ownProps: TOwnProps) => ({...});
+
+type TStateProps = $Return<typeof mapStateToProps>;
+```
+
+### 3. Type your _mapDispatchToProps_ (2 min)
+
+- In your _mycomponent.container.js_ once you've written the _mapDispatchToProps_ method, declare your _TDispatchProps_
+
+```
+// mycomponent.container.js
+// @flow
+
+const mapDispatchToProps1 = (state: TRootState, ownProps: TOwnProps) => ({...});
+
+type TDispatchProps1 = $Return<typeof mapStateToProps1>;
+
+// OR
+
+const mapDispatchToProps2 = {...};
+
+type TDispatchProps2 = typeof mapStateToProps2;
+```
+
+### 4. Type your _TContainerProps_ (2 min)
+
+- In your _mycomponent.container.js_ declare your _TContainerProps_ and export them
+
+```
+// mycomponent.container.js
+// @flow
+
+export type TContainerProps = TStateProps & TDispatchProps;
+```
+
+### 5. Type your TProps (1 min)
+
+- In your _mycomponent.component.js_ use your _TContainerProps_
+
+```
+// mycomponent.component.js
+// @flow
+
+import { type TContainerProps } from './mycomponent.container.js';
+
+type TProps = TContainerProps & {
+  // Add other component required props here
+}
+
+```