We code better now

components/contexts/CommandInterface.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+import type { PropsWithChildren } from "react";
+import { CommandInterface } from "../../lib/commands";
+import type { Diary, Project, ContentList } from "../../lib/content/types";
+
+interface CommandInterfaceCallbacks {
+    setModalVisible?: (visible: boolean) => void; 
+    setModalContent?: (content: Project | Diary, selectedPage?: number) => void;
+}
+
+const commandInterface = new CommandInterface();
+const CommandContext = createContext(commandInterface);
+const setCommandCallbacks = (callbacks: CommandInterfaceCallbacks) => commandInterface.callbacks = {...commandInterface.callbacks, ...callbacks};
+const setContents = (content: ContentList) => commandInterface.content = content;
+const useCommands = () => ({cmdContext: useContext(CommandContext), updateCallbacks: setCommandCallbacks, setContents});
+const CommandsProvider = (props: PropsWithChildren<{}>) => <CommandContext.Provider value={commandInterface} {...props} />;
+
+export { CommandsProvider, useCommands };

components/contexts/ModalFunctions.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import type { PropsWithChildren } from "react";
+import type { Project, Diary } from "../../lib/content/types";
+
+interface ModalFunctions {
+    setVisible?: CallableFunction;
+    setContent?: (content: Project| Diary) => void;
+    setHtml?: (html: string) => void;
+}
+
+const modalFunctions: ModalFunctions = {};
+const ModalContext = createContext(modalFunctions);
+const updateCallbacks = (callbacks: ModalFunctions) => Object.assign(modalFunctions, callbacks);
+const useModalFunctions = () => ({modalFunctions: useContext(ModalContext), updateCallbacks});
+const ModalFunctionProvider = (props: PropsWithChildren<{}>) => <ModalContext.Provider value={modalFunctions} {...props} />;
+
+export { ModalFunctionProvider, useModalFunctions };