diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx
index f3b06431ab0374ebc2ca642940b3f744e10e033c..0065eea87b7c780bfc95f8d35384d0b9d7370fab 100644
--- a/frontend/src/components/link/index.tsx
+++ b/frontend/src/components/link/index.tsx
@@ -1,13 +1,12 @@
-import styled, {css, DefaultTheme} from 'styled-components/macro'
-
+import React from 'react'
+import styled, { css } from 'styled-components/macro'
interface IStyledLink {
- theme: DefaultTheme
- external?: boolean
- underline?: boolean
- marginRight?: boolean
- inheritColor?: boolean
- noUnderline?: boolean
+ external?: boolean
+ underline?: boolean
+ marginRight?: boolean
+ inheritColor?: boolean
+ noUnderline?: boolean
}
@@ -38,19 +37,22 @@ const ExternalIcon = styled.span`
margin-left: 1.2rem;
position: relative;
top: 1px;
- zIndex: -1;
+ z-index: -1;
`
const baseInputStyles = css<IStyledLink>`
display: inline-flex;
align-items: center;
- color: ${props => props.external ? props.theme.linkExternalColor : props.theme.linkInternalColor};
+ color: ${(props) =>
+ props.external
+ ? props.theme.linkExternalColor
+ : props.theme.linkInternalColor};
- ${props => props.marginRight ? "margin-right: 3rem;" : ""}
- ${props => props.inheritColor ? "color: inherit;" : ""}
- ${props => props.underline ? "text-decoration: underline;" : ""}
- ${props => props.noUnderline ? ":hover { text-decoration: none };" : ""}
+ ${(props) => (props.marginRight ? 'margin-right: 3rem;' : '')}
+ ${(props) => (props.inheritColor ? 'color: inherit;' : '')}
+ ${(props) => (props.underline ? 'text-decoration: underline;' : '')}
+ ${(props) => (props.noUnderline ? ':hover { text-decoration: none };' : '')}
`
const StyledLink = styled.a<IStyledLink>`
@@ -62,47 +64,67 @@ const StyledLink = styled.a<IStyledLink>`
// `
function Link(props: ILink) {
- const {children, external, to, noExternalIcon, mail} = props
-
- if (mail) {
- return (
- <StyledLink href={`mailto:${to}`} {...props}>
- {children}
- </StyledLink>
- );
- }
-
- if (external) {
- const urlRegex = /^((http|https):\/\/)/;
- const href = urlRegex.test(to) ? to : `//${to}`;
-
- return (
- <StyledLink
- href={href}
- target="_blank"
- rel="noopener noreferrer"
- {...props}
- >
- {children}
- {!noExternalIcon && (
- <ExternalIcon>{externalLinkIcon}</ExternalIcon>
- )}
- </StyledLink>
- );
- }
-
- // TODO Use StyledRouterLink for internal links when routes are set up
- // return (
- // <StyledRouterLink {...props}>
- // {children}
- // </StyledRouterLink>
- // )
+ const { children, external, to, noExternalIcon, mail, underline, marginRight, inheritColor, noUnderline } = props
+ if (mail) {
return (
- <StyledLink {...props}>
- {children}
- </StyledLink>
+ <StyledLink href={`mailto:${to}`}
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}>
+ {children}
+ </StyledLink>
)
+ }
+
+ if (external) {
+ const urlRegex = /^((http|https):\/\/)/
+ const href = urlRegex.test(to) ? to : `//${to}`
+
+ return (
+ <StyledLink
+ href={href}
+ target='_blank'
+ rel='noopener noreferrer'
+ external={external}
+ underline={underline}
+ marginRight={marginRight}
+ inheritColor={inheritColor}
+ noUnderline={noUnderline}
+ >
+ {children}
+ {!noExternalIcon && <ExternalIcon>{externalLinkIcon}</ExternalIcon>}
+ </StyledLink>
+ )
+ }
+
+ // TODO Use StyledRouterLink for internal links when routes are set up
+ // return (
+ // <StyledRouterLink {...props}>
+ // {children}
+ // </StyledRouterLink>
+ // )
+
+ 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
\ No newline at end of file
+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) =>