fix: rename dialog not working

packages/web/src/directories/directory-page/rename-file-dialog.tsx

@@ -1,9 +1,8 @@
 import { api } from "@fileone/convex/_generated/api"
+import { type FileSystemItem, FileType } from "@fileone/convex/model/filesystem"
 import { useMutation } from "@tanstack/react-query"
 import { useMutation as useContextMutation } from "convex/react"
-import { atom, useAtom, useStore } from "jotai"
 import { useId } from "react"
-import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -14,50 +13,39 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
-import { itemBeingRenamedAtom } from "./state"
 
-const fielNameAtom = atom(
+type RenameFileDialogProps = {
-	(get) => get(itemBeingRenamedAtom)?.name,
+	item: FileSystemItem
-	(get, set, newName: string) => {
+	onRenameSuccess: () => void
-		const current = get(itemBeingRenamedAtom)
+	onClose: () => void
-		if (current) {
+}
-			set(itemBeingRenamedAtom, {
-				...current,
-				name: newName,
-			})
-		}
-	},
-)
 
-export function RenameFileDialog() {
+export function RenameFileDialog({
-	const [itemBeingRenamed, setItemBeingRenamed] =
+	item,
-		useAtom(itemBeingRenamedAtom)
+	onRenameSuccess,
-	const store = useStore()
+	onClose,
+}: RenameFileDialogProps) {
 	const formId = useId()
 
 	const { mutate: renameFile, isPending: isRenaming } = useMutation({
 		mutationFn: useContextMutation(api.files.renameFile),
 		onSuccess: () => {
-			setItemBeingRenamed(null)
+			onRenameSuccess()
-			toast.success("File renamed successfully")
 		},
 	})
 
 	const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
 		event.preventDefault()
 
-		const itemBeingRenamed = store.get(itemBeingRenamedAtom)
-		if (itemBeingRenamed) {
 		const formData = new FormData(event.currentTarget)
 		const newName = formData.get("itemName") as string
 
 		if (newName) {
-				switch (itemBeingRenamed.originalItem.kind) {
+			switch (item.kind) {
-					case "file":
+				case FileType.File:
 					renameFile({
-							directoryId:
+						directoryId: item.doc.directoryId,
-								itemBeingRenamed.originalItem.doc.directoryId,
+						itemId: item.doc._id,
-							itemId: itemBeingRenamed.originalItem.doc._id,
 						newName,
 					})
 					break
@@ -66,14 +54,15 @@ export function RenameFileDialog() {
 			}
 		}
 	}
-	}
 
 	return (
 		<Dialog
-			open={itemBeingRenamed !== null}
+			open
-			onOpenChange={(open) =>
+			onOpenChange={(open) => {
-				setItemBeingRenamed(open ? itemBeingRenamed : null)
+				if (!open) {
+					onClose()
 				}
+			}}
 		>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader>
@@ -81,7 +70,7 @@ export function RenameFileDialog() {
 				</DialogHeader>
 
 				<form id={formId} onSubmit={onSubmit}>
-					<RenameFileInput />
+					<RenameFileInput initialValue={item.doc.name} />
 				</form>
 
 				<DialogFooter>
@@ -99,13 +88,6 @@ export function RenameFileDialog() {
 	)
 }
 
-function RenameFileInput() {
+function RenameFileInput({ initialValue }: { initialValue: string }) {
-	const [fileName, setFileName] = useAtom(fielNameAtom)
+	return <Input defaultValue={initialValue} name="itemName" />
-	return (
-		<Input
-			value={fileName}
-			name="itemName"
-			onChange={(e) => setFileName(e.target.value)}
-		/>
-	)
 }

packages/web/src/routes/_authenticated/_sidebar-layout/directories.$directoryId.tsx

@@ -23,7 +23,7 @@ import {
 	UploadCloudIcon,
 } from "lucide-react"
 import { type ChangeEvent, useCallback, useContext, useRef } from "react"
-import { toast } from "sonner"
+import { toast, toast } from "sonner"
 import { DirectoryIcon } from "@/components/icons/directory-icon"
 import { TextFileIcon } from "@/components/icons/text-file-icon"
 import { Button } from "@/components/ui/button"
@@ -154,7 +154,21 @@ function RouteComponent() {
 				)}
 			</WithAtom>
 
-			<RenameFileDialog />
+			<WithAtom atom={itemBeingRenamedAtom}>
+				{(itemBeingRenamed, setItemBeingRenamed) => {
+					if (!itemBeingRenamed) return null
+					return (
+						<RenameFileDialog
+							item={itemBeingRenamed.originalItem}
+							onRenameSuccess={() => {
+								toast.success("File renamed successfully")
+								setItemBeingRenamed(null)
+							}}
+							onClose={() => setItemBeingRenamed(null)}
+						/>
+					)
+				}}
+			</WithAtom>
 
 			<WithAtom atom={openedFileAtom}>
 				{(openedFile, setOpenedFile) => {