add: fixed bugs and added pages for other ds's

terrencejihoonjung · Aug 13, 2024 · fcfc153 · fcfc153
1 parent 89c99a8
commit fcfc153
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 16 deletions.
diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx
@@ -1,15 +1,20 @@
 import { Routes, Route } from "react-router-dom";
-
 import Home from "./pages/Home";
 import DynamicArray from "./pages/DynamicArray";
 import Layout from "./Layout";
+import SinglyLinkedList from "./pages/SinglyLinkedList";
+import DoublyLinkedList from "./pages/DoublyLinkedList";
+import HashTable from "./pages/HashTable";
 
 function AppRouter() {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<Home />} />
         <Route path="dynamic-array" element={<DynamicArray />} />
+        <Route path="singly-linked-list" element={<SinglyLinkedList />} />
+        <Route path="doubly-linked-list" element={<DoublyLinkedList />} />
+        <Route path="hash-table" element={<HashTable />} />
       </Route>
     </Routes>
   );

diff --git a/src/components/DSPlaygrounds/DynamicArrayPG.tsx b/src/components/DSPlaygrounds/DynamicArrayPG.tsx
@@ -12,13 +12,10 @@ function DynamicArrayPG() {
 
   const [arrInput, setArrInput] = useState<string>(JSON.stringify(state.array)); // arr-input
   const [pushInput, setPushInput] = useState<string>(""); // push-input
-  const [resizingFactor, setResizingFactor] = useState<string>("2"); // resizing factor input
+  const [resizingFactor, setResizingFactor] = useState<number>(2); // resizing factor input
   const svgRef = useRef<SVGSVGElement>(null); // visualization state
 
   useEffect(() => {
-    // fill in any empty inputs
-    if (resizingFactor.length === 0) setResizingFactor("2");
-
     // update the visualization with the valid array state
     if (svgRef.current) {
       updateVisualization();
@@ -84,7 +81,7 @@ function DynamicArrayPG() {
       const newArray = [...prev.array, newValue];
       let newCapacity = prev.capacity;
       if (newArray.length > prev.capacity) {
-        newCapacity = Math.ceil(prev.capacity * parseFloat(resizingFactor));
+        newCapacity = Math.ceil(prev.capacity * resizingFactor);
       }
       return {
         array: newArray,
@@ -127,7 +124,7 @@ function DynamicArrayPG() {
     const parsedInput = parseFloat(input);
 
     if (input === "" || parsedInput > 1) {
-      setResizingFactor(input);
+      setResizingFactor(parsedInput);
     }
   };
 
@@ -171,21 +168,32 @@ function DynamicArrayPG() {
             <textarea
               value={arrInput}
               onChange={updateState}
-              className="textarea textarea-bordered textarea-md w-full max-w-md"
+              className="textarea textarea-bordered textarea-md w-1/2 text-p"
               placeholder="Custom Input"
             />
           </div>
 
           {/* Resizing Factor Input */}
           <div className="flex justify-between items-center">
             <h3 className="text-h3 font-bold">Resizing Factor</h3>
-            <input
-              type="text"
-              value={resizingFactor}
-              onChange={updateResizingFactor}
-              className="input input-bordered"
-              placeholder="Resizing Factor"
-            />
+
+            <div className="w-1/2">
+              <input
+                type="range"
+                min={2}
+                max={5}
+                value={resizingFactor}
+                onChange={updateResizingFactor}
+                className="range"
+                step="1"
+              />
+              <div className="flex w-full justify-between px-2 text-h6 font-bold">
+                <span>2</span>
+                <span>3</span>
+                <span>4</span>
+                <span>5</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/data/data-structures.ts b/src/data/data-structures.ts
@@ -24,7 +24,7 @@ export const dataStructures: DataStructureKV[] = [
   [
     "doubly-linked-list",
     {
-      name: "Double Linked List",
+      name: "Doubly Linked List",
       description: "Nodes linked bi-directionally for efficient traversal.",
       icon: "🔛",
       category: "Linked Lists",

diff --git a/src/pages/DoublyLinkedList.tsx b/src/pages/DoublyLinkedList.tsx
@@ -0,0 +1,19 @@
+import map from "../data/data-structures";
+import Heading from "../components/Heading";
+
+function DoublyLinkedList() {
+  const dynamicArray = map.get("doubly-linked-list")!;
+
+  return (
+    <div className="w-full min-h-screen p-8">
+      <div className="w-3/5 mx-auto">
+        {/* Heading */}
+        <Heading ds={dynamicArray} className="mb-8" />
+
+        {/* Playground */}
+      </div>
+    </div>
+  );
+}
+
+export default DoublyLinkedList;
diff --git a/src/pages/HashTable.tsx b/src/pages/HashTable.tsx
@@ -0,0 +1,19 @@
+import map from "../data/data-structures";
+import Heading from "../components/Heading";
+
+function HashTable() {
+  const dynamicArray = map.get("hash-table")!;
+
+  return (
+    <div className="w-full min-h-screen p-8">
+      <div className="w-3/5 mx-auto">
+        {/* Heading */}
+        <Heading ds={dynamicArray} className="mb-8" />
+
+        {/* Playground */}
+      </div>
+    </div>
+  );
+}
+
+export default HashTable;
diff --git a/src/pages/SinglyLinkedList.tsx b/src/pages/SinglyLinkedList.tsx
@@ -0,0 +1,19 @@
+import map from "../data/data-structures";
+import Heading from "../components/Heading";
+
+function SinglyLinkedList() {
+  const dynamicArray = map.get("singly-linked-list")!;
+
+  return (
+    <div className="w-full min-h-screen p-8">
+      <div className="w-3/5 mx-auto">
+        {/* Heading */}
+        <Heading ds={dynamicArray} className="mb-8" />
+
+        {/* Playground */}
+      </div>
+    </div>
+  );
+}
+
+export default SinglyLinkedList;