sample-ui-component-library 0.0.19-dev → 0.0.23-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.19-dev",
+  "version": "0.0.23-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -1,8 +1,4 @@
-import {
-    setDefaultCollapsed,
-    collapseTree,
-    flattenTree,
-} from "./helper";
+import { setDefaultCollapsed, collapseTree, flattenTree } from "./helper";
 
 //TODO: I should set a unique id for each reducer state and use it
 // for all the ids of the components to make them unique. I could
@@ -15,9 +11,7 @@ export const initialState = {
 };
 
 export const fileBrowserReducer = (state, action) => {
-
     switch (action.type) {
-
         case "ADD_FILE_TREE": {
             let flattenedTree = setDefaultCollapsed(flattenTree(action.payload));
             const collapsedTree = collapseTree(flattenedTree);
@@ -25,33 +19,34 @@ export const fileBrowserReducer = (state, action) => {
                 ...state,
                 tree: action.payload,
                 flattenedTree: flattenedTree,
-                collapsedTree: collapsedTree
-            }
+                collapsedTree: collapsedTree,
+            };
         }
 
         case "SELECT_NODE": {
-            const tree = [...state.flattenedTree];
-            let selectedNode;
-            tree.forEach((n) => {
-                if (n.uid === action.payload) {
-                    selectedNode = n;
-                    n.selected = true;
-                    n.collapsed = !n.collapsed;
-                } else {
-                    n.selected = false;
+            const tree = state.flattenedTree.map((n) => {
+                if (n.uid === action.payload.uid) {
+                    return {
+                        ...n,
+                        selected: true,
+                        collapsed: !n.collapsed,
+                    };
                 }
+                return {
+                    ...n,
+                    selected: false,
+                };
             });
-            const collapsedTree = collapseTree(tree);
             return {
                 ...state,
                 flattenedTree: tree,
-                collapsedTree: collapsedTree,
-                selectedNode: selectedNode
-            }
+                collapsedTree: collapseTree(tree),
+                selectedNode: action.payload,
+            };
         }
 
         case "RESET_STATE": {
             return initialState;
         }
     }
-}
+};

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -10,6 +10,7 @@ const INDENT_WIDTH = 20;
 const SELECTED_FILE_COLOR = "#00426b";
 
 import "./TreeNode.scss";
+import { useCallback } from "react";
 
 /**
  * Renders a single node in the file tree.
@@ -71,9 +72,9 @@ export const TreeNode = ({ id, node }) => {
         }
     }
 
-    const onSelectRow = () => {
-        selectNode(node.uid);
-    }
+    const onSelectRow = useCallback(() => {
+        selectNode(node);
+    }, [selectNode]);
 
     return (
         <div className="file-node-row" ref={setNodeRef} {...listeners} {...attributes}