Make some progress

components/FestaIcon.tsx

@@ -0,0 +1,13 @@
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import classNames from "classnames";
+
+export function FestaIcon(props: FontAwesomeIconProps) {
+    const newClassName = classNames(props.className, "icon")
+
+    return (
+        <FontAwesomeIcon
+            {...props}
+            className={newClassName}
+        />
+    )
+}

components/FormEventList.tsx

@@ -1,3 +1,61 @@
-export function FormEventList() {
+import classNames from "classnames";
+import { useTranslation } from "next-i18next";
+import { HTMLProps } from "react";
+import { useMyEvents } from "../hooks/useMyEvents";
+import { Loading } from "./Loading";
+import { Event } from "@prisma/client";
 
+
+export function FormEventList(props: HTMLProps<HTMLFormElement>) {
+    const {t} = useTranslation()
+    const { data, error } = useMyEvents()
+
+    const newClassName = classNames(props.className, {
+        "negative": error,
+    })
+    
+    let message: JSX.Element
+    let contents: JSX.Element
+
+    if(error) {
+        message = t("formEventListError")
+        contents = (
+            <div>
+                <code>
+                    {JSON.stringify(error)}
+                </code>
+            </div>
+        )
+    }
+    else if(!data) {
+        message = <Loading/>
+        contents = <></>
+    }
+    else {
+        console.debug(data)
+        if(data.length === 0) {
+            message = t("formEventListFirst")
+            contents = (
+                <div>zzz</div>
+            )
+        }
+        else {
+            message = t("formEventListAnother")
+            contents = (
+                <div>
+                    {data.map((event: Event) => <div><a href={`/events/slug`}>{event.name}</a></div>)}
+                </div>
+            )
+        }
+    }
+
+
+    return (
+        <form className={newClassName}>
+            <p>
+                {message}
+            </p>
+            {contents}
+        </form>
+    )
 }

components/FormLoginTelegram.tsx

@@ -41,7 +41,7 @@ export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormEleme
         "negative": error,
     })
     
-    let message: string
+    let message: JSX.Element
     let contents: JSX.Element
 
     if(error) {
@@ -56,7 +56,7 @@ export function FormLoginTelegram({className, ...props}: HTMLProps<HTMLFormEleme
     }
     else if(working) {
         message = t("formTelegramLoginWorking")
-        contents = <div/>
+        contents = <></>
     }
     else {
         message = t("formTelegramLoginDescription")

components/Loading.tsx

@@ -0,0 +1,19 @@
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { useTranslation } from "next-i18next";
+import { FestaIcon } from "./FestaIcon";
+
+type LoadingProps = {
+    text?: string
+}
+
+export function Loading(props: LoadingProps) {
+    const {t} = useTranslation()
+
+    return (
+        <span>
+            <FestaIcon icon={faAsterisk} spin/>
+            &nbsp;
+            {props.text ?? t("genericLoading")}
+        </span>
+    )
+}

hooks/useMyEvents.ts

@@ -0,0 +1,5 @@
+import useSWR from "swr";
+
+export function useMyEvents() {
+    return useSWR("/api/events/mine")
+}

pages/index.tsx

@@ -4,6 +4,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { LoginContext } from '../contexts/login';
 import { useDefinedContext } from '../utils/definedContext';
 import { FormLoginTelegram } from '../components/FormLoginTelegram';
+import { FormEventList } from '../components/FormEventList';
 
 
 export async function getStaticProps(context: NextPageContext) {
@@ -30,29 +31,9 @@ export default function PageIndex() {
                 </h2>
             </hgroup>
             {login ?
-                <div className="hero-action">
+                <FormEventList
-                    <label htmlFor="input-name">
+                    className="hero-action"
-                        <p>
-                            {t("eventsInputDescriptionFirst")}
-                        </p>
-                    </label>
-                    <form 
-                        className="form-event-create"
-                    >
-                        <input 
-                            id="input-name" 
-                            placeholder={t("eventsInputName")}
-                            type="text"
                 />
-                        <input
-                            id="input-submit"
-                            type="submit"
-                            aria-label={t("eventsInputSubmitLabel")}
-                            value="→"
-                            className="square-40 positive"
-                        />
-                    </form>
-                </div>
             :
                 <FormLoginTelegram
                     className="hero-action"

public/locales/it-IT/common.json

@@ -10,5 +10,9 @@
     "eventsSubtitleAnother": "Cosa vuoi fare oggi?",
     "eventsInputName": "Nome evento",
     "eventsInputNamePlaceholder": "Festa a Festà",
-    "eventsInputSubmitLabel": "Crea evento"
+    "eventsInputSubmitLabel": "Crea evento",
+    "genericLoading": "Caricamento...",
+    "formEventListFirst": "Inserisci il nome del tuo primo evento qui sotto!",
+    "formEventListAnother": "Questi sono gli eventi che hai creato:",
+    "formEventListError": "Si è verificato il seguente errore durante il recupero dei tuoi eventi:"
 }

styles/globals.css

@@ -114,3 +114,11 @@ input.negative, button.negative {
     user-select: none;
     pointer-events: none;
 }
+
+.icon {
+    filter: drop-shadow(1px 1px 1px var(--background));
+}
+
+.icon.fa-pulse {
+    filter: drop-shadow(1px 1px 1px var(--background));
+}