Fixed tests for redux

README.md

@@ -1,2 +1 @@
 # frontend
-

smart-hut/src/App.test.js

@@ -3,12 +3,16 @@ import { render } from "@testing-library/react";
 import { Router } from "react-router";
 import { createMemoryHistory } from "history";
 import App from "./App";
+import { Provider } from "react-redux";
+import smartHutStore from "./store";
 
 test("redirects to homepage", () => {
   const history = createMemoryHistory();
   render(
     <Router history={history}>
-      <App />
+      <Provider store={smartHutStore}>
+        <App />
+      </Provider>
     </Router>
   );
   expect(history.location.pathname).toBe("/");

smart-hut/src/components/dashboard/DevicePanel.js

@@ -48,7 +48,9 @@ const mapStateToProps = (state, _) => ({
     if (state.active.activeRoom === -1) {
       return Object.values(state.devices);
     } else {
-      const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
+      const deviceArray = [
+        ...state.rooms[state.active.activeRoom].devices,
+      ].sort();
       return deviceArray.map((id) => state.devices[id]);
     }
   },

smart-hut/src/components/dashboard/devices/Device.js

@@ -56,19 +56,21 @@ class Device extends React.Component {
     return (
       <Segment>
         <Grid columns={2}>
-          <Grid.Column>
+          <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
-            {this.renderDeviceComponent()}
+          <Grid.Column textAlign="center">
-          </Grid.Column>
+            <Header as="h3">{this.props.device.name}</Header>
-          <Grid.Column textAlign='center'>
+            <Button color="blue" icon onClick={this.edit} labelPosition="left">
-            <Header as='h3'>{this.props.device.name}</Header>
+              <Icon name="pencil" />
-            <Button color='blue' icon onClick={this.edit} labelPosition='left'>
-              <Icon name='pencil' />
               Edit
             </Button>
             {this.props.device.kind === "smartPlug" ? (
-              <Button color='orange' icon onClick={this.resetSmartPlug}
+              <Button
-                      labelPosition='left'>
+                color="orange"
-                <Icon name='undo' />
+                icon
+                onClick={this.resetSmartPlug}
+                labelPosition="left"
+              >
+                <Icon name="undo" />
                 Reset
               </Button>
             ) : null}

smart-hut/src/components/dashboard/devices/Dimmer.js

@@ -65,7 +65,7 @@ export class KnobDimmerComponent extends Component {
 
     this.state = {
       intensity: this.props.device.intensity || 0,
-      timeout: null
+      timeout: null,
     };
 
     this.saveIntensity = this.saveIntensity.bind(this);
@@ -74,20 +74,20 @@ export class KnobDimmerComponent extends Component {
 
   setIntensity(intensity) {
     intensity *= 100;
-    
+
     if (this.state.timeout) {
       clearTimeout(this.state.timeout);
     }
 
-    this.setState({ 
+    this.setState({
       intensity,
       timeout: setTimeout(() => {
         this.saveIntensity();
         this.setState({
           intensity: this.state.intensity,
-          timeout: null
+          timeout: null,
         });
-      }, 100)
+      }, 100),
     });
   }
 
@@ -96,7 +96,7 @@ export class KnobDimmerComponent extends Component {
     this.props
       .knobDimmerDimTo(this.props.id, val)
       .catch((err) => console.error("knob dimmer set intensity error", err));
-  };
+  }
 
   render() {
     return (

smart-hut/src/components/dashboard/devices/Light.js

@@ -65,20 +65,20 @@ class Light extends Component {
 
   setIntensity(intensity) {
     intensity *= 100;
-    
+
     if (this.state.timeout) {
       clearTimeout(this.state.timeout);
     }
 
-    this.setState({ 
+    this.setState({
       intensity,
       timeout: setTimeout(() => {
         this.saveIntensity();
         this.setState({
           intensity: this.state.intensity,
-          timeout: null
+          timeout: null,
         });
-      }, 100)
+      }, 100),
     });
   }
 

smart-hut/src/components/dashboard/devices/SmartPlug.js

@@ -5,10 +5,7 @@
  The user can reset this value.
  **/
 import React, { Component } from "react";
-import {
+import { BottomPanel, StyledDiv } from "./styleComponents";
-  BottomPanel,
-  StyledDiv
-} from "./styleComponents";
 import { Image } from "semantic-ui-react";
 import {
   energyConsumedStyle,
@@ -36,8 +33,9 @@ class SmartPlug extends Component {
 
   onClickDevice = () => {
     const on = !this.turnedOn;
-    this.props.saveDevice({ ...this.props.device, on })
+    this.props
-      .catch((err) => console.error('smart plug update error', err));
+      .saveDevice({ ...this.props.device, on })
+      .catch((err) => console.error("smart plug update error", err));
   };
 
   getIcon = () => {
@@ -48,9 +46,7 @@ class SmartPlug extends Component {
     return (
       <StyledDiv onClick={this.onClickDevice}>
         <Image src={this.getIcon()} style={imageStyle} />
-        <span style={nameStyle}>
+        <span style={nameStyle}>Smart Plug</span>
-          Smart Plug
-        </span>
 
         <BottomPanel
           style={

smart-hut/src/components/dashboard/devices/Switch.js

@@ -30,17 +30,16 @@ class Switch extends Component {
   onClickDevice = () => {
     const newOn = !this.turnedOn;
     const type = newOn ? "ON" : "OFF";
-    this.props.switchOperate(this.props.id, type)
+    this.props
-      .catch(err => console.error('switch operate failed', err))
+      .switchOperate(this.props.id, type)
+      .catch((err) => console.error("switch operate failed", err));
   };
 
   render() {
     return (
       <StyledDiv onClick={this.onClickDevice}>
         <Image src={this.getIcon()} style={imageStyle} />
-        <span style={nameStyle}>
+        <span style={nameStyle}>Switch</span>
-          Switch
-        </span>
 
         <BottomPanel
           style={
@@ -49,9 +48,7 @@ class Switch extends Component {
               : { backgroundColor: "#1a2849" }
           }
         >
-          <span style={turnedOnStyle}>
+          <span style={turnedOnStyle}>{this.turnedOn ? "ON" : "OFF"}</span>
-            {this.turnedOn ? "ON" : "OFF"}
-          </span>
         </BottomPanel>
       </StyledDiv>
     );

smart-hut/src/endpoint.js

@@ -14,7 +14,6 @@ export function socketURL(token) {
   const protocol = isSecure ? "wss:" : "ws:";
   const port = httpURL.port || (isSecure ? 443 : 80);
   const url = `${protocol}//${httpURL.hostname}:${port}/sensor-socket?token=${token}`;
-  console.log('socket url: ', url);
+  console.log("socket url: ", url);
   return url;
 }
-  

smart-hut/src/remote.js

@@ -4,7 +4,6 @@ import axios from "axios";
 import { endpointURL, socketURL } from "./endpoint";
 import { connect, disconnect } from "@giantmachines/redux-websocket";
 
-
 /**
  * An object returned by promise rejections in remoteservice
  * @typedef {Error} RemoteError
@@ -170,8 +169,8 @@ export const RemoteService = {
     return (dispatch) => {
       return Endpoint.login(usernameOrEmail, password)
         .then((token) => {
-          dispatch(actions.loginSuccess(token))
+          dispatch(actions.loginSuccess(token));
-          dispatch(connect(socketURL(token)))
+          dispatch(connect(socketURL(token)));
         })
         .catch((err) => {
           console.warn("login error", err);
@@ -190,8 +189,8 @@ export const RemoteService = {
   logout: () => {
     return (dispatch) =>
       Endpoint.logout().then(() => {
-        dispatch(disconnect())
+        dispatch(disconnect());
-        dispatch(actions.logout())
+        dispatch(actions.logout());
       });
   },
 

smart-hut/src/store.js

@@ -237,14 +237,14 @@ function reducer(previousState, action) {
       newState = reducer(previousState, {
         type: "DEVICES_UPDATE",
         partial: true,
-        devices
+        devices,
       });
       break;
     default:
       console.warn(`Action type ${action.type} unknown`, action);
       return previousState;
   }
-  
+
   return newState;
 }
 
@@ -284,10 +284,11 @@ function createSmartHutStore() {
     initialState.login.token = null;
   }
 
-  const store = createStore(reducer, initialState, 
+  const store = createStore(
-    compose(
+    reducer,
-      applyMiddleware(thunk),
+    initialState,
-      applyMiddleware(reduxWebSocket())));
+    compose(applyMiddleware(thunk), applyMiddleware(reduxWebSocket()))
+  );
   if (initialState.login.loggedIn) {
     store.dispatch(connect(socketURL(token)));
   }

smart-hut/src/views/Forgot-pass-reset.js

@@ -43,8 +43,11 @@ export default class ChangePass extends Component {
 
     Forms.submitResetPassword(this.props.query.token, this.state.password)
       .then(() => this.setState({ success: true }))
-      .catch((err) => this.setState({ error: 
+      .catch((err) =>
-        { state: true, message: err.messages.join(' - ') }}));
+        this.setState({
+          error: { state: true, message: err.messages.join(" - ") },
+        })
+      );
   };
 
   render() {

smart-hut/src/views/Forgot-password.js

@@ -35,7 +35,9 @@ export default class ForgotPass extends Component {
 
     Forms.submitInitResetPassword(this.state.user)
       .then(() => this.setState({ success: true }))
-      .catch((err) => this.setState({ error: { state: true, message: err.messages }}));
+      .catch((err) =>
+        this.setState({ error: { state: true, message: err.messages } })
+      );
   };
 
   render() {

smart-hut/src/views/Signup.js

@@ -34,10 +34,11 @@ export default class Signup extends Component {
       username: this.state.username,
     };
 
-    Forms
+    Forms.submitRegistration(params)
-      .submitRegistration(params)
       .then(() => this.setState({ success: true }))
-      .catch((err) => this.setState({ error: { state: true, message: err.messages }}));
+      .catch((err) =>
+        this.setState({ error: { state: true, message: err.messages } })
+      );
   };
 
   onChangeHandler = (event) => {