useDialog

result.ts

type Success<T> = { success: true, value: T }
type Fail<E> = { success: false, error?: E }

export type Result<T, E> = Success<T> | Fail<E>

export const success = <T>(value: T): Result<T, never> => ({
  success: true,
  value,
})
export const fail = <E>(error?: E): Result<never, E> => ({
  success: false,
  error,
})

export const isSuccess = <T, E>(result: Result<T, E>): result is Success<T> => result.success
export const isFail = <T, E>(result: Result<T, E>): result is Fail<E> => !result.success

export const unwrap = <T, E>(result: Result<T, E>): T => {
  if (result.success) return result.value
  throw result.error
}

useDialog.md

useDialog

hooks to control the opening and closing of the dialog.

Usage

Simple Usage

import React from "react";
import { useDialog } from "~/hooks"
import { Dialog, DialogContent, DialogActions } from "@mui/material"

const Component = () => {
  const dialog = useDialog<{ content: string }>()
  const executeSomething = async () => {
    /** pending until onOk or onCancel is executed  */
    const result = await dialog.showDialog()

    if (result.success) {
      /** fired onOk  */
    } else {
      /** fired onCancel */
    }
  }

  return (
    <>
      <button onClick={executeSomething}>open</button>

      <Dialog open={dialog.open}>
        <DialogContent>
          {/** something */}
        </DialogContent>

        <DialogActions>
          <Button onClick={dialog.onCancel}>cancel</Button>
          <Button onClick={dialog.onOk}>ok</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

Pass props from the open function to dialog.

import React from "react";
import { useDialog } from "~/hooks"
import { Dialog, DialogContent, DialogActions } from "@mui/material"

const Component = () => {
  const dialog = useDialog<{ content: string }>()
  const executeSomething = async () => {
    const result = await dialog.showDialog({ content: "hello dialog" })

    if (result.success) {
      // 
    } else {
      // 
    }
  }

  return (
    <>
      <button onClick={executeSomething}>open</button>

      <Dialog open={dialog.open}>
        <DialogContent>
          {dialog.open && (
            <p>{dialog.props.content}</p>
          )}
        </DialogContent>

        <DialogActions>
          <Button onClick={dialog.onCancel}>cancel</Button>
          <Button onClick={dialog.onOk}>ok</Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

Receive data from the dialog.

import React from "react";
import { useDialog } from "~/hooks"
import { Dialog, DialogContent, DialogActions } from "@mui/material"

const Component = () => {
  const dialog = useDialog<{ content: string }, { message: string }>()
  const executeSomething = async () => {
    const result = await dialog.showDialog({ content: "hello dialog" })

    if (result.success) {
      // value is dialog output
      const value = result.value
    } else {
      // 
    }
  }

  return (
    <>
      <button onClick={executeSomething}>open</button>

      <UserInputDialog
        open={dialog.open}
        onCancel={dialog.onCancel}
        onSubmit={dialog.onOk}
      />
    </>
  )
}

type UserInputDialogProps = {
  open?: boolean
  onCancel?: () => void
  onSubmit?: (output: { message: string }) => void
}
const UserInputDialog = (props) => {
  /** something */
}
``

useDialog.test.ts

import { act, cleanup, renderHook } from '@testing-library/react-hooks'
import { fail, success } from '~/utils/result'

import { useDialog } from "."

describe('useDialog', () => {
  afterEach(async () => {
    await cleanup()
  })

  it('set initialData', () => {
    const props = { hoge: 'huga' }
    const { result } = renderHook(() => useDialog({ open: true, props }))

    if (result.current.open) {
      expect(result.current.props).toEqual(props)
    } else {
      expect.assertions(1)
    }
  })

  it('open dialog', () => {
    const { result } = renderHook(() => useDialog())
    expect(result.current.open).toEqual(false)
    act(() => {
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      result.current.showDialog()
    })

    expect(result.current.open).toEqual(true)
  })

  it('toggle open state', () => {
    const { result } = renderHook(() => useDialog())
    expect(result.current.open).toEqual(false)
    act(() => {
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      result.current.showDialog()
    })

    expect(result.current.open).toEqual(true)

    act(() => {
      result.current.onOk()
    })
    expect(result.current.open).toEqual(false)
  })

  it('receive data from dialog', async () => {
    const { result } = renderHook(() => useDialog<undefined, number>())
    const promise = result.current.showDialog()
    act(() => {
      result.current.onOk(1)
    })

    await expect(promise).resolves.toEqual(success(1))
  })

  it('receive error from dialog', async () => {
    const { result } = renderHook(() => useDialog<undefined, number>())
    const promise = result.current.showDialog()
    act(() => {
      result.current.onCancel()
    })

    await expect(promise).resolves.toEqual(fail(undefined))
  })
})

useDialog.ts

import { useCallback, useMemo, useState } from 'react'
import { Result, success, fail } from '~/utils/result'

type DialogState<T> = {
  open: true;
  props: T
} | {
  open: false
};

type Awaiter<E, T> = {
  resolve: (value: T) => void;
  reject: (error: E) => void;
};

type State<Input, Output> = DialogState<Input> & Partial<Awaiter<Error, Result<Output, undefined>>>;

type RequireOrOptional<T> = T extends undefined ? [] : [value: T]

type Dialog<Input, Output> = DialogState<Input> & {
  showDialog: (...input: RequireOrOptional<Input>) => Promise<Result<Output, unknown>>
  onOk: (...input: RequireOrOptional<Output>) => void
  onCancel: () => void
}

export const useDialog = <ModalInput = undefined, ModalOutput = undefined>
  (initialState?: DialogState<ModalInput>):Dialog<ModalInput, ModalOutput> => {
  const [dialogState, setDialogState] = useState<State<ModalInput, ModalOutput>>(
    initialState ?? { open: false },
  )

  const showDialog = useCallback(
    (...args: RequireOrOptional<ModalInput>) => {
      const [props] = args
      return new Promise<Result<ModalOutput, undefined>>(
        (resolve, reject) => {
          setDialogState((previous) => ({
            ...previous,
            open: true,
            props: props as ModalInput,
            resolve,
            reject,
          }))
        },
      )
    },
    [],
  )

  const hideDialog = useCallback(() => {
    setDialogState({ open: false })
  }, [])

  const onOk = useCallback(
    (...args: RequireOrOptional<ModalOutput>) => {
      const [value] = args

      dialogState.resolve?.(success(value as ModalOutput))
      hideDialog()
    },
    [hideDialog, dialogState],
  )

  const onCancel = useCallback(() => {
    dialogState.resolve?.(fail())
    hideDialog()
  }, [hideDialog, dialogState])

  return useMemo(
    () => ({
      showDialog,
      onOk,
      onCancel,
      ...dialogState.open ? { open: true, props: dialogState.props } : { open: false },
    }),
    [showDialog, onOk, onCancel, dialogState],
  )
}