diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 13c200eb8a57464c3ba8ac2479b616e699b453b5..938c815d9522b64d648df581cd39f0f7d6cb1e41 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,6 +22,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
+ "react-hook-form": "^7.15.3",
"react-i18next": "^11.11.4",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
@@ -16545,6 +16546,18 @@
"react": ">=16.3.0"
}
},
+ "node_modules/react-hook-form": {
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.15.3.tgz",
+ "integrity": "sha512-z30aZoEHkWE8oZvad4OcYSBI0kQua/T5sFGH9tB2HfeykFnP/pGXNap8lDio4/U1yPj2ffpbvRIvqKd/6jjBVA==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/react-hook-form"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17"
+ }
+ },
"node_modules/react-i18next": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.12.0.tgz",
@@ -34937,6 +34950,12 @@
"react-side-effect": "^2.1.0"
}
},
+ "react-hook-form": {
+ "version": "7.15.3",
+ "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.15.3.tgz",
+ "integrity": "sha512-z30aZoEHkWE8oZvad4OcYSBI0kQua/T5sFGH9tB2HfeykFnP/pGXNap8lDio4/U1yPj2ffpbvRIvqKd/6jjBVA==",
+ "requires": {}
+ },
"react-i18next": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.12.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5e9a405e79eedde89b60142ac75cc2612993c216..8347e208a8cde6a655775345a315f2a3458eff85 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
+ "react-hook-form": "^7.15.3",
"react-i18next": "^11.11.4",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx
index b745f826ed152b91314b9ceec844b16b64b0fe5b..0065eea87b7c780bfc95f8d35384d0b9d7370fab 100644
--- a/frontend/src/components/link/index.tsx
+++ b/frontend/src/components/link/index.tsx
@@ -1,8 +1,7 @@
import React from 'react'
-import styled, { css, DefaultTheme } from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
interface IStyledLink {
- theme: DefaultTheme
external?: boolean
underline?: boolean
marginRight?: boolean
@@ -10,32 +9,35 @@ interface IStyledLink {
noUnderline?: boolean
}
+
interface ILink {
- to: string
- external?: boolean
- children?: React.ReactNode
- marginRight?: boolean
- noExternalIcon?: boolean
- mail?: boolean
- inheritColor?: boolean
- underline?: boolean
- noUnderline?: boolean
+ to: string
+ external?: boolean
+ children?: React.ReactNode
+ marginRight?: boolean
+ noExternalIcon?: boolean
+ mail?: boolean
+ inheritColor?: boolean
+ underline?: boolean
+ noUnderline?: boolean
}
const externalLinkIcon = (
- <svg width="15.3" height="12.6" viewBox="0 0 17 14">
- <g fill="#0F748D" fillRule="evenodd">
- <path d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z" />
- <path d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z" />
- </g>
- </svg>
-)
+ <svg width="15.3" height="12.6" viewBox="0 0 17 14">
+ <g fill="#0F748D" fillRule="evenodd">
+ <path
+ d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z"/>
+ <path
+ d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z"/>
+ </g>
+ </svg>
+);
const ExternalIcon = styled.span`
margin-left: 1.2rem;
position: relative;
top: 1px;
- zindex: -1;
+ z-index: -1;
`
const baseInputStyles = css<IStyledLink>`
@@ -43,9 +45,9 @@ const baseInputStyles = css<IStyledLink>`
align-items: center;
color: ${(props) =>
- props.external
- ? props.theme.linkExternalColor
- : props.theme.linkInternalColor};
+ props.external
+ ? props.theme.linkExternalColor
+ : props.theme.linkInternalColor};
${(props) => (props.marginRight ? 'margin-right: 3rem;' : '')}
${(props) => (props.inheritColor ? 'color: inherit;' : '')}
@@ -62,11 +64,16 @@ const StyledLink = styled.a<IStyledLink>`
// `
function Link(props: ILink) {
- const { children, external, to, noExternalIcon, mail } = props
+ const { children, external, to, noExternalIcon, mail, underline, marginRight, inheritColor, noUnderline } = props
if (mail) {
return (
- <StyledLink href={`mailto:${to}`} {...props}>
+ <StyledLink href={`mailto:${to}`}
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}>
{children}
</StyledLink>
)
@@ -79,9 +86,13 @@ function Link(props: ILink) {
return (
<StyledLink
href={href}
- target="_blank"
- rel="noopener noreferrer"
- {...props}
+ target='_blank'
+ rel='noopener noreferrer'
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}
>
{children}
{!noExternalIcon && <ExternalIcon>{externalLinkIcon}</ExternalIcon>}
@@ -96,7 +107,24 @@ function Link(props: ILink) {
// </StyledRouterLink>
// )
- return <StyledLink {...props}>{children}</StyledLink>
+ return <StyledLink
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}>
+ {children}</StyledLink>
+}
+
+Link.defaultProps = {
+ external: false,
+ children: undefined,
+ marginRight: false,
+ noExternalIcon: false,
+ mail: false,
+ inheritColor: false,
+ underline: false,
+ noUnderline: false,
}
export default Link
diff --git a/frontend/src/components/page/index.tsx b/frontend/src/components/page/index.tsx
index 5d31ca8a20ff8c779db47e94380b346a8debdc21..811d46d7edec587ec56109b427987f45fb2683c1 100644
--- a/frontend/src/components/page/index.tsx
+++ b/frontend/src/components/page/index.tsx
@@ -1,3 +1,3 @@
import Page from 'components/page/page'
-export { Page }
+export default Page
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 059e8b4984845324ad08cd6a2d330e181d0c0b74..4237ac3faad693edf181048c19b300c16adc68ab 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -8,8 +8,8 @@ import 'i18n'
import getTheme from 'themes'
import GlobalStyle from 'globalStyles'
import App from 'routes'
-import reportWebVitals from './reportWebVitals'
import Loading from 'components/loading'
+import reportWebVitals from './reportWebVitals'
function appRoot() {
return (
diff --git a/frontend/src/routes/components/notFound.tsx b/frontend/src/routes/components/notFound.tsx
index 3dbdd110d58ec4213cb4f945d958d1954607513b..a0bfc390680e2ec063f82e71c6b55109339a6f48 100644
--- a/frontend/src/routes/components/notFound.tsx
+++ b/frontend/src/routes/components/notFound.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
export default function NotFound() {
return (
diff --git a/frontend/src/routes/frontpage/index.tsx b/frontend/src/routes/frontpage/index.tsx
index 26fdb71e8025f4286a642d5b46cec4a4b1ae6755..df742e41edd9dd4b103c85a86a77208421befc10 100644
--- a/frontend/src/routes/frontpage/index.tsx
+++ b/frontend/src/routes/frontpage/index.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
import { appTimezone, appVersion, appTheme } from 'appConfig'
export default function FrontPage() {
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index e9f0a2eb8980232e9808948635b02a838660da1e..014034b69ddded940151a6a72b80855f0f43ed19 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -10,6 +10,7 @@ import FrontPage from 'routes/frontpage'
import Footer from 'routes/components/footer'
import Header from 'routes/components/header'
import NotFound from 'routes/components/notFound'
+import Link from '../components/link'
const AppWrapper = styled.div`
display: flex;
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index f9c66e80ccb980407473cf6b9e9af11cd58764d0..2e7736db6ab03af384e17a9c2d9ea3ec75b456b9 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
export default function Register() {
return (
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index c63cb35ea86a3c651666b1fdc3db77c87dc36a4c..027197853901cf466126e072941b15561f21c2b2 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
function FrontPage() {
return (
diff --git a/frontend/src/routes/sponsor/guestInfo/index.tsx b/frontend/src/routes/sponsor/guestInfo/index.tsx
index d4b0f7442bf70dcc9b4e726dd7d0a3bac918d7a2..bb652151f9fefa03d7e17ea0c4776947a68dec48 100644
--- a/frontend/src/routes/sponsor/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guestInfo/index.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import { useParams } from 'react-router-dom'
-import {Page} from 'components/page'
+import Page from 'components/page'
type GuestInfoParams = {
id: string
diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js
index b1f04abd2b8ecd454be5833ff912e2000a8f7f86..a7d60f51a8c878a73e44ebf9849b965a65b330db 100644
--- a/frontend/src/setupProxy.js
+++ b/frontend/src/setupProxy.js
@@ -1,6 +1,6 @@
const { createProxyMiddleware } = require('http-proxy-middleware')
-module.exports = function (app) {
+module.exports = (app) => {
app.use(
'/api',
createProxyMiddleware({
diff --git a/frontend/src/test-utils.tsx b/frontend/src/test-utils.tsx
index 10d9b958a0aa203673faa8bae81053b340b6dcf7..10782331e89c522f61684182381cdedda326771f 100644
--- a/frontend/src/test-utils.tsx
+++ b/frontend/src/test-utils.tsx
@@ -5,9 +5,7 @@ import { ThemeProvider } from 'styled-components/macro'
import mainTheme from 'themes/main'
// Providers used in test rendering
-const AllTheProviders = ({ children }: any) => {
- return <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
-}
+const AllTheProviders = ({ children }: any) => <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
// Custom testing-library/react renderer using our providers.
const customRender = (ui: React.ReactElement, options?: any) =>