Merge pull request #12 from oslabs-beta/ui-changes

UI changes

Author: andynullwong

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "reacttime-extension",
+  "name": "reactime",
   "description": "build web extension bundle.js",
   "scripts": {
     "build": "webpack --mode production",
@@ -26,7 +26,7 @@
     "David Chai",
     "Josh Kim",
     "Ruthba Anam",
-    "Ryan Dang", 
+    "Ryan Dang",
     "Sierra Swaby",
     "Yujin Kang"
   ],

package.json

@@ -53,7 +53,6 @@ module.exports = (snap, mode) => {
       if (mode.locked && !mode.jumping) return;
       oldDispatch(fiber, queue, action);
       setTimeout(() => {
-        console.log('Updating the snapshot tree after an action has been dispatched');
         updateSnapShotTree();
         sendSnapshot();
       }, 100);
@@ -113,7 +112,6 @@ module.exports = (snap, mode) => {
 
   function updateSnapShotTree() {
     const { current } = fiberRoot;
-    console.log('current', current);
     snap.tree = createTree(current);
   }
 

package/linkFiber.js

@@ -20,8 +20,7 @@ module.exports = (origin, mode) => {
           jump(child, coords.concat(i));
         });
       });
-    }
-    else {
+    } else {
       // if component uses hooks
       // variable for current location
       let currLocation = originNode.component;
@@ -38,7 +37,6 @@ module.exports = (origin, mode) => {
   }
 
   return target => {
-    console.log('im a target', target);
     // setting mode disables setState from posting messages to window
     mode.jumping = true;
     jump(target);

package/timeJump.js

@@ -0,0 +1,31 @@
+import React from 'react'; 
+import Select from 'react-select'; 
+
+// SwitchStateDropdown should display options including all 
+// and specific states being used
+    // TODO: Need to get the getter name (for functional components) 
+    // and state name for stateful components 
+const SwitchStateDropdown = () => {
+    // Requirements: 
+        // Should be able to filter the Actions by the name of the state being changed
+        // Should consider how to import the state names being changed 
+        // Should display the "All state", as well as specific state names as the options
+        // When clicked on "All state" >> should display all Actions
+        // When clicked on a specific "state" >> should only display Actions corresponding to the state
+
+    const sampleDropdown = [
+        {label: 'Overview'}, 
+        {label: 'setUsername'}, 
+        {label: 'setPassword'}
+    ]; 
+
+    return (
+        <Select 
+        className="state-dropdown" 
+        placeholder="Choose your state" 
+        options={sampleDropdown}
+        />
+    )
+}
+
+export default SwitchStateDropdown; 

src/app/components/SwitchState.jsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
+import SwitchStateDropdown from '../components/SwitchState'; 
 import Action from '../components/Action';
 
 import { emptySnapshots } from '../actions/actions';
@@ -32,6 +33,7 @@ function ActionContainer() {
         <button className="empty-button" onClick={() => dispatch(emptySnapshots())} type="button">
           Empty
         </button>
+        <SwitchStateDropdown />
       </div>
       <div>{actionsArr}</div>
     </div>

src/app/containers/ActionContainer.jsx

@@ -3,6 +3,11 @@
   width: 120px;
 }
 
+.state-dropdown {
+  width: 240px; 
+  margin-left: 20px; 
+}
+
 .action-component:hover .jump-button {
   opacity: 1;
   transform: rotateX(0deg);