Code cleanup (#24)

DiceDB · Oct 2, 2024 · 4da16ab · 4da16ab
1 parent 34b88f5
commit 4da16ab
Show file tree

Hide file tree

Showing 21 changed files with 1,795 additions and 4,357 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "package.json": "^2.0.1",
+    "prettier": "^3.3.3",
     "react": "^18",
     "react-dom": "^18",
     "react-terminal-ui": "^1.3.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,9 @@
+// types
+import { ReactNode } from "react";
 import type { Metadata } from "next";
+
+// styles
 import "@/styles/globals.css";
-import React from "react";
 
 export const metadata: Metadata = {
   title: "DiceDB Playground",
@@ -14,7 +17,7 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   return (
     <html lang="en">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,11 +1,12 @@
+// components
 import Playground from "@/components/Playground/Playground";
 import Footer from "@/components/Footer/Footer"; // comment this to hide footer
 
 export default function Home() {
   return (
-      <main>
-        <Playground />
-        <Footer />
-      </main>
+    <main>
+      <Playground />
+      <Footer />
+    </main>
   );
-}
+}
diff --git a/src/components/CLI/CLI.tsx b/src/components/CLI/CLI.tsx
@@ -1,109 +1,22 @@
 // src/components/CLI/CLI.tsx
-
 "use client";
 
-import React, { useEffect, useRef, useState } from 'react';
-import { handleCommand } from '@/shared/utils/cliUtils';
-import blacklistedCommands from '@/shared/utils/blacklist'; // Assuming you added blacklist here
+// hooks
+import { useCli } from "./hooks/useCli";
 
 interface CliProps {
   decreaseCommandsLeft: () => void;
 }
 
 export default function Cli({ decreaseCommandsLeft }: CliProps) {
-  const [command, setCommand] = useState("");
-  const [tempCommand, setTempCommand] = useState("");
-  const [output, setOutput] = useState<string[]>([]);
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  //Initialise the command history with sessionStorage
-  const [commandHistory, setCommandHistory] = useState<string[]>([]);
-  const [historyIndex, setHistoryIndex] = useState<number>(-1);
-
-  const handleCommandWrapper = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      const commandName = command.trim().split(' ')[0].toUpperCase(); // Extract the command
-
-      if (blacklistedCommands.includes(commandName)) {
-        setOutput((prevOutput) => [
-          ...prevOutput,
-          `(error) ERR unknown command '${commandName}'`,
-        ]);
-      } else {
-        handleCommand({ command, setOutput }); // Execute if not blacklisted
-      }
-
-      setCommand(""); // Clear input
-      decreaseCommandsLeft(); // Call to update remaining commands
-    }
-  };
-
-
-  useEffect(() => {
-    if (terminalRef.current) {
-      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
-    }
-  }, [output]);
-
-  //Load initial command history if present
-  useEffect(() => {
-    const savedHistory = sessionStorage.getItem('terminalHistory');
-    const commandHistory = savedHistory ? JSON.parse(savedHistory) : [];
-    setCommandHistory(commandHistory);
-  }, [])
-
-  // Save to session storage whenever commandHistory changes
-  useEffect(() => {
-    sessionStorage.setItem('terminalHistory', JSON.stringify(commandHistory));
-  }, [commandHistory]);
-
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCommand(e.target.value);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleCommandWrapper(e);
-      if (command.trim().length !== 0) {
-        setCommandHistory(prev => [...prev, command]);
-        setHistoryIndex(-1);
-      }
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (historyIndex < commandHistory.length - 1) {
-        if (historyIndex === -1) {
-          // Save current input when starting to navigate history
-          setTempCommand(command);
-        }
-        const newIndex = historyIndex + 1;
-        setHistoryIndex(newIndex);
-        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
-      }
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      if (historyIndex > -1) {
-        const newIndex = historyIndex - 1;
-        setHistoryIndex(newIndex);
-        if (newIndex === -1) {
-          // Restore the saved input when reaching the bottom
-          setCommand(tempCommand);
-        } else {
-          setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
-        }
-      }
-    }
-  };
-
+  const {
+    handleInputChange,
+    handleKeyDown,
+    terminalRef,
+    inputRef,
+    output,
+    command,
+  } = useCli(decreaseCommandsLeft);
   return (
     <div
       ref={terminalRef}

diff --git a/src/components/CLI/hooks/useCli.tsx b/src/components/CLI/hooks/useCli.tsx
@@ -0,0 +1,113 @@
+// react
+import { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from "react";
+
+// utils
+import { handleCommand } from "@/shared/utils/cliUtils";
+import blacklistedCommands from "@/shared/utils/blacklist"; // Assuming you added blacklist here
+
+export const useCli = (decreaseCommandsLeft: () => void) => {
+  // states
+  const [command, setCommand] = useState("");
+  const [output, setOutput] = useState<string[]>([]);
+  const [tempCommand, setTempCommand] = useState("");
+  //Initialise the command history with sessionStorage
+  const [commandHistory, setCommandHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState<number>(-1);
+
+  // useRefs
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleCommandWrapper = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const commandName = command.trim().split(" ")[0].toUpperCase(); // Extract the command
+
+      if (blacklistedCommands.includes(commandName)) {
+        setOutput((prevOutput) => [
+          ...prevOutput,
+          `(error) ERR unknown command '${commandName}'`,
+        ]);
+      } else {
+        handleCommand({ command, setOutput }); // Execute if not blacklisted
+      }
+
+      setCommand(""); // Clear input
+      decreaseCommandsLeft(); // Call to update remaining commands
+    }
+  };
+
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  //Load initial command history if present
+  useEffect(() => {
+    const savedHistory = sessionStorage.getItem("terminalHistory");
+    const commandHistory = savedHistory ? JSON.parse(savedHistory) : [];
+    setCommandHistory(commandHistory);
+  }, []);
+
+  // Save to session storage whenever commandHistory changes
+  useEffect(() => {
+    sessionStorage.setItem("terminalHistory", JSON.stringify(commandHistory));
+  }, [commandHistory]);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setCommand(e.target.value);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleCommandWrapper(e);
+      if (command.trim().length !== 0) {
+        setCommandHistory((prev) => [...prev, command]);
+        setHistoryIndex(-1);
+      }
+    }
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (historyIndex < commandHistory.length - 1) {
+        if (historyIndex === -1) {
+          // Save current input when starting to navigate history
+          setTempCommand(command);
+        }
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+      }
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (historyIndex > -1) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        if (newIndex === -1) {
+          // Restore the saved input when reaching the bottom
+          setCommand(tempCommand);
+        } else {
+          setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+        }
+      }
+    }
+  };
+
+  return {
+    handleInputChange,
+    handleKeyDown,
+    terminalRef,
+    inputRef,
+    output,
+    setOutput,
+    command,
+    tempCommand,
+    setTempCommand,
+  };
+};
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+// icons
 import { Button } from "@mui/material";
 import { Twitter } from "@mui/icons-material";
 import GitHub from "@mui/icons-material/GitHub";

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,10 +1,8 @@
-'use client';
-
-
+"use client";
 export default function Header() {
   return (
     <header className="flex items-center mb-4">
       <h1 className="text-2xl font-bold">DiceDB PlayGround</h1>
     </header>
   );
-}
+}
diff --git a/src/components/Playground/Playground.tsx b/src/components/Playground/Playground.tsx
@@ -1,30 +1,20 @@
 "use client";
 
-import Image from "next/image";
-import React, { useState, useEffect } from "react";
-
-import { Dice1, Dice3, Dice5 } from "lucide-react";
-
+// Components
 import Cli from "@/components/CLI/CLI";
 import SearchBox from "@/components/Search/SearchBox";
-import { formatTime } from "@/shared/utils/commonUtils";
-
-export default function Playground() {
-  const [search, setSearch] = useState("");
-  const [timeLeft, setTimeLeft] = useState<number>(15 * 60);
-  const [commandsLeft, setCommandsLeft] = useState<number>(1000);
+import { Dice1, Dice3, Dice5 } from "lucide-react";
 
-  useEffect(() => {
-    const timer = setInterval(() => {
-      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
+// utils
+import { formatTime } from "@/shared/utils/commonUtils";
 
-    return () => clearInterval(timer);
-  }, []);
+// images and icons
+import Image from "next/image";
+import { usePlayground } from "./hooks/usePlayground";
 
-  const decreaseCommandsLeft = () => {
-    setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
-  };
+export default function Playground() {
+  const { decreaseCommandsLeft, search, timeLeft, commandsLeft, setSearch } =
+    usePlayground();
 
   return (
     <div className="container mx-auto flex flex-col flex-grow min-h-screen bg-white text-gray-900">

diff --git a/src/components/Playground/hooks/usePlayground.ts b/src/components/Playground/hooks/usePlayground.ts
@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+
+export const usePlayground = () => {
+  const [search, setSearch] = useState("");
+  const [timeLeft, setTimeLeft] = useState<number>(15 * 60);
+  const [commandsLeft, setCommandsLeft] = useState<number>(1000);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const decreaseCommandsLeft = () => {
+    setCommandsLeft((prev) => (prev > 0 ? prev - 1 : 0));
+  };
+
+  return {
+    decreaseCommandsLeft,
+    search,
+    timeLeft,
+    commandsLeft,
+    setSearch,
+    setTimeLeft,
+    setCommandsLeft,
+  };
+};