Add save function

components/ProjectModal.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState, isValidElement } from "react";
 import { useRouter } from "next/router";
 import styles from "../styles/ProjectModal.module.css";
 import type { Project, Diary } from "../lib/content/types";
-import { useCommands } from "./contexts/CommandInterface";
+import { useCommands } from "../lib/commands/ContextProvider";
 import { generateContent, projectEmpty } from "../lib/content/generate";
 import { useModalFunctions } from "./contexts/ModalFunctions";
 import Spinner from "./Spinner";

components/REPL/REPLHistory.tsx

@@ -87,7 +87,7 @@ const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
     };
 
     return <div className={styles.container} onClick={focusInput}>
-        { history.map((value, idx) => <div className={styles.line} key={idx}>
+        { history.map((value, idx) => <div className={styles.line} key={`${idx}${value}`}>
                 {parseLine(value)}
             </div>)
         }

components/REPL/REPLInput.tsx

@@ -1,8 +1,8 @@
 import type { NextPage } from "next";
-import { MutableRefObject, useState, createRef } from "react";
+import { MutableRefObject, useState, createRef, useEffect } from "react";
 import { CommandInterface } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
-import { useCommands } from "../contexts/CommandInterface";
+import { useCommands } from "../../lib/commands/ContextProvider";
 import { useModalFunctions } from "../contexts/ModalFunctions";
 
 interface REPLInputParams {
@@ -19,9 +19,11 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
     const [inCmdHistory, setInCmdHistory] = useState<number>(-1);
     const [cmdHistory, setCmdHistory] = useState<string[]>([]);
     const [usrInputTmp, setUsrInputTmp] = useState<string>("");
-    const {cmdContext: cmdIf} = useCommands();
+    const {cmdContext: cmdIf, updateCallbacks} = useCommands();
     const { modalFunctions } = useModalFunctions();
 
+    updateCallbacks({ getCmdHistory: () => cmdHistory });
+
     const setInput = (inputRef: HTMLInputElement, input: string) => {
         const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
         if (!nativeSetter) return;
@@ -145,6 +147,16 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
         }
     };
 
+    useEffect(() => {
+        if (!window || !cmdIf) return;
+        const color = window.localStorage.getItem("color");
+        if(color) cmdIf.executeCommand(`color ${color}`);
+        const history = window.localStorage.getItem("history");
+        try {
+            if (history) setCmdHistory(JSON.parse(history));     
+        } catch {}
+    }, [cmdIf]);
+
     return <div className={styles.wrapperwrapper}>
         <span className={styles.inputstart}>$&nbsp;</span>
         <div className={styles.wrapper}>

components/REPL/index.tsx

@@ -2,7 +2,8 @@ import { MutableRefObject, useEffect, useRef, useState } from "react";
 import REPLInput from "./REPLInput";
 import REPLHistory from "./REPLHistory";
 import styles from "../../styles/REPL/REPLComplete.module.css";
-import type { NextPage, GetStaticProps } from "next";
+import type { NextPage } from "next";
+import { useCommands } from "../../lib/commands/ContextProvider";
 
 interface IREPLProps {
     inputRef: MutableRefObject<HTMLInputElement|null>;
@@ -12,6 +13,7 @@ interface IREPLProps {
 const REPL: NextPage<IREPLProps> = ({ inputRef, buildTime }) => {
     const [history, manipulateHistory] = useState<string[]>([`cer0 0S - Build ${buildTime}`]);
     const containerRef = useRef<HTMLDivElement>(null);
+
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
     const onClearHistory = () => manipulateHistory([]);
 

components/contexts/CommandInterface.tsx

@@ -1,19 +0,0 @@
-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;
-    setModalHTML?: (html: any) => 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 };