From 87c22a1a8e8c6c311ffe4cff843746abcbd35195 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Thu, 9 Dec 2021 12:40:39 +0100
Subject: [PATCH] Make register page match sketches
Page now also handles failing api requests when searching.
Resolves: GREG-134
---
frontend/public/locales/en/common.json | 1 +
frontend/public/locales/nb/common.json | 1 +
frontend/public/locales/nn/common.json | 1 +
.../src/routes/sponsor/register/frontPage.tsx | 109 +++++++++++-------
4 files changed, 73 insertions(+), 39 deletions(-)
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index cb7264ab..626146e4 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -43,6 +43,7 @@
"bodyText": "Here you can add a new role to the same guest"
},
"register": {
+ "noResults": "No guest matching your search found.",
"registerHeading": "Register new guest",
"registerText": "Please search for e-mail or phone number before registering a new guest to prevent duplicates.",
"registerButtonText": "Register new guest"
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 6268284c..a21f2302 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -43,6 +43,7 @@
"bodyText": "Her kan du legge til en ny rolle på samme gjest"
},
"register": {
+ "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
"registerHeading": "Registrer ny gjest",
"registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
"registerButtonText": "Registrer ny gjest"
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index b186583d..620b235c 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -44,6 +44,7 @@
"bodyText": "Her kan du legge til en ny rolle på samme gjest"
},
"register": {
+ "noResults": "Finner ingen gjestekontoer som matcher søket ditt.",
"registerHeading": "Registrer ny gjest",
"registerText": "Søk etter e-post eller mobilnummer før du registrerer ny gjest for å unngå dobbeltoppføringer.",
"registerButtonText": "Registrer ny gjest"
diff --git a/frontend/src/routes/sponsor/register/frontPage.tsx b/frontend/src/routes/sponsor/register/frontPage.tsx
index 3797e4d0..5ad6ac4f 100644
--- a/frontend/src/routes/sponsor/register/frontPage.tsx
+++ b/frontend/src/routes/sponsor/register/frontPage.tsx
@@ -6,6 +6,8 @@ import SearchIcon from '@mui/icons-material/Search'
import { useTranslation } from 'react-i18next'
import { debounce } from 'lodash'
import React, { useState } from 'react'
+import { Box, styled } from '@mui/system'
+import { fetchJsonOpts } from 'utils'
type Guest = {
first: string
@@ -14,21 +16,33 @@ type Guest = {
value: string
}
+const StyledSpan = styled('span')({
+ color: 'red',
+})
+
function FrontPage() {
const [t] = useTranslation('common')
const [guests, setGuests] = useState<Guest[]>([])
+ const [searchHasInput, setSearchHasInput] = useState(false)
- const getGuests = async (event: React.ChangeEvent<HTMLInputElement>) => {
+ const getGuests = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.value) {
- console.log('searching')
- const response = await fetch(
- `/api/ui/v1/person/search/${event.target.value}?format=json`
- )
- const repjson = await response.json()
- console.log(repjson)
- if (response.ok) {
- setGuests(repjson)
- }
+ setSearchHasInput(true)
+ fetch(`/api/ui/v1/person/search/${event.target.value}`, fetchJsonOpts())
+ .then((response) => {
+ if (response.ok) {
+ return response.json()
+ }
+ setSearchHasInput(false)
+ return []
+ })
+ .then((responseJson) => {
+ setGuests(responseJson)
+ })
+ .catch(() => {})
+ } else {
+ setSearchHasInput(false)
+ setGuests([])
}
}
return (
@@ -36,36 +50,53 @@ function FrontPage() {
<SponsorGuestButtons registerNewGuestActive />
<h2>{t('register.registerHeading')}</h2>
<p>{t('register.registerText')}</p>
- <TextField
- InputProps={{
- endAdornment: (
- <InputAdornment position="end">
- <SearchIcon />
- </InputAdornment>
- ),
+ <Box
+ sx={{
+ borderStyle: () => (guests.length > 0 ? 'solid' : 'none'),
+ borderRadius: '5px',
+ borderColor: 'secondary.main',
+ padding: '7px 12px',
}}
- fullWidth
- placeholder="Mobile phone, e-mail"
- onChange={debounce(getGuests, 600)}
- />
- {guests ? (
- guests.map((guest) => {
- const guestTo = `/sponsor/guest/${guest.pid}`
- return (
- <MenuItem
- key={`${guest.pid}-${guest.value}`}
- component={Link}
- to={guestTo}
- >
- {guest.first} {guest.last}
- <br />
- {guest.value}
- </MenuItem>
- )
- })
- ) : (
- <></>
- )}
+ >
+ <TextField
+ variant="standard"
+ error={searchHasInput && guests.length === 0}
+ InputProps={{
+ endAdornment: (
+ <InputAdornment position="end">
+ <SearchIcon />
+ </InputAdornment>
+ ),
+ }}
+ fullWidth
+ placeholder="Mobile phone, e-mail"
+ onChange={debounce(getGuests, 600)}
+ />
+ {guests.length === 0 && searchHasInput ? (
+ <StyledSpan>{t('register.noResults')}</StyledSpan>
+ ) : (
+ guests.map((guest) => {
+ const guestTo = `/sponsor/guest/${guest.pid}`
+ return (
+ <MenuItem
+ sx={{
+ '&:hover': {
+ fontWeight: 'bold',
+ },
+ }}
+ key={`${guest.pid}-${guest.value}`}
+ component={Link}
+ to={guestTo}
+ >
+ {guest.first} {guest.last}
+ <br />
+ {guest.value}
+ </MenuItem>
+ )
+ })
+ )}
+ </Box>
+ <br />
<Button
variant="contained"
color="secondary"
--
GitLab