Allow reseting file system and reloading

components/system/StartMenu/Sidebar/index.tsx

@@ -6,8 +6,10 @@ import {
 } from "components/system/StartMenu/Sidebar/SidebarIcons";
 import StyledSidebar from "components/system/StartMenu/Sidebar/StyledSidebar";
 import StyledSidebarButton from "components/system/StartMenu/Sidebar/StyledSidebarButton";
+import { useFileSystem } from "contexts/fileSystem";
 
 type SidebarButtonProps = {
+  action?: () => void;
   active?: boolean;
   heading?: boolean;
   icon: JSX.Element;
@@ -19,13 +21,14 @@ const topButtons = [
   { name: "All apps", icon: <AllApps />, active: true },
 ];
 
-const bottomButtons = [
-  { name: "Documents", icon: <Documents /> },
-  { name: "Power", icon: <Power /> },
-];
-
-const SidebarButton = ({ active, heading, icon, name }: SidebarButtonProps) => (
-  <StyledSidebarButton active={active}>
+const SidebarButton = ({
+  action,
+  active,
+  heading,
+  icon,
+  name,
+}: SidebarButtonProps) => (
+  <StyledSidebarButton active={active} onClick={action}>
     <figure>
       {icon}
       <figcaption>{heading ? <strong>{name}</strong> : name}</figcaption>
@@ -33,16 +36,28 @@ const SidebarButton = ({ active, heading, icon, name }: SidebarButtonProps) => (
   </StyledSidebarButton>
 );
 
-const Sidebar = (): JSX.Element => (
-  <StyledSidebar>
-    {Object.entries({ topButtons, bottomButtons }).map(([key, buttons]) => (
-      <ol key={key}>
-        {buttons.map((button) => (
-          <SidebarButton key={button.name} {...button} />
-        ))}
-      </ol>
-    ))}
-  </StyledSidebar>
-);
+const Sidebar = (): JSX.Element => {
+  const fs = useFileSystem();
+  const bottomButtons = [
+    { name: "Documents", icon: <Documents /> },
+    {
+      name: "Power",
+      icon: <Power />,
+      action: () => fs?.resetFs().finally(() => window.location.reload()),
+    },
+  ];
+
+  return (
+    <StyledSidebar>
+      {Object.entries({ topButtons, bottomButtons }).map(([key, buttons]) => (
+        <ol key={key}>
+          {buttons.map((button) => (
+            <SidebarButton key={button.name} {...button} />
+          ))}
+        </ol>
+      ))}
+    </StyledSidebar>
+  );
+};
 
 export default Sidebar;

contexts/fileSystem/useFileSystemContextState.ts

@@ -1,6 +1,9 @@
 import type * as IBrowserFS from "browserfs";
+import type HTTPRequest from "browserfs/dist/node/backend/HTTPRequest";
+import type IndexedDBFileSystem from "browserfs/dist/node/backend/IndexedDB";
 import type IsoFS from "browserfs/dist/node/backend/IsoFS";
 import type MountableFileSystem from "browserfs/dist/node/backend/MountableFileSystem";
+import type OverlayFS from "browserfs/dist/node/backend/OverlayFS";
 import type ZipFS from "browserfs/dist/node/backend/ZipFS";
 import type { BFSCallback } from "browserfs/dist/node/core/file_system";
 import type { FSModule } from "browserfs/dist/node/core/FS";
@@ -20,6 +23,7 @@ export type FileSystemContextState = {
   >;
   unMountFs: (url: string) => void;
   addFile: (callback: (name: string, buffer?: Buffer) => void) => void;
+  resetFs: () => Promise<void>;
 };
 
 const { BFSRequire, configure, FileSystem } = BrowserFS as typeof IBrowserFS;
@@ -55,14 +59,24 @@ const useFileSystemContextState = (): FileSystemContextState => {
       fileInput.click();
     }
   };
+  const resetFs = (): Promise<void> =>
+    new Promise((resolve, reject) => {
+      // eslint-disable-next-line no-underscore-dangle
+      const overlayFs = rootFs._getFs("/").fs as OverlayFS;
+      const overlayedFileSystems = overlayFs.getOverlayedFileSystems();
+      const readable = overlayedFileSystems.readable as HTTPRequest;
+      const writable = overlayedFileSystems.writable as IndexedDBFileSystem;
 
+      readable.empty();
+      writable.empty((apiError) => (apiError ? reject(apiError) : resolve()));
+    });
   useEffect(() => {
     if (!fs) {
       configure(FileSystemConfig, () => setFs(BFSRequire("fs")));
     }
   }, [fs]);
 
-  return { fs, mountFs, setFileInput, unMountFs, addFile };
+  return { fs, mountFs, setFileInput, unMountFs, addFile, resetFs };
 };
 
 export default useFileSystemContextState;