Add save function

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([]);