Switch to using tslint/tsfmt (#109)

* Switch to using tslint/tsfmt * tsfmt
zmbush · Oct 5, 2019 · d292122 · d292122
1 parent 738cf48
commit d292122
Show file tree

Hide file tree

Showing 36 changed files with 971 additions and 1,471 deletions.
diff --git a/.eslintrc.yaml b/.eslintrc.yaml
diff --git a/.travis.yml b/.travis.yml
@@ -18,6 +18,8 @@ before_script:
   - cargo build
 script:
   - yarn run webpack
+  - yarn tslint -c tslint.json 'web/src/**/*.ts{,x}' --exclude '**/*.scss.d.ts'
+  - yarn tsfmt --verify
   - cargo clippy --all -- -D clippy::all
   - cargo fmt --all -- --check
   - cargo test
diff --git a/Procfile b/Procfile
@@ -1,5 +1,5 @@
 cargo-test: cargo watch --ignore '*/web/*' -s 'cargo test --all --color=always && cargo clippy --all --color=always && touch .trigger'
-eslint: rg --files | grep ^web/ | entr -d -r yarn run eslint --ext .jsx,.js --color web/src
+tslint: rg --files | grep ^web/ | entr -d -r yarn tslint -c tslint.json 'web/src/**/*.ts{,x}' --exclude '**/*.scss.d.ts'
 
 webpack: yarn run webpack -- --color -w
 budgetron: cargo watch --no-gitignore -w .trigger -s "cargo run --color=always --release -- -f data/`\ls data | tail -n1`/*.csv --serve --port $PORT"
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "@types/react-dom": "^16.9.1",
     "@types/recharts": "^1.1.21",
     "airbnb-prop-types": "^2.8.1",
-    "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-flow-react-proptypes": "^25.1.0",
     "babel-polyfill": "^6.23.0",
@@ -28,23 +27,12 @@
     "css-modules-typescript-loader": "^3.0.1",
     "d3-scale": "^3.1.0",
     "d3-scale-chromatic": "^1.5.0",
-    "eslint": "^6.5.1",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-flow-header": "^0.2.0",
-    "eslint-plugin-flowtype": "^2.32.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.4.0",
     "file-saver": "^1.3.3",
     "flow": "^0.2.3",
     "flow-bin": "^0.58.0",
     "flow-coverage-report": "^0.6.1",
     "flow-typed": "^2.0.0",
     "flow-watch": "^1.1.1",
-    "formsy-material-ui": "^0.6.0",
-    "formsy-react": "^0.19.2",
     "html-webpack-plugin": "^3.2.0",
     "immutability-helper": "^3.0.1",
     "material-ui": "^0.20.2",
@@ -64,7 +52,9 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.0",
     "ts-loader": "^6.2.0",
+    "tslint": "^5.20.0",
     "typescript": "^3.6.3",
+    "typescript-formatter": "^7.2.2",
     "webpack": "^4.41.0"
   },
   "devDependencies": {

diff --git a/tsfmt.json b/tsfmt.json
@@ -0,0 +1,5 @@
+{
+  "tabSize": 2,
+  "indentSize": 2,
+  "newLineCharacter": "\n"
+}
diff --git a/tslint.json b/tslint.json
@@ -0,0 +1,9 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": {},
+    "rulesDirectory": []
+}
diff --git a/web/src/components/Budgetron/index.tsx b/web/src/components/Budgetron/index.tsx
@@ -1,25 +1,25 @@
+import ByTimeframe from "components/ByTimeframe";
 import Cashflow from "components/Cashflow";
 import Categories from "components/Categories";
-import * as React from "react";
-import RollingBudget from "components/RollingBudget";
-import ByTimeframe from "components/ByTimeframe";
 import IncomeExpenseRatio from "components/IncomeExpenseRatio";
-import { Report, TimedReportData, Transaction } from "util/data";
+import RollingBudget from "components/RollingBudget";
 import Chip from "material-ui/Chip";
+import * as React from "react";
+import { Report, TimedReportData, Transaction } from "util/data";
 
 import Page from "components/Page";
 
 import * as style from "./style.scss";
 
 const componentConfig = (
-  type: "RollingBudget" | "Cashflow" | "Categories" | "IncomeExpenseRatio"
+  type: "RollingBudget" | "Cashflow" | "Categories" | "IncomeExpenseRatio",
 ) => {
   const config: {
     Component: string | React.ComponentType<any>;
     count: number;
   } = {
     Component: "div",
-    count: 1
+    count: 1,
   };
   if (type === "RollingBudget") {
     config.Component = RollingBudget;
@@ -36,14 +36,14 @@ const componentConfig = (
   return config;
 };
 
-type TimeframeReportsProps = {
-  data: Array<Report>;
+interface ITimeframeReportsProps {
+  data: Report[];
   timeframe: "Year" | "Quarter" | "Month";
   transactions: Map<string, Transaction>;
   display: boolean;
-};
+}
 
-const TimeframeReports = (props: TimeframeReportsProps) => {
+const TimeframeReports = (props: ITimeframeReportsProps) => {
   if (props.display) {
     return (
       <>
@@ -73,14 +73,16 @@ const TimeframeReports = (props: TimeframeReportsProps) => {
   return null;
 };
 
-type SimpleReportsProps = {
-  data: Array<Report>;
-};
+interface ISimpleReportsProps {
+  data: Report[];
+}
 
-const SimpleReports = (props: SimpleReportsProps) => (
+const SimpleReports = (props: ISimpleReportsProps) => (
   <>
     {props.data.map(({ data, report, key }) => {
-      if (data instanceof TimedReportData) return null;
+      if (data instanceof TimedReportData) {
+        return null;
+      }
       const cfg = componentConfig(report.config.type);
       return (
         <Page key={key} className={style.report} title={report.name}>
@@ -96,30 +98,30 @@ const SimpleReports = (props: SimpleReportsProps) => (
   </>
 );
 
-type BudgetronProps = {
-  data: Array<Report>;
+interface IBudgetronProps {
+  data: Report[];
   transactions: Map<string, Transaction>;
-};
+}
 
-type BudgetronState = {
+interface IBudgetronState {
   month: boolean;
   quarter: boolean;
   year: boolean;
-};
+}
 
-class Budgetron extends React.Component<BudgetronProps, BudgetronState> {
-  constructor(props: BudgetronProps) {
+class Budgetron extends React.Component<IBudgetronProps, IBudgetronState> {
+  constructor(props: IBudgetronProps) {
     super(props);
 
     this.state = {
       month: false,
       quarter: false,
-      year: false
+      year: false,
     };
   }
 
-  getChip(period: "month" | "quarter" | "year", description: string) {
-    let bg = undefined;
+  public getChip(period: "month" | "quarter" | "year", description: string) {
+    let bg;
     if (this.state[period]) {
       bg = "#00FF00";
     }
@@ -130,17 +132,17 @@ class Budgetron extends React.Component<BudgetronProps, BudgetronState> {
     );
   }
 
-  toggle(period: "month" | "quarter" | "year") {
-    const newState: Pick<BudgetronState, typeof period> = {
+  public toggle(period: "month" | "quarter" | "year") {
+    const newState: Pick<IBudgetronState, typeof period> = {
       month: this.state.month,
       quarter: this.state.quarter,
-      year: this.state.year
+      year: this.state.year,
     };
     newState[period] = !newState[period];
     this.setState(newState);
   }
 
-  render() {
+  public render() {
     return (
       <div className={style.mainContent}>
         <div className={style.chipBag}>

diff --git a/web/src/components/ByTimeframe.tsx b/web/src/components/ByTimeframe.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
-import { ReportInfo, ReportData, Transaction } from "util/data";
-import Page from "components/Page";
 import Money from "components/Money";
+import Page from "components/Page";
 import * as moment from "moment";
+import * as React from "react";
+import { ReportData, ReportInfo, Transaction } from "util/data";
 
 const monthNames = [
   "January",
@@ -16,10 +16,10 @@ const monthNames = [
   "September",
   "October",
   "November",
-  "December"
+  "December",
 ];
 
-type Props = {
+interface IProps {
   timeframe: "Year" | "Quarter" | "Month";
   data: Map<Date, ReportData>;
   title: string;
@@ -28,42 +28,42 @@ type Props = {
   className?: string;
   count?: number;
   Component:
-    | string
-    | React.ComponentType<{
-        data: ReportData;
-        transactions: Map<string, Transaction>;
-        report: ReportInfo;
-        showGraph: boolean;
-      }>;
-};
-
-type State = {
+  | string
+  | React.ComponentType<{
+    data: ReportData;
+    transactions: Map<string, Transaction>;
+    report: ReportInfo;
+    showGraph: boolean;
+  }>;
+}
+
+interface IState {
   expanded: boolean;
   showGraph: Map<Date, boolean>;
-};
+}
 
-export default class ByTimeframe extends React.Component<Props, State> {
-  static defaultProps = {
+export default class ByTimeframe extends React.Component<IProps, IState> {
+  public static defaultProps = {
     className: null,
-    count: 1
+    count: 1,
   };
 
-  constructor(props: Props) {
+  constructor(props: IProps) {
     super(props);
 
     this.state = {
       expanded: false,
-      showGraph: new Map()
+      showGraph: new Map(),
     };
   }
 
-  getMostRecent(): Date {
+  public getMostRecent(): Date {
     return [...this.props.data.keys()]
       .sort((a, b) => a.getTime() - b.getTime())
       .reverse()[0];
   }
 
-  getAverageStartDate(): Date {
+  public getAverageStartDate(): Date {
     const mostRecent = this.getMostRecent();
     switch (this.props.timeframe) {
       case "Year":
@@ -83,16 +83,16 @@ export default class ByTimeframe extends React.Component<Props, State> {
     }
   }
 
-  getDateAgo(
+  public getDateAgo(
     count: moment.DurationInputArg1,
-    unit: moment.DurationInputArg2
+    unit: moment.DurationInputArg2,
   ): Date {
     return moment(this.getMostRecent())
       .subtract(count, unit)
       .toDate();
   }
 
-  printDate(date: Date): string | number {
+  public printDate(date: Date): string | number {
     switch (this.props.timeframe) {
       case "Year":
         return date.getFullYear();
@@ -105,9 +105,9 @@ export default class ByTimeframe extends React.Component<Props, State> {
     }
   }
 
-  stats(
+  public stats(
     count: moment.DurationInputArg1,
-    unit: moment.DurationInputArg2
+    unit: moment.DurationInputArg2,
   ): { mean: number; median: number } {
     const start = this.getDateAgo(count, unit);
     const dataPoints = [...this.props.data.entries()]
@@ -121,29 +121,29 @@ export default class ByTimeframe extends React.Component<Props, State> {
       .sort((a, b) => a[1] - b[1]);
     const medianIndex = Math.min(
       Math.round(dataPoints.length / 2),
-      dataPoints.length - 1
+      dataPoints.length - 1,
     );
     const median = dataPoints[medianIndex][1];
     const [meanCount, meanSum] = dataPoints.reduce(
       ([c1, a1], [c2, a2]) => [c1 + c2, a1 + a2],
-      [0, 0.0]
+      [0, 0.0],
     );
     const mean = meanSum / meanCount;
 
     return { median, mean };
   }
 
-  toggleExpanded = () => {
+  public toggleExpanded = () => {
     this.setState({ expanded: !this.state.expanded });
-  };
+  }
 
-  toggleGraph = (date: Date) => {
+  public toggleGraph = (date: Date) => {
     const { showGraph } = this.state;
     showGraph.set(date, !showGraph.get(date));
     this.setState({ showGraph });
-  };
+  }
 
-  render() {
+  public render() {
     if (this.props.data) {
       let timeframes = [...this.props.data.entries()]
         .sort((a, b) => a[0].getTime() - b[0].getTime())

diff --git a/web/src/components/Cashflow.tsx b/web/src/components/Cashflow.tsx
@@ -1,14 +1,14 @@
-import * as React from "react";
-import { CashflowData, ReportInfo } from "util/data";
 import Money from "components/Money";
 import TimeseriesChart from "components/TimeseriesChart";
+import * as React from "react";
+import { CashflowData, ReportInfo } from "util/data";
 
-type Props = {
+interface IProps {
   data: CashflowData;
   report: ReportInfo;
-};
+}
 
-const Cashflow = (props: Props) => {
+const Cashflow = (props: IProps) => {
   const { credit, debit } = props.data;
   const delta = parseInt(credit, 10) - parseInt(debit, 10);
   if (props.report.uiConfig.expensesOnly) {