Better icon cache

page/src/filesystem-explorer.tsx

@@ -37,6 +37,7 @@ export interface FilesystemExplorerProps {
   runFile: (file: string) => void;
   resetFilesys: () => void;
   path: string[];
+  iconCache: Map<string, string | null>;
 }
 export interface FilesystemExplorerState {
   path: string[];
@@ -239,8 +240,6 @@ export class FilesystemExplorer extends React.Component<
   FilesystemExplorerProps,
   FilesystemExplorerState
 > {
-  private iconCache: Map<string, string | null>;
-
   constructor(props: FilesystemExplorerProps) {
     super(props);
 
@@ -248,8 +247,6 @@ export class FilesystemExplorer extends React.Component<
     this._uploadFiles = this._uploadFiles.bind(this);
     this._onElementSelect = this._onElementSelect.bind(this);
 
-    this.iconCache = new Map();
-
     this.state = {
       path: this.props.path,
       createFolder: false,
@@ -295,6 +292,9 @@ export class FilesystemExplorer extends React.Component<
 
     this.setState({ renameFile: "" });
 
+    this._removeFromCache(file);
+    this._removeFromCache(newFile);
+
     await this.props.filesystem.rename(oldPath, newPath);
     this.forceUpdate();
   }
@@ -346,6 +346,10 @@ export class FilesystemExplorer extends React.Component<
       };
     });
 
+    fileData.forEach((d) => {
+      this._removeFromCache(d.name);
+    });
+
     await this.props.filesystem.storeFiles(fileData);
     this.forceUpdate();
   }
@@ -489,6 +493,7 @@ export class FilesystemExplorer extends React.Component<
                   this.state.removeFile,
                 );
                 this.setState({ removeFile: "" });
+                this._removeFromCache(file);
                 this.props.filesystem
                   .unlink(file)
                   .then(() => this.forceUpdate());
@@ -533,6 +538,7 @@ export class FilesystemExplorer extends React.Component<
               className="fancy rounded-lg"
               onClick={() => {
                 this.setState({ resetFilesys: false });
+                this.props.iconCache.clear();
                 this.props.resetFilesys();
               }}
             >
@@ -587,6 +593,10 @@ export class FilesystemExplorer extends React.Component<
     );
   }
 
+  _removeFromCache(file: string) {
+    this.props.iconCache.delete(file);
+  }
+
   render() {
     const elements = getFolderElements(this.props.filesystem, this.state.path);
 
@@ -633,7 +643,7 @@ export class FilesystemExplorer extends React.Component<
                   getPeIcon(
                     this.props.filesystem,
                     makeFullPathWithState(this.state, e.name),
-                    this.iconCache,
+                    this.props.iconCache,
                   )
                 }
               />

page/src/playground.tsx

@@ -68,6 +68,7 @@ export class Playground extends React.Component<
   PlaygroundState
 > {
   private output: React.RefObject<Output | null>;
+  private iconCache: Map<string, string | null> = new Map();
 
   constructor(props: PlaygroundProps) {
     super(props);
@@ -282,6 +283,7 @@ export class Playground extends React.Component<
                   <DrawerFooter>
                     <FilesystemExplorer
                       filesystem={this.state.filesystem}
+                      iconCache={this.iconCache}
                       runFile={this.createEmulator}
                       resetFilesys={this.resetFilesys}
                       path={["c"]}