ui/rotations: convert RotationForm to ts

web/src/app/rotations/RotationForm.js → web/src/app/rotations/RotationForm.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import p from 'prop-types'
 import {
   TextField,
   Grid,
@@ -18,6 +17,24 @@ import { TimeZoneSelect } from '../selection'
 import { ISODateTimePicker } from '../util/ISOPickers'
 import NumberField from '../util/NumberField'
 import Spinner from '../loading/components/Spinner'
+import { FieldError } from '../util/errutil'
+
+interface RotationFormProps {
+  value: Value
+  errors: FieldError[]
+  onChange: (value: Value) => void
+  disabled?: boolean
+}
+
+interface Value {
+  name: string
+  description: string
+  timeZone: string
+  type: string
+  shiftLength: number
+  start: string
+  favorite: boolean
+}
 
 const query = gql`
   query calcRotationHandoffTimes($input: CalcRotationHandoffTimesInput) {
@@ -48,16 +65,16 @@ const useStyles = makeStyles({
 
 // getHours converts a count and one of ['hourly', 'daily', 'weekly']
 // into length in hours e.g. (2, daily) => 48
-function getHours(count, unit) {
-  const lookup = {
+function getHours(count: number, unit: string): number {
+  const lookup: { [unit: string]: number } = {
     hourly: 1,
     daily: 24,
     weekly: 24 * 7,
   }
   return lookup[unit] * count
 }
 
-export default function RotationForm(props) {
+export default function RotationForm(props: RotationFormProps): JSX.Element {
   const { value } = props
   const classes = useStyles()
   const localZone = DateTime.local().zone.name
@@ -81,7 +98,7 @@ export default function RotationForm(props) {
   const isHandoffValid = DateTime.fromISO(value.start).isValid
   const nextHandoffs = isCalculating
     ? []
-    : data.calcRotationHandoffTimes.map((iso) =>
+    : data.calcRotationHandoffTimes.map((iso: string) =>
         DateTime.fromISO(iso)
           .setZone(configZone)
           .toLocaleString(DateTime.DATETIME_FULL),
@@ -182,7 +199,7 @@ export default function RotationForm(props) {
           </Typography>
           {isHandoffValid ? (
             <ol className={classes.handoffsList}>
-              {nextHandoffs.map((text, i) => (
+              {nextHandoffs.map((text: string, i: number) => (
                 <Typography
                   key={i}
                   component='li'
@@ -210,31 +227,3 @@ export default function RotationForm(props) {
     </FormContainer>
   )
 }
-
-RotationForm.propTypes = {
-  value: p.shape({
-    name: p.string.isRequired,
-    description: p.string.isRequired,
-    timeZone: p.string.isRequired,
-    type: p.oneOf(rotationTypes).isRequired,
-    shiftLength: p.number.isRequired,
-    start: p.string.isRequired,
-  }).isRequired,
-
-  errors: p.arrayOf(
-    p.shape({
-      field: p.oneOf([
-        'name',
-        'description',
-        'timeZone',
-        'type',
-        'start',
-        'shiftLength',
-      ]).isRequired,
-      message: p.string.isRequired,
-    }),
-  ),
-
-  onChange: p.func.isRequired,
-  disabled: p.bool,
-}