Convert to typescript

Signed-off-by: Davis Mariotti <[email protected]>

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"
   }
 }

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 (
+    <React.Fragment>
+      <StyledEngineProvider injectFirst>
+        <CssBaseline />
+        <ThemeProvider theme={muiTheme}>
+          <BrowserRouter>
+            <div style={{width: '100%',height: '100%', minHeight: '100vh'}}>
+              <Navbar />
+              <Route path="/" component={MainPage} exact />
+              <Route path="/user/:id" component={UsernamePage} exact />
+            </div>
+          </BrowserRouter>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    </React.Fragment>
+  )
+}
+
+export default App

SurvivalConfig/src/hooks/useGetAPI.js → 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<Error | undefined>()
   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 }

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<any>,
+  {
+    data?: any
+    loading: boolean
+    error?: Error
+    refetch: LazyGetExecFunction
+  }
+] {
+  const lazyGet = useLazyGetAPI(options)
+
+  return [(username: string) => lazyGet[0](`username/${username}`), lazyGet[1]]
+}

SurvivalConfig/src/hooks/useLazyGetAPI.js → 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<Error | undefined>()
+  const [data, setData] = useState<any | undefined>()
 
-  const get = endpoint => {
+  const get = (endpoint: string) => {
     setLoading(true)
     return API.get(endpoint)
       .then(response => {

SurvivalConfig/src/hooks/usePostApi.js → 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,

SurvivalConfig/src/hooks/useUpdateMobileNumber.js → 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`)
 }

SurvivalConfig/src/hooks/useUpdateTimeSlots.js → 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`)
 }

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)
+}

SurvivalConfig/src/icons/GithubIcon.js → 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 (
     <SvgIcon {...props}>
       <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />

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(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container) // createRoot(container!) if you use TypeScript
+root.render(<App />)
 
-// 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()

SurvivalConfig/src/muiTheme.js → 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

SurvivalConfig/src/pages/main/createForm.js → 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 (
-    <Formik
-      initialValues={{
-        username: '',
-        mobile: '',
-        ...initialValues,
-      }}
-      onSubmit={handleSubmit}
-      validationSchema={CreateSchema}
-      isInitialValid={false}
-    >
+    <Formik initialValues={initial} onSubmit={handleSubmit} validationSchema={CreateSchema} isInitialValid={false}>
       {({ values, errors, handleChange, handleBlur, isValid, touched }) => {
         return (
           <Form>
@@ -48,17 +52,15 @@ export default function CreateForm(props) {
                   style={{ marginRight: 16 }}
                 />
                 <InputMask mask="(999) 999-9999" value={values.mobile} onChange={handleChange} maskChar=" ">
-                  {() => (
-                    <TextField
-                      id="mobile-input"
-                      label="Phone number"
-                      variant="outlined"
-                      name="mobile"
-                      value={values.mobile}
-                      error={!!errors.mobile}
-                      helperText={errors.mobile}
-                    />
-                  )}
+                  <TextField
+                    id="mobile-input"
+                    label="Phone number"
+                    variant="outlined"
+                    name="mobile"
+                    value={values.mobile}
+                    error={!!errors.mobile}
+                    helperText={errors.mobile}
+                  />
                 </InputMask>
                 <Button
                   color="primary"