Fixes to renaming FSObjects

Author: devklick

src/components/BorderedApp/BorderedApp.tsx

@@ -74,7 +74,6 @@ function BorderedApp({
   function onClickClose() {
     winMan.closeWindow(type, id);
   }
-  console.log("Bordered app, hidden", String(hidden));
 
   return (
     <StyledBorderedApp

src/components/BottomBar/Launcher/Launcher.tsx

@@ -66,7 +66,6 @@ function Launcher({
     // we want to focus them. This means revealing them if they
     // are minimized and bring them to the top of the window stack.
     if (winMan.windowsOfTypeExist(windowType)) {
-      console.log("Attempting to focus windows");
       winMan.focusWindowsOfType(windowType);
       return;
     }
@@ -111,7 +110,6 @@ function Launcher({
   function getContextPosition(numberOfItems: number): Position {
     const rect = ref.current?.getBoundingClientRect();
     if (!rect) return { x: 0, y: 0 };
-    console.log(rect);
     return {
       x: rect.x,
       y: rect.y - 20 - numberOfItems * 30,

src/components/Button/Button.tsx

@@ -4,11 +4,17 @@ interface ButtonProps {
   name: string;
   onClick: () => void;
   width?: string | number;
+  disabled?: boolean;
 }
 
-function Button({ name, width = "100%", onClick }: ButtonProps) {
+function Button({
+  name,
+  width = "100%",
+  disabled = false,
+  onClick,
+}: ButtonProps) {
   return (
-    <StyledButton width={width} onClick={onClick}>
+    <StyledButton width={width} onClick={onClick} disabled={disabled}>
       {name}
     </StyledButton>
   );

src/hooks/useLocalFSWithHistory.ts

@@ -62,6 +62,7 @@ function useLocalFSWithHistory(currentPath: string) {
     getDirOrDefault,
     navForward,
     navBack,
+    getNameFromPath: fs.getLastFromPath,
   };
 }
 

src/programs/FileBrowser/DirectoryOrFile/DirectoryOrFile.tsx

@@ -85,7 +85,7 @@ function DirectoryOrFile({
         />
       )}
       {isFSDirectory(fsObject) ? (
-        <StyledFolderIcon fillColor={settings.iconColor} />
+        <StyledFolderIcon fill={settings.iconColor} />
       ) : null}
       <StyledItemName>{fsObject.name}</StyledItemName>
     </StyledItem>
@@ -155,7 +155,11 @@ function RenamePopup({
 
         <Row>
           <Button name="Cancel" onClick={close} />
-          <Button name="Confirm" onClick={handleClickConfirm} />
+          <Button
+            name="Confirm"
+            onClick={handleClickConfirm}
+            disabled={!!error}
+          />
         </Row>
       </Box>
     </AppPopup>

src/programs/FileBrowser/DirectoryOrFile/styles.ts

@@ -24,10 +24,10 @@ export const StyledItem = styled.div<{
 
 export const StyledItemName = styled.span``;
 
-export const StyledFolderIcon = styled(FolderIcon)<{ fillColor: string }>`
+export const StyledFolderIcon = styled(FolderIcon)<{ fill: string }>`
   height: 80%;
   width: 80%;
   path {
-    fill: ${(props) => props.fillColor};
+    fill: ${(props) => props.fill};
   }
 `;

src/programs/FileBrowser/FileBrowser.tsx

@@ -82,9 +82,9 @@ function FileBrowser({ path = defaultPath }: FileBrowserProps) {
 
       <AppSideBar
         items={fs.favorites.map((fav) => ({
-          title: fav.name,
-          isActive: fav.path === fs.currentDirectory.path,
-          onClick: () => fs.navToPath(fav.path),
+          title: fs.getNameFromPath(fav) ?? "",
+          isActive: fav === fs.currentDirectory.path,
+          onClick: () => fs.navToPath(fav),
         }))}
       />
 

src/programs/FileBrowser/MainContent/MainContent.tsx

@@ -134,7 +134,11 @@ function CreateFSObjectPopup({
 
         <Row>
           <Button name="Cancel" onClick={close} />
-          <Button name="Confirm" onClick={handleClickConfirm} />
+          <Button
+            name="Confirm"
+            onClick={handleClickConfirm}
+            disabled={!!error}
+          />
         </Row>
       </Box>
     </AppPopup>

src/stores/localFS.ts

@@ -20,53 +20,49 @@ export type FSObject = FSDirectory | FSFile;
 export type FSObjectType = FSObject["type"];
 
 const pathSeparator = "/";
+const rootDirPath = "/";
+const homeDirPath = rootDirPath + "home";
+const userDirPath = [homeDirPath, "user"].join(pathSeparator);
+const documentsDirPath = [userDirPath, "Documents"].join(pathSeparator);
+const picturesDirPath = [userDirPath, "Pictures"].join(pathSeparator);
+const downloadsDirPath = [userDirPath, "Downloads"].join(pathSeparator);
+const musicDirPath = [userDirPath, "Music"].join(pathSeparator);
+const videosDirPath = [userDirPath, "Videos"].join(pathSeparator);
 
 const documentsDir: FSDirectory = {
   name: "Documents",
-  get path() {
-    return [userDir.path, this.name].join(pathSeparator);
-  },
+  path: documentsDirPath,
   type: "directory",
   contents: {},
 };
 const picturesDir: FSDirectory = {
   name: "Pictures",
-  get path() {
-    return [userDir.path, this.name].join(pathSeparator);
-  },
+  path: picturesDirPath,
   type: "directory",
   contents: {},
 };
 const downloadsDir: FSDirectory = {
   name: "Downloads",
-  get path() {
-    return [userDir.path, this.name].join(pathSeparator);
-  },
+  path: downloadsDirPath,
   type: "directory",
   contents: {},
 };
 const musicDir: FSDirectory = {
   name: "Music",
-  get path() {
-    return [userDir.path, this.name].join(pathSeparator);
-  },
+  path: musicDirPath,
   type: "directory",
   contents: {},
 };
 const videosDir: FSDirectory = {
   name: "Videos",
-  get path() {
-    return [userDir.path, this.name].join(pathSeparator);
-  },
+  path: videosDirPath,
   type: "directory",
   contents: {},
 };
 
 const userDir: FSDirectory = {
   name: "user",
-  get path() {
-    return [homeDir.path, this.name].join(pathSeparator);
-  },
+  path: userDirPath,
   type: "directory",
   contents: {
     [documentsDir.name]: documentsDir,
@@ -79,9 +75,7 @@ const userDir: FSDirectory = {
 
 const homeDir: FSDirectory = {
   name: "home",
-  get path() {
-    return pathSeparator + this.name;
-  },
+  path: homeDirPath,
   type: "directory",
   contents: { [userDir.name]: userDir },
 };
@@ -113,7 +107,7 @@ export interface LocalFSState {
     parentDirectory: FSDirectory,
     contents?: string
   ) => FSFile | null;
-  favorites: Array<{ path: string; name: string }>;
+  favorites: Array<string>;
   validateFSObjectName: (name: string) => string | null;
   fsObjectNameIsAvailable: (name: string, directory: FSDirectory) => boolean;
   create: (
@@ -278,24 +272,39 @@ export const useLocalFS = create<LocalFSState>()(
         newName
       ) => {
         const oldName = fsObject.name;
+        const oldPath = fsObject.path;
+
+        // Update the FSObject to have the new name
         fsObject.name = newName;
         fsObject.path = [
           ...fsObject.path.split(pathSeparator).slice(0, -1),
           newName,
         ].join(pathSeparator);
-        parentDirectory.contents[newName] = fsObject;
+
+        // Delete the old one from the parent
         delete parentDirectory.contents[oldName];
 
-        set({ root: get().root });
+        // Update the parent so it knows about the rename
+        parentDirectory.contents[newName] = fsObject;
+
+        // If the FSObject is in the favorites, update that too.
+        const favorites = get().favorites;
+        const favIndex = favorites.findIndex((fav) => fav === oldPath);
+        if (favIndex) {
+          favorites[favIndex] = fsObject.path;
+        }
+
+        set({ root: get().root, favorites });
       };
       return {
         root: rootDir,
         favorites: [
-          { name: userDir.name, path: userDir.path },
-          { name: documentsDir.name, path: documentsDir.path },
-          { name: downloadsDir.name, path: downloadsDir.path },
-          { name: musicDir.name, path: musicDir.path },
-          { name: videosDir.name, path: videosDir.path },
+          userDir.path,
+          documentsDir.path,
+          downloadsDir.path,
+          musicDir.path,
+          picturesDir.path,
+          videosDir.path,
         ],
         create,
         createDirectory,

src/stores/windowManagerStore.ts

@@ -85,7 +85,6 @@ const useWindowManagerStore = create<WindowManagerStoreState>()((set, get) => ({
     const windowsOfType = windowsMap.get(windowType);
 
     // If no windows of this type exist, nothing to do
-    console.log(`${windowsOfType?.size} Windows of type ${windowType}`);
     if (!windowsOfType?.size) return;
 
     let highestZIndex = get().highestZIndex;