diff --git a/src/app/boards/[...boardId]/components/NewListForm.tsx b/src/app/boards/[...boardId]/components/NewListForm.tsx index 9f7d817f..b87feb72 100644 --- a/src/app/boards/[...boardId]/components/NewListForm.tsx +++ b/src/app/boards/[...boardId]/components/NewListForm.tsx @@ -1,8 +1,10 @@ "use client"; +import { useState, useEffect } from "react"; import { api } from "~/trpc/react"; import { HiXMark } from "react-icons/hi2"; +import { Switch } from "@headlessui/react"; import { useBoard } from "~/app/providers/board"; import { useModal } from "~/app/providers/modal"; @@ -17,10 +19,15 @@ interface boardPublicId { boardPublicId: string; } +function classNames(...classes: string[]): string { + return classes.filter(Boolean).join(" "); +} + export function NewListForm({ boardPublicId }: boardPublicId) { const utils = api.useUtils(); const { boardData } = useBoard(); const { closeModal } = useModal(); + const [isCreateAnotherEnabled, setIsCreateAnotherEnabled] = useState(false); const refetchBoard = () => utils.board.byId.refetch({ id: boardData.publicId }); @@ -29,13 +36,19 @@ export function NewListForm({ boardPublicId }: boardPublicId) { onSuccess: async () => { try { await refetchBoard(); - closeModal(); + if (!isCreateAnotherEnabled) closeModal(); } catch (e) { console.log(e); } }, }); + useEffect(() => { + const nameElement: HTMLElement | null = + document?.querySelector("#list-name"); + if (nameElement) nameElement.focus(); + }, []); + return ( <>
@@ -52,25 +65,46 @@ export function NewListForm({ boardPublicId }: boardPublicId) { initialValues={{ name: "", }} - onSubmit={(values: FormValues) => { + onSubmit={(values: FormValues, { resetForm }) => { createList.mutate({ name: values.name, boardPublicId, }); + resetForm(); }} >
+
+ Create more + + Use setting + +