Allow store to create files and directories

Author: devklick

package-lock.json

@@ -10,7 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/pako": "^2.0.1",
     "@types/uuid": "^9.0.4",
+    "base64-js": "^1.5.1",
+    "pako": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.67.0",

package.json

@@ -1,9 +1,7 @@
 import "./App.css";
 import Desktop from "./components/Desktop";
-import useConditionalContextMenu from "./hooks/useConditionalContextMenu";
 
 function App() {
-  useConditionalContextMenu();
   return (
     <div className="App">
       <Desktop />

src/App.tsx

@@ -11,8 +11,8 @@
     height: 20px;
     aspect-ratio: 1/1;
     width: auto;
-    // path {
-    //   fill: white;
-    // }
+    path {
+      fill: white;
+    }
   }
 }

src/components/TopBar/SystemTray/PowerMenu/PowerMenu.scss

@@ -0,0 +1,16 @@
+import pako from "pako";
+import base64js from "base64-js";
+
+function useCompression() {
+  function compress(data: string) {
+    return base64js.fromByteArray(pako.deflate(data));
+  }
+
+  function decompress(data: string) {
+    return pako.inflate(base64js.toByteArray(data), { to: "string" });
+  }
+
+  return { compress, decompress };
+}
+
+export default useCompression;

src/hooks/useCompression.ts

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 type EventHandlerMap =
   | { type: "click" | "contextmenu"; handler: (e: MouseEvent) => void }
   | { type: "keydown" | "keyup"; handler: (e: KeyboardEvent) => void };
 
-interface UseConditionalClickProps {
+interface UseConditionalClickProps<Element extends HTMLElement> {
   /**
    * Whether the `clickHandler` should be invoked on right click, left click,
    * or either of these.
@@ -21,34 +21,39 @@ interface UseConditionalClickProps {
   /**
    * The function to be invoked when a matching click is detected.
    */
-  clickHandler: () => void;
+  clickHandler: (event: MouseEvent) => void;
 
   /**
    * A reference to the element on which click events should be listened to.
    */
-  elementRef: React.RefObject<HTMLElement> | null;
+  elementRef?: React.RefObject<Element> | null;
 }
 
 /**
  * Allows either left click or right click to be handled only when the specified
  * modifier keys are also pressed.
  */
-function useConditionalClick({
+function useConditionalClick<Element extends HTMLElement>({
   mouseButton,
   modifierKeys,
   clickHandler,
   elementRef,
-}: UseConditionalClickProps) {
+}: UseConditionalClickProps<Element>) {
   const keysDown = useRef(new Set<string>());
 
-  const onClick = useCallback(() => {
-    if (modifierKeys) {
-      for (const key of modifierKeys) {
-        if (!keysDown.current.has(key)) return;
+  const defaultRef = useRef<Element>(null);
+
+  const onClick = useCallback(
+    (e: MouseEvent) => {
+      if (modifierKeys) {
+        for (const key of modifierKeys) {
+          if (!keysDown.current.has(key)) return;
+        }
       }
-    }
-    clickHandler();
-  }, [clickHandler, modifierKeys]);
+      clickHandler(e);
+    },
+    [clickHandler, modifierKeys]
+  );
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
@@ -64,7 +69,7 @@ function useConditionalClick({
   }, []);
 
   useEffect(() => {
-    const ref = elementRef?.current;
+    const ref = elementRef ? elementRef?.current : defaultRef?.current;
 
     if (!ref) return;
 
@@ -100,6 +105,10 @@ function useConditionalClick({
       });
     };
   }, [clickHandler, elementRef, mouseButton, onClick, onKeyDown, onKeyUp]);
+
+  return {
+    ref: elementRef ?? defaultRef,
+  };
 }
 
 export default useConditionalClick;

src/hooks/useConditionalClick.ts

@@ -1,11 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { ReactComponent as FolderIcon } from "../../assets/icons/folder-icon.svg";
 
-import { FSObject, isFSDirectory } from "../../stores/localFS";
+import useLocalFS, {
+  FSDirectory,
+  FSObject,
+  isFSDirectory,
+} from "../../stores/localFS";
 import useLocalFSWithHistory from "../../hooks/useLocalFSWithHistory";
 
 import "./FileBrowser.scss";
 import AppSideBar from "../../components/AppSideBar";
+import useCompression from "../../hooks/useCompression";
 const defaultPath = "/home/user";
 
 interface FileBrowserProps {
@@ -53,35 +58,74 @@ function TopBar({
 }
 
 interface MainContentProps {
-  dirContents: Record<string, FSObject>;
+  currentDirectory: FSDirectory;
   openFSObject: (fsObject: FSObject) => void;
 }
 
-function MainContent({ dirContents, openFSObject }: MainContentProps) {
+function MainContent({ currentDirectory, openFSObject }: MainContentProps) {
   const [selected, setSelected] = useState<string>("");
+  const fs = useLocalFS();
+  const { compress } = useCompression();
+
+  function handleRightClick(e: React.MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    //fs.createFile("test-create-file.txt", currentDirectory, compress("Hello world!"));
+  }
+
   return (
-    <div className="file-browser__main-content">
-      {Object.values<FSObject>(dirContents).map((fsObject) => (
-        <div
-          className={`file-browser__main-content__item ${
-            fsObject.path === selected ? "active" : ""
-          }`}
-          onDoubleClick={() => openFSObject(fsObject)}
-          onClick={() => setSelected(fsObject.path)}
-          key={fsObject.path}
-        >
-          {isFSDirectory(fsObject) ? (
-            <FolderIcon className="file-browser__main-content__item-icon" />
-          ) : null}
-          <span className="file-browser__main-content__item-name">
-            {fsObject.name}
-          </span>
-        </div>
+    <div
+      className="file-browser__main-content"
+      onContextMenu={handleRightClick}
+    >
+      {Object.values<FSObject>(currentDirectory.contents).map((fsObject) => (
+        <DirectoryOrFile
+          fsObject={fsObject}
+          openFSObject={openFSObject}
+          selected={selected === fsObject.path}
+          setSelected={setSelected}
+        />
       ))}
     </div>
   );
 }
 
+interface DirectoryOrFileProps {
+  fsObject: FSObject;
+  selected: boolean;
+  openFSObject: (fsObject: FSObject) => void;
+  setSelected: (path: string) => void;
+}
+
+function DirectoryOrFile({
+  fsObject,
+  openFSObject,
+  selected,
+  setSelected,
+}: DirectoryOrFileProps) {
+  function handleRightClick(event: React.MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  return (
+    <div
+      className={`file-browser__main-content__item ${selected ? "active" : ""}`}
+      onDoubleClick={() => openFSObject(fsObject)}
+      onClick={() => setSelected(fsObject.path)}
+      key={fsObject.path}
+      onContextMenu={handleRightClick}
+    >
+      {isFSDirectory(fsObject) ? (
+        <FolderIcon className="file-browser__main-content__item-icon" />
+      ) : null}
+      <span className="file-browser__main-content__item-name">
+        {fsObject.name}
+      </span>
+    </div>
+  );
+}
+
 function FileBrowser({ path = defaultPath }: FileBrowserProps) {
   const fs = useLocalFSWithHistory(path);
 
@@ -117,12 +161,12 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
         items={fs.favorites.map((fav) => ({
           title: fav.name,
           isActive: fav.path === fs.currentDirectory.path,
-          onClick: () => fs.navToObject(fav),
+          onClick: () => fs.navToPath(fav.path),
         }))}
       />
 
       <MainContent
-        dirContents={fs.currentDirectory.contents}
+        currentDirectory={fs.currentDirectory}
         openFSObject={fs.navToObject}
       />
       <div className="file-browser__bottom-bar"></div>