From 2e69a0f963c5866eaab17fa7f17dd43693783a3e Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 20 Jul 2022 13:26:34 +0200
Subject: [PATCH] Capture onSubmit to save the form

---
 components/events/actions/edit.tsx            | 65 +++++++++++--------
 components/events/actions/view.tsx            | 18 ++---
 .../events/toolbar/toolToggleEditing.tsx      | 12 ++--
 pages/events/[slug].tsx                       |  7 +-
 4 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/components/events/actions/edit.tsx b/components/events/actions/edit.tsx
index d4f7e49..90d4880 100644
--- a/components/events/actions/edit.tsx
+++ b/components/events/actions/edit.tsx
@@ -1,45 +1,54 @@
 import { Event } from "@prisma/client"
-import { useCallback, useMemo } from "react"
+import { Dispatch, useMemo } from "react"
 import { KeyedMutator } from "swr"
+import { UsePromise } from "../../generic/loading/promise"
 import { ViewContent } from "../../generic/views/content"
 
 
 export type EventsActionViewProps = {
     data: Event,
     mutate: KeyedMutator<Event>,
+    save: UsePromise<void, void>,
+    setEditing: Dispatch<boolean>,
 }
 
 
-export const EventsActionEdit = ({ data, mutate }: EventsActionViewProps) => {
+export const EventsActionEdit = ({ data, mutate, save, setEditing }: EventsActionViewProps) => {
     const name = data.name
     const description = data.description
 
     return (
-        <ViewContent
-            title={
-                useMemo(
-                    () => (
-                        <input
-                            type="text"
-                            value={name}
-                            onChange={e => mutate((prev) => ({ ...prev!, name: e.target.value }), { revalidate: false })}
-                        />
-                    ),
-                    [mutate, name]
-                )
-            }
-            content={<>
-                {useMemo(
-                    () => (
-                        <textarea
-                            rows={12}
-                            value={description}
-                            onChange={e => mutate((prev) => ({ ...prev!, description: e.target.value }), { revalidate: false })}
-                        />
-                    ),
-                    [mutate, description]
-                )}
-            </>}
-        />
+        <form onSubmit={e => {
+            e.preventDefault()
+            save.run()
+            setEditing(false)
+        }}>
+            <ViewContent
+                title={
+                    useMemo(
+                        () => (
+                            <input
+                                type="text"
+                                value={name}
+                                onChange={e => mutate((prev) => ({ ...prev!, name: e.target.value }), { revalidate: false })}
+                            />
+                        ),
+                        [mutate, name]
+                    )
+                }
+                content={<>
+                    {useMemo(
+                        () => (
+                            <textarea
+                                rows={12}
+                                value={description}
+                                onChange={e => mutate((prev) => ({ ...prev!, description: e.target.value }), { revalidate: false })}
+                            />
+                        ),
+                        [mutate, description]
+                    )}
+                </>}
+            />
+        </form>
     )
 }
diff --git a/components/events/actions/view.tsx b/components/events/actions/view.tsx
index 471a008..66ce2d5 100644
--- a/components/events/actions/view.tsx
+++ b/components/events/actions/view.tsx
@@ -11,14 +11,16 @@ export type EventsActionViewProps = {
 
 export const EventsActionView = memo(({ data }: EventsActionViewProps) => {
     return (
-        <ViewContent
-            title={<div style={{ padding: "10px" }}>
-                {data.name}
-            </div>}
-            content={<div>
-                <FestaMarkdownRenderer code={data.description} />
-            </div>}
-        />
+        <form>
+            <ViewContent
+                title={<div style={{ padding: "10px" }}>
+                    {data.name}
+                </div>}
+                content={<div>
+                    <FestaMarkdownRenderer code={data.description} />
+                </div>}
+            />
+        </form>
     )
 })
 EventsActionView.displayName = "EventsActionView"
\ No newline at end of file
diff --git a/components/events/toolbar/toolToggleEditing.tsx b/components/events/toolbar/toolToggleEditing.tsx
index 1cc9e9d..d79383a 100644
--- a/components/events/toolbar/toolToggleEditing.tsx
+++ b/components/events/toolbar/toolToggleEditing.tsx
@@ -1,6 +1,6 @@
 import { faAsterisk, faPencil, faSave } from "@fortawesome/free-solid-svg-icons"
 import { useTranslation } from "next-i18next"
-import { usePromise, UsePromiseStatus } from "../../generic/loading/promise"
+import { UsePromise, usePromise, UsePromiseStatus } from "../../generic/loading/promise"
 import { FestaIcon } from "../../generic/renderers/fontawesome"
 import { Tool } from "../../generic/toolbar/tool"
 import cursor from "../../../styles/cursor.module.css"
@@ -11,19 +11,17 @@ import { Dispatch } from "react"
 export type ToolToggleEditingProps = {
     editing: boolean,
     setEditing: Dispatch<boolean>,
-    save: () => Promise<void>,
+    save: UsePromise<void, void>,
 }
 
 
 /**
  * ToolBar {@link Tool} which allows the user to start editing an event and then save their changes.
  */
-export function ToolToggleEditing({ editing, setEditing, save: upperSave }: ToolToggleEditingProps) {
+export function ToolToggleEditing({ editing, setEditing, save }: ToolToggleEditingProps) {
     const { t } = useTranslation()
 
-    const { run: save, status: saveStatus } = usePromise<void, void>(upperSave)
-
-    if (saveStatus === UsePromiseStatus.PENDING) {
+    if (save.status === UsePromiseStatus.PENDING) {
         return (
             <Tool
                 aria-label={t("toolToggleEditingSaving")}
@@ -39,7 +37,7 @@ export function ToolToggleEditing({ editing, setEditing, save: upperSave }: Tool
             <Tool
                 aria-label={t("toolToggleEditingSave")}
                 onClick={() => {
-                    save()
+                    save.run()
                     setEditing(false)
                 }}
                 className={mood.positive}
diff --git a/pages/events/[slug].tsx b/pages/events/[slug].tsx
index edbd5e6..f409a95 100644
--- a/pages/events/[slug].tsx
+++ b/pages/events/[slug].tsx
@@ -17,6 +17,7 @@ import { useAxios } from '../../components/auth/requests'
 import { database } from '../../utils/prismaClient'
 import { EventsActionEdit } from '../../components/events/actions/edit'
 import { EventsActionView } from '../../components/events/actions/view'
+import { usePromise } from '../../components/generic/loading/promise'
 
 
 export async function getServerSideProps(context: NextPageContext) {
@@ -46,13 +47,13 @@ const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => {
     const { data, mutate } = useSWR<Event>(`/api/events/${slug}`, { fallbackData, revalidateOnFocus: eventEditing, revalidateOnReconnect: eventEditing, refreshInterval: eventEditing ? 0 : 30000 })
     const [auth,] = useDefinedContext(AuthContext)
 
-    const save = useCallback(
+    const save = usePromise<void, void>(useCallback(
         async () => {
             const response = await axios.patch<Event>(`/api/events/${slug}`, data!)
             mutate(response.data, { revalidate: false })
         },
         [axios, data, mutate, slug]
-    )
+    ))
 
     const eventName = data?.name ?? slug
     const eventPostcard = data?.postcard || defaultPostcard
@@ -75,7 +76,7 @@ const PageEvent: NextPage<PageEventProps> = ({ slug, fallbackData }) => {
             }
         </ToolBar>
         {eventEditing ?
-            <EventsActionEdit data={data!} mutate={mutate} />
+            <EventsActionEdit data={data!} mutate={mutate} save={save} setEditing={eventSetEditing} />
             :
             <EventsActionView data={data!} />
         }