Skip to content

Commit

Permalink
Make all react components classes and address prop type warnings (#24)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dkhalife
dkhalife authored Jan 16, 2025
1 parent cc45ad9 commit f0088b7
Show file tree
Hide file tree
Showing 32 changed files with 4,483 additions and 4,407 deletions.
4 changes: 2 additions & 2 deletions eslint.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import pluginReact from "eslint-plugin-react";
/** @type {import('eslint').Linter.Config[]} */
export default [
{files: ["**/*.{ts,tsx}"]},
{ignores: ["node_modules", "dist"]},
{languageOptions: { globals: globals.browser }},
{settings: { react: { version: "detect" }}},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
pluginReact.configs.flat.recommended,
{
rules: {
"@typescript-eslint/no-explicit-any": "off",
"react/prop-types": "off"
"@typescript-eslint/no-explicit-any": "off"
}
},
];
6 changes: 3 additions & 3 deletions src/contexts/RouterContext.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { App } from '../App'
import { ChoreEdit } from '../views/ChoreEdit/ChoreEdit'
import { ChoresOverview } from '../views/ChoresOverview'
import { ChoreEdit } from '../views/Chores/ChoreEdit'
import { ChoresOverview } from '../views/Chores/ChoresOverview'
import { Error } from '../views/Error'
import { Settings } from '../views/Settings/Settings'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { ForgotPasswordView } from '../views/Authorization/ForgotPasswordView'
import { LoginView } from '../views/Authorization/LoginView'
import { SignupView } from '../views/Authorization/Signup'
import { UpdatePasswordView } from '../views/Authorization/UpdatePasswordView'
import { ChoreView } from '../views/ChoreEdit/ChoreView'
import { ChoreView } from '../views/Chores/ChoreView'
import { MyChores } from '../views/Chores/MyChores'
import { ChoreHistory } from '../views/History/ChoreHistory'
import { LabelView } from '../views/Labels/LabelView'
Expand Down
336 changes: 169 additions & 167 deletions src/views/Authorization/ForgotPasswordView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,193 +15,195 @@ import { useNavigate } from 'react-router-dom'
import { ResetPassword } from '../../utils/Fetcher'
import React from 'react'

export const ForgotPasswordView = () => {
const navigate = useNavigate()
const [resetStatusOk, setResetStatusOk] = useState<boolean>(false)
const [email, setEmail] = useState('')
const [emailError, setEmailError] = useState<string | null>()
export class ForgotPasswordView extends React.Component {
render(): React.ReactNode {
const navigate = useNavigate()
const [resetStatusOk, setResetStatusOk] = useState<boolean>(false)
const [email, setEmail] = useState('')
const [emailError, setEmailError] = useState<string | null>()

const validateEmail = email => {
return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)
}

const handleSubmit = async () => {
if (!email) {
return setEmailError('Email is required')
const validateEmail = email => {
return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)
}

if (validateEmail(email)) {
setEmailError('Please enter a valid email address')
return
}
const handleSubmit = async () => {
if (!email) {
return setEmailError('Email is required')
}

if (emailError) {
return
}
if (validateEmail(email)) {
setEmailError('Please enter a valid email address')
return
}

try {
const response = await ResetPassword(email)
if (emailError) {
return
}

if (response.ok) {
setResetStatusOk(true)
} else {
try {
const response = await ResetPassword(email)

if (response.ok) {
setResetStatusOk(true)
} else {
setResetStatusOk(false)
}
} catch {
setResetStatusOk(false)
}
} catch {
setResetStatusOk(false)
}
}

const handleEmailChange = e => {
setEmail(e.target.value)
if (validateEmail(e.target.value)) {
setEmailError('Please enter a valid email address')
} else {
setEmailError(null)
const handleEmailChange = e => {
setEmail(e.target.value)
if (validateEmail(e.target.value)) {
setEmailError('Please enter a valid email address')
} else {
setEmailError(null)
}
}
}

return (
<Container
component='main'
maxWidth='xs'
>
<Box
sx={{
marginTop: 4,
display: 'flex',
flexDirection: 'column',

justifyContent: 'space-between',
alignItems: 'center',
}}
return (
<Container
component='main'
maxWidth='xs'
>
<Sheet
component='form'
<Box
sx={{
mt: 1,
width: '100%',
marginTop: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 2,
borderRadius: '8px',
boxShadow: 'md',
minHeight: '70vh',

justifyContent: 'space-between',
justifyItems: 'center',
alignItems: 'center',
}}
>
<Box>
<img src={LogoSVG} alt='logo' width='128px' height='128px' />
<Typography level='h2'>
Done
<span
style={{
color: '#06b6d4',
}}
>
tick
</span>
</Typography>
</Box>
<Sheet
component='form'
sx={{
mt: 1,
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 2,
borderRadius: '8px',
boxShadow: 'md',
minHeight: '70vh',
justifyContent: 'space-between',
justifyItems: 'center',
}}
>
<Box>
<img src={LogoSVG} alt='logo' width='128px' height='128px' />
<Typography level='h2'>
Done
<span
style={{
color: '#06b6d4',
}}
>
tick
</span>
</Typography>
</Box>

<Box sx={{ textAlign: 'center' }}></Box>
{resetStatusOk === null && (
<form onSubmit={handleSubmit}>
<div className='grid gap-6'>
<Typography level='body2' gutterBottom>
Enter your email, and we&lsquo;ll send you a link to get into your
account.
</Typography>
<FormControl error={emailError !== null}>
<Input
placeholder='Email'
type='email'
variant='soft'
fullWidth
size='lg'
value={email}
onChange={handleEmailChange}
error={emailError !== null}
onKeyDown={e => {
if (e.key === 'Enter') {
e.preventDefault()
handleSubmit()
}
}}
/>
<FormHelperText>{emailError}</FormHelperText>
</FormControl>
<Box>
<Button
variant='solid'
size='lg'
fullWidth
sx={{
mb: 1,
}}
onClick={handleSubmit}
>
Reset Password
</Button>
<Button
fullWidth
size='lg'
variant='soft'
sx={{
width: '100%',
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
navigate('/login')
}}
color='neutral'
>
Back to Login
</Button>
<Box sx={{ textAlign: 'center' }}></Box>
{resetStatusOk === null && (
<form onSubmit={handleSubmit}>
<div className='grid gap-6'>
<Typography gutterBottom>
Enter your email, and we&lsquo;ll send you a link to get into your
account.
</Typography>
<FormControl error={emailError !== null}>
<Input
placeholder='Email'
type='email'
variant='soft'
fullWidth
size='lg'
value={email}
onChange={handleEmailChange}
error={emailError !== null}
onKeyDown={e => {
if (e.key === 'Enter') {
e.preventDefault()
handleSubmit()
}
}}
/>
<FormHelperText>{emailError}</FormHelperText>
</FormControl>
<Box>
<Button
variant='solid'
size='lg'
fullWidth
sx={{
mb: 1,
}}
onClick={handleSubmit}
>
Reset Password
</Button>
<Button
fullWidth
size='lg'
variant='soft'
sx={{
width: '100%',
border: 'moccasin',
borderRadius: '8px',
}}
onClick={() => {
navigate('/login')
}}
color='neutral'
>
Back to Login
</Button>
</Box>
</div>
</form>
)}
{resetStatusOk != null && (
<>
<Box mt={-30}>
<Typography level='body-md'>
if there is an account associated with the email you entered,
you will receive an email with instructions on how to reset
your
</Typography>
</Box>
</div>
</form>
)}
{resetStatusOk != null && (
<>
<Box mt={-30}>
<Typography level='body-md'>
if there is an account associated with the email you entered,
you will receive an email with instructions on how to reset
your
</Typography>
</Box>
<Button
variant='soft'
size='lg'
sx={{ position: 'relative', bottom: '0' }}
onClick={() => {
<Button
variant='soft'
size='lg'
sx={{ position: 'relative', bottom: '0' }}
onClick={() => {
navigate('/login')
}}
fullWidth
>
Go to Login
</Button>
</>
)}
<Snackbar
open={resetStatusOk ? resetStatusOk : resetStatusOk === false}
autoHideDuration={5000}
onClose={() => {
if (resetStatusOk) {
navigate('/login')
}}
fullWidth
>
Go to Login
</Button>
</>
)}
<Snackbar
open={resetStatusOk ? resetStatusOk : resetStatusOk === false}
autoHideDuration={5000}
onClose={() => {
if (resetStatusOk) {
navigate('/login')
}
}}
>
{resetStatusOk
? 'Reset email sent, check your email'
: 'Reset email failed, try again later'}
</Snackbar>
</Sheet>
</Box>
</Container>
)
}
}}
>
{resetStatusOk
? 'Reset email sent, check your email'
: 'Reset email failed, try again later'}
</Snackbar>
</Sheet>
</Box>
</Container>
)
}
}
Loading

0 comments on commit f0088b7

Please sign in to comment.