From 783121b140d4e8ad60719368c78aa501ca1d67bc Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Wed, 1 Jun 2022 18:54:59 +0200 Subject: [PATCH] Do some more progress --- components/ActionEventList.tsx | 21 +++++----------- components/EventCreate.tsx | 41 ++++++++++++++++++++++++++++++++ components/EventList.tsx | 18 ++++++++++++++ components/Loading.tsx | 4 ++-- pages/_app.tsx | 2 ++ public/locales/it-IT/common.json | 6 +++-- styles/globals.css | 36 +++++++++++++++++++++++++--- styles/page-tweaks.css | 19 ++++++++++----- 8 files changed, 119 insertions(+), 28 deletions(-) create mode 100644 components/EventCreate.tsx create mode 100644 components/EventList.tsx diff --git a/components/ActionEventList.tsx b/components/ActionEventList.tsx index b0aa2ca..237a68b 100644 --- a/components/ActionEventList.tsx +++ b/components/ActionEventList.tsx @@ -4,6 +4,8 @@ import { HTMLProps } from "react"; import { useMyEvents } from "../hooks/useMyEvents"; import { Loading } from "./Loading"; import { Event } from "@prisma/client"; +import { EventList } from "./EventList"; +import { EventCreate } from "./EventCreate"; export function ActionEventList(props: HTMLProps) { @@ -27,7 +29,7 @@ export function ActionEventList(props: HTMLProps) { } else if(!data) { - contents = + contents = } else { if(data.length === 0) { @@ -35,6 +37,7 @@ export function ActionEventList(props: HTMLProps) {

{t("eventListCreateFirst")}

+ } else { @@ -42,23 +45,11 @@ export function ActionEventList(props: HTMLProps) {

{t("eventListDescription")}

-
- {data.map((event: Event) => )} -
+

{t("eventListCreateAnother")}

-
- - -
+ } } diff --git a/components/EventCreate.tsx b/components/EventCreate.tsx new file mode 100644 index 0000000..1e41298 --- /dev/null +++ b/components/EventCreate.tsx @@ -0,0 +1,41 @@ +import { useTranslation } from "next-i18next" +import { FormEvent, MouseEventHandler, useCallback, useRef, useState } from "react" +import { Loading } from "./Loading" + +export function EventCreate() { + const {t} = useTranslation() + const [name, setName] = useState("") + const [running, setRunning] = useState(false) + + const createEvent = useCallback(() => { + setRunning(true) + }, + [] + ) + + if(running) return + + return ( +
{e.preventDefault(); createEvent()}} + noValidate + > + setName(e.target.value)} + required + /> + createEvent()} + disabled={!name} + /> +
+ ) +} \ No newline at end of file diff --git a/components/EventList.tsx b/components/EventList.tsx new file mode 100644 index 0000000..6486c59 --- /dev/null +++ b/components/EventList.tsx @@ -0,0 +1,18 @@ +import { Event } from "@prisma/client" +import Link from "next/link" + +type EventListProps = { + data: Event[] +} + +export function EventList(props: EventListProps) { + const contents = props.data.map(e => ( +
  • + + {e.name} + +
    • + )) + + return
      {contents}
    +} diff --git a/components/Loading.tsx b/components/Loading.tsx index f039f64..8f48002 100644 --- a/components/Loading.tsx +++ b/components/Loading.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "next-i18next"; import { FestaIcon } from "./FestaIcon"; type LoadingProps = { - text?: string + text: string } export function Loading(props: LoadingProps) { @@ -13,7 +13,7 @@ export function Loading(props: LoadingProps) {   - {props.text ?? t("genericLoading")} + {props.text} ) } \ No newline at end of file diff --git a/pages/_app.tsx b/pages/_app.tsx index 0ad1eaf..0e59f3e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -28,6 +28,8 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => { const swrConfig = { fetcher: async (resource: string, localAxiosConfig: AxiosRequestConfig) => { const response = await axios.get(resource, {...axiosConfig, ...localAxiosConfig}) + // To test loading uncomment the following line: + // await new Promise(res => setTimeout(res, 100000)) return response.data } } diff --git a/public/locales/it-IT/common.json b/public/locales/it-IT/common.json index f432b01..d7964c7 100644 --- a/public/locales/it-IT/common.json +++ b/public/locales/it-IT/common.json @@ -14,7 +14,9 @@ "genericLoading": "Caricamento...", "eventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:", "eventListDescription": "Questi sono gli eventi che hai creato:", - "eventListCreateAnother": "Se vuoi crearne un altro, inserisci il suo nome qui sotto:", + "eventListCreateAnother": "Se vuoi crearne un altro, inseriscine il nome qui sotto:", "eventListCreateFirst": "Inserisci il nome del tuo primo evento qui sotto!", - "eventListCreatePlaceholder": "Nome evento" + "eventListCreateEventNameLabel": "Nome evento", + "eventListCreateSubmitLabel": "Crea", + "eventListCreateRunning": "Creazione in corso..." } diff --git a/styles/globals.css b/styles/globals.css index 409ea01..190d670 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -77,10 +77,15 @@ input[type="submit"], button { text-align: center; } -input[type="submit"]:active, button:active { +input[type="submit"]:active:not([disabled]), button:active:not([disabled]) { border-style: inset; } +*[disabled] { + opacity: 0.2; + cursor: not-allowed; +} + .square-40 { width: 40px; height: 40px; @@ -124,10 +129,35 @@ input.negative, button.negative { } .form-monorow { + max-width: 600px; + + margin-left: auto; + margin-right: auto; + display: flex; flex-direction: row; gap: 4px; - justify-content: center; align-items: center; -} \ No newline at end of file +} + +.form-monorow input { + flex-grow: 1; +} + +.form-monorow input[type="submit"] { + flex-grow: 0; +} + +.list-events { + max-height: 20vh; + padding-left: 20px; + padding-bottom: 12px; + + text-align: left; + + overflow-y: scroll; + + column-count: auto; + column-width: 140px; +} diff --git a/styles/page-tweaks.css b/styles/page-tweaks.css index 2760856..e58706c 100644 --- a/styles/page-tweaks.css +++ b/styles/page-tweaks.css @@ -1,10 +1,12 @@ #page-index { display: grid; grid-template-columns: 100%; - grid-template-rows: 2fr 3fr; + grid-template-rows: auto 1fr; - justify-content: center; + justify-content: stretch; text-align: center; + + gap: 32px; } #page-index .hero-titles { @@ -12,25 +14,30 @@ grid-row: 1; } -.hero-titles h1 { +#page-index .hero-titles h1 { font-size: 10rem; } -.hero-titles h2 { +#page-index .hero-titles h2 { font-size: 2.5rem; } @media (max-width: 640px) or (max-height: 640px) { - .hero-titles h1 { + #page-index .hero-titles h1 { font-size: 5rem; } - .hero-titles h2 { + #page-index .hero-titles h2 { font-size: 1.5rem; } } #page-index .hero-action { align-self: start; + justify-self: center; + grid-row: 2; + + max-width: 800px; + width: 100%; }