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

Ui changes

Author: nusanam

src/app/components/SwitchState.jsx

@@ -1,31 +1,35 @@
-import React from 'react'; 
-import Select from 'react-select'; 
+// import React from 'react'; 
+// import Select from 'react-select'; 
+// import Action from './Action'; 
+// import { useStoreContext } from '../store'; 
 
-// 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
+// // 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 = () => {
+//   const [{ tabs, currentTab}, dispatch] = useStoreContext();
+//   const { snapshots } = tabs[currentTab]; 
+//     // 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'}
-    ]; 
+//     // const sampleDropdown = [
+//     //     {label: 'Overview'}, 
+//     //     {label: 'setUsername'}, 
+//     //     {label: 'setPassword'}
+//     // ]; 
 
-    return (
-        <Select 
-        className="state-dropdown" 
-        placeholder="Choose your state" 
-        options={sampleDropdown}
-        />
-    )
-}
+//   return (
+//     <Select 
+//     className="state-dropdown" 
+//     placeholder="Choose your state" 
+//     options={sampleDropdown}
+//     />
+//     )
+// }
 
-export default SwitchStateDropdown; 
+// export default SwitchStateDropdown; 

src/app/containers/ActionContainer.jsx

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