feat: add local storage

Author: 0l1v3rr

src/components/terminal/TerminalBody.tsx

@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from "uuid";
 import parse from "html-react-parser";
 import { useUsernameContext } from "../../context/UsernameContext";
 import { getCommandResponse, MOTD } from "../../lib/commands";
+import { useLocalStorage } from "../../hooks/useLocalStorage";
 
 interface TerminalBodyProps {}
 
@@ -15,7 +16,10 @@ const TerminalBody: FC<TerminalBodyProps> = () => {
 
   const [history, setHistory] = useState<History[]>([]);
   const [motdVisible, setMotdVisible] = useState(true);
-  const [commandHistory, setCommandHistory] = useState<string[]>([]);
+  const [commandHistory, setCommandHistory] = useLocalStorage<string[]>(
+    "commandHistory",
+    []
+  );
 
   const scrollToRef = useRef<HTMLDivElement>(null);
 

src/context/UsernameContext.tsx

@@ -3,8 +3,9 @@ import {
   FC,
   PropsWithChildren,
   useContext,
-  useState,
+  useEffect,
 } from "react";
+import { useLocalStorage } from "../hooks/useLocalStorage";
 
 interface UsernameContextType {
   username: string;
@@ -30,14 +31,17 @@ interface UsernameContextProviderProps extends PropsWithChildren {}
 const UsernameContextProvider: FC<UsernameContextProviderProps> = ({
   children,
 }) => {
-  const [username, setUsername] = useState("root");
+  const [username, setUsername] = useLocalStorage("username", "root");
 
   function handleUsernameChange(possibleUsername?: string | null) {
     const newUsername = possibleUsername || "root";
     setUsername(newUsername);
-    document.title = `${newUsername}@kali: ~`;
   }
 
+  useEffect(() => {
+    document.title = `${username}@kali: ~`;
+  }, [username]);
+
   return (
     <UsernameContext.Provider
       value={{ username, setUsername: handleUsernameChange }}

src/hooks/useLocalStorage.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch (error) {
+      console.error(error);
+      return defaultValue;
+    }
+  });
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [value, key]);
+
+  return [value, setValue] as const;
+}