Merge pull request #2 from oslabs-beta/ui-bugs

UI and backend bugs commented for implementation

Author: nusanam

package/__tests__/linkFiber.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-filename-extension */
-import React from 'react';
+import React, { Component, useState } from 'react';
 import { render } from 'react-dom';
 
 const linkFiberRequire = require('../linkFiber');
@@ -8,7 +8,7 @@ let linkFiber;
 let mode;
 let snapShot;
 
-class App extends React.Component {
+class App extends Component {
   constructor(props) {
     super(props);
     this.state = { foo: 'bar' };
@@ -20,6 +20,17 @@ class App extends React.Component {
   }
 }
 
+// Need to create a functioanl component instance to test 
+// Would need to be revised but here's the gist
+// const funcComponent = () => {
+//     const [ number, setNumber ] = useState(0); 
+//     const newNumber = setNumber(1); 
+    
+//     return (
+//       <div>{newNumber}</div>
+//     )
+// }
+
 describe('unit test for linkFiber', () => {
   beforeEach(() => {
     snapShot = { tree: null };

package/__tests__/timeJump.test.js

@@ -19,6 +19,10 @@ class FiberNode {
   }
 }
 
+// MVP FEATURE: Additional Testing 
+// Testing for useState and useContext 
+
+
 describe('unit testing for timeJump.js', () => {
   let timeJump;
   let snapShot;

package/linkFiber.js

@@ -42,7 +42,8 @@ module.exports = (snap, mode) => {
 
   function createTree(currentFiber, tree = new Tree('root')) {
     if (!currentFiber) return tree;
-
+    // We have to figure out which properties to destructure from currentFiber
+    // To support hooks and Context API 
     const { sibling, stateNode, child } = currentFiber;
 
     let nextTree = tree;
@@ -53,7 +54,8 @@ module.exports = (snap, mode) => {
       // change setState functionality
       changeSetState(stateNode);
     }
-
+    // Need to check if functional component AND uses hooks 
+    
     // iterate through siblings
     createTree(sibling, tree);
     // iterate through children

package/timeJump.js

@@ -12,7 +12,6 @@ module.exports = (origin, mode) => {
   // recursively change state of tree
   function jump(target, coords = []) {
     const originNode = traverseTree(origin.tree, coords);
-
     // set the state of the origin tree
     originNode.component.setState(target.state, () => {
       // iterate through new children once state has been set

package/tree.js

@@ -35,6 +35,8 @@ class Tree {
   }
 
   // print out the tree in the console
+  // BUG FIX: Don't print the Router as a component 
+  // Change how the children are printed 
   print() {
     const children = ['children: '];
     this.children.forEach(child => {

src/app/components/Action.jsx

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 
 import { changeView, changeSlider } from '../actions/actions';
 
+// BUG FIX: 
+  // changeSlider should also respond to the click event on the div
+
 const Action = props => {
   const {
     selected, index, sliderIndex, dispatch,

src/app/components/Diff.jsx

@@ -5,6 +5,8 @@ import ReactHtmlParser from 'react-html-parser';
 
 import { useStoreContext } from '../store';
 
+// FIX: Update the div copy to something more explanatory 
+
 function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
   const { currentTab, tabs } = mainState;

src/app/components/SwitchApp.jsx

@@ -3,6 +3,9 @@ import Select from 'react-select';
 import { useStoreContext } from '../store';
 import { setTab } from '../actions/actions';
 
+
+// BUG FIX: Fix the dropdown styling to make it more distinguishable
+ 
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
 

src/app/containers/ActionContainer.jsx

@@ -5,6 +5,10 @@ import Action from '../components/Action';
 import { emptySnapshots } from '../actions/actions';
 import { useStoreContext } from '../store';
 
+// MVP Feature: Include a dropdown functionality 
+// to show stateful/functional/Context API differentiation
+// May want to add another child component to the container
+
 function ActionContainer() {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const { snapshots, sliderIndex, viewIndex } = tabs[currentTab];