From b9e4a4558c54775e54c06507c38026a4f7ce0387 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge@mailbox.tu-dresden.de>
Date: Sun, 26 Dec 2021 14:17:11 +0100
Subject: [PATCH] Add clear command (fix #4)

---
 components/REPL/REPLInput.tsx | 33 ++++++++++++++++++++++++---------
 components/REPL/index.tsx     |  3 ++-
 lib/commands/definitions.ts   |  8 +++++++-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx
index 2f175fb..a1f02a6 100644
--- a/components/REPL/REPLInput.tsx
+++ b/components/REPL/REPLInput.tsx
@@ -4,16 +4,23 @@ import { commandCompletion, executeCommand } from "../../lib/commands";
 import styles from "../../styles/REPL/REPLInput.module.css";
 
 interface REPLInputParams {
-    historyCallback: CallableFunction; 
+    historyCallback: CallableFunction;
+    historyClear: CallableFunction;
     inputRef: MutableRefObject<HTMLInputElement|undefined>;
 }
 
-const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
+const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, inputRef}) => {
     const typed = React.createRef<HTMLSpanElement>();
     const completion = React.createRef<HTMLSpanElement>();
     const [currentCmd, setCurrentCmd] = React.useState<string[]>([]);
     const [justTabbed, setJustTabbed] = React.useState<number>(0);
 
+    const clearInput = (inputRef: HTMLInputElement) => {
+        inputRef.value = "";
+        if(typed.current) typed.current.innerHTML = "";
+        if(completion.current) completion.current.innerHTML = "";
+    }
+
     const replinOnChange = (e: React.FormEvent<HTMLInputElement>) => {
         const input = (e.target as HTMLInputElement);
         const currentInput = input.value.toLowerCase();
@@ -50,22 +57,30 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, inputRef}) => {
 
         if (e.key === "Enter") {
             e.preventDefault();
-            const result = executeCommand((e.target as HTMLInputElement).value);
-            input.value = "";
-            if(typed.current) typed.current.innerHTML = "";
-            if(completion.current) completion.current.innerHTML = "";
+            const command = (e.target as HTMLInputElement).value
+            if (command === "clear") {
+                clearInput(input);
+                historyClear();
+                return false;
+            }
+            const result = executeCommand(command);
+            clearInput(input);
             historyCallback(result);
         }
 
         if (e.key === "d" && e.ctrlKey) {
             e.preventDefault();
             const result = executeCommand("exit");
-            input.value = "";
-            if(typed.current) typed.current.innerHTML = "";
-            if(completion.current) completion.current.innerHTML = "";
+            clearInput(input);
             historyCallback(result);
         }
 
+        if (e.key === "l" && e.ctrlKey) {
+            e.preventDefault();
+            clearInput(input);
+            historyClear();
+        }
+
         return false;
     };
 
diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx
index ac53d33..109fdba 100644
--- a/components/REPL/index.tsx
+++ b/components/REPL/index.tsx
@@ -6,6 +6,7 @@ const REPL = () => {
     const [history, manipulateHistory] = useState<string[]>([]);
     const inputRef = useRef<HTMLInputElement>();
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
+    const onClearHistory = () => manipulateHistory([]);
 
     const focusInput = () => {
         if (inputRef.current) inputRef.current.focus();
@@ -13,7 +14,7 @@ const REPL = () => {
 
     return (<>
         <REPLHistory history={history} inputRef={inputRef} />
-        <REPLInput historyCallback={onCommandExecuted} inputRef={inputRef} />
+        <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} />
         <div style={{flexGrow: 2}} onClick={focusInput}></div>
     </>);
 };
diff --git a/lib/commands/definitions.ts b/lib/commands/definitions.ts
index 3347834..38444d9 100644
--- a/lib/commands/definitions.ts
+++ b/lib/commands/definitions.ts
@@ -195,4 +195,10 @@ const exitCmd: Command = {
     }
 }
 
-export const commandList = [about, help, man, project, exitCmd];
\ No newline at end of file
+const clear: Command = {
+    name: "clear",
+    desc: "Clears the output on screen.",
+    execute: () => []
+}
+
+export const commandList = [about, help, man, project, exitCmd, clear];
\ No newline at end of file