From 574f35848d5712fd6ac314733b90111ec334f56a Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Sat, 2 Nov 2024 15:36:30 +0000
Subject: [PATCH] new dir message passing fix'

---
 src/components/Common/CommonModals.tsx   |  5 ++++-
 src/components/Common/EmptyPage.tsx      |  7 +++----
 src/components/MainPage.tsx              | 19 ++-----------------
 src/components/Sidebars/IconsSidebar.tsx | 12 ++----------
 src/components/shortcuts/use-shortcut.ts |  6 ++++--
 src/contexts/ModalContext.tsx            |  7 ++++++-
 6 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/src/components/Common/CommonModals.tsx b/src/components/Common/CommonModals.tsx
index 3c99e3b7..3dac2139 100644
--- a/src/components/Common/CommonModals.tsx
+++ b/src/components/Common/CommonModals.tsx
@@ -5,14 +5,17 @@ import SettingsModal from '../Settings/Settings'
 import { useFileContext } from '@/contexts/FileContext'
 import RenameNoteModal from '../File/RenameNote'
 import RenameDirModal from '../File/RenameDirectory'
+import NewDirectoryComponent from '../File/NewDirectory'
 
 const CommonModals: React.FC = () => {
-  const { isSettingsModalOpen, setIsSettingsModalOpen } = useModalOpeners()
+  const { isNewDirectoryModalOpen, setIsNewDirectoryModalOpen, isSettingsModalOpen, setIsSettingsModalOpen } =
+    useModalOpeners()
 
   const { noteToBeRenamed, fileDirToBeRenamed } = useFileContext()
 
   return (
     <div>
+      <NewDirectoryComponent isOpen={isNewDirectoryModalOpen} onClose={() => setIsNewDirectoryModalOpen(false)} />
       {noteToBeRenamed && <RenameNoteModal />}
       {fileDirToBeRenamed && <RenameDirModal />}
       <SettingsModal isOpen={isSettingsModalOpen} onClose={() => setIsSettingsModalOpen(false)} />
diff --git a/src/components/Common/EmptyPage.tsx b/src/components/Common/EmptyPage.tsx
index 02bc7e95..0ba0bc17 100644
--- a/src/components/Common/EmptyPage.tsx
+++ b/src/components/Common/EmptyPage.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { ImFileEmpty } from 'react-icons/im'
 import { useContentContext } from '@/contexts/ContentContext'
-import NewDirectoryComponent from '../File/NewDirectory'
+import { useModalOpeners } from '@/contexts/ModalContext'
 
 const EmptyPage: React.FC = () => {
-  const [isNewDirectoryModalOpen, setIsNewDirectoryModalOpen] = useState(false)
+  const { setIsNewDirectoryModalOpen } = useModalOpeners()
   const { createUntitledNote } = useContentContext()
 
   return (
@@ -29,7 +29,6 @@ const EmptyPage: React.FC = () => {
         >
           Create a Folder
         </button>
-        <NewDirectoryComponent isOpen={isNewDirectoryModalOpen} onClose={() => setIsNewDirectoryModalOpen(false)} />
       </div>
     </div>
   )
diff --git a/src/components/MainPage.tsx b/src/components/MainPage.tsx
index 64bf019e..3af7a0de 100644
--- a/src/components/MainPage.tsx
+++ b/src/components/MainPage.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import '../styles/global.css'
 import ChatComponent from './Chat'
@@ -19,21 +19,10 @@ import useAppShortcuts from './shortcuts/use-shortcut'
 
 const MainPageContent: React.FC = () => {
   const [showSimilarFiles, setShowSimilarFiles] = useState(false)
-  const [isNewDirectoryModalOpen, setIsNewDirectoryModalOpen] = useState(false)
   const { currentlyOpenFilePath } = useFileContext()
 
   const { showChatbot } = useChatContext()
   const { getShortcutDescription } = useAppShortcuts()
-  const openNewDirectoryModal = useCallback(() => {
-    setIsNewDirectoryModalOpen(true)
-  }, [])
-
-  useEffect(() => {
-    window.addEventListener('open-new-directory-modal', openNewDirectoryModal)
-    return () => {
-      window.removeEventListener('open-new-directory-modal', openNewDirectoryModal)
-    }
-  }, [openNewDirectoryModal])
 
   return (
     <div className="relative overflow-x-hidden">
@@ -45,11 +34,7 @@ const MainPageContent: React.FC = () => {
       />
       <div className="flex h-below-titlebar">
         <div className="border-y-0 border-l-0 border-r-[0.001px] border-solid border-neutral-700 pt-2.5">
-          <IconsSidebar
-            getShortcutDescription={getShortcutDescription}
-            isNewDirectoryModalOpen={isNewDirectoryModalOpen}
-            setIsNewDirectoryModalOpen={setIsNewDirectoryModalOpen}
-          />
+          <IconsSidebar getShortcutDescription={getShortcutDescription} />
         </div>
 
         <ResizableComponent resizeSide="right">
diff --git a/src/components/Sidebars/IconsSidebar.tsx b/src/components/Sidebars/IconsSidebar.tsx
index c3caf50b..ca025507 100644
--- a/src/components/Sidebars/IconsSidebar.tsx
+++ b/src/components/Sidebars/IconsSidebar.tsx
@@ -11,23 +11,16 @@ import { HiOutlinePencilAlt } from 'react-icons/hi'
 import { useModalOpeners } from '../../contexts/ModalContext'
 import { useChatContext } from '@/contexts/ChatContext'
 import { useContentContext } from '@/contexts/ContentContext'
-import NewDirectoryComponent from '../File/NewDirectory'
 
 export interface IconsSidebarProps {
   getShortcutDescription: (action: string) => string
-  isNewDirectoryModalOpen: boolean
-  setIsNewDirectoryModalOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-const IconsSidebar: React.FC<IconsSidebarProps> = ({
-  getShortcutDescription,
-  isNewDirectoryModalOpen,
-  setIsNewDirectoryModalOpen,
-}) => {
+const IconsSidebar: React.FC<IconsSidebarProps> = ({ getShortcutDescription }) => {
   const { sidebarShowing, setSidebarShowing } = useChatContext()
   const [sidebarWidth, setSidebarWidth] = useState<number>(40)
 
-  const { isSettingsModalOpen, setIsSettingsModalOpen } = useModalOpeners()
+  const { isSettingsModalOpen, setIsSettingsModalOpen, setIsNewDirectoryModalOpen } = useModalOpeners()
   const { createUntitledNote } = useContentContext()
 
   useEffect(() => {
@@ -136,7 +129,6 @@ const IconsSidebar: React.FC<IconsSidebarProps> = ({
           title={getShortcutDescription('open-settings-modal') || 'Settings'}
         />
       </button>
-      <NewDirectoryComponent isOpen={isNewDirectoryModalOpen} onClose={() => setIsNewDirectoryModalOpen(false)} />
     </div>
   )
 }
diff --git a/src/components/shortcuts/use-shortcut.ts b/src/components/shortcuts/use-shortcut.ts
index 9b9f3ceb..5b672fb0 100644
--- a/src/components/shortcuts/use-shortcut.ts
+++ b/src/components/shortcuts/use-shortcut.ts
@@ -3,10 +3,12 @@ import { useDebouncedCallback } from 'use-debounce'
 import { useChatContext } from '../../contexts/ChatContext'
 import { useContentContext } from '@/contexts/ContentContext'
 import { shortcuts } from './shortcutDefinitions'
+import { useModalOpeners } from '@/contexts/ModalContext'
 
 function useAppShortcuts() {
   const { setSidebarShowing, openNewChat } = useChatContext()
   const { createUntitledNote } = useContentContext()
+  const { setIsNewDirectoryModalOpen } = useModalOpeners()
 
   const handleShortcut = useCallback(
     (action: string) => {
@@ -15,7 +17,7 @@ function useAppShortcuts() {
           createUntitledNote()
           break
         case 'open-new-directory-modal':
-          window.dispatchEvent(new CustomEvent('open-new-directory-modal'))
+          setIsNewDirectoryModalOpen(true)
           break
         case 'open-search':
           setSidebarShowing('search')
@@ -31,7 +33,7 @@ function useAppShortcuts() {
           break
       }
     },
-    [createUntitledNote, setSidebarShowing, openNewChat],
+    [createUntitledNote, setSidebarShowing, openNewChat, setIsNewDirectoryModalOpen],
   )
 
   const handleShortcutRef = useRef(handleShortcut)
diff --git a/src/contexts/ModalContext.tsx b/src/contexts/ModalContext.tsx
index bebdcb9a..8cd5ac61 100644
--- a/src/contexts/ModalContext.tsx
+++ b/src/contexts/ModalContext.tsx
@@ -5,6 +5,8 @@ interface ModalProviderProps {
 }
 
 interface ModalOpenContextType {
+  isNewDirectoryModalOpen: boolean
+  setIsNewDirectoryModalOpen: (newDirectoryOpen: boolean) => void
   isSettingsModalOpen: boolean
   setIsSettingsModalOpen: (settingsOpen: boolean) => void
 }
@@ -20,14 +22,17 @@ export const useModalOpeners = (): ModalOpenContextType => {
 }
 
 export const ModalProvider: React.FC<ModalProviderProps> = ({ children }) => {
+  const [isNewDirectoryModalOpen, setIsNewDirectoryModalOpen] = useState(false)
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false)
 
   const modalOpenContextValue = useMemo(
     () => ({
+      isNewDirectoryModalOpen,
+      setIsNewDirectoryModalOpen,
       isSettingsModalOpen,
       setIsSettingsModalOpen,
     }),
-    [isSettingsModalOpen],
+    [isNewDirectoryModalOpen, isSettingsModalOpen],
   )
 
   return <ModalContext.Provider value={modalOpenContextValue}>{children}</ModalContext.Provider>