From 09d6bc1992816e92c83c191cd4aae28408be5a55 Mon Sep 17 00:00:00 2001 From: ademsuslu Date: Sun, 17 Nov 2024 18:30:41 +0300 Subject: [PATCH] refactor:modal created --- app/(dashboard)/opportunity/page.tsx | 1 - app/layout.tsx | 2 + components/modals/store-modal.tsx | 76 +++++++++++++++ components/provider/modal-providers.tsx | 17 ++++ components/shared/drag_drop/Tables.tsx | 4 +- components/ui/dialog.tsx | 121 ++++++++++++++++++++++++ components/ui/modal.tsx | 44 +++++++++ hooks/use-store-modal.tsx | 14 +++ package-lock.json | 57 +++++++++-- package.json | 3 +- 10 files changed, 330 insertions(+), 9 deletions(-) create mode 100644 components/modals/store-modal.tsx create mode 100644 components/provider/modal-providers.tsx create mode 100644 components/ui/dialog.tsx create mode 100644 components/ui/modal.tsx create mode 100644 hooks/use-store-modal.tsx diff --git a/app/(dashboard)/opportunity/page.tsx b/app/(dashboard)/opportunity/page.tsx index a894482..22e6443 100644 --- a/app/(dashboard)/opportunity/page.tsx +++ b/app/(dashboard)/opportunity/page.tsx @@ -6,7 +6,6 @@ export default async function OpportunityPage() { const url = "https://crm-backend-production-e80f.up.railway.app/api"; const response = await fetch(`${url}/opportunity`,{ cache: 'no-cache' }); const data = await response.json(); - console.log(data) return (
diff --git a/app/layout.tsx b/app/layout.tsx index f00a154..18a1324 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -15,6 +15,7 @@ export const metadata: Metadata = { import { ClerkProvider } from '@clerk/nextjs' import { Providers } from '@/components/provider/provider' +import { ModalProvider } from '@/components/provider/modal-providers' export default function RootLayout({ children, @@ -27,6 +28,7 @@ export default function RootLayout({ + {children} diff --git a/components/modals/store-modal.tsx b/components/modals/store-modal.tsx new file mode 100644 index 0000000..a1023b9 --- /dev/null +++ b/components/modals/store-modal.tsx @@ -0,0 +1,76 @@ +"use client" +import * as z from "zod" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { useStoreModal } from "@/hooks/use-store-modal" +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" +import { Input } from "../ui/input" +import { Button } from "../ui/button" +import { useState } from "react" +import { Modal } from "../ui/modal" + +const formSchema = z.object({ + name: z.string().min(1) +}) + + +export const StoreModal = () => { + const storeModal = useStoreModal() + + const [loading, setLoading] = useState(false) + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + name: "" + } + }) + + + const onSubmit = async (data: z.infer) => { + // try { + // setLoading(true); + // let respon + // // const response = await axios.post("/api/store", data); + // window.location.assign(`/${response?.data?.id}`) + // window.location.reload(); + // } catch (error: any) { + // toast.error("Bir şeyler yanlış gitti: " + error.message); + // console.log(error); + // } finally { + // setLoading(false); + // } + }; + + + + return +
+
+
+ + {/* @ts-ignore */} + { + return + Name + + + + + + + }} /> +
+ + +
+ + +
+
+ +} \ No newline at end of file diff --git a/components/provider/modal-providers.tsx b/components/provider/modal-providers.tsx new file mode 100644 index 0000000..59bd4e0 --- /dev/null +++ b/components/provider/modal-providers.tsx @@ -0,0 +1,17 @@ +"use client" + +import { StoreModal } from "@/components/modals/store-modal"; +import { useEffect, useState } from "react" + +export const ModalProvider = () => { + const [isMounted, setIsMounted] = useState(false); + + + useEffect(() => { + setIsMounted(true) + }, []) + + if (!isMounted) { return null } + return + +} \ No newline at end of file diff --git a/components/shared/drag_drop/Tables.tsx b/components/shared/drag_drop/Tables.tsx index 84f6d0d..13643c6 100644 --- a/components/shared/drag_drop/Tables.tsx +++ b/components/shared/drag_drop/Tables.tsx @@ -5,6 +5,7 @@ import { motion } from "framer-motion"; import { Opportunity } from "@/types/Opportunity/model"; import { MdOutlineDragIndicator } from "react-icons/md"; import { Button } from "@/components/ui/button"; +import { useStoreModal } from "@/hooks/use-store-modal"; // Aşamalar için sabit liste const stages = ["İletişim", "Teklif", "Görüşme", "Kapalı", "Kazandı", "Kaybetti"] as const; @@ -17,6 +18,7 @@ interface Props { } const KanbanTable: React.FC = ({ data }) => { + const storeModal = useStoreModal() const [opportunities, setOpportunities] = useState(data); // PUT isteği gönderme fonksiyonu @@ -56,7 +58,7 @@ const KanbanTable: React.FC = ({ data }) => { return (
- +
{stages.map((stage) => ( diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx new file mode 100644 index 0000000..b5aaef7 --- /dev/null +++ b/components/ui/dialog.tsx @@ -0,0 +1,121 @@ +"use client" + +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { cn } from "@/lib/utils" +import { Cross2Icon } from "@radix-ui/react-icons" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogTrigger, + DialogClose, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx new file mode 100644 index 0000000..3344a55 --- /dev/null +++ b/components/ui/modal.tsx @@ -0,0 +1,44 @@ +"use client" + +import { + Dialog, + DialogHeader, + DialogContent, + DialogDescription, + DialogTitle +} from "@/components/ui/dialog"; + +interface ModalProps { + title: string; + description: string; + isOpen: boolean; + onClose: () => void; + children?: React.ReactNode; +} + + +export const Modal: React.FC = ({ + title, + description, + isOpen, + onClose, + children, +}) => { + + const onChange = (open: boolean) => { + if (!open) { + onClose() + } + } + return ( + + + + {title} + {description} + +
{children}
+ + + ) +} diff --git a/hooks/use-store-modal.tsx b/hooks/use-store-modal.tsx new file mode 100644 index 0000000..b39762b --- /dev/null +++ b/hooks/use-store-modal.tsx @@ -0,0 +1,14 @@ +import { create } from "zustand" + + +interface useStoreModalStore { + isOpen: boolean; + onOpen: () => void + onClose: () => void +} + +export const useStoreModal = create((set: any) => ({ + isOpen: false, + onOpen: () => set({ isOpen: true }), + onClose: () => set({ isOpen: false }), +})) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2f4969d..aae428a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -49,7 +49,8 @@ "three": "^0.170.0", "three-globe": "^2.34.3", "xlsx": "^0.18.5", - "zod": "^3.23.8" + "zod": "^3.23.8", + "zustand": "^5.0.1" }, "devDependencies": { "@types/node": "^20", @@ -1593,6 +1594,22 @@ } } }, + "node_modules/@react-three/drei/node_modules/zustand": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", + "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==", + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/@react-three/fiber": { "version": "8.17.10", "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.17.10.tgz", @@ -1650,6 +1667,22 @@ "loose-envify": "^1.1.0" } }, + "node_modules/@react-three/fiber/node_modules/zustand": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", + "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==", + "engines": { + "node": ">=12.7.0" + }, + "peerDependencies": { + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/@swc/helpers": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", @@ -5210,18 +5243,30 @@ } }, "node_modules/zustand": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz", - "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz", + "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==", "engines": { - "node": ">=12.7.0" + "node": ">=12.20.0" }, "peerDependencies": { - "react": ">=16.8" + "@types/react": ">=18.0.0", + "immer": ">=9.0.6", + "react": ">=18.0.0", + "use-sync-external-store": ">=1.2.0" }, "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "immer": { + "optional": true + }, "react": { "optional": true + }, + "use-sync-external-store": { + "optional": true } } } diff --git a/package.json b/package.json index 9a4c58d..689cc3d 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,8 @@ "three": "^0.170.0", "three-globe": "^2.34.3", "xlsx": "^0.18.5", - "zod": "^3.23.8" + "zod": "^3.23.8", + "zustand": "^5.0.1" }, "devDependencies": { "@types/node": "^20",