Added new types for Course, CourseRun, added flow to many files

I added flow and proper `props` validation to a number of files - our typechecking should be a lot more useful now, although there are still places we don't have it turned on.
mitodl · Jun 23, 2016 · 3edaa72 · 3edaa72
1 parent 8ce32bb
commit 3edaa72
Show file tree

Hide file tree

Showing 38 changed files with 258 additions and 179 deletions.
diff --git a/static/js/components/ConfirmDeletion.js b/static/js/components/ConfirmDeletion.js
@@ -4,11 +4,11 @@ import Dialog from 'material-ui/Dialog';
 import Button from 'react-mdl/lib/Button';
 
 export default class ConfirmDeletion extends React.Component {
-  static propTypes = {
-    close:        React.PropTypes.func,
-    deleteFunc:   React.PropTypes.func,
-    open:         React.PropTypes.bool,
-    confirmText:  React.PropTypes.string,
+  props: {
+    close:        () => void,
+    deleteFunc:   () => void,
+    open:         boolean,
+    confirmText:  string,
   };
 
   deleteAndClose: Function = (): void => {

diff --git a/static/js/components/CourseList.js b/static/js/components/CourseList.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';

diff --git a/static/js/components/CourseList_test.js b/static/js/components/CourseList_test.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';

diff --git a/static/js/components/EducationForm.js b/static/js/components/EducationForm.js
@@ -19,44 +19,51 @@ import {
 } from '../util/editEducation';
 import { educationValidation } from '../util/validation';
 import type { Option } from '../flow/generalTypes';
-import type { EducationEntry } from '../flow/profileTypes';
+import type {
+  EducationEntry,
+  Profile,
+  ValidationErrors,
+} from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 class EducationForm extends ProfileFormFields {
-  static propTypes = {
-    profile:                        React.PropTypes.object,
-    ui:                             React.PropTypes.object,
-    updateProfile:                  React.PropTypes.func,
-    clearProfileEdit:               React.PropTypes.func,
-    errors:                         React.PropTypes.object,
-    setEducationDialogVisibility:   React.PropTypes.func,
-    setEducationDialogIndex:        React.PropTypes.func,
-    setEducationDegreeLevel:        React.PropTypes.func,
-    setEducationDegreeInclusions:   React.PropTypes.func,
+  props: {
+    profile:                          Profile,
+    ui:                               UIState;
+    updateProfile:                    () => void,
+    saveProfile:                      () => void,
+    clearProfileEdit:                 () => void,
+    errors:                           ValidationErrors,
+    setEducationDialogVisibility:     () => void,
+    setEducationDialogIndex:          () => void,
+    setEducationDegreeLevel:          () => void,
+    setEducationDegreeInclusions:     () => void,
+    setShowEducationDeleteAllDialog:  (bool: boolean) => void,
   };
 
   openEditEducationForm: Function = (index: number): void => {
     openEditEducationForm.call(this, index);
   };
 
-  openNewEducationForm: Function = (level: Option, index: number): void => {
+  openNewEducationForm: Function = (level: string, index: number): void => {
     openNewEducationForm.call(this, level, index);
   };
 
   deleteEducationEntry: Function = (): void => {
     deleteEducationEntry.call(this);
   };
 
-  renderEducationLevel(level: Option): ?React$Element[] {
+  renderEducationLevel(level: Option): Array<React$Element|void>|void {
     const {
       ui: { educationDegreeInclusions },
       profile: { education },
     } = this.props;
     if (educationDegreeInclusions[level.value]) {
-      let rows = [];
+      let rows: Array<React$Element|void> = [];
       if (education !== undefined) {
-        rows = Object.entries(education).
-          filter(([, education]: [string, EducationEntry]) => education.degree_name === level.value).
-          map(([index, education]) => this.educationRow(education, index));
+        rows = education.map((entry, index) => (
+          entry.degree_name === level.value ? this.educationRow(entry, index) : undefined
+        ));
       }
       rows.push(
         <FABButton
@@ -72,7 +79,7 @@ class EducationForm extends ProfileFormFields {
     }
   }
 
-  educationRow: Function = (education, index) => {
+  educationRow: Function = (education: EducationEntry, index: number) => {
     const { errors } = this.props;
     if (!('id' in education)) {
       // don't show new educations, wait until we saved on the server before showing them

diff --git a/static/js/components/EducationTab.js b/static/js/components/EducationTab.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Grid, { Cell } from 'react-mdl/lib/Grid';
 

diff --git a/static/js/components/EmploymentForm.js b/static/js/components/EmploymentForm.js
@@ -133,15 +133,15 @@ class EmploymentForm extends ProfileFormFields {
     );
   }
 
-  renderWorkHistory(): ?React$Element[] {
+  renderWorkHistory(): Array<React$Element|void>|void {
     const { ui, profile, profile: { work_history } } = this.props;
     if ( ui.workHistoryEdit === true ) {
       let workHistoryRows = [];
       if ( !_.isUndefined(work_history) ) {
         let sorted = sortWorkEntriesByDate(work_history);
-        workHistoryRows = Object.entries(sorted).filter(([,entry]: [string, WorkHistoryEntry]) =>
-          entry.id !== undefined
-        ).map(([i, entry]) => this.jobRow(entry, i));
+        workHistoryRows = sorted.map((entry, index) => (
+          entry.id === undefined ? undefined : this.jobRow(entry, index)
+        ));
       }
       userPrivilegeCheck(profile, () => {
         workHistoryRows.push(
@@ -158,7 +158,7 @@ class EmploymentForm extends ProfileFormFields {
     }
   }
 
-  jobRow (position: WorkHistoryEntry, index: string) {
+  jobRow (position: WorkHistoryEntry, index: number) {
     const {
       setWorkDialogVisibility,
       setWorkDialogIndex,

diff --git a/static/js/components/EmploymentTab.js b/static/js/components/EmploymentTab.js
@@ -9,12 +9,14 @@ import {
   employmentUiValidation,
   combineValidators,
 } from '../util/validation';
+import type { Profile } from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 class EmploymentTab extends React.Component {
-  static propTypes = {
-    saveProfile: React.PropTypes.func,
-    profile: React.PropTypes.object,
-    ui: React.PropTypes.object
+  props: {
+    saveProfile:  Function,
+    profile:      Profile,
+    ui:           UIState,
   };
 
   render () {

diff --git a/static/js/components/ErrorMessage.js b/static/js/components/ErrorMessage.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Alert from 'react-bootstrap/lib/Alert';
 

diff --git a/static/js/components/Footer.js b/static/js/components/Footer.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 
 class Footer extends React.Component {

diff --git a/static/js/components/Header.js b/static/js/components/Header.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import LoginButton from '../containers/LoginButton';
 import { Navbar } from 'react-bootstrap';

diff --git a/static/js/components/Jumbotron.js b/static/js/components/Jumbotron.js
@@ -1,14 +1,16 @@
+// @flow
 /* global SETTINGS: false */
 import React from 'react';
 import Grid, { Cell } from 'react-mdl/lib/Grid';
 
 import { makeProfileImageUrl } from '../util/util';
+import type { Profile } from '../flow/profileTypes';
 
 class Jumbotron extends React.Component {
-  static propTypes = {
-    profile:      React.PropTypes.object.isRequired,
-    text:         React.PropTypes.string.isRequired,
-    children:     React.PropTypes.object.isRequired,
+  props: {
+    profile:      Profile,
+    text:         string,
+    children?:     React$Element[],
   };
 
   render() {

diff --git a/static/js/components/PersonalForm.js b/static/js/components/PersonalForm.js
@@ -1,17 +1,19 @@
+// @flow
 import React from 'react';
 import Grid, { Cell } from 'react-mdl/lib/Grid';
 import SelectField from './inputs/SelectField';
 import CountrySelectField from './inputs/CountrySelectField';
 import StateSelectField from './inputs/StateSelectField';
 
 import ProfileFormFields from '../util/ProfileFormFields';
+import type { Profile, ValidationErrors } from '../flow/profileTypes';
 
 export default class PersonalForm extends ProfileFormFields {
-  static propTypes = {
-    profile:        React.PropTypes.object,
-    errors:         React.PropTypes.object,
-    saveProfile:    React.PropTypes.func,
-    updateProfile:  React.PropTypes.func,
+  props: {
+    profile:        Profile,
+    errors:         ValidationErrors,
+    saveProfile:    () => void,
+    updateProfile:  () => void,
   };
 
   render() {

diff --git a/static/js/components/PersonalTab.js b/static/js/components/PersonalTab.js
@@ -5,14 +5,16 @@ import Grid, { Cell } from 'react-mdl/lib/Grid';
 import PersonalForm from './PersonalForm';
 import ProfileProgressControls from './ProfileProgressControls';
 import { personalValidation } from '../util/validation';
+import type { Profile, ValidationErrors } from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 class PersonalTab extends React.Component {
-  static propTypes = {
-    profile:        React.PropTypes.object,
-    errors:         React.PropTypes.object,
-    saveProfile:    React.PropTypes.func,
-    updateProfile:  React.PropTypes.func,
-    ui:             React.PropTypes.object
+  props: {
+    profile:        Profile,
+    errors:         ValidationErrors,
+    saveProfile:    () => void,
+    updateProfile:  () => void,
+    ui:             UIState,
   };
 
   render() {

diff --git a/static/js/components/PrivacyTab.js b/static/js/components/PrivacyTab.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Grid, { Cell } from 'react-mdl/lib/Grid';
 
@@ -12,13 +13,15 @@ import {
   employmentUiValidation,
   privacyValidation,
 } from '../util/validation';
+import type { Profile } from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 class PrivacyTab extends ProfileFormFields {
-  static propTypes = {
-    profile:        React.PropTypes.object,
-    saveProfile:    React.PropTypes.func,
-    updateProfile:  React.PropTypes.func,
-    ui:             React.PropTypes.object
+  props: {
+    profile:        Profile,
+    saveProfile:    () => void,
+    updateProfile:  () => void,
+    ui:             UIState,
   };
 
   render() {

diff --git a/static/js/components/ProfileProgressControls.js b/static/js/components/ProfileProgressControls.js
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import Button from 'react-mdl/lib/Button';
 
@@ -14,12 +15,12 @@ export default class ProfileProgressControls extends React.Component {
     validator: React.PropTypes.func.isRequired
   };
 
-  stepBack = () => {
+  stepBack: Function = (): void => {
     const { prevUrl } = this.props;
     this.context.router.push(prevUrl);
   };
 
-  saveAndContinue = () => {
+  saveAndContinue: Function = (): void => {
     const { nextUrl, isLastTab, validator } = this.props;
     saveProfileStep.call(this, validator, isLastTab).then(() => {
       this.context.router.push(nextUrl);

diff --git a/static/js/components/User.js b/static/js/components/User.js
@@ -10,12 +10,16 @@ import EmploymentForm from './EmploymentForm';
 import EducationDisplay from './EducationDisplay';
 import UserPagePersonalDialog from './UserPagePersonalDialog.js';
 import { userPrivilegeCheck } from '../util/util';
+import type { Profile } from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 export default class User extends React.Component {
-  static propTypes = {
-    profile:                      React.PropTypes.object,
-    setUserPageDialogVisibility:  React.PropTypes.func,
-    ui:                           React.PropTypes.object,
+  props: {
+    profile:                      Profile,
+    setUserPageDialogVisibility:  () => void,
+    ui:                           UIState,
+    clearProfileEdit:             () => void,
+    saveProfile:                  () => Promise,
   };
 
   toggleShowPersonalDialog: Function = (): void => {

diff --git a/static/js/components/UserPagePersonalDialog.js b/static/js/components/UserPagePersonalDialog.js
@@ -5,14 +5,16 @@ import Button from 'react-mdl/lib/Button';
 
 import { personalValidation } from '../util/validation';
 import PersonalForm from './PersonalForm';
+import type { Profile } from '../flow/profileTypes';
+import type { UIState } from '../reducers/ui';
 
 export default class UserPagePersonalDialog extends React.Component {
-  static propTypes = {
-    setUserPageDialogVisibility:  React.PropTypes.func,
-    ui:                           React.PropTypes.object,
-    profile:                      React.PropTypes.object,
-    saveProfile:                  React.PropTypes.func,
-    clearProfileEdit:             React.PropTypes.func,
+  props: {
+    setUserPageDialogVisibility:  () => void,
+    ui:                           UIState,
+    profile:                      Profile,
+    saveProfile:                  () => Promise,
+    clearProfileEdit:             () => void,
   };
 
   closePersonalDialog: Function = (): void => {

diff --git a/static/js/components/inputs/SelectField.js b/static/js/components/inputs/SelectField.js
@@ -119,7 +119,9 @@ export default class SelectField extends React.Component {
       }
     } else {
       // user selected an item in the menu
-      toStore = optionOrString.value;
+      if ( typeof optionOrString !== 'string' ) {
+        toStore = optionOrString.value;
+      }
     }
 
     if (toStore !== undefined) {

diff --git a/static/js/containers/App.js b/static/js/containers/App.js
@@ -1,3 +1,4 @@
+// @flow
 /* global SETTINGS: false */
 import React from 'react';
 import { connect } from 'react-redux';

diff --git a/static/js/containers/DashboardPage.js b/static/js/containers/DashboardPage.js
@@ -1,3 +1,4 @@
+// @flow
 /* global SETTINGS: false */
 import React from 'react';
 import { connect } from 'react-redux';

diff --git a/static/js/containers/LoginButton.js b/static/js/containers/LoginButton.js
@@ -1,3 +1,4 @@
+// @flow
 /* global SETTINGS: false */
 import React from 'react';
 import { connect } from 'react-redux';