Add PropTypes to existing React components

Test Plan:
Run `yarn start` and note that the app runs without any console
warnings, but that changing some of the PropTypes to introduce an error
actually does cause a warning. Upcoming: an automatic test for this.

wchargin-branch: add-proptypes
This commit is contained in:
William Chargin 2018-02-16 16:11:59 -08:00 committed by Dandelion Mané
parent 011e9a755b
commit 1d0368411c
3 changed files with 60 additions and 5 deletions

View File

@ -1,7 +1,15 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {buildTree} from './commitUtils'; import {buildTree} from './commitUtils';
import {propTypes as commitUtilsPropTypes} from './commitUtils';
export class FileExplorer extends Component { export class FileExplorer extends Component {
static propTypes = {
selectedPath: PropTypes.string,
onSelectPath: PropTypes.func.isRequired,
data: commitUtilsPropTypes.commitData.isRequired,
}
render() { render() {
// within the FileExplorer, paths start with "./", outside they don't // within the FileExplorer, paths start with "./", outside they don't
// which is hacky and should be cleaned up // which is hacky and should be cleaned up
@ -31,6 +39,18 @@ export class FileExplorer extends Component {
} }
class FileEntry 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,
}
constructor() { constructor() {
super(); super();

View File

@ -1,7 +1,19 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import {userWeightForPath, commitWeight} from './commitUtils'; import PropTypes from 'prop-types';
import {
commitWeight,
propTypes as commitUtilsPropTypes,
userWeightForPath,
} from './commitUtils';
export class UserExplorer extends Component { export class UserExplorer extends Component {
static propTypes = {
selectedPath: PropTypes.string.isRequired,
selectedUser: PropTypes.string,
onSelectUser: PropTypes.func.isRequired,
data: commitUtilsPropTypes.commitData.isRequired,
}
render() { render() {
const weights = userWeightForPath(this.props.selectedPath, this.props.data, commitWeight); const weights = userWeightForPath(this.props.selectedPath, this.props.data, commitWeight);
const sortedUserWeightTuples = Object.entries(weights).sort((a,b) => b[1] - a[1]); const sortedUserWeightTuples = Object.entries(weights).sort((a,b) => b[1] - a[1]);
@ -16,11 +28,15 @@ export class UserExplorer extends Component {
} }
} }
/**
* Record the cred earned by the user in a given scope.
*/
class UserEntry extends Component { class UserEntry extends Component {
// Record the cred earned by the user in a given scope static propTypes = {
// Props: userId: PropTypes.string.isRequired,
// userId, string weight: PropTypes.number.isRequired,
// weight, number }
render() { render() {
return <div className="user-entry"> return <div className="user-entry">
<span> {this.props.userId} </span> <span> {this.props.userId} </span>

View File

@ -1,5 +1,7 @@
// @flow // @flow
import PropTypes from 'prop-types';
type CommitData = { type CommitData = {
// TODO improve variable names // TODO improve variable names
fileToCommits: {[filename: string]: string[]}; fileToCommits: {[filename: string]: string[]};
@ -7,6 +9,23 @@ type CommitData = {
authors: string[]; authors: string[];
} }
export const propTypes = {
commitData: PropTypes.shape({
fileToCommits: PropTypes.objectOf(
PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
).isRequired,
commits: PropTypes.objectOf(PropTypes.shape({
author: PropTypes.string.isRequired,
stats: PropTypes.objectOf(PropTypes.shape({
lines: PropTypes.number.isRequired,
insertions: PropTypes.number.isRequired,
deletions: PropTypes.number.isRequired,
}).isRequired).isRequired,
}).isRequired).isRequired,
}),
};
type Commit = { type Commit = {
author: string; author: string;
stats: {[filename: string]: FileStats}; stats: {[filename: string]: FileStats};