Delete unused code + adjust names

lib/ui/src/modules/ui/components/left_panel/stories.js

@@ -1,12 +1,9 @@
 import { Treebeard, decorators } from 'react-treebeard';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { isSelectedHierarchy } from '../../libs/hierarchy';
 import { baseFonts } from '../theme';
 
-const hierarchySeparatorColor = '#CCC';
-const hierarchySeparatorOffset = '15px';
-
+const namespaceSeparator = '@';
 const treeStyle = {
   tree: {
     base: {
@@ -43,11 +40,10 @@ const treeStyle = {
           position: 'absolute',
           top: '50%',
           left: '50%',
-          margin: '-7px 0 0 -7px',
-          height: '14px',
+          margin: '-10px 0 0 -4px',
         },
-        height: 14,
-        width: 14,
+        height: 10,
+        width: 10,
         arrow: {
           fill: '#9DA5AB',
           strokeWidth: 0,
@@ -116,64 +112,13 @@ const treeDecorators = {
   Header: HeaderDecorator,
 };
 
-const baseListItemStyle = {
-  display: 'block',
-  cursor: 'pointer',
-};
-
-const kindStyle = {
-  ...baseListItemStyle,
-  fontSize: 15,
-  padding: '5px 0px',
-};
-
-const nameSpaceStyle = {
-  ...kindStyle,
-  color: '#8aa4d1',
-};
-
-const storyStyle = {
-  ...baseListItemStyle,
-  fontSize: 13,
-  padding: '5px 0px',
-};
-
-// const listStyle = {
-//   ...baseFonts,
-// };
-
-const listStyleType = {
-  listStyleType: 'none',
-  paddingLeft: 0,
-  margin: 0,
-};
-
-const nestedListStyle = {
-  ...listStyleType,
-  paddingLeft: hierarchySeparatorOffset,
-  borderLeft: `1px solid ${hierarchySeparatorColor}`,
-};
-
-const separatorStyle = {
-  margin: 0,
-  padding: 0,
-  width: '5px',
-  position: 'absolute',
-  left: `-${hierarchySeparatorOffset}`,
-  top: '50%',
-  border: 'none',
-  borderTop: `1px solid ${hierarchySeparatorColor}`,
-};
-
 class Stories extends React.Component {
   constructor(...args) {
     super(...args);
-    this.renderKind = this.renderKind.bind(this);
-    this.renderStory = this.renderStory.bind(this);
     this.onToggle = this.onToggle.bind(this);
 
     this.state = {
-      nodes: {},
+      nodes: this.getSelectedNodes(),
     };
   }
 
@@ -188,180 +133,82 @@ class Stories extends React.Component {
       return;
     }
 
-    const { selectedHierarchy } = this.props;
-    let theRealToggle = toggled;
-
-    if (!toggled && isSelectedHierarchy(node.namespaces, selectedHierarchy)) {
-      theRealToggle = true;
-    }
-
     this.setState(prevState => ({
       nodes: {
         ...prevState.nodes,
-        [node.namespaces.join('@')]: theRealToggle,
+        [node.namespaces.join(namespaceSeparator)]: toggled,
       },
     }));
   }
 
+  getSelectedNodes() {
+    const { selectedHierarchy } = this.props;
+
+    return selectedHierarchy
+      .reduce((nodes, namespace) => {
+        if (!nodes.length) {
+          nodes.push(namespace);
+        } else {
+          const last = nodes[nodes.length - 1];
+          nodes.push(`${last}${namespaceSeparator}${namespace}`);
+        }
+
+        return nodes;
+      }, [])
+      .reduce((nodesMap, node) => ({ ...nodesMap, [node]: true }), {});
+  }
+
   fireOnKind(kind) {
     const { onSelectStory } = this.props;
     if (onSelectStory) onSelectStory(kind, null);
   }
 
-  fireOnStory(story) {
-    const { onSelectStory, selectedKind } = this.props;
-    if (onSelectStory) onSelectStory(selectedKind, story);
-  }
-
   fireOnKindAndStory(kind, story) {
     const { onSelectStory } = this.props;
     if (onSelectStory) onSelectStory(kind, story);
   }
 
-  createData(oldData) {
-    const { selectedStory, selectedKind, selectedHierarchy } = this.props;
-
-    const newData = {
-      namespaces: oldData.namespaces,
+  mapStoriesHierarchy(storiesHierarchy) {
+    const treeModel = {
+      namespaces: storiesHierarchy.namespaces,
+      toggled: this.state.nodes[storiesHierarchy.namespaces.join(namespaceSeparator)],
     };
 
-    if (oldData.isNamespace) {
-      newData.name = oldData.current || 'stories';
+    if (storiesHierarchy.isNamespace) {
+      treeModel.name = storiesHierarchy.current;
 
-      if (oldData.map.size > 0) {
-        newData.children = [];
-        newData.toggled =
-          this.state.nodes[newData.namespaces.join('@')] ||
-          isSelectedHierarchy(newData.namespaces, selectedHierarchy);
+      if (storiesHierarchy.map.size > 0) {
+        treeModel.children = [];
 
-        oldData.map.forEach(childItems => {
+        storiesHierarchy.map.forEach(childItems => {
           childItems.forEach(item => {
-            newData.children.push(this.createData(item));
+            treeModel.children.push(this.mapStoriesHierarchy(item));
           });
         });
       }
     } else {
-      newData.name = oldData.name;
-      newData.kind = oldData.kind;
-      newData.toggled =
-        this.state.nodes[newData.namespaces.join('@')] ||
-        isSelectedHierarchy(newData.namespaces, selectedHierarchy);
+      const { selectedStory, selectedKind } = this.props;
 
-      newData.children = oldData.stories.map(story => ({
-        kind: oldData.kind,
+      treeModel.name = storiesHierarchy.name;
+      treeModel.kind = storiesHierarchy.kind;
+
+      treeModel.children = storiesHierarchy.stories.map(story => ({
+        kind: storiesHierarchy.kind,
         story,
         name: story,
-        active: selectedStory === story && selectedKind === oldData.kind,
+        active: selectedStory === story && selectedKind === storiesHierarchy.kind,
       }));
     }
 
-    return newData;
-  }
-
-  renderMenuItem(item, style, onClick, displayName) {
-    return (
-      <a title={`Open ${item}`} style={style} onClick={onClick} role="menuitem" tabIndex="0">
-        {displayName}
-      </a>
-    );
-  }
-
-  renderMenuListItem(item, style, onClick, displayName) {
-    const listItemStyle = { position: 'relative' };
-
-    return (
-      <li key={item} style={listItemStyle}>
-        <hr style={separatorStyle} />
-        {this.renderMenuItem(item, style, onClick, displayName)}
-      </li>
-    );
-  }
-
-  renderStory(story) {
-    const { selectedStory } = this.props;
-    const style = { ...storyStyle };
-    const props = {
-      onClick: this.fireOnStory.bind(this, story),
-    };
-
-    if (story === selectedStory) {
-      style.fontWeight = 'bold';
-    }
-
-    return this.renderMenuListItem(story, style, props.onClick, story);
-  }
-
-  renderKind({ kind, stories, name }) {
-    const { selectedKind } = this.props;
-    const storyKindStyle = { ...kindStyle };
-    const onClick = this.fireOnKind.bind(this, kind);
-    const displayName = name || kind;
-
-    const children = [this.renderMenuListItem(kind, storyKindStyle, onClick, displayName)];
-
-    if (kind === selectedKind) {
-      storyKindStyle.fontWeight = 'bold';
-
-      children.push(
-        <li key={`${kind}_stories`}>
-          <ul style={nestedListStyle} role="menu">
-            {stories.map(this.renderStory)}
-          </ul>
-        </li>
-      );
-    }
-
-    return children;
-  }
-
-  renderHierarchy({ map }) {
-    const { selectedHierarchy } = this.props;
-    const children = [];
-
-    map.forEach((childItems, key) => {
-      childItems.forEach(value => {
-        const style = { ...nameSpaceStyle };
-        const onClick = this.fireOnKind.bind(this, value.firstKind);
-        const isSelected = isSelectedHierarchy(value.namespaces, selectedHierarchy);
-
-        if (isSelected) {
-          style.fontWeight = 'bold';
-        }
-
-        if (value.isNamespace) {
-          children.push(
-            <ul style={listStyleType} role="menu" key={`${value.current}_container`}>
-              {this.renderMenuListItem(value.current, style, onClick, key)}
-              {isSelected &&
-                <li key={`${value.current}_children`} style={nestedListStyle}>
-                  {this.renderHierarchy(value)}
-                </li>}
-            </ul>
-          );
-        } else {
-          children.push(
-            <ul style={listStyleType} role="menu" key={`${value.kind}_menu`}>
-              {this.renderKind(value)}
-            </ul>
-          );
-        }
-      });
-    });
-
-    return children;
+    return treeModel;
   }
 
   render() {
     const { storiesHierarchy } = this.props;
 
-    const data = this.createData(storiesHierarchy);
+    const data = this.mapStoriesHierarchy(storiesHierarchy);
     data.toggled = true;
-
-    // return (
-    //   <div style={listStyle}>
-    //     {this.renderHierarchy(storiesHierarchy)}
-    //   </div>
-    // );
+    data.name = 'stories';
 
     return (
       <Treebeard