From fd32c49be7df4f95a87600ddc99fe1eb0a7cae53 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas.braathen@usit.uio.no>
Date: Mon, 20 Sep 2021 21:22:55 +0200
Subject: [PATCH] Move debug info to a separate component. Move form example to
the registration page. Add some route links to the front page for easier
navigiation.
---
frontend/src/components/dateinput/index.tsx | 8 +--
frontend/src/components/debug/index.tsx | 54 ++++++++++++++++++
frontend/src/routes/frontpage/index.tsx | 63 +++++++--------------
frontend/src/routes/register/index.tsx | 17 +++++-
4 files changed, 94 insertions(+), 48 deletions(-)
create mode 100644 frontend/src/components/debug/index.tsx
diff --git a/frontend/src/components/dateinput/index.tsx b/frontend/src/components/dateinput/index.tsx
index b7623b9c..215661ed 100644
--- a/frontend/src/components/dateinput/index.tsx
+++ b/frontend/src/components/dateinput/index.tsx
@@ -1,10 +1,10 @@
-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)
diff --git a/frontend/src/components/debug/index.tsx b/frontend/src/components/debug/index.tsx
new file mode 100644
index 00000000..d6e4f5b4
--- /dev/null
+++ b/frontend/src/components/debug/index.tsx
@@ -0,0 +1,54 @@
+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
diff --git a/frontend/src/routes/frontpage/index.tsx b/frontend/src/routes/frontpage/index.tsx
index 826afe4d..65aed6dc 100644
--- a/frontend/src/routes/frontpage/index.tsx
+++ b/frontend/src/routes/frontpage/index.tsx
@@ -1,51 +1,30 @@
-import React, { useState } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
-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')
- })
- }
+ const { t } = useTranslation(['common'])
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 header={t('common:header:applicationTitleLong')}>
+ <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>
)
}
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 2e7736db..42193d0c 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -1,11 +1,24 @@
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>
)
}
--
GitLab