From b9e7331c285cf3f2b685f7cdd2fe175096556e16 Mon Sep 17 00:00:00 2001 From: Davis Mariotti Date: Sat, 14 Jan 2023 17:10:01 -0800 Subject: [PATCH] Convert to typescript Signed-off-by: Davis Mariotti --- SurvivalConfig/package.json | 47 +- SurvivalConfig/src/App.js | 25 - SurvivalConfig/src/App.tsx | 30 + SurvivalConfig/src/{api.js => api.ts} | 0 .../{useCreateUser.js => useCreateUser.ts} | 0 .../{useForceUpdate.js => useForceUpdate.ts} | 0 .../src/hooks/{useGetAPI.js => useGetAPI.ts} | 10 +- .../src/hooks/useGetUsernameInfoLazy.js | 7 - .../src/hooks/useGetUsernameInfoLazy.ts | 18 + .../{useLazyGetAPI.js => useLazyGetAPI.ts} | 9 +- .../hooks/{usePostApi.js => usePostApi.ts} | 5 +- ...bileNumber.js => useUpdateMobileNumber.ts} | 2 +- ...dateTimeSlots.js => useUpdateTimeSlots.ts} | 2 +- SurvivalConfig/src/hooks/useUsernameRecord.js | 5 - SurvivalConfig/src/hooks/useUsernameRecord.ts | 6 + .../icons/{GithubIcon.js => GithubIcon.tsx} | 4 +- SurvivalConfig/src/index.js | 11 +- .../src/{muiTheme.js => muiTheme.ts} | 23 +- .../main/{createForm.js => CreateForm.tsx} | 52 +- .../{userNameForm.js => UserNameForm.tsx} | 26 +- .../src/pages/main/{index.js => index.tsx} | 13 +- .../src/pages/navbar/{index.js => index.tsx} | 15 +- .../src/pages/{styles.js => styles.ts} | 6 - ...lectorDialog.js => HourSelectorDialog.tsx} | 27 +- ...bileNumberForm.js => MobileNumberForm.tsx} | 34 +- .../username/{timeSlots.js => TimeSlots.tsx} | 52 +- .../pages/username/{index.js => index.tsx} | 25 +- .../src/pages/username/{utils.js => utils.ts} | 4 +- SurvivalConfig/src/react-app-env.d.ts | 1 + SurvivalConfig/src/types.ts | 55 + SurvivalConfig/tsconfig.json | 25 + SurvivalConfig/yarn.lock | 15167 +++++++--------- 32 files changed, 7305 insertions(+), 8401 deletions(-) delete mode 100644 SurvivalConfig/src/App.js create mode 100644 SurvivalConfig/src/App.tsx rename SurvivalConfig/src/{api.js => api.ts} (100%) rename SurvivalConfig/src/hooks/{useCreateUser.js => useCreateUser.ts} (100%) rename SurvivalConfig/src/hooks/{useForceUpdate.js => useForceUpdate.ts} (100%) rename SurvivalConfig/src/hooks/{useGetAPI.js => useGetAPI.ts} (78%) delete mode 100644 SurvivalConfig/src/hooks/useGetUsernameInfoLazy.js create mode 100644 SurvivalConfig/src/hooks/useGetUsernameInfoLazy.ts rename SurvivalConfig/src/hooks/{useLazyGetAPI.js => useLazyGetAPI.ts} (77%) rename SurvivalConfig/src/hooks/{usePostApi.js => usePostApi.ts} (81%) rename SurvivalConfig/src/hooks/{useUpdateMobileNumber.js => useUpdateMobileNumber.ts} (59%) rename SurvivalConfig/src/hooks/{useUpdateTimeSlots.js => useUpdateTimeSlots.ts} (60%) delete mode 100644 SurvivalConfig/src/hooks/useUsernameRecord.js create mode 100644 SurvivalConfig/src/hooks/useUsernameRecord.ts rename SurvivalConfig/src/icons/{GithubIcon.js => GithubIcon.tsx} (89%) rename SurvivalConfig/src/{muiTheme.js => muiTheme.ts} (60%) rename SurvivalConfig/src/pages/main/{createForm.js => CreateForm.tsx} (70%) rename SurvivalConfig/src/pages/main/{userNameForm.js => UserNameForm.tsx} (70%) rename SurvivalConfig/src/pages/main/{index.js => index.tsx} (72%) rename SurvivalConfig/src/pages/navbar/{index.js => index.tsx} (71%) rename SurvivalConfig/src/pages/{styles.js => styles.ts} (65%) rename SurvivalConfig/src/pages/username/{hourSelectorDialog.js => HourSelectorDialog.tsx} (67%) rename SurvivalConfig/src/pages/username/{mobileNumberForm.js => MobileNumberForm.tsx} (62%) rename SurvivalConfig/src/pages/username/{timeSlots.js => TimeSlots.tsx} (71%) rename SurvivalConfig/src/pages/username/{index.js => index.tsx} (81%) rename SurvivalConfig/src/pages/username/{utils.js => utils.ts} (84%) create mode 100644 SurvivalConfig/src/react-app-env.d.ts create mode 100644 SurvivalConfig/src/types.ts create mode 100644 SurvivalConfig/tsconfig.json diff --git a/SurvivalConfig/package.json b/SurvivalConfig/package.json index 4a3f842..9ac14ca 100644 --- a/SurvivalConfig/package.json +++ b/SurvivalConfig/package.json @@ -1,27 +1,28 @@ { "name": "survivalconfig", - "version": "0.1.0", + "version": "0.2.0", "private": true, "dependencies": { - "@material-ui/core": "^4.9.11", - "@material-ui/icons": "^4.9.1", - "@material-ui/lab": "^4.0.0-alpha.51", - "@material-ui/styles": "^4.9.10", - "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^9.3.2", - "@testing-library/user-event": "^7.1.2", + "@babel/runtime": "^7.20.1", + "@emotion/react": "^11.10.5", + "@emotion/styled": "^11.10.5", + "@mui/icons-material": "^5.10.15", + "@mui/lab": "^5.0.0-alpha.109", + "@mui/material": "^5.10.15", + "@mui/styles": "^5.10.15", "axios": "^0.19.2", "formik": "^2.1.4", "lodash": "^4.17.15", - "react": "^16.13.1", - "react-dom": "^16.13.1", - "react-input-mask": "^2.0.4", - "react-is": "^16.13.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-input-mask": "^3.0.0-alpha.2", + "react-is": "^18.2.0", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", - "react-scripts": "3.4.1", - "styled-components": "^5.1.0", - "yup": "^0.28.4" + "react-scripts": "5.0.1", + "styled-components": "^5.3.6", + "typescript": "^4.9.3", + "yup": "^0.32.11" }, "scripts": { "start": "react-scripts start", @@ -45,6 +46,22 @@ ] }, "devDependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "@types/jest": "^29.2.3", + "@types/lodash": "^4.14.189", + "@types/node": "^18.11.9", + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.9", + "@types/react-input-mask": "^3.0.2", + "@types/react-router": "^5.1.2", + "@types/react-router-dom": "^5.3.3", + "@types/styled-components": "^5.1.26", "prettier": "2.0.5" + }, + "resolutions": { + "@types/react": "18.0.25", + "@types/react-dom": "18.0.9" } } diff --git a/SurvivalConfig/src/App.js b/SurvivalConfig/src/App.js deleted file mode 100644 index f8366a3..0000000 --- a/SurvivalConfig/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import { ThemeProvider } from '@material-ui/styles' -import React from 'react' -import { BrowserRouter, Route } from 'react-router-dom' -import './App.css' -import muiTheme from './muiTheme' -import MainPage from './pages/main' -import Navbar from './pages/navbar' -import { MainContainer } from './pages/styles' -import UsernamePage from './pages/username' - -function App() { - return ( - - - - - - - - - - ) -} - -export default App diff --git a/SurvivalConfig/src/App.tsx b/SurvivalConfig/src/App.tsx new file mode 100644 index 0000000..742c1e6 --- /dev/null +++ b/SurvivalConfig/src/App.tsx @@ -0,0 +1,30 @@ +import { ThemeProvider } from '@mui/material/styles' +import React from 'react' +import { BrowserRouter, Route } from 'react-router-dom' +import './App.css' +import muiTheme from './muiTheme' +import MainPage from './pages/main' +import Navbar from './pages/navbar' +import UsernamePage from './pages/username' +import { CssBaseline, StyledEngineProvider } from '@mui/material' + +function App() { + return ( + + + + + +
+ + + +
+ + + + + ) +} + +export default App diff --git a/SurvivalConfig/src/api.js b/SurvivalConfig/src/api.ts similarity index 100% rename from SurvivalConfig/src/api.js rename to SurvivalConfig/src/api.ts diff --git a/SurvivalConfig/src/hooks/useCreateUser.js b/SurvivalConfig/src/hooks/useCreateUser.ts similarity index 100% rename from SurvivalConfig/src/hooks/useCreateUser.js rename to SurvivalConfig/src/hooks/useCreateUser.ts diff --git a/SurvivalConfig/src/hooks/useForceUpdate.js b/SurvivalConfig/src/hooks/useForceUpdate.ts similarity index 100% rename from SurvivalConfig/src/hooks/useForceUpdate.js rename to SurvivalConfig/src/hooks/useForceUpdate.ts diff --git a/SurvivalConfig/src/hooks/useGetAPI.js b/SurvivalConfig/src/hooks/useGetAPI.ts similarity index 78% rename from SurvivalConfig/src/hooks/useGetAPI.js rename to SurvivalConfig/src/hooks/useGetAPI.ts index 4c3a5d7..23fb86b 100644 --- a/SurvivalConfig/src/hooks/useGetAPI.js +++ b/SurvivalConfig/src/hooks/useGetAPI.ts @@ -1,14 +1,15 @@ +import _ from 'lodash' import { useEffect, useState } from 'react' import API from '../api' -import _ from 'lodash' import useForceUpdate from './useForceUpdate' +import { GetOptions, GetResult } from '../types' -export default function useGetAPI(endpoint, options) { +export default function useGetAPI(endpoint: string, options?: GetOptions): GetResult { const onCompleted = _.get(options, 'onCompleted') const onError = _.get(options, 'onError') const [loading, setLoading] = useState(true) - const [error, setError] = useState() + const [error, setError] = useState() const [data, setData] = useState() const [refetchValue, refetch] = useForceUpdate() @@ -27,13 +28,14 @@ export default function useGetAPI(endpoint, options) { } setLoading(false) }) - .catch(error => { + .catch((error: Error) => { setError(error) setLoading(false) if (onError) { onError(error) } }) + // eslint-disable-next-line }, [endpoint, refetchValue]) return { data, loading, error, refetch } diff --git a/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.js b/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.js deleted file mode 100644 index ff49234..0000000 --- a/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.js +++ /dev/null @@ -1,7 +0,0 @@ -import useLazyGetAPI from './useLazyGetAPI' - -export default function useGetUsernameInfoLazy(options) { - const lazyGet = useLazyGetAPI(options) - - return [username => lazyGet[0](`username/${username}`), lazyGet[1]] -} diff --git a/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.ts b/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.ts new file mode 100644 index 0000000..d84abce --- /dev/null +++ b/SurvivalConfig/src/hooks/useGetUsernameInfoLazy.ts @@ -0,0 +1,18 @@ +import useLazyGetAPI from './useLazyGetAPI' +import { GetOptions, LazyGetExecFunction } from '../types' + +export default function useGetUsernameInfoLazy( + options?: GetOptions +): [ + (username: string) => Promise, + { + data?: any + loading: boolean + error?: Error + refetch: LazyGetExecFunction + } +] { + const lazyGet = useLazyGetAPI(options) + + return [(username: string) => lazyGet[0](`username/${username}`), lazyGet[1]] +} diff --git a/SurvivalConfig/src/hooks/useLazyGetAPI.js b/SurvivalConfig/src/hooks/useLazyGetAPI.ts similarity index 77% rename from SurvivalConfig/src/hooks/useLazyGetAPI.js rename to SurvivalConfig/src/hooks/useLazyGetAPI.ts index 70b6fba..0623e60 100644 --- a/SurvivalConfig/src/hooks/useLazyGetAPI.js +++ b/SurvivalConfig/src/hooks/useLazyGetAPI.ts @@ -1,15 +1,16 @@ import _ from 'lodash' import { useState } from 'react' import API from '../api' +import { GetOptions, LazyGetResult } from '../types' -export default function useLazyGetAPI(options) { +export default function useLazyGetAPI(options?: GetOptions): LazyGetResult { const onCompleted = _.get(options, 'onCompleted') const onError = _.get(options, 'onError') const [loading, setLoading] = useState(false) - const [error, setError] = useState() - const [data, setData] = useState() + const [error, setError] = useState() + const [data, setData] = useState() - const get = endpoint => { + const get = (endpoint: string) => { setLoading(true) return API.get(endpoint) .then(response => { diff --git a/SurvivalConfig/src/hooks/usePostApi.js b/SurvivalConfig/src/hooks/usePostApi.ts similarity index 81% rename from SurvivalConfig/src/hooks/usePostApi.js rename to SurvivalConfig/src/hooks/usePostApi.ts index 9d5f338..62c33e2 100644 --- a/SurvivalConfig/src/hooks/usePostApi.js +++ b/SurvivalConfig/src/hooks/usePostApi.ts @@ -1,11 +1,12 @@ import _ from 'lodash' import { useState } from 'react' import API from '../api' +import { PostResult } from '../types' -export default function usePostAPI(endpoint) { +export default function usePostAPI(endpoint: string): PostResult { const [loading, setLoading] = useState(false) - const post = data => { + const post = (data: any) => { setLoading(true) return API.post(endpoint, { ...data, diff --git a/SurvivalConfig/src/hooks/useUpdateMobileNumber.js b/SurvivalConfig/src/hooks/useUpdateMobileNumber.ts similarity index 59% rename from SurvivalConfig/src/hooks/useUpdateMobileNumber.js rename to SurvivalConfig/src/hooks/useUpdateMobileNumber.ts index c760977..ffce094 100644 --- a/SurvivalConfig/src/hooks/useUpdateMobileNumber.js +++ b/SurvivalConfig/src/hooks/useUpdateMobileNumber.ts @@ -1,5 +1,5 @@ import usePostAPI from './usePostApi' -export default function useUpdateMobileNumber(id) { +export default function useUpdateMobileNumber(id: string) { return usePostAPI(`user/${id}/updatemobile`) } diff --git a/SurvivalConfig/src/hooks/useUpdateTimeSlots.js b/SurvivalConfig/src/hooks/useUpdateTimeSlots.ts similarity index 60% rename from SurvivalConfig/src/hooks/useUpdateTimeSlots.js rename to SurvivalConfig/src/hooks/useUpdateTimeSlots.ts index 6c0b653..21fd98e 100644 --- a/SurvivalConfig/src/hooks/useUpdateTimeSlots.js +++ b/SurvivalConfig/src/hooks/useUpdateTimeSlots.ts @@ -1,5 +1,5 @@ import usePostAPI from './usePostApi' -export default function useUpdateTimeSlots(id) { +export default function useUpdateTimeSlots(id: string) { return usePostAPI(`time_slots/${id}/update`) } diff --git a/SurvivalConfig/src/hooks/useUsernameRecord.js b/SurvivalConfig/src/hooks/useUsernameRecord.js deleted file mode 100644 index ab5be05..0000000 --- a/SurvivalConfig/src/hooks/useUsernameRecord.js +++ /dev/null @@ -1,5 +0,0 @@ -import useGetAPI from './useGetAPI' - -export default function useUsernameRecord(username, props) { - return useGetAPI(`user/${username}`, props) -} diff --git a/SurvivalConfig/src/hooks/useUsernameRecord.ts b/SurvivalConfig/src/hooks/useUsernameRecord.ts new file mode 100644 index 0000000..b7cc4bc --- /dev/null +++ b/SurvivalConfig/src/hooks/useUsernameRecord.ts @@ -0,0 +1,6 @@ +import useGetAPI from './useGetAPI' +import { GetOptions } from '../types' + +export default function useUsernameRecord(username: string, options?: GetOptions) { + return useGetAPI(`user/${username}`, options) +} diff --git a/SurvivalConfig/src/icons/GithubIcon.js b/SurvivalConfig/src/icons/GithubIcon.tsx similarity index 89% rename from SurvivalConfig/src/icons/GithubIcon.js rename to SurvivalConfig/src/icons/GithubIcon.tsx index cea91c9..ead8e46 100644 --- a/SurvivalConfig/src/icons/GithubIcon.js +++ b/SurvivalConfig/src/icons/GithubIcon.tsx @@ -1,7 +1,7 @@ -import SvgIcon from '@material-ui/core/SvgIcon' +import SvgIcon from '@mui/material/SvgIcon' import React from 'react' -export default function GithubIcon(props) { +export default function GithubIcon(props: any) { return ( diff --git a/SurvivalConfig/src/index.js b/SurvivalConfig/src/index.js index 824d262..982607c 100644 --- a/SurvivalConfig/src/index.js +++ b/SurvivalConfig/src/index.js @@ -1,12 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import './index.css' +import { createRoot } from 'react-dom/client' import App from './App' import * as serviceWorker from './serviceWorker' -ReactDOM.render(, document.getElementById('root')) +const container = document.getElementById('root') +const root = createRoot(container) // createRoot(container!) if you use TypeScript +root.render() -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister() diff --git a/SurvivalConfig/src/muiTheme.js b/SurvivalConfig/src/muiTheme.ts similarity index 60% rename from SurvivalConfig/src/muiTheme.js rename to SurvivalConfig/src/muiTheme.ts index 243dbef..7fe6d57 100644 --- a/SurvivalConfig/src/muiTheme.js +++ b/SurvivalConfig/src/muiTheme.ts @@ -1,6 +1,6 @@ -import { createMuiTheme } from '@material-ui/core/styles' +import { createTheme, Theme } from '@mui/material/styles' -const theme = createMuiTheme({ +const theme = createTheme({ palette: { error: { light: '#ff967c', @@ -23,22 +23,17 @@ const theme = createMuiTheme({ dark: '#0067c7', }, }, - breakpoints: { - values: { - md: 1024, - lg: 1440, - xl: 1660, + components: { + MuiButton: { + styleOverrides: { + root: { textTransform: 'none' }, + }, }, }, }) -theme.overrides = { - ...theme.overrides, - MuiButton: { - root: { - textTransform: 'none', - }, - }, +declare module '@mui/styles/defaultTheme' { + interface DefaultTheme extends Theme {} } export default theme diff --git a/SurvivalConfig/src/pages/main/createForm.js b/SurvivalConfig/src/pages/main/CreateForm.tsx similarity index 70% rename from SurvivalConfig/src/pages/main/createForm.js rename to SurvivalConfig/src/pages/main/CreateForm.tsx index 225d943..7a5bc89 100644 --- a/SurvivalConfig/src/pages/main/createForm.js +++ b/SurvivalConfig/src/pages/main/CreateForm.tsx @@ -1,10 +1,11 @@ -import Button from '@material-ui/core/Button' -import TextField from '@material-ui/core/TextField' -import Typography from '@material-ui/core/Typography' +import Button from '@mui/material/Button' +import TextField from '@mui/material/TextField' +import Typography from '@mui/material/Typography' import { Form, Formik } from 'formik' import React from 'react' import InputMask from 'react-input-mask' import * as Yup from 'yup' +import { CreateFormValues } from '../../types' const CreateSchema = Yup.object().shape({ username: Yup.string().min(3, 'Too Short!').max(16, 'Too Long!').required('Required'), @@ -13,19 +14,22 @@ const CreateSchema = Yup.object().shape({ .matches(/^\(\d{3}\) \d{3}-\d{4}$/, { message: 'Invalid phone number' }), }) -export default function CreateForm(props) { +interface Props { + handleSubmit: any + initialValues: CreateFormValues +} + +export default function CreateForm(props: Props) { const { handleSubmit, initialValues } = props + + const initial: CreateFormValues = { + username: '', + mobile: '', + ...initialValues, + } + return ( - + {({ values, errors, handleChange, handleBlur, isValid, touched }) => { return (
@@ -48,17 +52,15 @@ export default function CreateForm(props) { style={{ marginRight: 16 }} /> - {() => ( - - )} +