[Fix] unbundling aid tree map navigation & drop down bar ordering #488

Author: edwinmp

src/components/molecules/UnbundlingAid/UnbundlingAidToolBar/index.tsx

@@ -7,6 +7,7 @@ import { KeyValue, Selections } from '../types';
 import { DragDropContext, Draggable, DropResult, Droppable } from 'react-beautiful-dnd';
 import { Intro } from '../../../atoms/Intro';
 import { howTo } from '../../../../utils/howTo';
+import { SelectionKey } from '../UnbundlingTreemap';
 
 export interface Props {
   aidType: string;
@@ -17,12 +18,12 @@ export interface Props {
   position?: number;
   values: KeyValue[];
   textAlign?: 'left' | 'right'| 'center';
-  onMove: (key: string) => void;
+  onMove: (key: string, keys: SelectionKey[]) => void;
   onChange: (key: string) => (value: string) => void;
 }
 
 export interface State {
-  keys: string[];
+  keys: SelectionKey[];
 }
 
 const ToolBarContainer: GlamorousComponent<any, any> = glamorous.div<{compact?: boolean}>(
@@ -46,7 +47,7 @@ export default class ToolBar extends React.Component<Props, State> {
     return obj ? obj.value : 'All';
   }
 
-  public static reorder(list: string[], startIndex: number, endIndex: number): string[] {
+  public static reorder(list: SelectionKey[], startIndex: number, endIndex: number): SelectionKey[] {
     const [ removed ] = list.splice(startIndex, 1); // gets a hold of the item
     list.splice(endIndex, 0, removed); // adds item in new place
 
@@ -66,7 +67,7 @@ export default class ToolBar extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    const keys = Object.keys(this.props.toolBarOptions).filter(key => key !== 'years');
+    const keys = Object.keys(this.props.toolBarOptions).filter(key => key !== 'years') as SelectionKey[];
     this.state = { keys };
     this.onDragEnd = this.onDragEnd.bind(this);
     this.captureVisualSentence = this.captureVisualSentence.bind(this);
@@ -75,12 +76,12 @@ export default class ToolBar extends React.Component<Props, State> {
   public onDragEnd(result: DropResult) {
     // dropped outside the list
     if (!result.destination) { return; }
-    const keys = ToolBar.reorder(
+    const keys: SelectionKey[] = ToolBar.reorder(
       this.state.keys,
       result.source.index,
       result.destination.index
     );
-    this.props.onMove(result.draggableId);
+    this.props.onMove(result.draggableId, keys);
     this.setState({
       keys
     });

src/components/molecules/UnbundlingAid/UnbundlingTreemap/index.tsx

@@ -23,7 +23,7 @@ export interface Props {
   refetch: (variables: object) => any;
 }
 
-type SelectionKey = 'to' | 'from' | 'sectors' | 'channels' | 'forms' | 'years';
+export type SelectionKey = 'to' | 'from' | 'sectors' | 'channels' | 'forms' | 'years';
 
 export interface State {
   position: number;
@@ -88,28 +88,28 @@ class UnbundlingTreemap extends React.Component<Props, State> {
     return value ? [ ...valuesItems, { key, value } ] : valuesItems;
   }
 
-  public static getActiveOption = (position: number): string =>
-    Object.keys(UnbundlingTreemap.groupers)[position]
+  // public static getActiveOption = (position: number): string =>
+  //   Object.keys(UnbundlingTreemap.groupers)[position]
 
   constructor(props: Props) {
     super(props);
 
-    const position = 1;
-    const keys = Object.keys(props.selections) as SelectionKey[];
+    const position = 0;
+    const keys = Object.keys(props.selections).filter(key => key !== 'years') as SelectionKey[];
     const values = [ { key: 'years', value: props.startYear.toString() } ];
     this.state = { position, keys, values, active: 'to' };
     this.history.push(this.state);
   }
 
   public onZoomIn = ({ id, color }: Selected) => {
-    const position = this.state.position <= 1 ? 1 : this.state.position;
+    const position = this.state.position;
 
-    if ((position + 1) < Object.keys(UnbundlingTreemap.groupers).length) {
+    if ((position + 1) < this.state.keys.length) {
       // const newKey = this.state.keys[position + 1];
       // TODO: check if key already exists
-      const currentActive = UnbundlingTreemap.getActiveOption(position);
+      const currentActive = this.state.keys[position];
       const values = UnbundlingTreemap.addNewValue({ key: currentActive, value: id }, this.state.values);
-      const active = UnbundlingTreemap.getActiveOption(position + 1) as SelectionKey;
+      const active = this.state.keys[position + 1] as SelectionKey;
       this.setState({ position: position + 1, values, dimmerColor: color, active });
       this.history.push(this.state);
       this.fetch(active, values);
@@ -129,19 +129,23 @@ class UnbundlingTreemap extends React.Component<Props, State> {
   public updateValue = (key: string) => (value: string) => {
     // making sure we dont have duplicates
     const values = UnbundlingTreemap.addNewValue({ key, value }, this.state.values);
-    const active = UnbundlingTreemap.getActiveOption(this.state.position) as SelectionKey;
+    const active = this.state.keys[this.state.position] as SelectionKey;
     this.setState({ values, active });
     this.history.push(this.state);
     this.fetch(active, values);
   }
 
-  public onMove = (key: string) => {
-    const groupersKeys = Object.keys(UnbundlingTreemap.groupers) as SelectionKey[];
-    const activeKeyPosition = indexOf(key, groupersKeys);
-    this.setState({ position: activeKeyPosition, active: key as SelectionKey });
-    this.history.push(this.state);
+  public onMove = (key: string, keys: SelectionKey[]) => {
+    // const groupersKeys = Object.keys(UnbundlingTreemap.groupers) as SelectionKey[];
+    const keyPosition = indexOf(key, keys);
+    if (keyPosition === this.state.position) {
+      this.setState({ active: key as SelectionKey, keys });
+      this.history.push(this.state);
 
-    return this.fetch(key, this.state.values);
+      this.fetch(key, this.state.values);
+    } else {
+      this.setState({ keys });
+    }
   }
 
   public fetch(active: string, values: KeyValue[]) {
@@ -215,21 +219,26 @@ class UnbundlingTreemap extends React.Component<Props, State> {
                       onClick={ this.onZoomIn }
                     />
                   }
-                  {
-                    this.state.position <= 1
-                      ? ''
-                      :
-                      <Up className="up" onClick={ this.onZoomOut }>
-                        <Icon name={ 'chevron left' } size="big" inverted />
-                      </Up>
-                  }
+                  { this.renderBackButton() }
               </Intro>
             </Container>
         }
 
       </div>
     );
   }
+
+  private renderBackButton() {
+    if (this.state.position > 0) {
+      return (
+        <Up className="up" onClick={ this.onZoomOut }>
+          <Icon name={ 'chevron left' } size="big" inverted />
+        </Up>
+      );
+    }
+
+    return null;
+  }
 }
 
 export default UnbundlingTreemap;