delete and rename working as intended

src/components/Explorer.tsx

@@ -47,6 +47,9 @@ const CloseButton = styled(MyButton)`
   margin-right: -1.1rem;
   margin-left: -0.3rem;
 `;
+const ConfirmText = styled.p`
+  margin-bottom: 2rem;
+`;
 
 interface ExplorerProps {
   state: WorkplaceState;
@@ -98,13 +101,14 @@ export function Explorer({ state, ttl, logger }: ExplorerProps) {
       },
     });
   }
-  function onDeleteFile(path) {
+  function onDeleteFile() {
     dispatch({
       type: "deleteFile",
       payload: {
-        path,
+        path: fileToModify,
       },
     });
+    setFileToModify("");
   }
 
   const onCanister = async (selectedCanister: string, action: string) => {
@@ -229,7 +233,9 @@ export function Explorer({ state, ttl, logger }: ExplorerProps) {
           setFileToModify("");
         }}
       >
-        Are you sure you want to delete the file <code>{fileToModify}</code>?
+        <ConfirmText>
+          Are you sure you want to delete the file <code>{fileToModify}</code>?
+        </ConfirmText>
       </Confirm>
       <CategoryTitle>
         Files

src/components/FileModal.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { useState, useContext } from "react";
+import { useState, useContext, useEffect } from "react";
 import { Modal } from "./shared/Modal";
 import { Button } from "./shared/Button";
 
@@ -26,8 +26,21 @@ const ButtonContainer = styled.div`
   margin-top: 3rem;
 `;
 
+const MyButton = styled(Button)`
+  width: 14rem;
+`;
+
 export function FileModal({ isOpen, close, filename: initialFilename = "" }) {
   const [fileName, setFileName] = useState(initialFilename);
+
+  // Make sure local fileName stays in sync with whatever was passed in
+  useEffect(() => {
+    if (initialFilename !== fileName) {
+      setFileName(initialFilename);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialFilename]);
+
   const worker = useContext(WorkerContext);
   const dispatch = useContext(WorkplaceDispatchContext);
 
@@ -38,23 +51,18 @@ export function FileModal({ isOpen, close, filename: initialFilename = "" }) {
     await worker.Moc({ type: "save", file: name, content: "" });
     await dispatch({ type: "saveFile", payload: { path: name, contents: "" } });
     await dispatch({ type: "selectFile", payload: { path: name } });
-    await close();
+    close();
   }
 
   async function renameFile() {
     if (initialFilename !== fileName) {
-      await worker.Moc({
-        type: "renameFile",
-        file: initialFilename,
-        newName: name,
-      });
       await dispatch({
         type: "renameFile",
         payload: { path: initialFilename, newPath: name },
       });
       await dispatch({ type: "selectFile", payload: { path: name } });
     }
-    await close();
+    close();
   }
 
   return (
@@ -78,21 +86,21 @@ export function FileModal({ isOpen, close, filename: initialFilename = "" }) {
         <Field
           type="text"
           labelText="Filename"
-          value={fileName || initialFilename}
+          value={fileName}
           onChange={(e) => setFileName(e.target.value)}
           autoFocus
         />
         <ButtonContainer>
           {isRename ? (
-            <Button variant="primary" onClick={renameFile}>
+            <MyButton variant="primary" onClick={renameFile}>
               Rename
-            </Button>
+            </MyButton>
           ) : (
-            <Button variant="primary" onClick={addFile}>
+            <MyButton variant="primary" onClick={addFile}>
               Add
-            </Button>
+            </MyButton>
           )}
-          <Button onClick={close}>Cancel</Button>
+          <MyButton onClick={close}>Cancel</MyButton>
         </ButtonContainer>
       </ModalContainer>
     </Modal>

src/components/FolderStructure.tsx

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { ListButton } from "./shared/SelectList";
 import folderIcon from "../assets/images/icon-folder.svg";
 import fileIcon from "../assets/images/icon-file.svg";
+import pencilIcon from "../assets/images/icon-pencil.svg";
 import closeIcon from "../assets/images/icon-close.svg";
 
 interface FoldersJson {
@@ -162,7 +163,7 @@ function renderFolderStructure(options: RenderOptions) {
         <p>{fileName}</p>
         <FileFunctions>
           <FileFunctionButton onClick={(e) => onRenameFile(e, filePath)}>
-            <Icon src={fileIcon} alt="Rename file" title="Rename file" />
+            <Icon src={pencilIcon} alt="Rename file" title="Rename file" />
           </FileFunctionButton>
           <FileFunctionButton onClick={(e) => onDeleteFile(e, filePath)}>
             <Icon src={closeIcon} alt="Delete file" title="Delete file" />
@@ -182,5 +183,5 @@ type Folders = SharedProps & {
 export function FolderStructure({ filePaths, ...passProps }: Folders) {
   const folderStructure = structureFolders(filePaths);
 
-  return <>{renderFolderStructure({ folderStructure, ...passProps })}</>;
+  return renderFolderStructure({ folderStructure, ...passProps });
 }

src/contexts/WorkplaceState.ts

@@ -230,15 +230,29 @@ export const workplaceReducer = {
         const fileContents = files[action.payload.path];
         delete files[action.payload.path];
         files[action.payload.newPath] = fileContents;
-        return { ...state, files };
+        return {
+          ...state,
+          files,
+          selectedFile:
+            state.selectedFile === action.payload.path
+              ? action.payload.newPath
+              : state.selectedFile,
+        };
       }
       case "deleteFile": {
         const files = {
           ...state.files,
         };
 
         delete files[action.payload.path];
-        return { ...state, files };
+        return {
+          ...state,
+          files,
+          selectedFile:
+            state.selectedFile === action.payload.path
+              ? selectFirstFile(state.files)
+              : state.selectedFile,
+        };
       }
       case "deployWorkplace": {
         const name = action.payload.canister.name!;