Merge pull request #221 from Saifullah-dev/220-fix/rename-action

fix(rename): prevent state mutation when renaming files

Author: Saifullah-dev

backend/Readme.md

@@ -1,6 +1,9 @@
 # 📂 File Manager Backend
 
-This backend provides a RESTful API for managing files and folders, intended to be used with a front-end file manager component. It allows users to perform various operations such as creating folders, uploading files, renaming, moving, copying, deleting, and downloading files. All APIs are documented using **Swagger**.
+This backend provides a RESTful API for managing files and folders, intended to be used with a
+front-end file manager component. It allows users to perform various operations such as creating
+folders, uploading files, renaming, moving, copying, deleting, and downloading files. All APIs are
+documented using **Swagger**.
 
 ## 🚀 Getting Started
 
@@ -40,24 +43,36 @@ Make sure you have the following installed:
    npm run devStart
    ```
 
+   - This uses **nodemon**, so it will automatically restart the server whenever you make code
+     changes.
+   - ⚠️ If you are testing the **file rename** functionality, use the following instead to avoid
+     rename permission related issues:
+
+     ```bash
+     npm run start
+     ```
+
    This will start the backend server on `http://localhost:3000`.
 
 ### ![swagger-icon](https://github.com/user-attachments/assets/9cb14fef-febc-4b52-873c-52dfc80e601e) API Documentation
 
-The API documentation is generated through **Swagger** and can be viewed [here](https://app.swaggerhub.com/apis-docs/SaifullahZubair/file-system_api/1.0.0).
+The API documentation is generated through **Swagger** and can be viewed
+[here](https://app.swaggerhub.com/apis-docs/SaifullahZubair/file-system_api/1.0.0).
 
 1. To Generate the Swagger docs:
 
    ```bash
    npm run genDocs
    ```
 
-2. Access the Swagger documentation:
-   Open [http://localhost:3000/api-docs/](http://localhost:3000/api-docs/) in your browser to see all available API endpoints and their details.
+2. Access the Swagger documentation: Open
+   [http://localhost:3000/api-docs/](http://localhost:3000/api-docs/) in your browser to see all
+   available API endpoints and their details.
 
 ### ![postman-icon](https://github.com/user-attachments/assets/b0bd6b21-056e-4934-a4d6-b8dc6f7fd6d5) Postman Collection
 
-You can download and use the Postman collection from [here](https://github.com/user-attachments/files/17149486/File.Management.API.postman_collection.json).
+You can download and use the Postman collection from
+[here](https://github.com/user-attachments/files/17149486/File.Management.API.postman_collection.json).
 
 ## 🔧 API Endpoints
 
@@ -72,7 +87,8 @@ The backend supports the following file system operations:
 - **✏️ Rename a File or Folder**: `/rename`
 - **🗑️ Delete File(s) or Folder(s)**: `/`
 
-Refer to the [Swagger Documentation](http://localhost:3000/api-docs/) for detailed request/response formats.
+Refer to the [Swagger Documentation](http://localhost:3000/api-docs/) for detailed request/response
+formats.
 
 ## 🗂️ Folder Structure
 
@@ -110,7 +126,8 @@ backend/
 
 ### 📁 Uploads and Folder Creation
 
-- All uploaded files and folders created through the API are placed in the `/public/uploads/` directory. Ensure this directory has the appropriate permissions set to allow file storage.
+- All uploaded files and folders created through the API are placed in the `/public/uploads/`
+  directory. Ensure this directory has the appropriate permissions set to allow file storage.
 
 ## ⚠️ Error Handling
 

frontend/src/FileManager/FileList/useFileList.jsx

@@ -208,12 +208,23 @@ const useFileList = (onRefresh, enableFilePreview, triggerAction, permissions, o
 
   const handleItemRenaming = () => {
     setCurrentPathFiles((prev) => {
-      if (prev[selectedFileIndexes.at(-1)]) {
-        prev[selectedFileIndexes.at(-1)].isEditing = true;
-      } else {
+      const lastFileIndex = selectedFileIndexes.at(-1);
+
+      if (!prev[lastFileIndex]) {
         triggerAction.close();
+        return prev;
       }
-      return prev;
+
+      return prev.map((file, index) => {
+        if (index === lastFileIndex) {
+          return {
+            ...file,
+            isEditing: true,
+          };
+        }
+
+        return file;
+      });
     });
 
     setSelectedFileIndexes([]);