広場投稿追加画面の刷新 (#399) (#413)

Reviewed-on: #413
Co-authored-by: miteruzo <miteruzo@naver.com>
Co-committed-by: miteruzo <miteruzo@naver.com>

frontend/src/components/dialogues/DialogueProvider.test.tsx

@@ -0,0 +1,116 @@
+import { useCallback, useEffect } from 'react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DialogueProvider from '@/components/dialogues/DialogueProvider'
+import useDialogue from '@/lib/dialogues/useDialogue'
+
+import type { DialogueFormControls } from '@/lib/dialogues/useDialogue'
+
+const FormBody = (
+    { controls,
+      onSelect }: { controls: DialogueFormControls
+		    onSelect: () => Promise<boolean> | boolean },
+) => {
+  useEffect (() => {
+    controls.setActions ([{
+      label: '左操作',
+      placement: 'start',
+      onSelect }, {
+      label: '保存',
+      onSelect: () => true }])
+  }, [controls, onSelect])
+
+  return <div>長いフォーム本文</div>
+}
+
+const NestedConfirmFormBody = ({ controls }: { controls: DialogueFormControls }) => {
+  const reset = useCallback (async () => {
+    await controls.confirm ({
+      title: '変更をリセットしますか?',
+      confirmText: 'リセット' })
+    return false
+  }, [controls])
+
+  return <FormBody controls={controls} onSelect={reset}/>
+}
+
+describe ('DialogueProvider', () => {
+  it ('keeps ordinary dialogues in FIFO order', async () => {
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => {
+		void dialogue.confirm ({ title: '一件目' })
+		void dialogue.confirm ({ title: '二件目' })
+	      }}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+
+    expect (screen.getByText ('一件目')).toBeInTheDocument ()
+    expect (screen.queryByText ('二件目')).not.toBeInTheDocument ()
+    fireEvent.click (screen.getByRole ('button', { name: '確定' }))
+    expect (await screen.findByText ('二件目')).toBeInTheDocument ()
+  })
+
+  it ('keeps a large form open when an action returns false', async () => {
+    const action = vi.fn ().mockResolvedValue (false)
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => void dialogue.form ({
+		title: '投稿を編輯',
+		description: '説明',
+		size: 'large',
+		body: controls => <FormBody controls={controls} onSelect={action}/> })}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+
+    const dialogue = screen.getByRole ('dialog')
+    expect (dialogue).toHaveClass ('max-h-[calc(100dvh-1rem)]', 'flex-col', 'max-w-3xl')
+    await waitFor (() => expect (screen.getByRole ('button', { name: '左操作' }))
+	.toBeInTheDocument ())
+    expect (screen.getByRole ('button', { name: '左操作' })).toHaveClass (
+	'w-full',
+	'md:w-auto')
+    fireEvent.click (screen.getByRole ('button', { name: '左操作' }))
+
+    await waitFor (() => expect (action).toHaveBeenCalledTimes (1))
+    expect (screen.getByText ('投稿を編輯')).toBeInTheDocument ()
+  })
+
+  it ('opens a nested confirmation over a form and returns to the same form', async () => {
+    const Launcher = () => {
+      const dialogue = useDialogue ()
+      return (
+	  <button
+	      onClick={() => void dialogue.form ({
+		title: '投稿を編輯',
+		body: controls => <NestedConfirmFormBody controls={controls}/> })}>
+	    開く
+	  </button>)
+    }
+
+    render (<DialogueProvider><Launcher/></DialogueProvider>)
+    fireEvent.click (screen.getByRole ('button', { name: '開く' }))
+    const action = await screen.findByRole ('button', { name: '左操作' })
+    fireEvent.click (action)
+
+    expect (await screen.findByText ('変更をリセットしますか?')).toBeInTheDocument ()
+    fireEvent.click (screen.getByRole ('button', { name: 'リセット' }))
+    await waitFor (() => {
+      expect (screen.queryByText ('変更をリセットしますか?')).not.toBeInTheDocument ()
+    })
+    expect (screen.getByText ('投稿を編輯')).toBeInTheDocument ()
+  })
+})

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Dialog,
@@ -7,29 +7,16 @@ import { Dialog,
 	 DialogFooter,
 	 DialogHeader,
 	 DialogTitle } from '@/components/ui/dialog'
+import { DialogueContext } from '@/lib/dialogues/useDialogue'
 
 import type { FC, ReactNode } from 'react'
-
-type DialogueVariant = 'default' | 'danger'
-
-type ConfirmOptions = { title:        string
-			description?: ReactNode
-			confirmText?: string
-			cancelText?:  string
-			variant?:     DialogueVariant }
-
-type AlertOptions = { title:        string
-		      description?: ReactNode
-		      okText?:      string }
-
-type Choice<T extends string> = { value:    T
-				  label:    string
-				  variant?: DialogueVariant }
-
-type ChoiceOptions<T extends string> = { title:         string
-					 description?:  ReactNode
-					 choices:       Choice<T>[]
-					 cancelText?:   string }
+import type { AlertOptions,
+	      ChoiceOptions,
+	      ConfirmOptions,
+	      DialogueAPI,
+	      DialogueFormAction,
+	      DialogueFormControls,
+	      DialogueFormOptions } from '@/lib/dialogues/useDialogue'
 
 type DialogueRequest =
     | { id:       number
@@ -44,13 +31,10 @@ type DialogueRequest =
 	kind:     'choice'
 	options:  ChoiceOptions<string>
 	resolve:  (value: string | null) => void }
-
-type DialogueAPI =
-    { confirm:  (options: ConfirmOptions) => Promise<boolean>
-      alert:    (options: AlertOptions) => Promise<void>
-      choice:   <T extends string> (options: ChoiceOptions<T>) => Promise<T | null> }
-
-const DialogueContext = createContext<DialogueAPI | null> (null)
+    | { id:       number
+	kind:     'form'
+	options:  DialogueFormOptions
+	resolve:  () => void }
 
 let nextDialogueId = 1
 
@@ -59,20 +43,27 @@ type Props = { children: ReactNode }
 
 const DialogueProvider: FC<Props> = ({ children }) => {
   const [queue, setQueue] = useState<DialogueRequest[]> ([])
+  const [pendingIds, setPendingIds] = useState<number[]> ([])
+  const [formActions, setFormActions] = useState<Record<number, DialogueFormAction[]>> ({ })
+  const formControls = useRef<Record<number, DialogueFormControls>> ({ })
+  const [nestedConfirm, setNestedConfirm] = useState<{
+      parentId: number
+      options:  ConfirmOptions
+      resolve:  (value: boolean) => void } | null> (null)
 
   const push = useCallback ((request: Omit<DialogueRequest, 'id'>) => {
     const id = nextDialogueId
     ++nextDialogueId
 
-    setQueue (q => [...q, { ...request, id } as DialogueRequest])
+    setQueue (current => [...current, { ...request, id } as DialogueRequest])
   }, [])
 
-  const closeActive = useCallback ((result?: unknown) => {
-    setQueue (q => {
-      const [active, ...rest] = q
+  const closeRequest = useCallback ((id: number, result?: unknown) => {
+    setQueue (current => {
+      const active = current.find (request => request.id === id)
 
-      if (!(active))
-	return rest
+      if (active == null)
+	return current
 
       switch (active.kind)
       {
@@ -87,9 +78,42 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       case 'choice':
 	active.resolve ((result ?? null) as string | null)
 	break
+
+      case 'form':
+	active.resolve ()
+	break
       }
 
-      return rest
+      return current.filter (request => request.id !== id)
+    })
+    setPendingIds (current => current.filter (pendingId => pendingId !== id))
+    setFormActions (current => {
+	const { [id]: _, ...rest } = current
+	return rest
+    })
+    delete formControls.current[id]
+  }, [])
+
+  const setRequestActions = useCallback (
+      (id: number, actions: DialogueFormAction[]) => {
+	setFormActions (current => ({ ...current, [id]: actions }))
+      },
+      [])
+
+  const openNestedConfirm = useCallback (
+      (parentId: number, options: ConfirmOptions) =>
+	  new Promise<boolean> (resolve => {
+	    setNestedConfirm ({ parentId, options, resolve })
+	  }),
+      [])
+
+  const closeNestedConfirm = useCallback ((result: boolean) => {
+    setNestedConfirm (current => {
+      if (current == null)
+	return current
+
+      current.resolve (result)
+      return null
     })
   }, [])
 
@@ -103,86 +127,229 @@ const DialogueProvider: FC<Props> = ({ children }) => {
       choice: options => new Promise (resolve => {
 	push ({ kind: 'choice',
 		options: options as ChoiceOptions<string>,
-		resolve: resolve as (value: string | null) => void })}) }), [push])
+		resolve: resolve as (value: string | null) => void })
+      }),
+      form: options => new Promise<void> (resolve => {
+	push ({ kind: 'form', options, resolve })
+      }) }), [push])
+
+  const handleFormAction = useCallback (
+      async (id: number, action: DialogueFormAction) => {
+	if (pendingIds.includes (id))
+	  return
+
+	setPendingIds (current => [...current, id])
+	try
+	{
+	  const shouldClose = await action.onSelect ()
+	  if (shouldClose !== false)
+	    closeRequest (id)
+	}
+	finally
+	{
+	  setPendingIds (current => current.filter (pendingId => pendingId !== id))
+	}
+      },
+      [closeRequest, pendingIds])
 
   const active = queue[0]
+  const startActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action => action.placement === 'start')
+      : []
+  const endActions =
+      active?.kind === 'form'
+      ? (formActions[active.id] ?? []).filter (action =>
+	  action.placement == null || action.placement === 'end')
+      : []
 
   return (
       <DialogueContext.Provider value={api}>
 	{children}
 
-	<Dialog
-	    open={Boolean (active)}
-	    onOpenChange={open => {
-	      if (!(open))
-		closeActive (active?.kind !== 'confirm' && null)
-	    }}>
-	  {active && (
+	{active && (
+	    <Dialog
+		open
+		onOpenChange={open => {
+		  const blocked =
+		      nestedConfirm?.parentId === active.id
+		      || pendingIds.includes (active.id)
+		  if (!(open) && !(blocked))
+		    closeRequest (active.id, active.kind !== 'confirm' && null)
+		}}>
+	      <DialogContent
+		  className={
+		      active.kind === 'form'
+		      ? `flex max-h-[calc(100dvh-1rem)] ${ active.options.size === 'large'
+			  ? 'max-w-3xl'
+			  : 'max-w-lg' } flex-col overflow-hidden gap-0`
+		      : 'px-6 pb-6 pt-7'
+		  }
+		  onEscapeKeyDown={event => {
+		    if (nestedConfirm?.parentId === active.id || pendingIds.includes (active.id))
+		      event.preventDefault ()
+		  }}
+		  onPointerDownOutside={event => {
+		    if (nestedConfirm?.parentId === active.id || pendingIds.includes (active.id))
+		      event.preventDefault ()
+		  }}>
+		{active.kind === 'form'
+		 ? (
+		     <>
+		       <DialogHeader className="shrink-0 pb-4 pl-8 pr-0 pt-1 text-left">
+			 <DialogTitle>{active.options.title}</DialogTitle>
+
+			 {active.options.description && (
+			     <DialogDescription asChild>
+			       <div>{active.options.description}</div>
+			     </DialogDescription>)}
+		       </DialogHeader>
+
+		       <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+			 {active.options.body (
+			     formControls.current[active.id] ??= {
+				 close: () => closeRequest (active.id),
+				 setActions: actions => setRequestActions (active.id, actions),
+				 confirm: options => openNestedConfirm (active.id, options) })}
+		       </div>
+
+		       <DialogFooter
+			   className="shrink-0 flex-col gap-2 pt-4
+				      md:flex-row md:justify-between md:gap-0 md:space-x-0">
+			 <div className="flex w-full flex-col gap-2 md:w-auto md:flex-row">
+			   {startActions.map (action => (
+			       <Button
+				   key={action.label}
+				   className="w-full md:w-auto"
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
+
+			 <div className="flex w-full flex-col gap-2 md:w-auto md:flex-row">
+			   <Button
+			       className="w-full md:w-auto"
+			       variant="outline"
+			       onClick={() => closeRequest (active.id)}
+			       disabled={pendingIds.includes (active.id)
+				   || nestedConfirm?.parentId === active.id}>
+			     {active.options.cancelText ?? '取消'}
+			   </Button>
+
+			   {endActions.map (action => (
+			       <Button
+				   key={action.label}
+				   className="w-full md:w-auto"
+				   variant={action.variant === 'danger'
+				       ? 'destructive'
+				       : 'default'}
+				   onClick={() => void handleFormAction (active.id, action)}
+				   disabled={pendingIds.includes (active.id)
+				       || nestedConfirm?.parentId === active.id
+				       || action.disabled}>
+				 {action.label}
+			       </Button>))}
+			 </div>
+		       </DialogFooter>
+		     </>)
+		 : (
+		     <>
+		       <DialogHeader className="pl-8">
+			 <DialogTitle>{active.options.title}</DialogTitle>
+
+			 {active.options.description && (
+			     <DialogDescription asChild>
+			       <div>{active.options.description}</div>
+			     </DialogDescription>)}
+		       </DialogHeader>
+
+		       <DialogFooter>
+			 {active.kind === 'confirm' && (
+			     <>
+			       <Button
+				   variant="outline"
+				   onClick={() => closeRequest (active.id, false)}>
+				 {active.options.cancelText ?? '取消'}
+			       </Button>
+
+			       <Button
+				   variant={(active.options.variant === 'danger')
+					    ? 'destructive'
+					    : 'default'}
+				   onClick={() => closeRequest (active.id, true)}>
+				 {active.options.confirmText ?? '確定'}
+			       </Button>
+			     </>)}
+
+			 {active.kind === 'alert' && (
+			     <Button onClick={() => closeRequest (active.id)}>
+			       {active.options.okText ?? '確定'}
+			     </Button>)}
+
+			 {active.kind === 'choice' && (
+			     <>
+			       <Button
+				   variant="outline"
+				   onClick={() => closeRequest (active.id, null)}>
+				 {active.options.cancelText ?? '取消'}
+			       </Button>
+
+			       {active.options.choices.map (choice => (
+				   <Button
+				       key={choice.value}
+				       variant={(choice.variant === 'danger')
+						? 'destructive'
+						: 'default'}
+				       onClick={() => closeRequest (active.id, choice.value)}>
+				     {choice.label}
+				   </Button>))}
+			     </>)}
+		       </DialogFooter>
+		     </>)}
+	      </DialogContent>
+	    </Dialog>)}
+
+	{nestedConfirm && (
+	    <Dialog
+		open
+		onOpenChange={open => {
+		  if (!(open))
+		    closeNestedConfirm (false)
+		}}>
 	      <DialogContent className="px-6 pb-6 pt-7">
 		<DialogHeader className="pl-8">
-		  <DialogTitle>{active.options.title}</DialogTitle>
+		  <DialogTitle>{nestedConfirm.options.title}</DialogTitle>
 
-		  {active.options.description && (
+		  {nestedConfirm.options.description && (
 		      <DialogDescription asChild>
-			<div>{active.options.description}</div>
+			<div>{nestedConfirm.options.description}</div>
 		      </DialogDescription>)}
 		</DialogHeader>
 
 		<DialogFooter>
-		  {active.kind === 'confirm' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (false)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
+		  <Button
+		      variant="outline"
+		      onClick={() => closeNestedConfirm (false)}>
+		    {nestedConfirm.options.cancelText ?? '取消'}
+		  </Button>
 
-			<Button
-			    variant={(active.options.variant === 'danger')
-				     ? 'destructive'
-				     : 'default'}
-			    onClick={() => closeActive (true)}>
-			  {active.options.confirmText ?? '確定'}
-			</Button>
-		      </>)}
-
-		  {active.kind === 'alert' && (
-		      <Button onClick={() => closeActive ()}>
-			{active.options.okText ?? '確定'}
-		      </Button>)}
-
-		  {active.kind === 'choice' && (
-		      <>
-			<Button
-			    variant="outline"
-			    onClick={() => closeActive (null)}>
-			  {active.options.cancelText ?? '取消'}
-			</Button>
-
-			{active.options.choices.map (choice => (
-			    <Button
-				key={choice.value}
-				variant={(choice.variant === 'danger')
-					 ? 'destructive'
-					 : 'default'}
-				onClick={() => closeActive (choice.value)}>
-			      {choice.label}
-			    </Button>))}
-		      </>)}
+		  <Button
+		      variant={nestedConfirm.options.variant === 'danger'
+			  ? 'destructive'
+			  : 'default'}
+		      onClick={() => closeNestedConfirm (true)}>
+		    {nestedConfirm.options.confirmText ?? '確定'}
+		  </Button>
 		</DialogFooter>
-	      </DialogContent>)}
-	</Dialog>
+	      </DialogContent>
+	    </Dialog>)}
       </DialogueContext.Provider>)
 }
-
-
-export const useDialogue = () => {
-  const dialogue = useContext (DialogueContext)
-
-  if (!(dialogue))
-    throw new Error ('useDialogue must be used inside DialogueProvider')
-
-  return dialogue
-}
-
+export { useDialogue } from '@/lib/dialogues/useDialogue'
 export default DialogueProvider