From 2e0dd62ef655ee769eadd8ed3bb92eed6eef3966 Mon Sep 17 00:00:00 2001 From: Amit Singh Date: Sat, 12 Oct 2024 13:32:56 +0530 Subject: [PATCH 01/13] Fixed mutation not clearing cache properly --- src/app/add-card/page.tsx | 51 ++++++++---------- src/app/add-transaction/page.tsx | 80 +++++++++++++--------------- src/app/page.tsx | 16 ++---- src/components/ui/custom-spinner.tsx | 22 -------- src/server/firebase-admin/index.ts | 6 --- 5 files changed, 61 insertions(+), 114 deletions(-) delete mode 100644 src/components/ui/custom-spinner.tsx diff --git a/src/app/add-card/page.tsx b/src/app/add-card/page.tsx index 0ea129e..0201963 100644 --- a/src/app/add-card/page.tsx +++ b/src/app/add-card/page.tsx @@ -1,7 +1,7 @@ -"use client"; +'use client'; -import CardName from "@/components/common/card-name"; -import { Button } from "@/components/ui/button"; +import CardName from '@/components/common/card-name'; +import { Button } from '@/components/ui/button'; import { Form, FormControl, @@ -9,24 +9,23 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select"; -import { trpc } from "@/trpc-client/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useRouter } from "next/navigation"; -import { useEffect } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; -import { cardBrandList, formSchema } from "./constants"; -import { ReloadIcon } from "@radix-ui/react-icons"; +} from '@/components/ui/select'; +import { trpc } from '@/trpc-client/api'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { ReloadIcon } from '@radix-ui/react-icons'; +import { useRouter } from 'next/navigation'; +import { useForm } from 'react-hook-form'; +import { toast } from 'sonner'; +import { z } from 'zod'; +import { cardBrandList, formSchema } from './constants'; type TFormType = z.infer; @@ -37,25 +36,17 @@ const AddCard = () => { }); const trpcUtils = trpc.useUtils(); - const { - mutate: addCard, - isSuccess, - isLoading, - } = trpc.card.add.useMutation({ - onSuccess: () => { - trpcUtils.card.getAll.invalidate(); + const { mutateAsync: addCard, isLoading } = trpc.card.add.useMutation({ + onSuccess: async () => { + await trpcUtils.card.getAll.invalidate(); }, }); - useEffect(() => { - if (isSuccess && !isLoading) { - toast("Card saved successfully"); - router.push("/saved-cards"); - } - }, [isLoading, isSuccess, router]); - const onSubmit = (values: TFormType) => { - addCard(values); + addCard(values).then(() => { + toast('Card saved successfully'); + router.push('/saved-cards'); + }); }; return ( diff --git a/src/app/add-transaction/page.tsx b/src/app/add-transaction/page.tsx index 6060dc5..abb1d3a 100644 --- a/src/app/add-transaction/page.tsx +++ b/src/app/add-transaction/page.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import CardName from "@/components/common/card-name"; -import { Button } from "@/components/ui/button"; -import { Calendar } from "@/components/ui/calendar"; +import CardName from '@/components/common/card-name'; +import { Button } from '@/components/ui/button'; +import { Calendar } from '@/components/ui/calendar'; import { Form, FormControl, @@ -10,34 +10,34 @@ import { FormItem, FormLabel, FormMessage, -} from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +} from '@/components/ui/form'; +import { Input } from '@/components/ui/input'; import { Popover, PopoverContent, PopoverTrigger, -} from "@/components/ui/popover"; +} from '@/components/ui/popover'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, -} from "@/components/ui/select"; -import { cn } from "@/lib/utils"; -import { trpc } from "@/trpc-client/api"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { ReloadIcon } from "@radix-ui/react-icons"; -import dayjs from "dayjs"; -import advancedFormat from "dayjs/plugin/advancedFormat"; -import { CalendarIcon, IndianRupeeIcon } from "lucide-react"; -import { useRouter, useSearchParams } from "next/navigation"; -import { useEffect, useMemo } from "react"; -import { useForm } from "react-hook-form"; -import { toast } from "sonner"; -import { z } from "zod"; -import { getCardBrand } from "../add-card/constants"; -import { formSchema } from "./constants"; +} from '@/components/ui/select'; +import { cn } from '@/lib/utils'; +import { trpc } from '@/trpc-client/api'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { ReloadIcon } from '@radix-ui/react-icons'; +import dayjs from 'dayjs'; +import advancedFormat from 'dayjs/plugin/advancedFormat'; +import { CalendarIcon, IndianRupeeIcon } from 'lucide-react'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { useMemo } from 'react'; +import { useForm } from 'react-hook-form'; +import { toast } from 'sonner'; +import { z } from 'zod'; +import { getCardBrand } from '../add-card/constants'; +import { formSchema } from './constants'; dayjs.extend(advancedFormat); @@ -49,37 +49,29 @@ const AddTransaction = () => { const form = useForm({ resolver: zodResolver(formSchema), defaultValues: { - cardId: searchParams.get("cardId") || undefined, + cardId: searchParams.get('cardId') || undefined, date: new Date(), }, }); const { data: cardData } = trpc.card.getAll.useQuery(); const trpcUtils = trpc.useUtils(); - const { - mutateAsync: saveCardTransaction, - isSuccess, - isLoading, - } = trpc.transaction.add.useMutation({ - onSuccess: () => { - trpcUtils.transaction.invalidate(); - }, - }); - - useEffect(() => { - if (isSuccess && !isLoading) { - } - }, [isLoading, isSuccess, router]); + const { mutateAsync: saveCardTransaction, isLoading } = + trpc.transaction.add.useMutation({ + onSuccess: async () => { + await trpcUtils.card.getAll.invalidate(); + }, + }); const onSubmit = (values: TFormType) => { const { date, ...rest } = values; saveCardTransaction({ ...rest, date: date.getTime() }) .then(() => { - toast("Transaction added successfully"); - router.push("/"); + toast('Transaction added successfully'); + router.push('/'); }) .catch((error) => { - if (error.name === "TRPCClientError") { + if (error.name === 'TRPCClientError') { toast(error.message); } }); @@ -172,12 +164,12 @@ const AddTransaction = () => { - setTheme("light")}> + setTheme('light')}> Light - setTheme("dark")}> + setTheme('dark')}> Dark - setTheme("system")}> + setTheme('system')}> System diff --git a/src/app/utils.ts b/src/app/utils.ts index 3d99980..ce3ea89 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -1,5 +1,5 @@ -import { TCardData, TCardTransaction } from "@/types/card"; -import { InfiniteData } from "@tanstack/react-query"; +import { TCardData, TCardTransaction } from '@/types/card'; +import { InfiniteData } from '@tanstack/react-query'; export const getMergedCardsData = ( cardsData: Record | undefined, @@ -8,15 +8,15 @@ export const getMergedCardsData = ( if (!cardsData) { return []; } - const cardTransactionMap = !cardTransactions - ? new Map() - : Object.entries(cardTransactions).reduce>( + const cardTransactionMap = cardTransactions + ? Object.entries(cardTransactions).reduce>( (map, [, transaction]) => { map.set(transaction.cardId, transaction); return map; }, new Map() - ); + ) + : new Map(); return Object.entries(cardsData) .map(([cardId, cardDetails]) => { @@ -58,8 +58,8 @@ export const getMergedTxnData = ( export const getFormattedPrice = (price: number | undefined) => price - ? `${new Intl.NumberFormat("en-US", { - style: "currency", - currency: "INR", - }).format(price)}` - : "-"; + ? new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'INR', + }).format(price) + : '-'; diff --git a/src/components/common/billing-date.tsx b/src/components/common/billing-date.tsx index 5f7eecd..66aa071 100644 --- a/src/components/common/billing-date.tsx +++ b/src/components/common/billing-date.tsx @@ -1,11 +1,11 @@ -import dayjs from "dayjs"; -import advancedFormat from "dayjs/plugin/advancedFormat"; +import dayjs from 'dayjs'; +import advancedFormat from 'dayjs/plugin/advancedFormat'; dayjs.extend(advancedFormat); const ordinalBillingDate = (billingDate: number) => { const date = new Date(1990, 0, billingDate); // Dummy year and month - return dayjs(date).format("Do"); + return dayjs(date).format('Do'); }; interface Props { diff --git a/src/components/common/card-name.tsx b/src/components/common/card-name.tsx index bf48516..8141fad 100644 --- a/src/components/common/card-name.tsx +++ b/src/components/common/card-name.tsx @@ -1,5 +1,5 @@ -import { Avatar, AvatarImage } from "@/components/ui/avatar"; -import clsx from "clsx"; +import { Avatar, AvatarImage } from '@/components/ui/avatar'; +import clsx from 'clsx'; interface Props { cardBrandId: string | undefined; @@ -8,7 +8,7 @@ interface Props { } const CardName = ({ cardBrandId, cardName, className }: Props) => ( -
+
diff --git a/src/components/icons/cards-logo.tsx b/src/components/icons/cards-logo.tsx index 3ba5bb3..f0ac032 100644 --- a/src/components/icons/cards-logo.tsx +++ b/src/components/icons/cards-logo.tsx @@ -1,19 +1,19 @@ -"use client"; +'use client'; -import clsx from "clsx"; -import { useTheme } from "next-themes"; +import clsx from 'clsx'; +import { useTheme } from 'next-themes'; const CardsLogo = ({ className }: { className?: string }) => { const { resolvedTheme } = useTheme(); - const fillColor = resolvedTheme === "dark" ? "#ffffff" : "#000000"; - const backgroundColor = resolvedTheme === "dark" ? "#000000" : "#ffffff"; + const fillColor = resolvedTheme === 'dark' ? '#ffffff' : '#000000'; + const backgroundColor = resolvedTheme === 'dark' ? '#000000' : '#ffffff'; return ( , @@ -12,13 +12,13 @@ const Avatar = React.forwardRef< -)) -Avatar.displayName = AvatarPrimitive.Root.displayName +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; const AvatarImage = React.forwardRef< React.ElementRef, @@ -26,11 +26,11 @@ const AvatarImage = React.forwardRef< >(({ className, ...props }, ref) => ( -)) -AvatarImage.displayName = AvatarPrimitive.Image.displayName +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; const AvatarFallback = React.forwardRef< React.ElementRef, @@ -39,12 +39,12 @@ const AvatarFallback = React.forwardRef< -)) -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; -export { Avatar, AvatarImage, AvatarFallback } +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 0270f64..b1b19ea 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,57 +1,57 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, type VariantProps } from 'class-variance-authority'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const buttonVariants = cva( - "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", + 'bg-primary text-primary-foreground shadow hover:bg-primary/90', destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", + 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', }, size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", + default: 'h-9 px-4 py-2', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', + icon: 'h-9 w-9', }, }, defaultVariants: { - variant: "default", - size: "default", + variant: 'default', + size: 'default', }, } -) +); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { - asChild?: boolean + asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : 'button'; return ( - ) + ); } -) -Button.displayName = "Button" +); +Button.displayName = 'Button'; -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 018fe26..40abb17 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -1,13 +1,13 @@ -"use client" +'use client'; -import * as React from "react" -import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" -import { DayPicker } from "react-day-picker" +import * as React from 'react'; +import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'; +import { DayPicker } from 'react-day-picker'; -import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { cn } from '@/lib/utils'; +import { buttonVariants } from '@/components/ui/button'; -export type CalendarProps = React.ComponentProps +export type CalendarProps = React.ComponentProps; function Calendar({ className, @@ -18,45 +18,45 @@ function Calendar({ return ( .day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" - : "[&:has([aria-selected])]:rounded-md" + 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md', + props.mode === 'range' + ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md' + : '[&:has([aria-selected])]:rounded-md' ), day: cn( - buttonVariants({ variant: "ghost" }), - "h-8 w-8 p-0 font-normal aria-selected:opacity-100" + buttonVariants({ variant: 'ghost' }), + 'h-8 w-8 p-0 font-normal aria-selected:opacity-100' ), - day_range_start: "day-range-start", - day_range_end: "day-range-end", + day_range_start: 'day-range-start', + day_range_end: 'day-range-end', day_selected: - "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", - day_today: "bg-accent text-accent-foreground", + 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground', + day_today: 'bg-accent text-accent-foreground', day_outside: - "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", - day_disabled: "text-muted-foreground opacity-50", + 'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', + day_disabled: 'text-muted-foreground opacity-50', day_range_middle: - "aria-selected:bg-accent aria-selected:text-accent-foreground", - day_hidden: "invisible", + 'aria-selected:bg-accent aria-selected:text-accent-foreground', + day_hidden: 'invisible', ...classNames, }} components={{ @@ -65,8 +65,8 @@ function Calendar({ }} {...props} /> - ) + ); } -Calendar.displayName = "Calendar" +Calendar.displayName = 'Calendar'; -export { Calendar } +export { Calendar }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 77e9fb7..9389e94 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from 'react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const Card = React.forwardRef< HTMLDivElement, @@ -9,13 +9,13 @@ const Card = React.forwardRef<
-)) -Card.displayName = "Card" +)); +Card.displayName = 'Card'; const CardHeader = React.forwardRef< HTMLDivElement, @@ -23,11 +23,11 @@ const CardHeader = React.forwardRef< >(({ className, ...props }, ref) => (
-)) -CardHeader.displayName = "CardHeader" +)); +CardHeader.displayName = 'CardHeader'; const CardTitle = React.forwardRef< HTMLParagraphElement, @@ -35,11 +35,11 @@ const CardTitle = React.forwardRef< >(({ className, ...props }, ref) => (

-)) -CardTitle.displayName = "CardTitle" +)); +CardTitle.displayName = 'CardTitle'; const CardDescription = React.forwardRef< HTMLParagraphElement, @@ -47,19 +47,19 @@ const CardDescription = React.forwardRef< >(({ className, ...props }, ref) => (

-)) -CardDescription.displayName = "CardDescription" +)); +CardDescription.displayName = 'CardDescription'; const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( -

-)) -CardContent.displayName = "CardContent" +
+)); +CardContent.displayName = 'CardContent'; const CardFooter = React.forwardRef< HTMLDivElement, @@ -67,10 +67,17 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
-)) -CardFooter.displayName = "CardFooter" +)); +CardFooter.displayName = 'CardFooter'; -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardDescription, + CardContent, +}; diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx index 242b07a..925e680 100644 --- a/src/components/ui/dropdown-menu.tsx +++ b/src/components/ui/dropdown-menu.tsx @@ -1,38 +1,38 @@ -"use client" +'use client'; -import * as React from "react" -import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import * as React from 'react'; +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { CheckIcon, ChevronRightIcon, DotFilledIcon, -} from "@radix-ui/react-icons" +} from '@radix-ui/react-icons'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; -const DropdownMenu = DropdownMenuPrimitive.Root +const DropdownMenu = DropdownMenuPrimitive.Root; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; -const DropdownMenuGroup = DropdownMenuPrimitive.Group +const DropdownMenuGroup = DropdownMenuPrimitive.Group; -const DropdownMenuPortal = DropdownMenuPrimitive.Portal +const DropdownMenuPortal = DropdownMenuPrimitive.Portal; -const DropdownMenuSub = DropdownMenuPrimitive.Sub +const DropdownMenuSub = DropdownMenuPrimitive.Sub; -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, children, ...props }, ref) => ( -)) +)); DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName + DropdownMenuPrimitive.SubTrigger.displayName; const DropdownMenuSubContent = React.forwardRef< React.ElementRef, @@ -51,14 +51,14 @@ const DropdownMenuSubContent = React.forwardRef< -)) +)); DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName + DropdownMenuPrimitive.SubContent.displayName; const DropdownMenuContent = React.forwardRef< React.ElementRef, @@ -69,33 +69,33 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", - "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md', + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className )} {...props} /> -)) -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName +)); +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName +)); +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, @@ -104,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} -)) +)); DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName + DropdownMenuPrimitive.CheckboxItem.displayName; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, @@ -128,7 +128,7 @@ const DropdownMenuRadioItem = React.forwardRef< {children} -)) -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName +)); +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - inset?: boolean + inset?: boolean; } >(({ className, inset, ...props }, ref) => ( -)) -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName +)); +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; const DropdownMenuSeparator = React.forwardRef< React.ElementRef, @@ -167,11 +167,11 @@ const DropdownMenuSeparator = React.forwardRef< >(({ className, ...props }, ref) => ( -)) -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName +)); +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; const DropdownMenuShortcut = ({ className, @@ -179,12 +179,12 @@ const DropdownMenuShortcut = ({ }: React.HTMLAttributes) => { return ( - ) -} -DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + ); +}; +DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; export { DropdownMenu, @@ -202,4 +202,4 @@ export { DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, -} +}; diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx index b6daa65..c931e2d 100644 --- a/src/components/ui/form.tsx +++ b/src/components/ui/form.tsx @@ -1,8 +1,8 @@ -"use client" +'use client'; -import * as React from "react" -import * as LabelPrimitive from "@radix-ui/react-label" -import { Slot } from "@radix-ui/react-slot" +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { Slot } from '@radix-ui/react-slot'; import { Controller, ControllerProps, @@ -10,27 +10,27 @@ import { FieldValues, FormProvider, useFormContext, -} from "react-hook-form" +} from 'react-hook-form'; -import { cn } from "@/lib/utils" -import { Label } from "@/components/ui/label" +import { cn } from '@/lib/utils'; +import { Label } from '@/components/ui/label'; -const Form = FormProvider +const Form = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, > = { - name: TName -} + name: TName; +}; const FormFieldContext = React.createContext( {} as FormFieldContextValue -) +); const FormField = < TFieldValues extends FieldValues = FieldValues, - TName extends FieldPath = FieldPath + TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { @@ -38,21 +38,21 @@ const FormField = < - ) -} + ); +}; const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext) - const itemContext = React.useContext(FormItemContext) - const { getFieldState, formState } = useFormContext() + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); - const fieldState = getFieldState(fieldContext.name, formState) + const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { - throw new Error("useFormField should be used within ") + throw new Error('useFormField should be used within '); } - const { id } = itemContext + const { id } = itemContext; return { id, @@ -61,110 +61,109 @@ const useFormField = () => { formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, - } -} + }; +}; type FormItemContextValue = { - id: string -} + id: string; +}; const FormItemContext = React.createContext( {} as FormItemContextValue -) +); const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const id = React.useId() + const id = React.useId(); return ( -
+
- ) -}) -FormItem.displayName = "FormItem" + ); +}); +FormItem.displayName = 'FormItem'; const FormLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField() + const { error, formItemId } = useFormField(); return (