import snippet dialog initial, somewhat working

src/components/CodeAndPreview.tsx

@@ -25,6 +25,7 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 import { useUrlParams } from "@/hooks/use-url-params"
 import { getSnippetTemplate } from "@/lib/get-snippet-template"
 import "@/prettier"
+import { useImportSnippetDialog } from "./dialogs/import-snippet-dialog"
 
 interface Props {
   snippet?: Snippet | null
@@ -70,6 +71,8 @@ export function CodeAndPreview({ snippet }: Props) {
     type: snippetType,
   })
   const qc = useQueryClient()
+  const { Dialog: ImportSnippetDialog, openDialog: openImportDialog } =
+    useImportSnippetDialog()
 
   const updateSnippetMutation = useMutation({
     mutationFn: async () => {
@@ -138,7 +141,7 @@ export function CodeAndPreview({ snippet }: Props) {
             <Button
               size="sm"
               variant="ghost"
-              // onClick={() => openImportDialog()}
+              onClick={() => openImportDialog()}
             >
               Import
             </Button>
@@ -185,6 +188,7 @@ export function CodeAndPreview({ snippet }: Props) {
           />
         )}
       </div>
+      <ImportSnippetDialog />
     </div>
   )
 }

src/components/dialogs/create-use-dialog.tsx

@@ -0,0 +1,28 @@
+import { FunctionComponent, useState } from "react"
+
+export const createUseDialog = <DialogType extends React.ComponentType<any>>(
+  DialogComponent: DialogType,
+) => {
+  return () => {
+    const [open, setOpen] = useState(false)
+
+    return {
+      openDialog: () => {
+        setOpen(true)
+      },
+      closeDialog: () => {
+        setOpen(false)
+      },
+      Dialog: (
+        props: Omit<React.ComponentProps<DialogType>, "open" | "onOpenChange">,
+      ) => (
+        <DialogComponent
+          {...(props as any)}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      ),
+      open,
+    }
+  }
+}

src/components/dialogs/import-snippet-dialog.tsx

@@ -5,14 +5,15 @@ import { Button } from "../ui/button"
 import { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
+import { createUseDialog } from "./create-use-dialog"
 
 export const ImportSnippetDialog = ({
   open,
   onOpenChange,
   onSnippetSelected,
 }: {
   open: boolean
-  onOpenChange: (open: boolean) => void
+  onOpenChange: (open: boolean) => any
   onSnippetSelected: (snippet: Snippet) => any
 }) => {
   const [searchText, setSearchText] = useState("")
@@ -56,3 +57,5 @@ export const ImportSnippetDialog = ({
     </Dialog>
   )
 }
+
+export const useImportSnippetDialog = createUseDialog(ImportSnippetDialog)