Enable TS for WorkOrderView component

.eslintrc

@@ -6,7 +6,7 @@
     "jest": true,
     "commonjs": true
   },
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module",

package.json

@@ -15,7 +15,7 @@
     "test:unit-windows": "node ./node_modules/jest/bin/jest.js",
     "test:unit-win-upd": "node ./node_modules/jest/bin/jest.js --updateSnapshot",
     "lint": "eslint . && echo 'Lint complete.'",
-    "lintfix": "eslint . --max-warnings 0 --fix",
+    "lintfix": "eslint . --fix",
     "test:e2e": "NODE_ENV=test start-test http://localhost:5001 cy:run",
     "e2e:audit": "NODE_ENV=test start-test http://localhost:5001 cy:run:audit",
     "cy:run": "cypress run --browser chrome --headless",

src/components/Errors/ErrorMessage/index.js → src/components/Errors/ErrorMessage/index.tsx

@@ -1,7 +1,13 @@
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 
-const ErrorMessage = ({ label, className, id }) => (
+interface Props {
+  // label: JSX.Element
+  label: string
+  className?: string
+  id?: number
+}
+
+const ErrorMessage = ({ label, className, id }: Props) => (
   <span
     data-error-id={cx(id >= 0 ? `error-${id}` : null)}
     className={cx('govuk-error-message lbh-error-message', className)}
@@ -11,9 +17,4 @@ const ErrorMessage = ({ label, className, id }) => (
   </span>
 )
 
-ErrorMessage.propTypes = {
-  label: PropTypes.node.isRequired,
-  className: PropTypes.string,
-}
-
 export default ErrorMessage

src/components/Spinner/index.js → src/components/Spinner/index.tsx

@@ -1,4 +1,8 @@
-const Spinner = ({ resource }) => (
+interface Props {
+  resource?: string
+}
+
+const Spinner = ({ resource }: Props) => (
   <svg
     width="50"
     height="50"

src/components/Template/WarningText.js → src/components/Template/WarningText.tsx

@@ -1,6 +1,9 @@
-import PropTypes from 'prop-types'
+interface Props {
+  text: string
+  name?: string
+}
 
-const WarningText = ({ text, name }) => {
+const WarningText = ({ text, name }: Props) => {
   return (
     <div className="govuk-warning-text lbh-warning-text" data-testid={name}>
       <span className="govuk-warning-text__icon" aria-hidden="true">
@@ -14,8 +17,4 @@ const WarningText = ({ text, name }) => {
   )
 }
 
-WarningText.propTypes = {
-  text: PropTypes.string.isRequired,
-}
-
 export default WarningText

src/components/WorkOrder/PrintJobTicketDetails.js → src/components/WorkOrder/PrintJobTicketDetails.tsx

@@ -1,17 +1,36 @@
-import PropTypes from 'prop-types'
 import { WorkOrder } from '@/models/workOrder'
 import { formatDateTime } from 'src/utils/time'
 import { CLOSED_STATUS_DESCRIPTIONS_FOR_OPERATIVES } from '@/utils/statusCodes'
 import { getCautionaryAlertsType } from '@/utils/cautionaryAlerts'
 import WarningText from '@/components/Template/WarningText'
 
+interface Props {
+  workOrder: WorkOrder
+  property: {
+    address: {
+      addressLine: string
+      streetSuffix: string
+      postalCode: string
+    }
+    tmoName: string
+  }
+  tasksAndSors: {
+    code: string
+    description: string
+    quantity: number
+    standardMinuteValue: number
+  }[]
+  locationAlerts: any[]
+  personAlerts: any[]
+}
+
 const PrintJobTicketDetails = ({
   workOrder,
   property,
   locationAlerts,
   personAlerts,
   tasksAndSors,
-}) => {
+}: Props) => {
   const cautionaryAlertsType = getCautionaryAlertsType([
     ...locationAlerts,
     ...personAlerts,
@@ -52,13 +71,12 @@ const PrintJobTicketDetails = ({
                 <path d="M185,20.7649334 C185,12.6088781 181.402905,8 173.076217,8 C166.446107,8 162,12.9305619 162,19.0338994 C162,26.0618976 167.055025,30 173.763237,30 C178.531883,30 182.938938,27.9097764 184.557414,23.411973 L177.076846,23.411973 C176.436109,24.4130877 175.020123,24.9064324 173.727078,24.9064324 C171.219092,24.9064324 169.845051,23.1811684 169.641114,20.7649334 L185,20.7649334 Z M169.684505,16.621992 C170.046095,14.3485673 171.420136,13.0906826 173.802289,13.0906826 C175.864797,13.0906826 177.318388,14.6731362 177.318388,16.621992 L169.684505,16.621992 L169.684505,16.621992 Z"></path>
                 <path d="M200.955311,28.5221077 C200.298901,30.3958684 199.56337,32.7989483 198.29304,34.3912803 C196.164103,37.0407925 192.887912,37 189.733333,37 L186.048352,37 L186.048352,30.5577263 L187.92967,30.5577263 C188.750183,30.5577263 189.813919,30.6408425 190.389744,30.3550393 C190.880586,30.1115234 191.1663,29.7032331 191.1663,28.7670818 C191.1663,27.7463561 188.054212,19.964052 187.604396,18.7406393 L184,9 L192.681319,9 L196.082051,21.1451774 L196.164103,21.1451774 L199.604396,9 L208,9 L200.955311,28.5221077"></path>
               </g>
-              <image
+              <img
                 src="/assets/images/lbh-logo.png"
-                xlinkHref=""
                 className="lbh-header__logo-fallback-image"
                 width="206"
                 height="37"
-              ></image>
+              />
             </svg>
           </div>
         </div>
@@ -259,17 +277,4 @@ const PrintJobTicketDetails = ({
   )
 }
 
-PrintJobTicketDetails.propTypes = {
-  workOrder: PropTypes.instanceOf(WorkOrder).isRequired,
-  property: PropTypes.object.isRequired,
-  tasksAndSors: PropTypes.arrayOf(
-    PropTypes.shape({
-      code: PropTypes.string,
-      description: PropTypes.string,
-      quantity: PropTypes.number,
-      standardMinuteValue: PropTypes.number,
-    })
-  ).isRequired,
-}
-
 export default PrintJobTicketDetails

src/components/WorkOrder/WorkOrderView.js → src/components/WorkOrder/WorkOrderView.tsx

@@ -10,16 +10,31 @@ import { sortObjectsByDateKey } from '@/utils/date'
 import PrintJobTicketDetails from './PrintJobTicketDetails'
 import { getOrCreateSchedulerSessionId } from '../../utils/frontEndApiClient/users/schedulerSession'
 
-const WorkOrderView = ({ workOrderReference }) => {
-  const [property, setProperty] = useState({})
-  const [workOrder, setWorkOrder] = useState({})
+interface Props {
+  workOrderReference: string
+}
+
+interface IProperty {
+  address: {
+    addressLine: string
+    streetSuffix: string
+    postalCode: string
+  }
+  tmoName: string
+  hierarchyType: string
+  propertyReference: string
+}
+
+const WorkOrderView = ({ workOrderReference }: Props) => {
+  const [property, setProperty] = useState<IProperty | null>()
+  const [workOrder, setWorkOrder] = useState<WorkOrder | null>()
   const [tasksAndSors, setTasksAndSors] = useState([])
   const [locationAlerts, setLocationAlerts] = useState([])
   const [personAlerts, setPersonAlerts] = useState([])
   const [tenure, setTenure] = useState({})
-  const [schedulerSessionId, setSchedulerSessionId] = useState()
-  const [loading, setLoading] = useState(false)
-  const [error, setError] = useState()
+  const [schedulerSessionId, setSchedulerSessionId] = useState<string | null>()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string | null>()
   const tabsList = [
     'Tasks and SORs',
     'Notes',
@@ -53,7 +68,7 @@ const WorkOrderView = ({ workOrderReference }) => {
     }
   }
 
-  const getWorkOrderView = async (workOrderReference) => {
+  const getWorkOrderView = async (workOrderReference: string) => {
     setError(null)
 
     try {
@@ -108,49 +123,44 @@ const WorkOrderView = ({ workOrderReference }) => {
     getWorkOrderView(workOrderReference)
   }, [])
 
+  if (loading) return <Spinner />
+
   return (
     <>
-      {loading ? (
-        <Spinner />
-      ) : (
-        <>
-          {property &&
-            property.address &&
-            property.hierarchyType &&
-            tenure &&
-            workOrder && (
-              <>
-                <WorkOrderDetails
-                  property={property}
-                  workOrder={workOrder}
-                  tenure={tenure}
-                  resetSchedulerSessionId={getSchedulerSessionId}
-                  schedulerSessionId={schedulerSessionId}
-                  tasksAndSors={tasksAndSors}
-                  printClickHandler={printClickHandler}
-                  setLocationAlerts={setLocationAlerts}
-                  setPersonAlerts={setPersonAlerts}
-                />
-                <Tabs
-                  tabsList={tabsList}
-                  propertyReference={property.propertyReference}
-                  workOrderReference={workOrderReference}
-                  tasksAndSors={tasksAndSors}
-                  budgetCode={workOrder.budgetCode}
-                />
-                {/* Only displayed for print media */}
-                <PrintJobTicketDetails
-                  workOrder={workOrder}
-                  property={property}
-                  tasksAndSors={tasksAndSors}
-                  locationAlerts={locationAlerts}
-                  personAlerts={personAlerts}
-                />
-              </>
-            )}
-          {error && <ErrorMessage label={error} />}
-        </>
-      )}
+      {property &&
+        property.address &&
+        property.hierarchyType &&
+        tenure &&
+        workOrder && (
+          <>
+            <WorkOrderDetails
+              property={property}
+              workOrder={workOrder}
+              tenure={tenure}
+              resetSchedulerSessionId={getSchedulerSessionId}
+              schedulerSessionId={schedulerSessionId}
+              printClickHandler={printClickHandler}
+              setLocationAlerts={setLocationAlerts}
+              setPersonAlerts={setPersonAlerts}
+            />
+            <Tabs
+              tabsList={tabsList}
+              propertyReference={property.propertyReference}
+              workOrderReference={workOrderReference}
+              tasksAndSors={tasksAndSors}
+              budgetCode={workOrder.budgetCode}
+            />
+            {/* Only displayed for print media */}
+            <PrintJobTicketDetails
+              workOrder={workOrder}
+              property={property}
+              tasksAndSors={tasksAndSors}
+              locationAlerts={locationAlerts}
+              personAlerts={personAlerts}
+            />
+          </>
+        )}
+      {error && <ErrorMessage label={error} />}
     </>
   )
 }

src/components/WorkOrder/__snapshots__/PrintJobTicketDetails.test.js.snap

@@ -57,12 +57,11 @@ exports[`PrintJobTicketDetails component Renders the PrintJobTicketDetails compo
               d="M200.955311,28.5221077 C200.298901,30.3958684 199.56337,32.7989483 198.29304,34.3912803 C196.164103,37.0407925 192.887912,37 189.733333,37 L186.048352,37 L186.048352,30.5577263 L187.92967,30.5577263 C188.750183,30.5577263 189.813919,30.6408425 190.389744,30.3550393 C190.880586,30.1115234 191.1663,29.7032331 191.1663,28.7670818 C191.1663,27.7463561 188.054212,19.964052 187.604396,18.7406393 L184,9 L192.681319,9 L196.082051,21.1451774 L196.164103,21.1451774 L199.604396,9 L208,9 L200.955311,28.5221077"
             />
           </g>
-          <image
+          <img
             class="lbh-header__logo-fallback-image"
             height="37"
             src="/assets/images/lbh-logo.png"
             width="206"
-            xlink:href=""
           />
         </svg>
       </div>
@@ -392,12 +391,11 @@ exports[`PrintJobTicketDetails component Renders the PrintJobTicketDetails compo
               d="M200.955311,28.5221077 C200.298901,30.3958684 199.56337,32.7989483 198.29304,34.3912803 C196.164103,37.0407925 192.887912,37 189.733333,37 L186.048352,37 L186.048352,30.5577263 L187.92967,30.5577263 C188.750183,30.5577263 189.813919,30.6408425 190.389744,30.3550393 C190.880586,30.1115234 191.1663,29.7032331 191.1663,28.7670818 C191.1663,27.7463561 188.054212,19.964052 187.604396,18.7406393 L184,9 L192.681319,9 L196.082051,21.1451774 L196.164103,21.1451774 L199.604396,9 L208,9 L200.955311,28.5221077"
             />
           </g>
-          <image
+          <img
             class="lbh-header__logo-fallback-image"
             height="37"
             src="/assets/images/lbh-logo.png"
             width="206"
-            xlink:href=""
           />
         </svg>
       </div>

src/models/workOrder.js → src/models/workOrder.ts

@@ -10,6 +10,33 @@ import {
 } from '@/utils/statusCodes'
 
 export class WorkOrder {
+  reference: string
+  status: string
+  callerName: string
+  callerNumber: string
+
+  appointment: null | {
+    description: string
+    date: Date
+    start: Date
+  }
+  target: Date
+  raisedBy: string
+  operatives: {
+    name: string
+  }[]
+  priorityCode: number
+  tradeCode: string
+  contractorReference: string
+  priority: string
+  description: string
+  plannerComments: string
+  budgetCode?: {
+    externalCostCode?: string
+    corporateSubjectiveCode?: string
+    descriptionOfWorks?: string
+  }
+
   constructor(workOrderData) {
     Object.assign(this, workOrderData)
   }

src/utils/frontEndApiClient/requests.js → src/utils/frontEndApiClient/requests.ts

@@ -1,4 +1,4 @@
-import axios from 'axios'
+import axios, { Method } from 'axios'
 import { paramsSerializer } from '@/utils/urls'
 
 export const frontEndApiRequest = async ({
@@ -7,6 +7,12 @@ export const frontEndApiRequest = async ({
   params,
   requestData,
   paramsSerializer,
+}: {
+  method: Method
+  path: string
+  params?: object
+  requestData?: any
+  paramsSerializer?: (params: any) => string
 }) => {
   const { data } = await axios({
     method: method,