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; + inputRef: MutableRefObject; } const REPLHistory: NextPage = ({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; + inputRef: MutableRefObject; 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; + inputRef: MutableRefObject; modalManipulation: { setModalVisible: CallableFunction; setModalProject: CallableFunction; @@ -13,7 +13,9 @@ interface IREPLProps { } const REPL: NextPage = ({ inputRef, modalManipulation }) => { - const [history, manipulateHistory] = useState([]); + const date = new Date(); + const [history, manipulateHistory] = useState([`cer0 0S - ${date.toLocaleDateString()}`]); + const containerRef = useRef(null); const onCommandExecuted = (result: string[]) => manipulateHistory(result.reverse().concat(history).slice(0, 1000)); const onClearHistory = () => manipulateHistory([]); @@ -21,7 +23,11 @@ const REPL: NextPage = ({ inputRef, modalManipulation }) => { if (inputRef.current) inputRef.current.focus(); }; - return (
+ useEffect(() => { + if(containerRef && containerRef.current) containerRef.current.scrollTo(0, containerRef.current.scrollHeight); + }, [history]); + + return (
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(); + const inputRef = useRef(null); const [modalVisible, setModalVisible] = useState(false); const [modalProject, setModalProject] = useState("");