[Chore] Flow: Add Type Definitions for State and Props

Add type definition for Props for both component and HoC. Added one line documentation to improve doc. Signed-off-by: Progyan Bhattacharya <[email protected]>
interviewstreet · Nov 13, 2019 · 3a12192 · 3a12192
1 parent cc78989
commit 3a12192
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 8 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,7 @@
 {
   "presets": ["@babel/preset-react", "@babel/env"],
   "plugins": [
+    "@babel/plugin-transform-flow-strip-types",
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-transform-runtime"

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@babel/core": "^7.4.3",
     "@babel/plugin-proposal-class-properties": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
+    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",

diff --git a/src/OptimisticToggle.js b/src/OptimisticToggle.js
@@ -1,22 +1,36 @@
-import React, { Component } from 'react';
+// @flow
+import React, { Component, SyntheticEvent } from 'react';
 
 const noop = () => {};
 
-class OptimisticToggle extends Component {
-  static defaultProps = {
+type Props = {
+  /** Initial Value of the Checkbox */
+  initialValue?: boolean,
+  /** On-change handler that returns a Promise Object */
+  action?: (toggleState: boolean, event: SyntheticEvent) => Promise<any>,
+  /** UI Component that has been passed as children */
+  children?: React.ReactNode,
+};
+
+type State = {
+  optimisticState: boolean,
+};
+
+class OptimisticToggle extends Component<Props, State> {
+  static defaultProps: Props = {
     initialValue: false,
     action: noop,
     children: noop,
   };
 
-  currentPromise = null;
+  currentPromise: ?Promise = null;
   failedCount = 0;
 
   state = {
     optimisticState: this.props.initialValue,
   };
 
-  handleToggle = event => {
+  handleToggle = (event: SyntheticEvent) => {
     const newToggled = !this.state.optimisticState;
     this.setState({
       optimisticState: newToggled,

diff --git a/src/useOptimisticToggle.js b/src/useOptimisticToggle.js
@@ -1,13 +1,20 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, SyntheticEvent } from 'react';
 
 const noop = () => {};
 
-function useOptimisticToggle({ initialValue = false, action = noop }) {
+type Props = {
+  /** Initial Value of the Checkbox */
+  initialValue?: boolean,
+  /** On-change handler that returns a Promise Object */
+  action?: (toggleState: boolean, event: SyntheticEvent) => Promise<any>,
+};
+
+function useOptimisticToggle({ initialValue = false, action = noop }: Props) {
   const [stateOptimistic, setStateOptimistic] = useState(initialValue);
   const refCurrentPromise = useRef();
   const refFailedCount = useRef(0);
 
-  function handleToggle(event) {
+  function handleToggle(event: SyntheticEvent) {
     const newToggled = !stateOptimistic;
     setStateOptimistic(newToggled);
 

diff --git a/yarn.lock b/yarn.lock
@@ -371,6 +371,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-flow@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.2.0.tgz#a765f061f803bc48f240c26f8747faf97c26bf7c"
+  integrity sha512-r6YMuZDWLtLlu0kqIim5o/3TNRAlWb073HwT3e2nKf9I8IIvOggPrnILYPsrrKilmn/mYEMCf/Z07w3yQJF6dg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
@@ -482,6 +489,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-flow-strip-types@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
+  integrity sha512-WyVedfeEIILYEaWGAUWzVNyqG4sfsNooMhXWsu/YzOvVGcsnPb5PguysjJqI3t3qiaYj0BR8T2f5njdjTGe44Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+
 "@babel/plugin-transform-for-of@^7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.3.tgz#c36ff40d893f2b8352202a2558824f70cd75e9fe"