diff --git a/page/src/FilesystemExplorer.tsx b/page/src/FilesystemExplorer.tsx index 9255fbc9..4c8e8a9a 100644 --- a/page/src/FilesystemExplorer.tsx +++ b/page/src/FilesystemExplorer.tsx @@ -35,6 +35,7 @@ export interface FilesystemExplorerProps { export interface FilesystemExplorerState { path: string[]; createFolder: boolean; + resetFilesys: boolean; errorText: string; removeFile: string; renameFile: string; @@ -191,6 +192,7 @@ export class FilesystemExplorer extends React.Component< this.state = { path: this.props.path, createFolder: false, + resetFilesys: false, errorText: "", removeFile: "", renameFile: "", @@ -440,14 +442,56 @@ export class FilesystemExplorer extends React.Component< ); } + _renderResetDialog() { + return ( + this.setState({ resetFilesys: open })} + > + + + Reset filesystem + + Reset filesystem + + + + Are you sure you want to reset the filesystem? + + + { + this.setState({ resetFilesys: false }); + this.props.resetFilesys(); + }} + > + Ok + + { + this.setState({ resetFilesys: false }); + }} + > + Cancel + + + + + ); + } + _renderBreadcrumbElements() { const elements = generateBreadcrumbElements(this.state.path); return elements.map((e, index) => { if (index == this.state.path.length) { return ( - - {e.node} + + + {e.node} + ); } @@ -455,8 +499,10 @@ export class FilesystemExplorer extends React.Component< const navigate = () => this.setState({ path: e.targetPath }); return ( <> - - {e.node} + + + {e.node} + > @@ -481,8 +527,19 @@ export class FilesystemExplorer extends React.Component< {this._renderRenameDialog()} {this._renderErrorDialog()} {this._renderRemoveDialog()} + {this._renderResetDialog()} - {this._renderBreadCrumb()} + + {this._renderBreadCrumb()} + + this.setState({ resetFilesys: true })} + variant="destructive" + > + Reset + + + {({ getRootProps, getInputProps }) => ( diff --git a/page/src/Playground.tsx b/page/src/Playground.tsx index ab15d6ba..92df9544 100644 --- a/page/src/Playground.tsx +++ b/page/src/Playground.tsx @@ -46,9 +46,11 @@ export function Playground() { const fs = await initFilesys(); await fs.delete(); - setFilesystem(null); setFilesystemPromise(null); + setFilesystem(null); setDrawerOpen(false); + + output.current?.clear(); } function initFilesys() { @@ -122,7 +124,7 @@ export function Playground() { - Start + Start emulator?.stop()} > - Stop + Stop {isEmulatorPaused() ? ( <> - Resume + Resume > ) : ( <> - Pause + Pause > )} @@ -155,7 +157,7 @@ export function Playground() { - Settings + Settings diff --git a/page/src/filesystem.ts b/page/src/filesystem.ts index 34302912..357e3f31 100644 --- a/page/src/filesystem.ts +++ b/page/src/filesystem.ts @@ -61,6 +61,10 @@ function deleteDatabase(dbName: string) { }); } +function filterPseudoDir(e: string) { + return e != "." && e != ".."; +} + export class Filesystem { private idbfs: MainModule; @@ -93,7 +97,7 @@ export class Filesystem { } this.readDir(element) // - .filter((e) => e != "." && e != "..") + .filter(filterPseudoDir) .forEach((e) => { this._unlinkRecursive(`${element}/${e}`); }); @@ -136,8 +140,20 @@ export class Filesystem { return (this.stat(file).mode & 0x4000) != 0; } - delete() { - return deleteDatabase("/root"); + async delete() { + this.readDir("/root") // + .filter(filterPseudoDir) // + .forEach((e) => { + try { + this._unlinkRecursive(e); + } catch (_) {} + }); + + await this.sync(); + + try { + await deleteDatabase("/root"); + } catch (e) {} } }