diff --git a/explorer/package.json b/explorer/package.json index c3ce6ff..be3eb8c 100644 --- a/explorer/package.json +++ b/explorer/package.json @@ -85,11 +85,17 @@ ] }, "babel": { + "plugins": [ + "flow-react-proptypes" + ], "presets": [ "react-app" ] }, "eslintConfig": { "extends": "react-app" + }, + "devDependencies": { + "babel-plugin-flow-react-proptypes": "^17.1.2" } } diff --git a/explorer/src/App.js b/explorer/src/App.js index 51d1081..19c182f 100644 --- a/explorer/src/App.js +++ b/explorer/src/App.js @@ -1,10 +1,12 @@ +// @flow import React, { Component } from 'react'; import data from './data.json'; import './App.css'; import { FileExplorer } from './FileExplorer.js'; import { UserExplorer } from './UserExplorer.js'; -class App extends Component { +type AppState = {selectedPath: string, selectedUser: ?string}; +class App extends Component<{}, AppState> { constructor() { super(); this.state = { diff --git a/explorer/src/FileExplorer.js b/explorer/src/FileExplorer.js index 41f11cc..34a715b 100644 --- a/explorer/src/FileExplorer.js +++ b/explorer/src/FileExplorer.js @@ -1,15 +1,13 @@ +// @flow import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import {buildTree} from './commitUtils'; -import {propTypes as commitUtilsPropTypes} from './commitUtils'; - -export class FileExplorer extends Component { - static propTypes = { - selectedPath: PropTypes.string, - onSelectPath: PropTypes.func.isRequired, - data: commitUtilsPropTypes.commitData.isRequired, - } +import type {CommitData, FileTree} from './commitUtils'; +export class FileExplorer extends Component<{ + selectedPath: string, + onSelectPath: (newPath: string) => void, + data: CommitData, +}> { render() { // within the FileExplorer, paths start with "./", outside they don't // which is hacky and should be cleaned up @@ -38,19 +36,16 @@ export class FileExplorer extends Component { } } -class FileEntry extends Component { - static propTypes = { - name: PropTypes.string.isRequired, - path: PropTypes.string.isRequired, - alwaysExpand: PropTypes.bool.isRequired, - - // The type for the tree is recursive, and is annoying to specify as - // a proptype. The Flow type definition is in commitUtils.js. - tree: PropTypes.object.isRequired, - - selectedPath: PropTypes.string.isRequired, - onSelectPath: PropTypes.func.isRequired, - } +class FileEntry extends Component<{ + name: string, + path: string, + alwaysExpand: bool, + tree: FileTree, + selectedPath: string, + onSelectPath: (newPath: string) => void, +}, { + expanded: bool, +}> { constructor() { super(); @@ -89,4 +84,5 @@ class FileEntry extends Component { {(this.state.expanded || this.props.alwaysExpand) && subEntries} } + } diff --git a/explorer/src/UserExplorer.js b/explorer/src/UserExplorer.js index 8da252d..bb574cd 100644 --- a/explorer/src/UserExplorer.js +++ b/explorer/src/UserExplorer.js @@ -1,18 +1,14 @@ +// @flow import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { - commitWeight, - propTypes as commitUtilsPropTypes, - userWeightForPath, -} from './commitUtils'; +import {commitWeight, userWeightForPath} from './commitUtils'; +import type {CommitData, FileTree} from './commitUtils'; -export class UserExplorer extends Component { - static propTypes = { - selectedPath: PropTypes.string.isRequired, - selectedUser: PropTypes.string, - onSelectUser: PropTypes.func.isRequired, - data: commitUtilsPropTypes.commitData.isRequired, - } +export class UserExplorer extends Component<{ + selectedPath: string, + selectedUser: ?string, + onSelectUser: (newUser: string) => void, + data: CommitData, +}> { render() { const weights = userWeightForPath(this.props.selectedPath, this.props.data, commitWeight); @@ -29,16 +25,16 @@ export class UserExplorer extends Component { {entries} } + } /** * Record the cred earned by the user in a given scope. */ -class UserEntry extends Component { - static propTypes = { - userId: PropTypes.string.isRequired, - weight: PropTypes.number.isRequired, - } +class UserEntry extends Component<{ + userId: string, + weight: number, +}> { render() { return