Update flow

.flowconfig

@@ -1,8 +1,6 @@
 [ignore]
-<PROJECT_ROOT>/node_modules/fbjs/.*
 <PROJECT_ROOT>/node_modules/eslint-plugin-jsx-a11y/.*
 <PROJECT_ROOT>/vendor/bundle/.*
-<PROJECT_ROOT>/node_modules/draft-js/.*
 <PROJECT_ROOT>/node_modules/.*/test/.*
 
 [include]
@@ -14,3 +12,9 @@ app/javascript/types.js
 suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
 module.name_mapper='.*\(.scss\)' -> 'empty/object'
 module.name_mapper='.*\(.yml\)' -> 'empty/object'
+
+[untyped]
+.*/node_modules/draft-js/lib/DraftEditor.react.js.flow
+.*/node_modules/draft-js/lib/ContentBlock.js.flow
+.*/node_modules/draft-js/lib/ContentBlockNode.js.flow
+.*/node_modules/draft-js/lib/DraftEditorLeaf.react.js.flow

app/javascript/call_tool/CallToolView.js

@@ -49,10 +49,7 @@ type OwnProps = {
   filters?: any,
 };
 
-class CallToolView extends Component {
-  state: OwnState;
-  props: OwnProps;
-
+class CallToolView extends Component<OwnProps, OwnState> {
   constructor(props: OwnProps) {
     super(props);
 

app/javascript/call_tool_analytics/CallToolAnalyticsView.js

@@ -7,38 +7,33 @@ import MembersStatusTable from '../components/CallToolAnalytics/MembersStatusTab
 import TargetsChart from '../components/CallToolAnalytics/TargetsChart';
 import TargetsStatusTable from '../components/CallToolAnalytics/TargetsStatusTable';
 
-
-type Filter = 'all_time' | 'last_week'
+type Filter = 'all_time' | 'last_week';
 
 type OwnProps = {
-  pageId: string | number
-}
+  pageId: string | number,
+};
 
 type OwnState = {
   data?: {
     last_week: {
       member_calls: any,
-      target_calls: any
+      target_calls: any,
     },
     all_time: {
       member_calls: any,
-      target_calls: any
-    }
-
+      target_calls: any,
+    },
   },
-  filter: Filter
-}
-
-class CallToolViewAnalytics extends Component {
-  state: OwnState;
-  props: OwnProps;
+  filter: Filter,
+};
 
+class CallToolViewAnalytics extends Component<OwnProps, OwnState> {
   constructor(props: OwnProps) {
     super(props);
 
     this.state = {
       dataLoaded: false,
-      filter: 'all_time'
+      filter: 'all_time',
     };
   }
 
@@ -48,63 +43,125 @@ class CallToolViewAnalytics extends Component {
 
   fetchData() {
     const url = `/api/pages/${this.props.pageId}/analytics/call_tool`;
-    fetchJson(url).then((json) => {
-      this.setState({data: json['data']});
-    }).catch((response) => {
-      alert('Oops! Something went wrong, please try reloading the page.');
-    });
+    fetchJson(url)
+      .then(json => {
+        this.setState({ data: json['data'] });
+      })
+      .catch(response => {
+        alert('Oops! Something went wrong, please try reloading the page.');
+      });
   }
 
   updateFilter(filter: Filter) {
-    this.setState({filter});
+    this.setState({ filter });
   }
 
   render() {
-    if(!this.state.data) {
+    if (!this.state.data) {
       return this.renderLoading();
     }
 
-    const lastWeekButtonClasses = classnames(
-            {btn: true, 'btn-default': true, active: this.state.filter === 'last_week'}
-          ),
-          allTimeButtonClasses = classnames(
-            {btn: true, 'btn-default': true, active: this.state.filter === 'all_time'}
-          );
-
-    return(
+    const lastWeekButtonClasses = classnames({
+        btn: true,
+        'btn-default': true,
+        active: this.state.filter === 'last_week',
+      }),
+      allTimeButtonClasses = classnames({
+        btn: true,
+        'btn-default': true,
+        active: this.state.filter === 'all_time',
+      });
+
+    return (
       <div>
         <h1> Call Tool </h1>
         <div className="nav">
           <div className="btn-group" role="group">
-            <button className={lastWeekButtonClasses} type="button" onClick={() => { this.updateFilter('last_week'); }}> Last Week </button>
-            <button className={allTimeButtonClasses} type="button" onClick={() => { this.updateFilter('all_time'); }}> All Time </button>
+            <button
+              className={lastWeekButtonClasses}
+              type="button"
+              onClick={() => {
+                this.updateFilter('last_week');
+              }}
+            >
+              {' '}
+              Last Week{' '}
+            </button>
+            <button
+              className={allTimeButtonClasses}
+              type="button"
+              onClick={() => {
+                this.updateFilter('all_time');
+              }}
+            >
+              {' '}
+              All Time{' '}
+            </button>
           </div>
         </div>
 
         <h4> Members stats </h4>
 
         <div className="row">
           <div className="col1">
-            { (this.state.filter === 'last_week') &&
-                <MembersChart data={this.state.data && this.state.data['last_week']['member_calls']['status_totals_by_day']} /> }
-            { (this.state.filter === 'all_time') &&
-                <MembersChart data={this.state.data && this.state.data['all_time']['member_calls']['status_totals_by_week']} xLabel='week' /> }
+            {this.state.filter === 'last_week' && (
+              <MembersChart
+                data={
+                  this.state.data &&
+                  this.state.data['last_week']['member_calls'][
+                    'status_totals_by_day'
+                  ]
+                }
+              />
+            )}
+            {this.state.filter === 'all_time' && (
+              <MembersChart
+                data={
+                  this.state.data &&
+                  this.state.data['all_time']['member_calls'][
+                    'status_totals_by_week'
+                  ]
+                }
+                xLabel="week"
+              />
+            )}
           </div>
 
           <div className="col2">
-            <MembersStatusTable data={this.state.data && this.state.data[this.state.filter]['member_calls']['status_totals']} />
+            <MembersStatusTable
+              data={
+                this.state.data &&
+                this.state.data[this.state.filter]['member_calls'][
+                  'status_totals'
+                ]
+              }
+            />
           </div>
         </div>
 
         <h4> Targets stats </h4>
 
         <div className="row">
           <div className="col1">
-            <TargetsChart data={this.state.data && this.state.data[this.state.filter]['target_calls']['status_totals_by_target']} />
+            <TargetsChart
+              data={
+                this.state.data &&
+                this.state.data[this.state.filter]['target_calls'][
+                  'status_totals_by_target'
+                ]
+              }
+            />
           </div>
 
           <div className="col2">
-            <TargetsStatusTable data={this.state.data && this.state.data[this.state.filter]['target_calls']['status_totals']} />
+            <TargetsStatusTable
+              data={
+                this.state.data &&
+                this.state.data[this.state.filter]['target_calls'][
+                  'status_totals'
+                ]
+              }
+            />
           </div>
         </div>
       </div>

app/javascript/components/AmountSelection/AmountSelection.js

@@ -4,15 +4,15 @@ import { FormattedMessage } from 'react-intl';
 import DonationBands from '../DonationBands/DonationBands';
 import Button from '../Button/Button';
 import ee from '../../shared/pub_sub';
-
 import CurrencyAmount from '../../components/CurrencyAmount';
+import type { Node } from 'react';
 
 export type OwnProps = {
   donationAmount?: number,
   donationBands: { [id: string]: number[] },
   donationFeaturedAmount?: number,
   currency: string,
-  nextStepTitle?: mixed,
+  nextStepTitle?: Node,
   selectAmount: (amount: ?number) => void,
   changeCurrency: (currency: string) => void,
   proceed: () => void,
@@ -23,10 +23,7 @@ export type OwnState = {
   currencyDropdownVisible: boolean,
 };
 
-export default class AmountSelection extends Component {
-  props: OwnProps;
-  state: OwnState;
-
+export default class AmountSelection extends Component<OwnProps, OwnState> {
   static title(amount: ?number, currency: string): any {
     if (amount == null) {
       return (
@@ -105,9 +102,7 @@ export default class AmountSelection extends Component {
           <select
             value={this.props.currency}
             className="AmountSelection__currency-selector"
-            onChange={(e: SyntheticInputEvent) =>
-              this.onSelectCurrency(e.target.value)
-            }
+            onChange={e => this.onSelectCurrency(e.target.value)}
           >
             {Object.keys(this.props.donationBands).map(currency => {
               return (

app/javascript/components/Braintree/BraintreeCardFields.js

@@ -20,15 +20,13 @@ type OwnProps = {
   onFailure?: (data: any) => void,
 };
 
-class BraintreeCardFields extends Component {
-  props: OwnProps;
-
-  state: {
-    hostedFields: ?HostedFieldsInstance,
-    cardType?: string,
-    errors: { [key: string]: boolean },
-  };
+type OwnState = {
+  hostedFields: ?HostedFieldsInstance,
+  cardType?: string,
+  errors: { [key: string]: boolean },
+};
 
+class BraintreeCardFields extends Component<OwnProps, OwnState> {
   constructor(props: OwnProps) {
     super(props);
 
@@ -133,7 +131,7 @@ class BraintreeCardFields extends Component {
     );
   }
 
-  submit(event?: SyntheticEvent) {
+  submit(event?: SyntheticEvent<HTMLFormElement>) {
     if (event) event.preventDefault();
     this.resetErrors();
 

app/javascript/components/Braintree/PayPal.js

@@ -2,12 +2,11 @@
 import { Component } from 'react';
 import paypal from 'braintree-web/paypal';
 import type {
-  PayPalInstance,
-  PayPalTokenizeOptions,
-  PayPalTokenizePayload,
-  PayPalFlow,
-} from 'braintree-web/paypal';
-import type { Client } from 'braintree-web';
+  BraintreeError,
+  Client,
+  PayPal as IPayPal,
+  PayPalOptions,
+} from 'braintree-web';
 
 type OwnProps = {
   currency: string,
@@ -18,13 +17,12 @@ type OwnProps = {
   onFailure?: (data: any) => void,
 };
 
-export default class PayPal extends Component {
-  props: OwnProps;
-  state: {
-    paypalInstance: ?PayPalInstance,
-    disabled: boolean,
-  };
+type OwnState = {
+  paypalInstance: ?IPayPal,
+  disabled: boolean,
+};
 
+export default class PayPal extends Component<OwnProps, OwnState> {
   constructor(props: OwnProps) {
     super(props);
     this.state = {
@@ -43,32 +41,34 @@ export default class PayPal extends Component {
     }
   }
 
-  createPayPalInstance(client: any) {
-    paypal.create({ client }, this.onPayPalCreate.bind(this));
+  createPayPalInstance(client: Client) {
+    paypal.create({ client }, this.onPayPalCreate);
   }
 
-  onPayPalCreate(error: any, paypalInstance: any) {
-    if (error) return;
+  onPayPalCreate = (error: BraintreeError, paypalInstance: any) => {
+    if (error) {
+      throw error;
+    }
 
     this.setState({ paypalInstance, disabled: false }, () => {
       if (this.props.onInit) {
         this.props.onInit();
       }
     });
-  }
+  };
 
   componentWillUnmount() {
     if (this.state.paypalInstance) {
       this.state.paypalInstance.teardown();
     }
   }
 
-  flow(): PayPalFlow {
+  flow(): $PropertyType<PayPalOptions, 'flow'> {
     if (this.props.vault) return 'vault';
     return 'checkout';
   }
 
-  tokenizeOptions(): PayPalTokenizeOptions {
+  tokenizeOptions(): PayPalOptions {
     const { amount, currency, vault } = this.props;
     if (vault) {
       return { flow: 'vault' };
@@ -91,7 +91,5 @@ export default class PayPal extends Component {
     });
   }
 
-  render() {
-    return null;
-  }
+  render = () => null;
 }