Skip to content

Commit 47c13e6

Browse files
jmg1138jmg1138
committedMay 2, 2022
Changed dependency from react-helmet to [react-helmet-async](https://www.npmjs.com/package/react-helmet-async), due to [this issue](nfl/react-helmet#548). The async library requires a <HelmetProvider> encapsulation element, so I added that where I was already using the <Helmet> element.
1 parent 4f6facf commit 47c13e6

File tree

8 files changed

+2510
-2068
lines changed

8 files changed

+2510
-2068
lines changed
 

‎package-lock.json

+2,294-1,874
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/web/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,15 @@
5252
"@types/node": "^17.0.30",
5353
"@types/react": "^18.0.8",
5454
"@types/react-dom": "^18.0.3",
55-
"@types/react-helmet": "^6.1.5",
55+
"@types/react-helmet": "6.1.5",
5656
"@types/react-redux": "^7.1.24",
5757
"history": "5",
5858
"jwt-decode": "3.1.2",
5959
"less": "^4.1.2",
6060
"less-watch-compiler": "^1.16.3",
6161
"react": "18.1.0",
6262
"react-dom": "18.1.0",
63-
"react-helmet": "^6.1.0",
63+
"react-helmet-async": "1.3.0",
6464
"react-hook-form": "7.30.0",
6565
"react-redux": "8.0.1",
6666
"react-router-dom": "^6.3.0",

‎packages/web/src/components/activation/Activation.tsx

+36-34
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
*/
2626
import type { ApiRequestActivation } from '@recipe-report/domain/interfaces'
2727
import { useEffect } from 'react'
28-
import { Helmet } from 'react-helmet'
28+
import { Helmet, HelmetProvider } from 'react-helmet-async'
2929
import { useParams } from 'react-router-dom'
3030

3131
import { useAppDispatch, useAppSelector } from 'app/hooks'
@@ -57,39 +57,41 @@ export function Activation(): JSX.Element {
5757
}, [])
5858
return (
5959
<div>
60-
<Helmet>
61-
<meta charSet='utf-8' />
62-
<title>User Activation - Recipe.Report</title>
63-
<link rel='canonical' href='https://my.recipe.report' />
64-
</Helmet>
65-
<form className={styles['form']}>
66-
<div className={styles['logo']}>
67-
<Logo />
68-
</div>
69-
<h1>User Activation</h1>
70-
<Spacer size={20} axis='vertical' />
71-
{token && status === 'Loading' && (
72-
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
73-
)}
74-
{token && status === 'Activated' && (
75-
<Alert style={alertStyles.SUCCESS} title={status} message={message} code={code} />
76-
)}
77-
{token && status === 'Failed' && (
78-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
79-
)}
80-
{token && status === 'Error' && (
81-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
82-
)}
83-
{!token && (
84-
<Alert
85-
style={alertStyles.ERROR}
86-
title='No token'
87-
message='There was no token in the activation URL.'
88-
/>
89-
)}
90-
<Spacer size={20} axis='vertical' />
91-
<a href='/authenticate'>Sign in</a>
92-
</form>
60+
<HelmetProvider>
61+
<Helmet>
62+
<meta charSet='utf-8' />
63+
<title>User Activation - Recipe.Report</title>
64+
<link rel='canonical' href='https://my.recipe.report' />
65+
</Helmet>
66+
<form className={styles['form']}>
67+
<div className={styles['logo']}>
68+
<Logo />
69+
</div>
70+
<h1>User Activation</h1>
71+
<Spacer size={20} axis='vertical' />
72+
{token && status === 'Loading' && (
73+
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
74+
)}
75+
{token && status === 'Activated' && (
76+
<Alert style={alertStyles.SUCCESS} title={status} message={message} code={code} />
77+
)}
78+
{token && status === 'Failed' && (
79+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
80+
)}
81+
{token && status === 'Error' && (
82+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
83+
)}
84+
{!token && (
85+
<Alert
86+
style={alertStyles.ERROR}
87+
title='No token'
88+
message='There was no token in the activation URL.'
89+
/>
90+
)}
91+
<Spacer size={20} axis='vertical' />
92+
<a href='/authenticate'>Sign in</a>
93+
</form>
94+
</HelmetProvider>
9395
</div>
9496
)
9597
}

‎packages/web/src/components/app/App.tsx

+41-35
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
*
2424
* @module
2525
*/
26-
import { Helmet } from 'react-helmet'
26+
import { Helmet, HelmetProvider } from 'react-helmet-async'
2727
import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
2828

2929
import { useAppSelector } from 'app/hooks'
@@ -44,40 +44,46 @@ export function App(): JSX.Element {
4444
const location = useLocation()
4545
return (
4646
<div className={styles['container']}>
47-
<Helmet>
48-
<meta charSet='utf-8' />
49-
<title>Recipe.Report</title>
50-
<link rel='canonical' href='https://my.recipe.report' />
51-
</Helmet>
52-
<Routes>
53-
<Route path='*' element={<NotFound />} />
54-
<Route
55-
path='/'
56-
element={
57-
token ? (
58-
<Dashboard />
59-
) : (
60-
<Navigate to='/authenticate' state={{ from: location }} replace />
61-
)
62-
}
63-
/>
64-
<Route path='/activate/:token' element={<Activation />} />
65-
<Route
66-
path='/authenticate'
67-
element={
68-
token ? <Navigate to='/' state={{ from: location }} replace /> : <Authentication />
69-
}
70-
/>
71-
<Route
72-
path='/profile'
73-
element={
74-
token ? <Profile /> : <Navigate to='/authenticate' state={{ from: location }} replace />
75-
}
76-
/>
77-
<Route path='/register' element={<Registration />} />
78-
</Routes>
79-
<NavBar />
80-
<Footer />
47+
<HelmetProvider>
48+
<Helmet>
49+
<meta charSet='utf-8' />
50+
<title>Recipe.Report</title>
51+
<link rel='canonical' href='https://my.recipe.report' />
52+
</Helmet>
53+
<Routes>
54+
<Route path='*' element={<NotFound />} />
55+
<Route
56+
path='/'
57+
element={
58+
token ? (
59+
<Dashboard />
60+
) : (
61+
<Navigate to='/authenticate' state={{ from: location }} replace />
62+
)
63+
}
64+
/>
65+
<Route path='/activate/:token' element={<Activation />} />
66+
<Route
67+
path='/authenticate'
68+
element={
69+
token ? <Navigate to='/' state={{ from: location }} replace /> : <Authentication />
70+
}
71+
/>
72+
<Route
73+
path='/profile'
74+
element={
75+
token ? (
76+
<Profile />
77+
) : (
78+
<Navigate to='/authenticate' state={{ from: location }} replace />
79+
)
80+
}
81+
/>
82+
<Route path='/register' element={<Registration />} />
83+
</Routes>
84+
<NavBar />
85+
<Footer />
86+
</HelmetProvider>
8187
</div>
8288
)
8389
}

‎packages/web/src/components/authentication/Authentication.tsx

+47-43
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
* @module
2525
*/
2626
import type { ApiRequestAuthentication } from '@recipe-report/domain/interfaces'
27-
import { Helmet } from 'react-helmet'
27+
import { Helmet, HelmetProvider } from 'react-helmet-async'
2828
import { useForm } from 'react-hook-form'
2929
import type { SubmitHandler } from 'react-hook-form'
3030

@@ -67,48 +67,52 @@ export function Authentication(): JSX.Element {
6767

6868
return (
6969
<div>
70-
<Helmet>
71-
<meta charSet='utf-8' />
72-
<title>Sign in - Recipe.Report</title>
73-
<link rel='canonical' href='https://my.recipe.report' />
74-
</Helmet>
75-
<form onSubmit={handleSubmit(onSubmit)} className={styles['form']}>
76-
<div className={styles['logo']}>
77-
<Logo />
78-
</div>
79-
<h1>Sign in</h1>
80-
<Spacer size={20} axis='vertical' />
81-
<label>Email Address</label>
82-
<input
83-
type='text'
84-
className={styles['input']}
85-
{...register(`email_address`, { required: true })}
86-
/>
87-
{errors.email_address && (
88-
<span className={styles['error']}>Please enter your email address.</span>
89-
)}
90-
<Spacer size={20} axis='vertical' />
91-
<label>Password</label>
92-
<input
93-
type='password'
94-
className={styles['input']}
95-
{...register(`password`, { required: true })}
96-
/>
97-
{errors.password && <span className={styles['error']}>Please enter your password.</span>}
98-
<Spacer size={30} axis='vertical' />
99-
{status !== 'Loading' && <input type='submit' className={styles['input']} value='Submit' />}
100-
{status === 'Loading' && (
101-
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
102-
)}
103-
{status === 'Failed' && (
104-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
105-
)}
106-
{status === 'Error' && (
107-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
108-
)}
109-
<Spacer size={20} axis='vertical' />
110-
<a href='/register'>Create an account</a>
111-
</form>
70+
<HelmetProvider>
71+
<Helmet>
72+
<meta charSet='utf-8' />
73+
<title>Sign in - Recipe.Report</title>
74+
<link rel='canonical' href='https://my.recipe.report' />
75+
</Helmet>
76+
<form onSubmit={handleSubmit(onSubmit)} className={styles['form']}>
77+
<div className={styles['logo']}>
78+
<Logo />
79+
</div>
80+
<h1>Sign in</h1>
81+
<Spacer size={20} axis='vertical' />
82+
<label>Email Address</label>
83+
<input
84+
type='text'
85+
className={styles['input']}
86+
{...register(`email_address`, { required: true })}
87+
/>
88+
{errors.email_address && (
89+
<span className={styles['error']}>Please enter your email address.</span>
90+
)}
91+
<Spacer size={20} axis='vertical' />
92+
<label>Password</label>
93+
<input
94+
type='password'
95+
className={styles['input']}
96+
{...register(`password`, { required: true })}
97+
/>
98+
{errors.password && <span className={styles['error']}>Please enter your password.</span>}
99+
<Spacer size={30} axis='vertical' />
100+
{status !== 'Loading' && (
101+
<input type='submit' className={styles['input']} value='Submit' />
102+
)}
103+
{status === 'Loading' && (
104+
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
105+
)}
106+
{status === 'Failed' && (
107+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
108+
)}
109+
{status === 'Error' && (
110+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
111+
)}
112+
<Spacer size={20} axis='vertical' />
113+
<a href='/register'>Create an account</a>
114+
</form>
115+
</HelmetProvider>
112116
</div>
113117
)
114118
}

‎packages/web/src/components/dashboard/Dashboard.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
*
2424
* @module
2525
*/
26-
import { Helmet } from 'react-helmet'
26+
import { Helmet, HelmetProvider } from 'react-helmet-async'
2727

2828
import styles from 'components/dashboard/Dashboard.module.css'
2929

@@ -34,18 +34,20 @@ import styles from 'components/dashboard/Dashboard.module.css'
3434
export function Dashboard(): JSX.Element {
3535
return (
3636
<div>
37-
<Helmet>
38-
<meta charSet='utf-8' />
39-
<title>Dashboard - Recipe.Report</title>
40-
<link rel='canonical' href='https://my.recipe.report' />
41-
</Helmet>
42-
<div className={styles['container']}>
43-
<h1>Welcome to my.Recipe.Report</h1>
44-
<p>
45-
Recipe.Report is an alpha open-source project that will be available soon. Please check
46-
back later for new features to become available.
47-
</p>
48-
</div>
37+
<HelmetProvider>
38+
<Helmet>
39+
<meta charSet='utf-8' />
40+
<title>Dashboard - Recipe.Report</title>
41+
<link rel='canonical' href='https://my.recipe.report' />
42+
</Helmet>
43+
<div className={styles['container']}>
44+
<h1>Welcome to my.Recipe.Report</h1>
45+
<p>
46+
Recipe.Report is an alpha open-source project that will be available soon. Please check
47+
back later for new features to become available.
48+
</p>
49+
</div>
50+
</HelmetProvider>
4951
</div>
5052
)
5153
}

‎packages/web/src/components/profile/Profile.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import type { AccountDto, UserDto } from '@recipe-report/domain/dtos'
2727
import type { ApiRequestProfile } from '@recipe-report/domain/interfaces'
2828
import type { Claims } from '@recipe-report/service/jwt-service'
2929
import { useEffect } from 'react'
30-
import { Helmet } from 'react-helmet'
30+
import { Helmet, HelmetProvider } from 'react-helmet-async'
3131

3232
import { useAppDispatch, useAppSelector } from 'app/hooks'
3333

@@ -56,16 +56,18 @@ export function Profile(): JSX.Element {
5656
const userAccounts = UserAccounts(user?.accounts)
5757
return (
5858
<div>
59-
<Helmet>
60-
<meta charSet='utf-8' />
61-
<title>User Profile - Recipe.Report</title>
62-
<link rel='canonical' href='https://my.recipe.report' />
63-
</Helmet>
64-
<div className={styles['container']}>
65-
{userInfo}
66-
<Spacer size={20} axis='vertical' />
67-
{userAccounts}
68-
</div>
59+
<HelmetProvider>
60+
<Helmet>
61+
<meta charSet='utf-8' />
62+
<title>User Profile - Recipe.Report</title>
63+
<link rel='canonical' href='https://my.recipe.report' />
64+
</Helmet>
65+
<div className={styles['container']}>
66+
{userInfo}
67+
<Spacer size={20} axis='vertical' />
68+
{userAccounts}
69+
</div>
70+
</HelmetProvider>
6971
</div>
7072
)
7173
}

‎packages/web/src/components/registration/Registration.tsx

+62-56
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
* @module
2525
*/
2626
import type { ApiRequestRegistration } from '@recipe-report/domain/interfaces'
27-
import { Helmet } from 'react-helmet'
27+
import { Helmet, HelmetProvider } from 'react-helmet-async'
2828
import { useForm } from 'react-hook-form'
2929
import type { SubmitHandler } from 'react-hook-form'
3030

@@ -68,61 +68,67 @@ export function Registration(): JSX.Element {
6868

6969
return (
7070
<div>
71-
<Helmet>
72-
<meta charSet='utf-8' />
73-
<title>Register - Recipe.Report</title>
74-
<link rel='canonical' href='https://my.recipe.report' />
75-
</Helmet>
76-
<form onSubmit={handleSubmit(onSubmit)} className={styles['form']}>
77-
<div className={styles['logo']}>
78-
<Logo />
79-
</div>
80-
<h1>Create an account</h1>
81-
<Spacer size={20} axis='vertical' />
82-
<label>Username</label>
83-
<input type='text' className={styles['input']} {...register(`name`, { required: true })} />
84-
{errors.name && (
85-
<span className={styles['error']}>Please enter your desired username.</span>
86-
)}
87-
<Spacer size={20} axis='vertical' />
88-
<label>Email address</label>
89-
<input
90-
type='text'
91-
className={styles['input']}
92-
{...register(`email_address`, { required: true })}
93-
/>
94-
{errors.email_address && (
95-
<span className={styles['error']}>Please enter your email address.</span>
96-
)}
97-
<Spacer size={20} axis='vertical' />
98-
<label>Password</label>
99-
<input
100-
type='password'
101-
className={styles['input']}
102-
{...register(`password`, { required: true })}
103-
/>
104-
{errors.password && (
105-
<span className={styles['error']}>Please enter your new secure password.</span>
106-
)}
107-
<Spacer size={30} axis='vertical' />
108-
{status !== 'Registered' && status !== 'Loading' && (
109-
<input type='submit' className={styles['input']} value='Submit' />
110-
)}
111-
{status === 'Loading' && (
112-
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
113-
)}
114-
{status === 'Registered' && (
115-
<Alert style={alertStyles.SUCCESS} title={status} message={message} code={code} />
116-
)}
117-
{status === 'Failed' && (
118-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
119-
)}
120-
{status === 'Error' && (
121-
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
122-
)}
123-
<Spacer size={20} axis='vertical' />
124-
<a href='/authenticate'>Sign in</a>
125-
</form>
71+
<HelmetProvider>
72+
<Helmet>
73+
<meta charSet='utf-8' />
74+
<title>Register - Recipe.Report</title>
75+
<link rel='canonical' href='https://my.recipe.report' />
76+
</Helmet>
77+
<form onSubmit={handleSubmit(onSubmit)} className={styles['form']}>
78+
<div className={styles['logo']}>
79+
<Logo />
80+
</div>
81+
<h1>Create an account</h1>
82+
<Spacer size={20} axis='vertical' />
83+
<label>Username</label>
84+
<input
85+
type='text'
86+
className={styles['input']}
87+
{...register(`name`, { required: true })}
88+
/>
89+
{errors.name && (
90+
<span className={styles['error']}>Please enter your desired username.</span>
91+
)}
92+
<Spacer size={20} axis='vertical' />
93+
<label>Email address</label>
94+
<input
95+
type='text'
96+
className={styles['input']}
97+
{...register(`email_address`, { required: true })}
98+
/>
99+
{errors.email_address && (
100+
<span className={styles['error']}>Please enter your email address.</span>
101+
)}
102+
<Spacer size={20} axis='vertical' />
103+
<label>Password</label>
104+
<input
105+
type='password'
106+
className={styles['input']}
107+
{...register(`password`, { required: true })}
108+
/>
109+
{errors.password && (
110+
<span className={styles['error']}>Please enter your new secure password.</span>
111+
)}
112+
<Spacer size={30} axis='vertical' />
113+
{status !== 'Registered' && status !== 'Loading' && (
114+
<input type='submit' className={styles['input']} value='Submit' />
115+
)}
116+
{status === 'Loading' && (
117+
<Alert style={alertStyles.SPIN} title={status} message={message} code={code} />
118+
)}
119+
{status === 'Registered' && (
120+
<Alert style={alertStyles.SUCCESS} title={status} message={message} code={code} />
121+
)}
122+
{status === 'Failed' && (
123+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
124+
)}
125+
{status === 'Error' && (
126+
<Alert style={alertStyles.ERROR} title={status} message={message} code={code} />
127+
)}
128+
<Spacer size={20} axis='vertical' />
129+
<a href='/authenticate'>Sign in</a>
130+
</form>
131+
</HelmetProvider>
126132
</div>
127133
)
128134
}

0 commit comments

Comments
 (0)
Please sign in to comment.