Skip to content

Commit a252638

Browse files
diegotiddiegotid
committed
Cleanup code
1 parent 9e72ddf commit a252638

5 files changed

Lines changed: 95 additions & 96 deletions

File tree

‎src/App.tsx‎

Lines changed: 3 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,12 @@
11
import { createTheme, ThemeProvider } from '@mui/material'
22
import '@fontsource/inter/700.css'
33
import '@fontsource/inter/400.css'
4-
import './App.css'
4+
import './styles/App.css'
5+
import { appTheme } from './styles/Theme'
56
import Signup from './Signup'
67

78
const App = () => {
8-
const theme = () => createTheme({
9-
components: {
10-
MuiButton: {
11-
styleOverrides: {
12-
root: {
13-
borderRadius: 6,
14-
},
15-
},
16-
},
17-
MuiOutlinedInput: {
18-
styleOverrides: {
19-
root: {
20-
borderRadius: 6,
21-
},
22-
},
23-
},
24-
},
25-
typography: {
26-
fontFamily: 'Inter, Helvetica Neue, sans-serif',
27-
h2: {
28-
fontWeight: 'bold',
29-
color: 'grey',
30-
fontSize: '2.5rem',
31-
lineHeight: 0.9,
32-
paddingBottom: 16,
33-
},
34-
h5: {
35-
fontWeight: 'bold',
36-
color: 'lightgrey',
37-
},
38-
button: {
39-
textTransform: 'none',
40-
fontWeight: 700,
41-
fontSize: '1rem',
42-
letterSpacing: '0.5px',
43-
lineHeight: 1.75,
44-
height: 48,
45-
},
46-
caption: {
47-
fontSize: '0.75rem',
48-
fontWeight: 400,
49-
color: 'grey',
50-
textAlign: 'center',
51-
width: '100%',
52-
display: 'block',
53-
},
54-
},
55-
shape: {
56-
borderRadius: 9,
57-
},
58-
})
9+
const theme = () => createTheme(appTheme)
5910

6011
return (
6112
<ThemeProvider theme={theme}>

‎src/Signup.tsx‎

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
22
import { Box, Typography, TextField, InputAdornment, Button, Alert, IconButton, CircularProgress } from '@mui/material'
33
import '@fontsource/inter/700.css'
44
import '@fontsource/inter/400.css'
5-
import './App.css'
5+
import './styles/App.css'
66
import { v4 as randomUUID } from 'uuid'
77
import { Visibility, VisibilityOff } from '@mui/icons-material'
88
import MockHome from './MockHome'
@@ -16,31 +16,31 @@ const Signup = () => {
1616
const [phonePrefix, setPhonePrefix] = useState(GERMANY_PHONE_PREFIX)
1717
const [emailError, setEmailError] = useState(false)
1818
const [password, setPassword] = useState('')
19-
const [requestId, setRequestId] = useState<string | undefined>()
20-
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false)
21-
const [verificationResult, setVerificationResult] = useState<boolean | undefined>()
22-
const [signupCompleted, setSignupCompleted] = useState<boolean | undefined>()
23-
const [userAlreadyExists, setUserAlreadyExists] = useState<boolean>(false)
2419
const [showPassword, setShowPassword] = useState<boolean>(false)
25-
const [verificationCode, setVerificationCode] = useState<string>('')
2620
const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
21+
const [networkRequestId, setNetworkRequestId] = useState<string | undefined>()
22+
const [isNetworkAuthenticated, setIsNetworkAuthenticated] = useState<boolean>(false)
23+
const [messageVerificationCode, setMessageVerificationCode] = useState<string>('')
24+
const [verificationResult, setVerificationResult] = useState<boolean | undefined>()
25+
const [userAlreadyExists, setUserAlreadyExists] = useState<boolean>(false)
26+
const [signupCompleted, setSignupCompleted] = useState<boolean | undefined>()
2727

28-
const authorize = useCallback(async () => {
29-
if (!requestId) return
28+
const networkAuthorize = useCallback(async () => {
29+
if (!networkRequestId) return
3030
const params = new URLSearchParams({
3131
response_type: 'code',
3232
client_id: import.meta.env.VITE_CLIENT_ID,
3333
scope: import.meta.env.VITE_NV_SCOPE,
3434
redirect_uri: `${import.meta.env.VITE_BACKEND_URL}/callback`,
35-
state: requestId!,
35+
state: networkRequestId!,
3636
})
3737
try {
3838
const response = await fetch(`${import.meta.env.VITE_API_GATEWAY}/authorize?${params.toString()}`, {
3939
method: 'GET',
4040
redirect: 'follow',
4141
headers: { 'Content-Type': 'application/json' }
4242
})
43-
setIsAuthenticated(response.status === 201)
43+
setIsNetworkAuthenticated(response.status === 201)
4444
if (!response.ok) {
4545
setVerificationResult(false)
4646
setIsSubmitting(false)
@@ -49,14 +49,10 @@ const Signup = () => {
4949
setVerificationResult(false)
5050
setIsSubmitting(false)
5151
}
52-
}, [requestId])
53-
54-
const auth = useCallback(() => {
55-
authorize()
56-
}, [authorize])
52+
}, [networkRequestId])
5753

58-
const signup = useCallback(() => {
59-
const params = new URLSearchParams(requestId ? { state: requestId } : {})
54+
const performSignup = useCallback(() => {
55+
const params = new URLSearchParams(networkRequestId ? { state: networkRequestId } : {})
6056
setIsSubmitting(true)
6157
fetch(`${import.meta.env.VITE_BACKEND_URL}/signup?${params.toString()}`, {
6258
method: 'POST',
@@ -84,17 +80,17 @@ const Signup = () => {
8480
setSignupCompleted(false)
8581
})
8682
.finally(() => setIsSubmitting(false))
87-
}, [isPhoneNumber, requestId, userId, phonePrefix, password])
83+
}, [isPhoneNumber, networkRequestId, userId, phonePrefix, password])
8884

89-
const verifyCode = useCallback(() => {
90-
if (!verificationCode.trim()) return
85+
const verifyMessageVerificationCode = useCallback(() => {
86+
if (!messageVerificationCode.trim()) return
9187
setIsSubmitting(true)
9288
fetch(`${import.meta.env.VITE_BACKEND_URL}/verify`, {
9389
method: 'POST',
9490
headers: { 'Content-Type': 'application/json' },
9591
body: JSON.stringify({
9692
id: isPhoneNumber ? `${phonePrefix}${userId.trim()}` : userId.trim(),
97-
code: verificationCode.trim(),
93+
code: messageVerificationCode.trim(),
9894
})
9995
})
10096
.then(async response => {
@@ -112,39 +108,39 @@ const Signup = () => {
112108
setSignupCompleted(false)
113109
})
114110
.finally(() => setIsSubmitting(false))
115-
}, [userId, isPhoneNumber, phonePrefix, verificationCode])
111+
}, [userId, isPhoneNumber, phonePrefix, messageVerificationCode])
116112

117113
useEffect(() => {
118-
if (!requestId) return
119-
if (isPhoneNumber && !isAuthenticated) {
120-
auth()
114+
if (!networkRequestId) return
115+
if (isPhoneNumber && !isNetworkAuthenticated) {
116+
networkAuthorize()
121117
}
122-
if (!isPhoneNumber && requestId) {
123-
signup()
118+
if (!isPhoneNumber && networkRequestId) {
119+
performSignup()
124120
}
125-
}, [requestId, isPhoneNumber, isAuthenticated])
121+
}, [networkRequestId, isPhoneNumber, isNetworkAuthenticated])
126122

127123
useEffect(() => {
128-
if (isAuthenticated) {
129-
signup()
124+
if (isNetworkAuthenticated) {
125+
performSignup()
130126
}
131-
}, [isAuthenticated])
127+
}, [isNetworkAuthenticated])
132128

133129
useEffect(() => {
134-
if (verificationResult === false && requestId && isPhoneNumber) {
135-
signup()
130+
if (verificationResult === false && networkRequestId && isPhoneNumber) {
131+
performSignup()
136132
}
137-
}, [verificationResult, requestId, isPhoneNumber])
133+
}, [verificationResult, networkRequestId, isPhoneNumber])
138134

139135
const handleSubmit = (e: React.FormEvent) => {
140136
e.preventDefault()
141137
setIsSubmitting(true)
142138
if (verificationResult === false) {
143-
verifyCode()
144-
} else if (!isAuthenticated && isPhoneNumber) {
145-
setRequestId(randomUUID())
139+
verifyMessageVerificationCode()
140+
} else if (!isNetworkAuthenticated && isPhoneNumber) {
141+
setNetworkRequestId(randomUUID())
146142
} else {
147-
signup()
143+
performSignup()
148144
}
149145
}
150146

@@ -197,12 +193,12 @@ const Signup = () => {
197193
type="number"
198194
label="Verification code"
199195
name="code"
200-
value={verificationCode}
201-
onChange={e => setVerificationCode(e.target.value)}
196+
value={messageVerificationCode}
197+
onChange={e => setMessageVerificationCode(e.target.value)}
202198
fullWidth
203199
margin="normal"
204200
required
205-
error={verificationCode.trim().length > 0 && !/^\d+$/.test(verificationCode.trim())}
201+
error={messageVerificationCode.trim().length > 0 && !/^\d+$/.test(messageVerificationCode.trim())}
206202
/>
207203
}
208204
{verificationResult !== false &&
@@ -245,7 +241,7 @@ const Signup = () => {
245241
isSubmitting ||
246242
userId.trim() === '' ||
247243
(!isPhoneNumber && password.trim() === '') ||
248-
(verificationResult === false && verificationCode.trim() === '')
244+
(verificationResult === false && messageVerificationCode.trim() === '')
249245
}
250246
>
251247
{isSubmitting && <CircularProgress size={24} color="inherit" />}

‎src/assets/react.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

src/App.css renamed to src/styles/App.css

File renamed without changes.

‎src/styles/Theme.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { ThemeOptions } from "@mui/material"
2+
3+
export const appTheme = {
4+
components: {
5+
MuiButton: {
6+
styleOverrides: {
7+
root: {
8+
borderRadius: 6,
9+
},
10+
},
11+
},
12+
MuiOutlinedInput: {
13+
styleOverrides: {
14+
root: {
15+
borderRadius: 6,
16+
},
17+
},
18+
},
19+
},
20+
typography: {
21+
fontFamily: 'Inter, Helvetica Neue, sans-serif',
22+
h2: {
23+
fontWeight: 'bold',
24+
color: 'grey',
25+
fontSize: '2.5rem',
26+
lineHeight: 0.9,
27+
paddingBottom: 16,
28+
},
29+
h5: {
30+
fontWeight: 'bold',
31+
color: 'lightgrey',
32+
},
33+
button: {
34+
textTransform: 'none',
35+
fontWeight: 700,
36+
fontSize: '1rem',
37+
letterSpacing: '0.5px',
38+
lineHeight: 1.75,
39+
height: 48,
40+
},
41+
caption: {
42+
fontSize: '0.75rem',
43+
fontWeight: 400,
44+
color: 'grey',
45+
textAlign: 'center',
46+
width: '100%',
47+
display: 'block',
48+
},
49+
},
50+
shape: {
51+
borderRadius: 9,
52+
},
53+
} as ThemeOptions

0 commit comments

Comments
 (0)