Merge pull request #2378 from target/ts-conversion-UserContactMethodC…

…reateDialog ui/users: convert UserContactMethodCreateDialog file to typescript
target · Jun 6, 2022 · c1dabce · c1dabce
2 parents 1a7339e + 8b0fc45
commit c1dabce
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/web/src/app/main/components/NewUserSetup.js b/web/src/app/main/components/NewUserSetup.js
@@ -17,7 +17,7 @@ export default function NewUserSetup() {
   if (contactMethodID) {
     return (
       <UserContactMethodVerificationDialog
-        contactMethodID={contactMethodID.contactMethodID}
+        contactMethodID={contactMethodID}
         onClose={clearIsFirstLogin}
       />
     )
@@ -29,9 +29,9 @@ export default function NewUserSetup() {
       subtitle='To get started, please enter a contact method.'
       disclaimer={disclaimer}
       userID={userID}
-      onClose={(result) => {
-        if (result && result.contactMethodID) {
-          setContactMethodID(result)
+      onClose={(contactMethodID) => {
+        if (contactMethodID) {
+          setContactMethodID(contactMethodID)
         } else {
           clearIsFirstLogin()
         }

diff --git a/...pp/users/UserContactMethodCreateDialog.js → ...p/users/UserContactMethodCreateDialog.tsx b/...pp/users/UserContactMethodCreateDialog.js → ...p/users/UserContactMethodCreateDialog.tsx
@@ -1,13 +1,19 @@
 import React, { useState } from 'react'
 import { useMutation, useLazyQuery, gql } from '@apollo/client'
-import p from 'prop-types'
 
 import { fieldErrors, nonFieldErrors } from '../util/errutil'
 import FormDialog from '../dialogs/FormDialog'
 import UserContactMethodForm from './UserContactMethodForm'
 import { useConfigValue } from '../util/RequireConfig'
 import { Dialog, DialogTitle, DialogActions, Button } from '@mui/material'
 import DialogContentError from '../dialogs/components/DialogContentError'
+import { ContactMethodType } from '../../schema'
+
+type Value = {
+  name: string
+  type: ContactMethodType
+  value: string
+}
 
 const createMutation = gql`
   mutation ($input: CreateUserContactMethodInput!) {
@@ -28,13 +34,19 @@ const userConflictQuery = gql`
   }
 `
 
-export default function UserContactMethodCreateDialog(props) {
+export default function UserContactMethodCreateDialog(props: {
+  userID: string
+  onClose: (contactMethodID?: string) => void
+  disclaimer: string
+  title: string
+  subtitle: string
+}): JSX.Element {
   const [allowSV, allowE, allowW] = useConfigValue(
     'Twilio.Enable',
     'SMTP.Enable',
     'Webhook.Enable',
   )
-  let typeVal = ''
+  let typeVal: ContactMethodType = 'VOICE'
   if (allowSV) {
     typeVal = 'SMS'
   } else if (allowE) {
@@ -43,7 +55,7 @@ export default function UserContactMethodCreateDialog(props) {
     typeVal = 'WEBHOOK'
   }
   // values for contact method form
-  const [CMValue, setCMValue] = useState({
+  const [CMValue, setCMValue] = useState<Value>({
     name: '',
     type: typeVal,
     value: '',
@@ -64,9 +76,9 @@ export default function UserContactMethodCreateDialog(props) {
 
   const [createCM, createCMStatus] = useMutation(createMutation, {
     onCompleted: (result) => {
-      props.onClose({ contactMethodID: result.createUserContactMethod.id })
+      props.onClose(result.createUserContactMethod.id)
     },
-    onError: query,
+    onError: () => query(),
     variables: {
       input: {
         ...CMValue,
@@ -115,7 +127,7 @@ export default function UserContactMethodCreateDialog(props) {
     <UserContactMethodForm
       disabled={loading}
       errors={fieldErrs}
-      onChange={(CMValue) => setCMValue(CMValue)}
+      onChange={(CMValue: Value) => setCMValue(CMValue)}
       value={CMValue}
       disclaimer={props.disclaimer}
     />
@@ -135,11 +147,3 @@ export default function UserContactMethodCreateDialog(props) {
     />
   )
 }
-
-UserContactMethodCreateDialog.propTypes = {
-  userID: p.string.isRequired,
-  onClose: p.func,
-  disclaimer: p.string,
-  title: p.string,
-  subtitle: p.string,
-}
diff --git a/web/src/app/users/UserContactMethodForm.tsx b/web/src/app/users/UserContactMethodForm.tsx
@@ -6,6 +6,7 @@ import TelTextField from '../util/TelTextField'
 import { MenuItem, Typography } from '@mui/material'
 import { ContactMethodType } from '../../schema'
 import { useConfigValue } from '../util/RequireConfig'
+import { FieldError } from '../util/errutil'
 
 type Value = {
   name: string
@@ -17,10 +18,12 @@ export type UserContactMethodFormProps = {
   value: Value
   disclaimer?: string
 
-  errors?: Array<{ field: 'name' | 'type' | 'value'; message: string }>
+  errors?: Array<FieldError>
 
   disabled?: boolean
   edit?: boolean
+
+  onChange?: (CMValue: Value) => void
 }
 
 function renderEmailField(edit: boolean): JSX.Element {

diff --git a/web/src/app/users/UserDetails.js b/web/src/app/users/UserDetails.js
@@ -180,11 +180,9 @@ export default function UserDetails(props) {
         <UserContactMethodCreateDialog
           userID={userID}
           disclaimer={disclaimer}
-          onClose={(result) => {
+          onClose={(contactMethodID) => {
             setCreateCM(false)
-            setShowVerifyDialogByID(
-              result && result.contactMethodID ? result.contactMethodID : null,
-            )
+            setShowVerifyDialogByID(contactMethodID)
           }}
         />
       )}