diff --git a/SurvivalConfig/src/pages/main/index.js b/SurvivalConfig/src/pages/main/index.tsx
similarity index 72%
rename from SurvivalConfig/src/pages/main/index.js
rename to SurvivalConfig/src/pages/main/index.tsx
index 4e7fc10..640ae41 100644
--- a/SurvivalConfig/src/pages/main/index.js
+++ b/SurvivalConfig/src/pages/main/index.tsx
@@ -3,24 +3,25 @@ import { useHistory } from 'react-router'
import useCreateUser from '../../hooks/useCreateUser'
import useGetUsernameInfoLazy from '../../hooks/useGetUsernameInfoLazy'
import { PageWrapper } from '../styles'
-import CreateForm from './createForm'
-import UserNameForm from './userNameForm'
+import CreateForm from './CreateForm'
+import UserNameForm from './UserNameForm'
+import { CreateFormValues, UsernameFormValues } from '../../types'
export default function MainPage() {
const [showCreateForm, setShowCreateForm] = useState(false)
- const [username, setUsername] = useState('')
+ const [username, setUsername] = useState
('')
const history = useHistory()
const [findUsername] = useGetUsernameInfoLazy()
const [createUser] = useCreateUser()
- const handleCreateSubmit = values => {
- createUser({ mobile: `+1${values.mobile.replace(/\D/g, '')}`, minecraft_username: values.username })
+ const handleCreateSubmit = (values: CreateFormValues) => {
+ createUser({ mobile: `+1${values.mobile?.replace(/\D/g, '')}`, minecraft_username: values.username })
.then(data => history.push(`/user/${data.id}`))
.catch(console.error)
}
- const handleLookupSubmit = values => {
+ const handleLookupSubmit = (values: UsernameFormValues) => {
findUsername(values.username)
.then(data => history.push(`/user/${data.id}`))
.catch(e => {
diff --git a/SurvivalConfig/src/pages/navbar/index.js b/SurvivalConfig/src/pages/navbar/index.tsx
similarity index 71%
rename from SurvivalConfig/src/pages/navbar/index.js
rename to SurvivalConfig/src/pages/navbar/index.tsx
index 9b101c2..e002f8a 100644
--- a/SurvivalConfig/src/pages/navbar/index.js
+++ b/SurvivalConfig/src/pages/navbar/index.tsx
@@ -1,14 +1,15 @@
-import AppBar from '@material-ui/core/AppBar'
-import IconButton from '@material-ui/core/IconButton'
-import { makeStyles } from '@material-ui/core/styles'
-import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
-import { HomeRounded } from '@material-ui/icons'
+import AppBar from '@mui/material/AppBar'
+import IconButton from '@mui/material/IconButton'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import { HomeRounded } from '@mui/icons-material'
import React from 'react'
import { useHistory } from 'react-router'
import GithubIcon from '../../icons/GithubIcon'
+import { makeStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
menuButton: {
marginRight: theme.spacing(2),
},
diff --git a/SurvivalConfig/src/pages/styles.js b/SurvivalConfig/src/pages/styles.ts
similarity index 65%
rename from SurvivalConfig/src/pages/styles.js
rename to SurvivalConfig/src/pages/styles.ts
index 583bdac..19bda4c 100644
--- a/SurvivalConfig/src/pages/styles.js
+++ b/SurvivalConfig/src/pages/styles.ts
@@ -1,11 +1,5 @@
import styled from 'styled-components'
-export const MainContainer = styled.div`
- width: 100%;
- height: 100%;
- min-height: 100vh;
-`
-
export const PageWrapper = styled.div`
flex-grow: 1;
display: flex;
diff --git a/SurvivalConfig/src/pages/username/hourSelectorDialog.js b/SurvivalConfig/src/pages/username/HourSelectorDialog.tsx
similarity index 67%
rename from SurvivalConfig/src/pages/username/hourSelectorDialog.js
rename to SurvivalConfig/src/pages/username/HourSelectorDialog.tsx
index 6f9db8c..c715df5 100644
--- a/SurvivalConfig/src/pages/username/hourSelectorDialog.js
+++ b/SurvivalConfig/src/pages/username/HourSelectorDialog.tsx
@@ -1,13 +1,14 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import Slider from '@material-ui/core/Slider'
-import { makeStyles } from '@material-ui/core/styles'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+import Slider from '@mui/material/Slider'
+import { makeStyles } from '@mui/styles'
import React, { useState } from 'react'
import { formatHour, generateGUID } from './utils'
+import { TimeSlot } from '../../types'
const useStyles = makeStyles({
slider: {
@@ -15,7 +16,13 @@ const useStyles = makeStyles({
},
})
-export default function HourSelectorDialog(props) {
+export default function HourSelectorDialog(props: {
+ open: boolean
+ onSubmit: (timeSlot: TimeSlot) => void
+ onClose: () => void
+ editId: string | undefined
+ initialValue: [number, number]
+}) {
const { open, onSubmit, onClose, editId, initialValue } = props
const classes = useStyles()
@@ -30,7 +37,7 @@ export default function HourSelectorDialog(props) {
})
}
- const handleChange = (event, newValue) => {
+ const handleChange = (event: any, newValue: any) => {
setValue(newValue)
}
diff --git a/SurvivalConfig/src/pages/username/mobileNumberForm.js b/SurvivalConfig/src/pages/username/MobileNumberForm.tsx
similarity index 62%
rename from SurvivalConfig/src/pages/username/mobileNumberForm.js
rename to SurvivalConfig/src/pages/username/MobileNumberForm.tsx
index 7de9b49..596ec77 100644
--- a/SurvivalConfig/src/pages/username/mobileNumberForm.js
+++ b/SurvivalConfig/src/pages/username/MobileNumberForm.tsx
@@ -1,9 +1,10 @@
-import Button from '@material-ui/core/Button'
-import TextField from '@material-ui/core/TextField'
-import { Form, Formik } from 'formik'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+import { Form, Formik, FormikHelpers } from 'formik'
import React from 'react'
import InputMask from 'react-input-mask'
import * as Yup from 'yup'
+import { MobileNumberFormValues } from '../../types'
const MobileChangeSchema = Yup.object().shape({
mobile: Yup.string()
@@ -11,7 +12,12 @@ const MobileChangeSchema = Yup.object().shape({
.matches(/^\(\d{3}\) \d{3}-\d{4}$/, { message: 'Invalid phone number' }),
})
-export default function MobileNumberForm(props) {
+interface Props {
+ handleSubmit: (values: MobileNumberFormValues, formikHelpers: FormikHelpers) => void
+ initialPhoneNumber: string
+}
+
+export default function MobileNumberForm(props: Props) {
const { handleSubmit, initialPhoneNumber } = props
return (
- {() => (
-
- )}
+