-
+ {rootId ? : null}
Your content will be here
diff --git a/src/Repository/Slices/explorerSlice.js b/src/Repository/Slices/explorerSlice.js
new file mode 100644
index 0000000..e9ca841
--- /dev/null
+++ b/src/Repository/Slices/explorerSlice.js
@@ -0,0 +1,102 @@
+import { createSlice } from "@reduxjs/toolkit";
+import folderData from "../../data/folderData";
+
+const generateId = () =>
+ typeof crypto !== "undefined" && crypto.randomUUID
+ ? crypto.randomUUID()
+ : String(Date.now());
+
+function normalizeTree(node) {
+ const byId = {};
+ function walk(n) {
+ const id = n.id ?? generateId();
+ const children = Array.isArray(n.items) ? n.items : [];
+ const childIds = children.map((c) => {
+ const childId = walk(c);
+ return childId;
+ });
+ byId[id] = {
+ id,
+ name: n.name,
+ isFolder: !!n.isFolder,
+ childrenIds: childIds,
+ };
+ return id;
+ }
+ const rootId = walk(folderData); // seed from existing data
+ return { byId, rootId };
+}
+
+const initial = normalizeTree(folderData);
+
+const explorerSlice = createSlice({
+ name: "explorer",
+ initialState: {
+ nodes: { byId: initial.byId },
+ rootId: initial.rootId,
+ },
+ reducers: {
+ insertNode: {
+ prepare: (parentId, name, isFolder) => ({
+ payload: { parentId, name: String(name).trim(), isFolder: !!isFolder },
+ }),
+ reducer: (state, action) => {
+ const { parentId, name, isFolder } = action.payload;
+ if (!name) return;
+ const parent = state.nodes.byId[parentId];
+ if (!parent || !parent.isFolder) return;
+
+ const id = generateId();
+ state.nodes.byId[id] = {
+ id,
+ name,
+ isFolder,
+ childrenIds: [],
+ };
+ parent.childrenIds.unshift(id);
+ },
+ },
+ renameNode(state, action) {
+ const { id, name } = action.payload;
+ const node = state.nodes.byId[id];
+ if (node && String(name).trim()) {
+ node.name = String(name).trim();
+ }
+ },
+ deleteNode(state, action) {
+ const { id } = action.payload;
+ if (!state.nodes.byId[id]) return;
+
+ // remove id from any parent list (O(n) but simple)
+ Object.values(state.nodes.byId).forEach((n) => {
+ if (n.childrenIds?.length) {
+ n.childrenIds = n.childrenIds.filter((cid) => cid !== id);
+ }
+ });
+
+ function removeRecursively(nodeId) {
+ const node = state.nodes.byId[nodeId];
+ if (!node) return;
+ if (node.childrenIds?.length) {
+ node.childrenIds.forEach(removeRecursively);
+ }
+ delete state.nodes.byId[nodeId];
+ }
+ // if deleting root, just clear everything but keep empty root
+ if (id === state.rootId) {
+ const root = state.nodes.byId[state.rootId];
+ root.childrenIds.forEach(removeRecursively);
+ root.childrenIds = [];
+ return;
+ }
+ removeRecursively(id);
+ },
+ },
+});
+
+export const { insertNode, renameNode, deleteNode } = explorerSlice.actions;
+
+export const selectRootId = (state) => state.explorer.rootId;
+export const selectNodeById = (state, id) => state.explorer.nodes.byId[id];
+
+export default explorerSlice.reducer;
\ No newline at end of file
diff --git a/src/Repository/Store.js b/src/Repository/Store.js
new file mode 100644
index 0000000..fc3d172
--- /dev/null
+++ b/src/Repository/Store.js
@@ -0,0 +1,37 @@
+import { configureStore } from "@reduxjs/toolkit";
+import explorerReducer from "./Slices/explorerSlice";
+
+const LS_KEY = "explorerState";
+
+function loadState() {
+ try {
+ const raw = localStorage.getItem(LS_KEY);
+ return raw ? JSON.parse(raw) : undefined;
+ } catch {
+ return undefined;
+ }
+}
+
+function saveState(state) {
+ try {
+ localStorage.setItem(LS_KEY, JSON.stringify(state));
+ } catch {
+ // ignore
+ }
+}
+
+const preloadedState = loadState();
+
+export const store = configureStore({
+ reducer: {
+ explorer: explorerReducer,
+ },
+ preloadedState,
+});
+
+store.subscribe(() => {
+ const state = store.getState();
+ saveState({
+ explorer: state.explorer,
+ });
+});
\ No newline at end of file
diff --git a/src/components/Folder.jsx b/src/components/Folder.jsx
index caf8dd5..0e2e396 100644
--- a/src/components/Folder.jsx
+++ b/src/components/Folder.jsx
@@ -1,4 +1,5 @@
-import { useState } from "react";
+import { useState, memo, useCallback } from "react";
+import { useDispatch, useSelector } from "react-redux";
import {
VscChevronRight,
VscChevronDown,
@@ -9,16 +10,17 @@ import {
VscEdit,
VscTrash,
} from "react-icons/vsc";
+import {
+ insertNode,
+ deleteNode,
+ renameNode,
+ selectNodeById,
+} from "../Repository/Slices/explorerSlice";
-const Folder = ({
- handleInsertNode,
- handleDeleteNode,
- handleUpdateFolder,
- explorerData,
-}) => {
- const [nodeName, setNodeName] = useState(
- explorerData?.name ? explorerData.name : ""
- );
+const Folder = ({ nodeId }) => {
+ const dispatch = useDispatch();
+ const explorerData = useSelector((s) => selectNodeById(s, nodeId));
+ const [nodeName, setNodeName] = useState(explorerData?.name ?? "");
const [expand, setExpand] = useState(false);
const [showInput, setShowInput] = useState({
visible: false,
@@ -29,47 +31,46 @@ const Folder = ({
isFolder: null,
});
- const handleNewFolderButton = (e, isFolder) => {
+ if (!explorerData) return null;
+
+ const handleNewFolderButton = useCallback((e, isFolder) => {
e.stopPropagation();
setExpand(true);
setShowInput({
visible: true,
isFolder,
});
- };
+ }, []);
- const handleUpdateFolderButton = (e, isFolder, nodeValue) => {
+ const handleUpdateFolderButton = useCallback((e, isFolder, nodeValue) => {
setNodeName(nodeValue);
e.stopPropagation();
setUpdateInput({
visible: true,
isFolder,
});
- };
+ }, []);
- const handleDeleteFolder = (e, isFolder) => {
+ const handleDeleteFolder = useCallback((e) => {
e.stopPropagation();
- handleDeleteNode(explorerData.id);
- };
- const onAdd = (e) => {
- if (e.keyCode === 13 && e.target.value) {
- // Lets add logic for add folder
- handleInsertNode(explorerData.id, e.target.value, showInput.isFolder);
+ dispatch(deleteNode({ id: explorerData.id }));
+ }, [dispatch, explorerData?.id]);
+ const onAdd = useCallback((e) => {
+ if (e.key === "Enter" && e.target.value.trim()) {
+ dispatch(insertNode(explorerData.id, e.target.value.trim(), !!showInput.isFolder));
setShowInput({ ...showInput, visible: false });
}
- };
- const onUpdate = (e) => {
- if (e.keyCode === 13 && e.target.value) {
- // Lets add logic for update folder
- handleUpdateFolder(explorerData.id, e.target.value, true);
+ }, [dispatch, explorerData?.id, showInput]);
+ const onUpdate = useCallback((e) => {
+ if (e.key === "Enter" && e.target.value.trim()) {
+ dispatch(renameNode({ id: explorerData.id, name: e.target.value.trim() }));
setUpdateInput({ ...updateInput, visible: false });
}
- };
+ }, [dispatch, explorerData?.id, updateInput]);
const handleChange = (event) => {
setNodeName(event.target.value);
};
if (explorerData.isFolder) {
- console.log("nodeName", nodeName);
return (
)}
- {explorerData.items.map((item, index) => {
+ {explorerData.childrenIds.map((childId) => {
return (
-
+
);
})}
@@ -178,4 +173,4 @@ const Folder = ({
}
};
-export default Folder;
+export default memo(Folder);
diff --git a/src/hooks/use-traverse-tree.js b/src/hooks/use-traverse-tree.js
index 3cdb5de..aa561e0 100644
--- a/src/hooks/use-traverse-tree.js
+++ b/src/hooks/use-traverse-tree.js
@@ -1,21 +1,23 @@
const useTraverseTree = () => {
function insertNode(tree, folderId, itemName, isFolder) {
if (tree.id === folderId && tree.isFolder) {
- tree.items.unshift({
- id: new Date().getTime(),
- name: itemName,
- isFolder,
- items: [],
- });
- return tree;
+ const newChild = {
+ id: Date.now(),
+ name: itemName,
+ isFolder,
+ items: []
+ };
+
+ return {...tree, items: [newChild, ...(tree.items || [] )]};
}
- tree.items.map((obj) => {
- let res = insertNode(obj, folderId, itemName, isFolder);
- if (res) {
- return res;
- }
- });
+ if(!tree.items) return tree;
+
+ return {
+ ...tree,
+ items: tree.items.map((child) =>
+ insertNode(child, folderId, itemName, isFolder)
+ )};
}
function deleteNode(tree, folderId) {
// base case: found the node to be deleted
diff --git a/src/main.jsx b/src/main.jsx
index 54b39dd..a86cf6f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,9 +2,13 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
+import { Provider } from 'react-redux'
+import { store } from './Repository/Store.js'
ReactDOM.createRoot(document.getElementById('root')).render(