Flow

zmbush · Dec 14, 2017 · 581b4c6 · 581b4c6
1 parent a2857d6
commit 581b4c6
Show file tree

Hide file tree

Showing 17 changed files with 420 additions and 2,404 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
@@ -1,6 +1,8 @@
 extends: "airbnb"
 parser: "babel-eslint"
-plugins: ["react"]
+plugins:
+  - react
+  - flowtype
 settings:
   import/resolver: "webpack"
 env:

diff --git a/.flowconfig b/.flowconfig
@@ -0,0 +1,25 @@
+[ignore]
+
+[include]
+.*/web/src/.*
+
+[libs]
+
+[lints]
+
+[options]
+module.file_ext=.css
+module.file_ext=.scss
+module.file_ext=.jsx
+module.file_ext=.js
+module.name_mapper='.*\(.s?css\)' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
+module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
+module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
+module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
+module.name_mapper='^\(components\|util\)\/\(.*\)$' -> '<PROJECT_ROOT>/web/src/\1/\2'
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
+
+[strict]
diff --git a/package.json b/package.json
@@ -29,22 +29,19 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "file-saver": "^1.3.3",
-    "firebase": "^3.7.5",
-    "firebase-tools": "^3.6.1",
-    "firebaseui": "^1.0.1",
     "flow": "^0.2.3",
-    "flow-bin": "0.44.0",
+    "flow-bin": "^0.58.0",
     "flow-coverage-report": "^0.3.0",
     "flow-typed": "^2.0.0",
     "formsy-material-ui": "^0.6.0",
     "formsy-react": "^0.19.2",
     "html-webpack-plugin": "^2.28.0",
     "immutability-helper": "^2.1.2",
-    "jszip": "^3.1.3",
-    "material-ui": "^0.17.1",
+    "material-ui": "^0.19.4",
     "node-sass": "^4.5.2",
     "normalize.css": "^7.0.0",
     "prop-types": "^15.5.8",
+    "prop-types-exact": "^1.1.1",
     "re-base": "^2.7.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

diff --git a/web/src/budgetron-types.jsx b/web/src/budgetron-types.jsx
diff --git a/web/src/components/Budgetron/index.jsx b/web/src/components/Budgetron/index.jsx
@@ -1,18 +1,19 @@
+// @flow
+
 import Cashflow from 'components/Cashflow';
 import Categories from 'components/Categories';
-import ReactDOM from 'react-dom';
 import React from 'react';
 import RollingBudget from 'components/RollingBudget';
 import ByTimeframe from 'components/ByTimeframe';
-import PropTypes from 'prop-types';
-import AirbnbPropTypes from 'airbnb-prop-types';
-import BudgetronTypes from 'budgetron-types';
+import type { TransactionType, ReportType } from 'util/budgetron-types';
+
 import Page from 'components/Page';
+
 import style from './style.scss';
 
 const componentConfig = (type) => {
   const config = {
-    Component: ReactDOM.div,
+    Component: 'div',
     count: 1,
   };
   if (type === 'RollingBudget') {
@@ -27,76 +28,60 @@ const componentConfig = (type) => {
   return config;
 };
 
-const TimeframeReports = (props) => {
+type TimeframeReportsProps = {
+  data: Array<ReportType>,
+  timeframe: 'Year' | 'Quarter' | 'Month',
+  transactions: { [key: string]: TransactionType },
+};
+
+const TimeframeReports = (props: TimeframeReportsProps) => {
   const timeframeKey = `by_${props.timeframe.toLocaleLowerCase()}`;
   const reports = props.data.filter(({ report }) => report[timeframeKey]);
-  return (
-    <div className={style.reports}>
-      { reports.map(({ data, report, key }, i) => [
-        (i > 0) ? <div key="spacer" className={style.spacer} /> : null,
-        <ByTimeframe
-          key={key}
-          title={report.name}
-          timeframe={props.timeframe}
-          transactions={props.transactions}
-          report={report}
-          data={data[timeframeKey]}
-          className={style.report}
-          {...componentConfig(report.config.type)}
-        />,
-      ]) }
-    </div>
-  );
+  return reports.map(({ data, report, key }) => (
+    <ByTimeframe
+      key={key}
+      title={report.name}
+      timeframe={props.timeframe}
+      transactions={props.transactions}
+      report={report}
+      data={data[timeframeKey]}
+      className={style.report}
+      {...componentConfig(report.config.type)}
+    />
+  ));
 };
 
-TimeframeReports.propTypes = {
-  data: PropTypes.arrayOf(BudgetronTypes.Report).isRequired,
-  timeframe: PropTypes.oneOf(['Year', 'Quarter', 'Month']).isRequired,
-  transactions: AirbnbPropTypes.valuesOf(BudgetronTypes.Transaction).isRequired,
+type SimpleReportsProps = {
+  data: Array<ReportType>,
 };
 
-const SimpleReports = props => (
-  <div className={style.reports}>
-    { props.data.map(({ data, report, key }) => {
-      const hasTimeframes = Object.keys(data).some(k => k.startsWith('by_'));
-      const cfg = componentConfig(report.config.type);
-      if (hasTimeframes) return null;
-      return (
-        <Page
-          key={key}
-          className={style.report}
-          title={report.name}
-        >
-          <cfg.Component {...props} count={cfg.count} data={data} report={report} />
-        </Page>
-      );
-    }) }
-  </div>
-);
+const SimpleReports = (props: SimpleReportsProps) => props.data.map(({ data, report, key }) => {
+  const hasTimeframes = Object.keys(data).some(k => k.startsWith('by_'));
+  const cfg = componentConfig(report.config.type);
+  if (hasTimeframes) return null;
+  return (
+    <Page
+      key={key}
+      className={style.report}
+      title={report.name}
+    >
+      <cfg.Component {...props} count={cfg.count} data={data} report={report} />
+    </Page>
+  );
+});
 
-SimpleReports.propTypes = {
-  data: PropTypes.arrayOf(BudgetronTypes.Report).isRequired,
+type BudgetronProps = {
+  data: Array<ReportType>,
+  transactions: { [key: string]: TransactionType },
 };
 
-export default class Budgetron extends React.Component {
-  static defaultProps = {
-    data: [],
-    transactions: {},
-  };
-
-  static propTypes = {
-    data: PropTypes.arrayOf(BudgetronTypes.Report).isRequired,
-    transactions: AirbnbPropTypes.valuesOf(BudgetronTypes.Transaction).isRequired,
-  };
+const Budgetron = (props: BudgetronProps) => (
+  <div className={style.mainContent}>
+    <SimpleReports {...props} />
+    <TimeframeReports timeframe="Month" {...props} />
+    <TimeframeReports timeframe="Quarter" {...props} />
+    <TimeframeReports timeframe="Year" {...props} />
+  </div>
+);
 
-  render() {
-    return (
-      <div>
-        <SimpleReports {...this.props} />
-        <TimeframeReports timeframe="Month" {...this.props} />
-        <TimeframeReports timeframe="Quarter" {...this.props} />
-        <TimeframeReports timeframe="Year" {...this.props} />
-      </div>
-    );
-  }
-}
+export default Budgetron;
diff --git a/web/src/components/Budgetron/style.scss b/web/src/components/Budgetron/style.scss
@@ -10,3 +10,7 @@
 .spacer {
   flex: 1;
 }
+
+.mainContent {
+  padding: 10px;
+}
diff --git a/web/src/components/ByTimeframe.jsx b/web/src/components/ByTimeframe.jsx
@@ -1,39 +1,50 @@
+// @flow
+
 import React from 'react';
-import PropTypes from 'prop-types';
-import AirbnbPropTypes from 'airbnb-prop-types';
-import BudgetronTypes from 'budgetron-types';
+import type { ComponentType } from 'react';
+import type { ReportData, ReportInfo, Transaction } from 'util/budgetron-types';
 import Page from 'components/Page';
 
 const monthNames = [
   'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
   'September', 'October', 'November', 'December',
 ];
 
-export default class ByTimeframe extends React.Component {
-  static propTypes = {
-    timeframe: PropTypes.oneOf(['Year', 'Quarter', 'Month']).isRequired,
-    data: BudgetronTypes.ReportData.isRequired,
-    title: PropTypes.string.isRequired,
-    transactions: AirbnbPropTypes.valuesOf(BudgetronTypes.Transaction).isRequired,
-    report: BudgetronTypes.ReportInfo.isRequired,
-    className: PropTypes.string,
-    count: PropTypes.number,
-  };
+type Props = {
+  timeframe: 'Year' | 'Quarter' | 'Month',
+  data: ReportData,
+  title: string,
+  transactions: { [uid: string]: Transaction },
+  report: ReportInfo,
+  className?: string,
+  count?: number,
+  Component: ComponentType<{
+    data: ReportData,
+    transactions: { [uid: string]: Transaction },
+    report: ReportInfo,
+  }>,
+};
+
+type State = {
+  expanded: bool,
+};
+
 
+export default class ByTimeframe extends React.Component<Props, State> {
   static defaultProps = {
     className: null,
     count: 1,
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
       expanded: false,
     };
   }
 
-  printDate(date) {
+  printDate(date: Date) {
     if (this.props.timeframe === 'Year') {
       return date.getFullYear();
     } else if (this.props.timeframe === 'Quarter') {
@@ -58,11 +69,12 @@ export default class ByTimeframe extends React.Component {
       }
 
       const title = `${this.props.title} By ${this.props.timeframe}`;
+      const { Component } = this.props;
       return (
         <Page className={this.props.className} title={title} onClick={this.toggleExpanded}>
           { timeframes.map(([date, content]) => (
             <div key={date}>
-              <b>{ this.printDate(date) }</b> <this.props.Component
+              <b>{ this.printDate(date) }</b> <Component
                 data={content}
                 transactions={this.props.transactions}
                 report={this.props.report}