diff options
| author | MohamedBassem <me@mbassem.com> | 2024-03-10 17:59:58 +0000 |
|---|---|---|
| committer | MohamedBassem <me@mbassem.com> | 2024-03-10 17:59:58 +0000 |
| commit | d6dd76021226802adf5295b3243d6f2ae4fa5cc2 (patch) | |
| tree | 7a25423d46db9e0e224b5f58b73cec5768953b44 /packages/web/app/dashboard/components/NewListModal.tsx | |
| parent | 8ab868d3f94cc6609d278dc952432f1a244c3f84 (diff) | |
| download | karakeep-d6dd76021226802adf5295b3243d6f2ae4fa5cc2.tar.zst | |
refactor: Move all components to the top level directory
Diffstat (limited to 'packages/web/app/dashboard/components/NewListModal.tsx')
| -rw-r--r-- | packages/web/app/dashboard/components/NewListModal.tsx | 170 |
1 files changed, 0 insertions, 170 deletions
diff --git a/packages/web/app/dashboard/components/NewListModal.tsx b/packages/web/app/dashboard/components/NewListModal.tsx deleted file mode 100644 index f51616ed..00000000 --- a/packages/web/app/dashboard/components/NewListModal.tsx +++ /dev/null @@ -1,170 +0,0 @@ -"use client"; - -import data from "@emoji-mart/data"; -import Picker from "@emoji-mart/react"; - -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; - -import { ActionButton } from "@/components/ui/action-button"; -import { Button } from "@/components/ui/button"; -import { - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog"; -import { - Form, - FormControl, - FormField, - FormItem, - FormMessage, -} from "@/components/ui/form"; - -import { toast } from "@/components/ui/use-toast"; -import { api } from "@/lib/trpc"; - -import { z } from "zod"; -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { Input } from "@/components/ui/input"; - -import { create } from "zustand"; - -export const useNewListModal = create<{ - open: boolean; - setOpen: (v: boolean) => void; -}>((set) => ({ - open: false, - setOpen: (open: boolean) => set(() => ({ open })), -})); - -export default function NewListModal() { - const { open, setOpen } = useNewListModal(); - - const formSchema = z.object({ - name: z.string(), - icon: z.string(), - }); - const form = useForm<z.infer<typeof formSchema>>({ - resolver: zodResolver(formSchema), - defaultValues: { - name: "", - icon: "💡", - }, - }); - - const listsInvalidationFunction = api.useUtils().lists.list.invalidate; - - const { mutate: createList, isPending } = api.lists.create.useMutation({ - onSuccess: () => { - toast({ - description: "List has been created!", - }); - listsInvalidationFunction(); - setOpen(false); - }, - onError: (e) => { - if (e.data?.code == "BAD_REQUEST") { - toast({ - variant: "destructive", - description: e.message, - }); - } else { - toast({ - variant: "destructive", - title: "Something went wrong", - }); - } - }, - }); - - return ( - <Dialog - open={open} - onOpenChange={(s) => { - form.reset(); - setOpen(s); - }} - > - <DialogContent> - <Form {...form}> - <form - onSubmit={form.handleSubmit((value) => { - createList(value); - })} - > - <DialogHeader> - <DialogTitle>New List</DialogTitle> - </DialogHeader> - <div className="flex w-full gap-2 py-4"> - <FormField - control={form.control} - name="icon" - render={({ field }) => { - return ( - <FormItem> - <FormControl> - <Popover> - <PopoverTrigger className="border-input h-full rounded border px-2 text-2xl"> - {field.value} - </PopoverTrigger> - <PopoverContent> - <Picker - data={data} - onEmojiSelect={(e: { native: string }) => - field.onChange(e.native) - } - /> - </PopoverContent> - </Popover> - </FormControl> - <FormMessage /> - </FormItem> - ); - }} - /> - - <FormField - control={form.control} - name="name" - render={({ field }) => { - return ( - <FormItem className="grow"> - <FormControl> - <Input - type="text" - className="w-full" - placeholder="List Name" - {...field} - /> - </FormControl> - <FormMessage /> - </FormItem> - ); - }} - /> - </div> - <DialogFooter className="sm:justify-end"> - <DialogClose asChild> - <Button type="button" variant="secondary"> - Close - </Button> - </DialogClose> - <ActionButton type="submit" loading={isPending}> - Create - </ActionButton> - </DialogFooter> - </form> - </Form> - </DialogContent> - </Dialog> - ); -} |
