Merge pull request #76 from oslabs-beta/rydang/maincontainer

maincontainer useState hook

Author: mylee1995

src/app/__tests__/dropdown.test.js

@@ -15,7 +15,7 @@ describe('unit testing for Dropdown.jsx', () => {
       { value: 23, label: '2.0x' },
     ],
     setSpeed: jest.fn(),
-    selectedOption: { value: 312, label: '1.0x' },
+    selectedSpeed: { value: 312, label: '1.0x' },
   };
   beforeEach(() => {
     wrapper = shallow(<Dropdown {...props} />);
@@ -30,8 +30,8 @@ describe('unit testing for Dropdown.jsx', () => {
     });
   });
 
-  describe('handlechangeSpeed', () => {
-    test('should invoke handleChangeSpeed onChange', () => {
+  describe('setSpeed', () => {
+    test('should invoke setSpeed on change', () => {
       wrapper.simulate('change', { value: 2000, label: '0.5x' });
       expect(props.setSpeed).toHaveBeenCalled();
     });

src/app/containers/MainContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
@@ -10,9 +10,8 @@ import {
 } from '../actions/actions';
 import { useStoreContext } from '../store';
 
-let npmPackageExists = false;
-
 function MainContainer() {
+  const [npmExists, setnpm] = useState(false);
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
 
@@ -33,8 +32,8 @@ function MainContainer() {
           break;
         }
         case 'initialConnectSnapshots': {
-          npmPackageExists = true;
           dispatch(initialConnect(payload));
+          setnpm(true);
           break;
         }
         default:
@@ -49,7 +48,7 @@ function MainContainer() {
     dispatch(setPort(port));
   });
 
-  if (!npmPackageExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
+  if (!npmExists) return <div style={{ color: 'black' }}>please install our npm package in your app</div>;
 
   const { viewIndex, sliderIndex, snapshots } = tabs[currentTab];