From cdb85120de6326ebb07abfa75be64a202606ab4b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 20 Jan 2023 21:49:43 -0800
Subject: [PATCH] Update Dialog to be controlled

---
 components/Dialog/index.tsx | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/components/Dialog/index.tsx b/components/Dialog/index.tsx
index b5824236..bd814d0f 100644
--- a/components/Dialog/index.tsx
+++ b/components/Dialog/index.tsx
@@ -1,39 +1,36 @@
-import React from 'react'
+import React, { PropsWithChildren, useEffect, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { useLockedBody } from 'usehooks-ts'
 
 import './index.scss'
 
-interface Props
-  extends React.DetailedHTMLProps<
-    React.DialogHTMLAttributes<HTMLDivElement>,
-    HTMLDivElement
-  > {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
+interface Props extends DialogPrimitive.DialogProps {}
 
-export const Dialog = React.forwardRef<HTMLDivElement, Props>(function dialog(
-  { children, ...props },
-  forwardedRef
-) {
+export const Dialog = ({ children, ...props }: PropsWithChildren<Props>) => {
   const [locked, setLocked] = useLockedBody(false, 'root')
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (props.open != undefined) {
+      toggleLocked(props.open)
+      setOpen(props.open)
+    }
+  }, [props.open])
 
   function toggleLocked(open: boolean) {
     setLocked(open)
   }
 
-  function onOpenChange(open: boolean) {
-    toggleLocked(open)
-    props.onOpenChange(open)
+  function handleOpenChange(open: boolean) {
+    if (props.onOpenChange) props.onOpenChange(open)
   }
 
   return (
-    <DialogPrimitive.Root open={props.open} onOpenChange={onOpenChange}>
+    <DialogPrimitive.Root open={props.open} onOpenChange={handleOpenChange}>
       {children}
     </DialogPrimitive.Root>
   )
-})
+}
 
 export const DialogTitle = DialogPrimitive.Title
 export const DialogTrigger = DialogPrimitive.Trigger