Skip to content
Snippets Groups Projects
Commit a25b3046 authored by Jonas Braathen's avatar Jonas Braathen
Browse files

Merge branch 'cleanup-frontpage' into 'master' 

Various smaller changes

See merge request !62
parents f69514cb b5827670
No related branches found
No related tags found
1 merge request!62Various smaller changes
Pipeline #94100 passed
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      Showing
      with 120 additions and 66 deletions
      frontend/public/locales/en/common.json
      + 2
      − 2
      View file @ a25b3046
      ......@@ -8,8 +8,8 @@
      },
      "fnr": "National identity number",
      "header": {
      "applicationTitleShort": "GREG",
      "applicationTitleLong": "Guest Registration",
      "applicationTitle": "Guest Registration",
      "applicationDescription": "Registration service for guests",
      "selectLanguage": "Select language"
      },
      "loading": "Loading...",
      ......
      frontend/public/locales/nb/common.json
      + 2
      − 2
      View file @ a25b3046
      ......@@ -8,8 +8,8 @@
      },
      "fnr": "Fødselsnummer",
      "header":{
      "applicationTitleShort": "GREG",
      "applicationTitleLong": "Gjesteregistrering",
      "applicationTitle": "Gjesteregistrering",
      "applicationDescription": "Registreringstjeneste for gjester",
      "selectLanguage": "Velg språk"
      },
      "loading": "Laster...",
      ......
      frontend/public/locales/nn/common.json
      + 2
      − 2
      View file @ a25b3046
      ......@@ -9,8 +9,8 @@
      },
      "fnr": "National identity number",
      "header":{
      "applicationTitleShort": "GREG",
      "applicationTitleLong": "Gjesteregistrering",
      "applicationTitle": "Gjesteregistrering",
      "applicationDescription": "Registreringsteneste for gjester",
      "selectLanguage": "Velg språk"
      },
      "loading": "Lastar...",
      ......
      frontend/src/components/dateinput/index.tsx
      + 4
      − 4
      View file @ a25b3046
      import React, { useState } from 'react'
      import DatePicker, { registerLocale } from 'react-datepicker'
      import { addDays } from 'date-fns'
      import nb from 'date-fns/locale/nb'
      import nn from 'date-fns/locale/nn'
      import { addDays } from 'date-fns'
      import { useTranslation } from 'react-i18next'
      import React, { useState } from 'react'
      import DatePicker, { registerLocale } from 'react-datepicker'
      import 'react-datepicker/dist/react-datepicker.css'
      import { useTranslation } from 'react-i18next'
      registerLocale('nb', nb)
      registerLocale('nn', nn)
      ......
      frontend/src/components/debug/index.tsx 0 → 100644
      + 54
      − 0
      View file @ a25b3046
      import React, { useState } from 'react'
      import { useTranslation } from 'react-i18next'
      import { appTheme, appTimezone, appVersion, appInst } from 'appConfig'
      export const Debug = () => {
      const [apiHealth, setApiHealth] = useState('not yet')
      const [didContactApi, setDidContactApi] = useState(false)
      const { i18n } = useTranslation(['common'])
      if (!didContactApi) {
      setDidContactApi(true)
      fetch('http://localhost:3000/api/health/')
      .then((res) => res.text())
      .then((result) => {
      if (result === 'OK') {
      setApiHealth('yes')
      } else {
      setApiHealth(result)
      }
      })
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      .catch((error) => {
      setApiHealth('error')
      })
      }
      const d = [
      ['NODE_ENV', process.env.NODE_ENV],
      ['Version', appVersion],
      ['Timezone', appTimezone],
      ['Language', i18n.language],
      ['Theme', appTheme],
      ['Institution', appInst],
      ['API reachable?', apiHealth],
      ]
      return (
      <table>
      <thead>
      <strong>Debug</strong>
      </thead>
      <tbody>
      {d.map(([key, value]) => (
      <tr>
      <td>{key}</td>
      <td>{value}</td>
      </tr>
      ))}
      </tbody>
      </table>
      )
      }
      export default Debug
      frontend/src/components/page/page.tsx
      + 10
      − 2
      View file @ a25b3046
      import React from 'react'
      import { Helmet } from 'react-helmet'
      import { useTranslation } from 'react-i18next'
      import styled from 'styled-components/macro'
      ......@@ -17,15 +18,18 @@ const StyledPageHeader = styled.h2`
      interface IPage {
      children: React.ReactNode
      header: string
      header?: string
      }
      export default function Page(props: IPage) {
      const { header, children } = props
      const { i18n, t } = useTranslation()
      const appTitle = t('common:header:applicationTitle')
      return (
      <>
      <Helmet>
      <Helmet titleTemplate={`%s - ${appTitle}`} defaultTitle={appTitle}>
      <html lang={i18n.language} />
      <title>{header}</title>
      </Helmet>
      <StyledPage>
      ......@@ -35,3 +39,7 @@ export default function Page(props: IPage) {
      </>
      )
      }
      Page.defaultProps = {
      header: null,
      }
      frontend/src/routes/components/header.tsx
      + 12
      − 9
      View file @ a25b3046
      import React from 'react'
      import { Link } from 'react-router-dom'
      import styled from 'styled-components/macro'
      import { useTranslation } from 'react-i18next'
      import LogoBar from '../../components/logobars/LogoBar'
      import LanguageSelector from '../../components/languageselector'
      const MainWrapper = styled.div`
      color: ${({ theme }) => theme.page.headerColor};
      background-color: ${({ theme }) => theme.page.headerBackgroundColor};
      ......@@ -14,8 +14,9 @@ const Main = styled.div`
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      max-width: ${props => props.theme.appMaxWidth};
      padding: ${props => `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
      max-width: ${(props) => props.theme.appMaxWidth};
      padding: ${(props) =>
      `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
      `
      const Menu = styled.ul`
      ......@@ -33,15 +34,15 @@ const TitleBox = styled.div`
      padding-left: 3rem;
      `
      const ShortTitle = styled.div`
      const Title = styled.div`
      font-size: 2rem;
      `
      const LongTitle = styled.div`
      const Description = styled.div`
      font-size: 1rem;
      `
      function Header() {
      const Header = () => {
      const { t } = useTranslation('common')
      return (
      ......@@ -50,12 +51,14 @@ function Header() {
      <MainWrapper>
      <Main>
      <TitleBox>
      <ShortTitle>{t('header.applicationTitleShort')}</ShortTitle>
      <LongTitle>{t('header.applicationTitleLong')}</LongTitle>
      <Link to="/">
      <Title>{t('header.applicationTitle')}</Title>
      </Link>
      <Description>{t('header.applicationDescription')}</Description>
      </TitleBox>
      <Menu>
      <MenuItem>
      <LanguageSelector/>
      <LanguageSelector />
      </MenuItem>
      </Menu>
      </Main>
      ......
      frontend/src/routes/frontpage/index.tsx
      + 19
      − 43
      View file @ a25b3046
      import React, { useState } from 'react'
      import React from 'react'
      import DateInput from 'components/dateinput'
      import Page from 'components/page'
      import { appTimezone, appVersion, appTheme } from 'appConfig'
      import { Fnr, Form, Select, Input } from 'components/form'
      import { useTranslation } from 'react-i18next'
      import { Debug } from 'components/debug'
      import { Link } from 'react-router-dom'
      export default function FrontPage() {
      const [apiHealth, setApiHealth] = useState('not yet')
      const [didContactApi, setDidContactApi] = useState(false)
      const { t } = useTranslation(['common', 'footer'])
      if (!didContactApi) {
      setDidContactApi(true)
      fetch('http://localhost:3000/api/health/')
      .then((res) => res.text())
      .then((result) => {
      if (result === 'OK') {
      setApiHealth('yes')
      } else {
      setApiHealth(result)
      }
      })
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      .catch((error) => {
      setApiHealth('error')
      })
      }
      return (
      <Page header="Greg main page">
      <DateInput />
      <Form onSubmit={() => {}}>
      <Input name="firstName" />
      <Input name="lastName" />
      <Select name="gender" options={['female', 'male', 'other']} />
      <Fnr name={t('common:fnr')} />
      <button type="submit">Submit</button>
      </Form>
      <br />
      Version {appVersion}
      <br />
      Timezone {appTimezone}
      <br />
      Theme {appTheme}
      <br />
      API reachable? {apiHealth}
      <Page>
      <p>
      <strong>Routes</strong>
      <ul>
      <li>
      <Link to="/">Front page</Link>
      </li>
      <li>
      <Link to="/sponsor/">Sponsor</Link>
      </li>
      <li>
      <Link to="/register/">Registration</Link>
      </li>
      </ul>
      </p>
      <Debug />
      </Page>
      )
      }
      frontend/src/routes/register/index.tsx
      + 15
      − 2
      View file @ a25b3046
      import React from 'react'
      import { useTranslation } from 'react-i18next'
      import DateInput from 'components/dateinput'
      import { Fnr, Form, Input, Select } from 'components/form'
      import Page from 'components/page'
      export default function Register() {
      const { t } = useTranslation(['common', 'footer'])
      return (
      <Page header="Register a new guest">
      <p>Todo</p>
      <Page header="Register as a guest">
      <Form onSubmit={() => {}}>
      <Input name="firstName" />
      <Input name="lastName" />
      <DateInput />
      <Select name="gender" options={['female', 'male', 'other']} />
      <Fnr name={t('common:fnr')} />
      <button type="submit">Submit</button>
      </Form>
      <br />
      </Page>
      )
      }
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment