From 5485bf3bfad66e068aa2537b33df28b8174325c3 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel.kluge.98@gmx.de>
Date: Sat, 5 Feb 2022 00:47:36 +0100
Subject: [PATCH] Scroll.

---
 components/REPL/REPLHistory.tsx |  4 ++--
 components/REPL/REPLInput.tsx   |  2 +-
 components/REPL/index.tsx       | 14 ++++++++++----
 pages/index.tsx                 |  2 +-
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/REPL/REPLHistory.tsx b/components/REPL/REPLHistory.tsx
index 4d4b66a..9e16f26 100644
--- a/components/REPL/REPLHistory.tsx
+++ b/components/REPL/REPLHistory.tsx
@@ -1,11 +1,11 @@
 import { NextPage } from "next";
 import Link from "next/link";
-import { BaseSyntheticEvent, MutableRefObject } from "react";
+import { BaseSyntheticEvent, MutableRefObject, useEffect, useRef } from "react";
 import styles from "../../styles/REPL/REPLHistory.module.css";
 
 interface REPLHistoryParams {
     history: string[];
-    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    inputRef: MutableRefObject<HTMLInputElement|null>;
 }
 
 const REPLHistory: NextPage<REPLHistoryParams> = ({history, inputRef}) => {
diff --git a/components/REPL/REPLInput.tsx b/components/REPL/REPLInput.tsx
index 540a9a2..56bf9c9 100644
--- a/components/REPL/REPLInput.tsx
+++ b/components/REPL/REPLInput.tsx
@@ -8,7 +8,7 @@ import { Project } from "../../lib/projects/types";
 interface REPLInputParams {
     historyCallback: CallableFunction;
     historyClear: CallableFunction;
-    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    inputRef: MutableRefObject<HTMLInputElement|null>;
     modalManipulation: {
         setModalVisible: CallableFunction;
         setModalProject: CallableFunction;
diff --git a/components/REPL/index.tsx b/components/REPL/index.tsx
index 73e4731..efb2af9 100644
--- a/components/REPL/index.tsx
+++ b/components/REPL/index.tsx
@@ -1,11 +1,11 @@
-import { MutableRefObject, useRef, useState } from "react";
+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 } from "next";
 
 interface IREPLProps {
-    inputRef: MutableRefObject<HTMLInputElement|undefined>;
+    inputRef: MutableRefObject<HTMLInputElement|null>;
     modalManipulation: {
         setModalVisible: CallableFunction;
         setModalProject: CallableFunction;
@@ -13,7 +13,9 @@ interface IREPLProps {
 }
 
 const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
-    const [history, manipulateHistory] = useState<string[]>([]);
+    const date = new Date();
+    const [history, manipulateHistory] = useState<string[]>([`cer0 0S - ${date.toLocaleDateString()}`]);
+    const containerRef = useRef<HTMLDivElement>(null);
     const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000));
     const onClearHistory = () => manipulateHistory([]);
 
@@ -21,7 +23,11 @@ const REPL: NextPage<IREPLProps> = ({ inputRef, modalManipulation }) => {
         if (inputRef.current) inputRef.current.focus();
     };
 
-    return (<div className={styles.container}>
+    useEffect(() => {
+        if(containerRef && containerRef.current) containerRef.current.scrollTo(0, containerRef.current.scrollHeight);
+    }, [history]);
+
+    return (<div className={styles.container} ref={containerRef}>
         <REPLHistory history={history} inputRef={inputRef} />
         <REPLInput historyCallback={onCommandExecuted} historyClear={onClearHistory} inputRef={inputRef} modalManipulation={modalManipulation} />
         <div style={{flexGrow: 2}} onClick={focusInput}></div>
diff --git a/pages/index.tsx b/pages/index.tsx
index ffcaf2b..cb534c5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ import REPL from "../components/REPL";
 import styles from "../styles/Home.module.css";
 
 const Home: NextPage = () => {
-    const inputRef = useRef<HTMLInputElement>();
+    const inputRef = useRef<HTMLInputElement>(null);
     const [modalVisible, setModalVisible] = useState<boolean>(false);
     const [modalProject, setModalProject] = useState<string>("");