(FIX): Fixed the silly rendering of selected bug.

I need to rewrite this POS. The codebase sucks.

frontend/src/components/Directory.jsx

@@ -1,5 +1,5 @@
 import "../index.css"
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 function FileIcon() {
   return <>
@@ -32,8 +32,12 @@ function DirectoryIcon() {
  * @returns {{}}
  * @constructor
  */
-export default function Directory({ entry, showHidden, appendPath, toggleSelected, toggleEditing }) {
+export default function Directory({ entry, selected, showHidden, appendPath, toggleSelected, toggleEditing }) {
-  const [selected, setSelected] = useState(false);
+  const [_selected, setSelected] = useState(false);
+
+  useEffect(() => {
+    setSelected(selected);
+  }, [selected]);
 
   const handleClick = () => {
     if (entry.directory) {
@@ -45,7 +49,7 @@ export default function Directory({ entry, showHidden, appendPath, toggleSelecte
 
   const handleCheck = () => {
     toggleSelected(entry.name);
-    setSelected(!selected);
+    setSelected(!_selected);
   }
 
   // This is temporary, eventually I will have a real data model that stores
@@ -56,11 +60,11 @@ export default function Directory({ entry, showHidden, appendPath, toggleSelecte
   }
 
   return <>
-    <label className={`w-full hover:bg-gray-300 flex ${selected ? "bg-blue-300" : "bg-gray-100"}`}>
+    <label className={`w-full hover:bg-gray-300 flex ${_selected ? "bg-blue-300" : "bg-gray-100"}`}>
       <input
         className="mx-2 peer checked:bg-blue-300"
         type="checkbox"
-        checked={selected}
+        checked={_selected}
         onChange={handleCheck} />
       <div className="w-full flex bg-gray-100 peer-checked:bg-blue-300 hover:bg-gray-300 peer-hover:bg-gray-300">
         <button className="flex items-center" onClick={handleClick}>

frontend/src/components/DirectoryList.jsx

@@ -2,18 +2,21 @@ import Directory from "./Directory.jsx";
 
 /**
  * Display the directories in the current path.
- * @param diretories {string[]} Children of the path.
+ * @param diretories {string[]} - Children of the path.
- * @param showHidden {boolean} Display hidden items.
+ * @param showHidden {boolean} - Display hidden items.
- * @param appendPath {function(string)} Function to add a child to the path.
+ * @param appendPath {function(string)} - Function to add a child to the path.
- * @param toggleSelected {function(string)} Function to toggle selection status.
+ * @param toggleSelected {function(string)} - Function to toggle selection status.
+ * @param selected {string[]} - List of selected names.
  * @constructor
  */
-export default function DirectoryList({ dirs, showHidden, appendPath, toggleSelected, toggleEditing }) {
+export default function DirectoryList({ dirs, showHidden, appendPath, toggleSelected, toggleEditing, selected }) {
+
   return <>
     {dirs.map((dir, idx) =>
       <Directory
         key={idx}
         entry={dir}
+        selected={selected.includes(dir.name)}
         showHidden={showHidden}
         appendPath={appendPath}
         toggleSelected={toggleSelected}

frontend/src/pages/Dashboard.jsx

@@ -108,7 +108,10 @@ export default function Dashboard() {
   /** 
    * Show the creating modal.
    */
-  const createDir = () => setCreating(true);
+  const createDir = () => {
+    setSelected([]);
+    setCreating(true);
+  }
 
   /** 
    * Hide the creating modal.
@@ -442,8 +445,7 @@ export default function Dashboard() {
 
   /**
    * This will be where the magic happens, where the files are upload
-   * @param files {object[]}
+   * @param files {object[]} - List of files to upload.
-   * TODO: Actually do something here...
    */
   const upload = (files) => {
     const uploadFiles = async (_files) => {
@@ -524,6 +526,7 @@ export default function Dashboard() {
             appendPath={appendPath}
             toggleSelected={toggleSelected} // TODO: Rework the toggleSelected functionality
             toggleEditing={toggleEditing}
+            selected={selected}
           />
         </div>