From ad54cae0e2a79994ef4801f140fcfcbcd348dc48 Mon Sep 17 00:00:00 2001 From: "Claudio Maggioni (maggicl)" Date: Sat, 11 Apr 2020 00:42:23 +0200 Subject: [PATCH] Removed client_server.js and refactored devices --- smart-hut/src/client_server.js | 279 ------------------ .../src/components/dashboard/DevicePanel.js | 2 +- .../components/dashboard/devices/Dimmer.js | 66 +---- .../src/components/dashboard/devices/Light.js | 55 +--- .../components/dashboard/devices/Sensor.js | 7 - .../components/dashboard/devices/SmartPlug.js | 62 +--- .../components/dashboard/devices/Switch.js | 46 +-- smart-hut/src/remote.js | 16 +- smart-hut/src/store.js | 13 +- smart-hut/src/views/Forgot-pass-reset.js | 22 +- smart-hut/src/views/Forgot-password.js | 21 +- smart-hut/src/views/Signup.js | 20 +- 12 files changed, 88 insertions(+), 521 deletions(-) delete mode 100644 smart-hut/src/client_server.js diff --git a/smart-hut/src/client_server.js b/smart-hut/src/client_server.js deleted file mode 100644 index 4218c1f..0000000 --- a/smart-hut/src/client_server.js +++ /dev/null @@ -1,279 +0,0 @@ -// vim: set ts=2 sw=2 et tw=80: - -import axios from "axios"; - -let config; -if (window.BACKEND_URL !== "__BACKEND_URL__") { - config = window.BACKEND_URL + "/"; -} else { - config = "http://localhost:8080/"; -} -var tkn = localStorage.getItem("token"); - -/** the ServiceSocket instance valid for the current session */ -var socket; - -// requests data devices -/* - - { - params : data, - device: 'tipoDiDevice', - id: se serve - } - - - device routes: - - buttonDimmer - - dimmableLight - - knobDimmer - - motionSensor - - regularLight - - sensor - - smartPlug - - switch - -*/ - -/** The number of times a connection to the socket was tried */ -var retries = 0; - -/** Class to handle connection with the sensor socket */ -class ServiceSocket { - /** - * Create a new sensor socket connection - * @param {string} token - The JWT token (needed for authentication) - * @param {Object.|null} callbacks - A callback map from - * device id to callback function - */ - constructor(token, callbacks) { - this.token = token; - this.authenticated = false; - this.callbacks = callbacks || {}; - - this.connection = new WebSocket("ws://localhost:8080/sensor-socket"); - - this.connection.onopen = (evt) => { - this.connection.send(JSON.stringify({ token })); - }; - - this.connection.onmessage = (evt) => { - let data = JSON.parse(evt.data); - - if (!this.authenticated) { - if (data.authenticated) { - this.authenticated = true; - retries = 0; - } else { - console.error("socket authentication failed"); - } - } else { - this.invokeCallbacks(data); - } - }; - - this.connection.onerror = (evt) => { - if (retries >= 5) { - console.error("too many socket connection retries"); - return; - } - retries++; - socket = new ServiceSocket(this.token, this.callbacks); - }; - } - - invokeCallbacks(data) { - if (data.id && this.callbacks[data.id]) { - this.callbacks[data.id].forEach((f) => f(data)); - } - } - - /** - * Registers a new callback function to be called when updates on the device - * with the id given are recieved - * @param {number} id - the id of the device to check updates for - * @param {function} stateCallback - a function that recieves a device as the - * first parameter, that will be called whenever a update is recieved - */ - subscribe(id, stateCallback) { - if (this.callbacks[id] === undefined) { - this.callbacks[id] = []; - } - - this.callbacks[id].push(stateCallback); - } - - /** - * Unregisters a function previously registered with `subscribe(...)`. - * @param {number} id - the id of the device to stop checking updates for - * @param {function} stateCallback - the callback to unregister - */ - unsubscribe(id, stateCallback) { - this.callbacks[id].splice(this.callbacks[id].indexOf(stateCallback), 1); - } - - /** - * Closes the underlying websocket connection - */ - close() { - this.connection.close(); - } -} - -if (tkn) { - socket = new ServiceSocket(tkn); -} - -export var call = { - setToken: function (token) { - tkn = token; - if (tkn) { - if (socket) { - socket.close(); - } - socket = new ServiceSocket(tkn); - } - }, - - /** - * Registers a new callback function to be called when updates on the device - * with the id given are recieved - * @param {number} id - the id of the device to check updates for - * @param {function} stateCallback - a function that recieves a device as the - * first parameter, that will be called whenever a update is recieved - */ - socketSubscribe: function (id, callback) { - socket.subscribe(id, callback); - }, - - /** - * Unregisters a function previously registered with `subscribe(...)`. - * @param {number} id - the id of the device to stop checking updates for - * @param {function} stateCallback - the callback to unregister - */ - socketUnsubscribe: function (id, callback) { - socket.unsubscribe(id, callback); - }, - login: function (data, headers) { - return axios.post(config + "auth/login", data); - }, - register: function (data, headers) { - return axios.post(config + "register", data); - }, - getUserInfo: function (token) { - if (!token) { - token = tkn; - } - return axios.get(config + "auth/profile", { - headers: { Authorization: "Bearer " + token }, - }); - }, - initResetPassword: function (data, headers) { - return axios.post(config + "register/init-reset-password", data); - }, - resetPassword: function (data, headers) { - return axios.put(config + "register/reset-password", data); - }, - getAllRooms: function (token) { - if (!token) { - token = tkn; - } - return axios.get(config + "room", { - headers: { Authorization: "Bearer " + token }, - }); - }, - getAllDevices: function (token) { - if (!token) { - token = tkn; - } - return axios.get(config + "device", { - headers: { Authorization: "Bearer " + token }, - }); - }, - getAllDevicesByRoom: function (id, token) { - if (!token) { - token = tkn; - } - return axios.get(config + "room/" + id + "/devices", { - headers: { Authorization: "Bearer " + token }, - }); - }, - createRoom: function (data, headers) { - return axios.post(config + "room", data, { - headers: { Authorization: "Bearer " + tkn }, - }); - }, - updateRoom: function (data, headers) { - return axios.put(config + "room/" + data.id, data, { - headers: { Authorization: "Bearer " + tkn }, - }); - }, - deleteRoom: function (data, headers) { - return axios.delete(config + "room/" + data.id, { - headers: { Authorization: "Bearer " + tkn }, - }); - }, - devicePost: function (data, headers) { - return axios - .post(config + data.device, data.params, { - headers: { Authorization: "Bearer " + tkn }, - }) - .then((res) => { - if ( - res.status === 200 && - (data.device === "switch" || - data.device === "buttonDimmer" || - data.device === "knobDimmer") - ) { - let type = "lightId="; - if (data.device === "switch") { - type = "switchableId="; - } - data.params.lights.forEach((e) => { - let urlUp = - config + data.device + "/" + res.data.id + "/lights?" + type + e; - axios.post( - urlUp, - {}, - { headers: { Authorization: "Bearer " + tkn } } - ); - }); - } - return res; - }); - }, - deviceUpdate: function (data, typeDevice) { - let url = "device"; - if (typeDevice) { - url = typeDevice; - } - let promiseRes = axios.put(config + url, data, { - headers: { Authorization: "Bearer " + tkn }, - }); - // also for btn/knob dimmer - if ( - typeDevice === "switch/operate" || - typeDevice === "buttonDimmer/dim" || - typeDevice === "knobDimmer/dimTo" - ) { - promiseRes = promiseRes.then((e) => { - if (e.status === 200) { - e.data.forEach((device) => socket.invokeCallbacks(device)); - } - return e; - }); - } - - return promiseRes; - }, - deviceDelete: function (data, headers) { - return axios.delete(config + data.device + "/" + data.id, { - headers: { Authorization: "Bearer " + tkn }, - }); - }, - smartPlugReset: function (id) { - return axios.delete(config + "smartPlug/" + id + "/meter", { - headers: { Authorization: "Bearer " + tkn }, - }); - }, -}; diff --git a/smart-hut/src/components/dashboard/DevicePanel.js b/smart-hut/src/components/dashboard/DevicePanel.js index e6cc7f9..bfed5a9 100644 --- a/smart-hut/src/components/dashboard/DevicePanel.js +++ b/smart-hut/src/components/dashboard/DevicePanel.js @@ -49,7 +49,7 @@ const mapStateToProps = (state, _) => ({ if (state.active.activeRoom === -1) { return Object.values(state.devices); } else { - const deviceArray = [...state.rooms[state.active.activeRoom].devices]; + const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort(); console.log(deviceArray); return deviceArray.map((id) => state.devices[id]); } diff --git a/smart-hut/src/components/dashboard/devices/Dimmer.js b/smart-hut/src/components/dashboard/devices/Dimmer.js index 6d1e448..324e1e6 100644 --- a/smart-hut/src/components/dashboard/devices/Dimmer.js +++ b/smart-hut/src/components/dashboard/devices/Dimmer.js @@ -29,43 +29,25 @@ import { } from "./DimmerStyle"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; -import { call } from "../../../client_server"; export class ButtonDimmerComponent extends Component { - constructor(props) { - super(props); - this.state = {}; - } increaseIntensity = () => { - let data = { - dimType: "UP", - id: this.props.device.id, - }; - call.deviceUpdate(data, "buttonDimmer/dim").then((res) => { - if (res.status === 200) { - } - }); - }; - decreaseIntensity = () => { - let data = { - dimType: "DOWN", - id: this.props.device.id, - }; - call.deviceUpdate(data, "buttonDimmer/dim").then((res) => { - if (res.status === 200) { - } - }); + this.props.device.buttonDimmerDim(this.props.id, "UP") + .catch((err) => console.error('button dimmer increase error', err)); }; - componentDidMount() {} + decreaseIntensity = () => { + this.props.device.buttonDimmerDim(this.props.id, "DOWN") + .catch((err) => console.error('button dimmer decrease error', err)); + }; render() { return ( icon - {this.props.device.name} ({this.props.device.id}) + Button Dimmer + @@ -79,41 +61,19 @@ export class ButtonDimmerComponent extends Component { } export class KnobDimmerComponent extends Component { - constructor(props) { - super(props); - this.state = { - pointingDevices: [], - value: 1, - }; - } setIntensity = (newValue) => { - let val = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100); - let data = { - id: this.props.device.id, - intensity: val, - }; - call.deviceUpdate(data, "knobDimmer/dimTo").then((res) => { - if (res.status === 200) { - this.setState({ - value: val, - }); - } - }); + const val = Math.round(newValue * 100); + this.props.device.knobDimmerDimTok(this.props.id, val) + .catch((err) => console.error('knob dimmer set intensity error', err)); }; - componentDidMount() { - this.setState({ - value: 1, - }); - } - render() { return (
- {this.props.device.name} ({this.props.device.id}) + Knob Dimmer diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 93f6189..99e2ae1 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -30,65 +30,40 @@ import { CircularThumbStyle, knobIcon, } from "./LightStyle"; -import { call } from "../../../client_server"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; class Light extends Component { constructor(props) { super(props); - this.state = { - turnedOn: false, - intensity: props.device.intensity, - }; this.iconOn = "/img/lightOn.svg"; this.iconOff = "/img/lightOff.svg"; + } - this.stateCallback = (e) => { - this.setState( - Object.assign(this.state, { - intensity: e.intensity, - turnedOn: e.on, - }) - ); - }; + get turnedOn() { + return this.props.device.on; + } - // call.socketSubscribe(this.props.device.id, this.stateCallback); + get intensity() { + return this.props.device.intensity; } onClickDevice = () => { - this.props.device.on = !this.state.turnedOn; - call.deviceUpdate(this.props.device, "regularLight").then((res) => { - if (res.status === 200) { - this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); - } - }); + this.props.device.on = !this.turnedOn; + this.props.saveDevice({ ...this.props.device, on: !this.turnedOn }) + .catch((err) => console.error('regular light update error', err)) }; getIcon = () => { - if (this.state.turnedOn) { - return this.iconOn; - } - return this.iconOff; + return this.turnedOn ? this.iconOn : this.iconOff; }; setIntensity = (newValue) => { - this.props.device.intensity = - Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100); - call.deviceUpdate(this.props.device, "dimmableLight").then((res) => { - if (res.status === 200) { - this.setState({ - intensity: - Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100), - }); - } - }); + const intensity = Math.round(newValue * 100); + this.props.saveDevice({ ...this.props.device, intensity }) + .catch((err) => console.error('intensity light update error', err)) }; - get intensity() { - return isNaN(this.state.intensity) ? 0 : this.state.intensity; - } - render() { const intensityLightView = (
@@ -105,7 +80,7 @@ class Light extends Component { dy="0.3em" fontWeight="bold" > - {this.props.device.name}
({this.props.device.id}) + Intensity light
- {this.props.device.name} ({this.props.device.id}) + Light
diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index 6aa6238..938209c 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -35,7 +35,6 @@ import { humiditySensorColors, iconSensorStyle, } from "./SensorStyle"; -import { call } from "../../../client_server"; import { Image } from "semantic-ui-react"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; @@ -54,12 +53,6 @@ class Sensor extends Component { this.colors = temperatureSensorColors; this.icon = "temperatureIcon.svg"; - - call.socketSubscribe(this.props.device.id, this.stateCallback); - } - - componentWillUnmount() { - call.socketUnsubscribe(this.props.device.id, this.stateCallback); } setName = () => { diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js index 7261cd0..606c33a 100644 --- a/smart-hut/src/components/dashboard/devices/SmartPlug.js +++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js @@ -18,84 +18,50 @@ import { kwhStyle, nameStyle, } from "./SmartPlugStyle"; -import { call } from "../../../client_server"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; class SmartPlug extends Component { constructor(props) { super(props); - this.state = { - turnedOn: false, - energyConsumed: 0, // kWh - }; this.iconOn = "/img/smart-plug.svg"; this.iconOff = "/img/smart-plug-off.svg"; - - this.stateCallback = (e) => { - this.setState( - Object.assign(this.state, { - energyConsumed: (e.totalConsumption / 1000).toFixed(3), - turnedOn: e.on, - }) - ); - }; - - call.socketSubscribe(this.props.device.id, this.stateCallback); } - componentWillUnmount() { - call.socketUnsubscribe(this.props.device.id, this.stateCallback); + get turnedOn() { + return this.props.device.on; } + + get energyConsumed() { + return (this.props.device.totalConsumption / 1000).toFixed(3); + } + onClickDevice = () => { - this.props.device.on = !this.state.turnedOn; - call.deviceUpdate(this.props.device, "smartPlug").then((res) => { - if (res.status === 200) { - this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); - } - }); - }; - - resetSmartPlug = () => { - call.smartPlugReset(this.props.device.id).then((res) => { - if (res.status === 200) { - this.setState({ - energyConsumed: (res.data.totalConsumption / 1000).toFixed(3), - }); - } - }); + const on = !this.turnedOn; + this.props.saveDevice({ ...this.props.device, on }) + .catch((err) => console.error('smart plug update error', err)); }; getIcon = () => { - if (this.state.turnedOn) { - return this.iconOn; - } - return this.iconOff; + return this.turnedOn ? this.iconOn : this.iconOff; }; - componentDidMount() { - this.setState({ - turnedOn: this.props.device.on, - energyConsumed: (this.props.device.totalConsumption / 1000).toFixed(3), - }); - } - render() { return ( - {this.props.device.name} ({this.props.device.id}) + Smart Plug - {this.state.energyConsumed} + {this.energyConsumed} KWh diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js index 9ebda99..4623aee 100644 --- a/smart-hut/src/components/dashboard/devices/Switch.js +++ b/smart-hut/src/components/dashboard/devices/Switch.js @@ -9,70 +9,48 @@ import React, { Component } from "react"; import { BottomPanel, StyledDiv } from "./styleComponents"; import { Image } from "semantic-ui-react"; import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle"; -import { call } from "../../../client_server"; import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; class Switch extends Component { constructor(props) { super(props); - this.state = { - turnedOn: false, - pointingLights: [], - }; this.iconOn = "/img/switchOn.svg"; this.iconOff = "/img/switchOff.svg"; } + get turnedOn() { + return this.props.device.on; + } + getIcon = () => { - if (this.state.turnedOn) { - return this.iconOn; - } - return this.iconOff; + return this.turnedOn ? this.iconOn : this.iconOff; }; onClickDevice = () => { - this.props.device.on = !this.state.turnedOn; - let state = ""; - if (this.props.device.on) { - state = "ON"; - } else { - state = "OFF"; - } - let data = { - type: state, - id: this.props.device.id, - }; - call.deviceUpdate(data, "switch/operate").then((res) => { - if (res.status === 200) { - this.setState((prevState) => ({ turnedOn: !prevState.turnedOn })); - } - }); + const newOn = !this.turnedOn; + const type = newOn ? "ON" : "OFF"; + this.props.switchOperate(this.props.id, type) + .catch(err => console.error('switch operate failed', err)) }; - componentDidMount() { - this.setState({ - turnedOn: this.props.device.on, - }); - } - render() { return ( - {this.props.device.name} ({this.props.device.id}) + Switch - {this.state.turnedOn ? "ON" : "OFF"} + {this.turnedOn ? "ON" : "OFF"} diff --git a/smart-hut/src/remote.js b/smart-hut/src/remote.js index c495ad1..9eb459e 100644 --- a/smart-hut/src/remote.js +++ b/smart-hut/src/remote.js @@ -306,9 +306,9 @@ export const RemoteService = { return (dispatch) => { return Endpoint.put(url, {}, action) .then(async (res) => { - const inputDevice = Endpoint.get(getUrl); + const inputDevice = await Endpoint.get(getUrl); delete inputDevice.outputs; - dispatch(actions.deviceOperationUpdate([...res.data, inputDevice])); + dispatch(actions.deviceOperationUpdate([...res.data, inputDevice.data])); }) .catch((err) => { console.warn(`${url} error`, err); @@ -328,7 +328,7 @@ export const RemoteService = { * with user-fiendly errors as a RemoteError */ switchOperate: (switchId, type) => { - return this._operateInput("/switch/operate", `/switch/${switchId}`, { + return RemoteService._operateInput("/switch/operate", `/switch/${switchId}`, { type: type.toUpperCase(), id: switchId, }); @@ -343,7 +343,7 @@ export const RemoteService = { * with user-fiendly errors as a RemoteError */ knobDimmerDimTo: (dimmerId, intensity) => { - return this._operateInput("/knobDimmer/dimTo", `/knobDimmer/${dimmerId}`, { + return RemoteService._operateInput("/knobDimmer/dimTo", `/knobDimmer/${dimmerId}`, { intensity, id: dimmerId, }); @@ -360,7 +360,7 @@ export const RemoteService = { * with user-fiendly errors as a RemoteError */ buttonDimmerDim: (dimmerId, dimType) => { - return this._operateInput( + return RemoteService._operateInput( "/buttonDimmer/dim", `/buttonDimmer/${dimmerId}`, { @@ -532,7 +532,7 @@ export class Forms { "/register/init-reset-password", {}, { - usernameOrEmail: email, + email: email, } ) .then((_) => void 0) @@ -547,15 +547,17 @@ export class Forms { * performed email verification * This method does not update the global state, * please check its return value. + * @param {String} confirmationToken the confirmation token got from the email * @param {String} password the new password * @returns {Promise} promise that resolves to void and rejects * with validation errors as a String array */ - static submitResetPassword(password) { + static submitResetPassword(confirmationToken, password) { return Endpoint.post( "/register/reset-password", {}, { + confirmationToken, password, } ) diff --git a/smart-hut/src/store.js b/smart-hut/src/store.js index 6e4bc49..24750d7 100644 --- a/smart-hut/src/store.js +++ b/smart-hut/src/store.js @@ -92,9 +92,13 @@ function reducer(previousState, action) { }; for (const room of Object.values(previousState.rooms)) { - change.rooms[room.id].devices = { $set: new Set() }; + if (change.rooms[room.id]) { + change.rooms[room.id].devices = { $set: new Set() }; + } } } + console.log(change, action.devices); + newState = update(previousState, change); change = { @@ -106,8 +110,9 @@ function reducer(previousState, action) { change.devices[device.id] = { $set: device }; if (device.roomId in newState.rooms) { - change.rooms[device.roomId] = {}; - change.rooms[device.roomId].devices = {}; + change.rooms[device.roomId] = change.rooms[device.roomId] || {}; + change.rooms[device.roomId].devices = + change.rooms[device.roomId].devices || {}; const devices = change.rooms[device.roomId].devices; devices.$add = devices.$add || []; devices.$add.push(device.id); @@ -124,6 +129,8 @@ function reducer(previousState, action) { } } } + + console.log(change); newState = update(newState, change); break; case "ROOM_SAVE": diff --git a/smart-hut/src/views/Forgot-pass-reset.js b/smart-hut/src/views/Forgot-pass-reset.js index 0380465..19116d6 100644 --- a/smart-hut/src/views/Forgot-pass-reset.js +++ b/smart-hut/src/views/Forgot-pass-reset.js @@ -8,8 +8,8 @@ import { Icon, Message, } from "semantic-ui-react"; -import { call } from "../client_server"; import { Redirect } from "react-router-dom"; +import { Forms } from "../remote"; export default class ChangePass extends Component { constructor(props) { @@ -32,10 +32,6 @@ export default class ChangePass extends Component { }; handleChangePassword = (e) => { - const params = { - confirmationToken: this.props.query.token, - password: this.state.password, - }; if (this.state.confirmPassword !== this.state.password) { this.setState({ error: { @@ -45,18 +41,10 @@ export default class ChangePass extends Component { }); } - call - .resetPassword(params) - .then((res) => { - if (res.status === 200) { - this.setState({ success: true }); - } else { - this.setState({ error: { state: true, message: "Errore" } }); - } - }) - .catch((err) => { - console.log(err); - }); + Forms.submitResetPassword(this.props.query.token, this.state.password) + .then(() => this.setState({ success: true })) + .catch((err) => this.setState({ error: + { state: true, message: err.messages.join(' - ') }})); }; render() { diff --git a/smart-hut/src/views/Forgot-password.js b/smart-hut/src/views/Forgot-password.js index b53e88d..415d3af 100644 --- a/smart-hut/src/views/Forgot-password.js +++ b/smart-hut/src/views/Forgot-password.js @@ -9,7 +9,7 @@ import { Message, } from "semantic-ui-react"; import { Redirect } from "react-router-dom"; -import { call } from "../client_server"; +import { Forms } from "../remote"; export default class ForgotPass extends Component { constructor(props) { @@ -32,23 +32,10 @@ export default class ForgotPass extends Component { handleSendEmail = (e) => { e.preventDefault(); - const params = { - email: this.state.user, - }; - call - .initResetPassword(params) - .then((res) => { - if (res.status === 200) { - this.setState({ success: true }); - } - }) - .catch((err) => { - let errs = [ - ...new Set(err.response.data.errors.map((e) => e.defaultMessage)), - ]; - this.setState({ error: { state: true, message: errs } }); - }); + Forms.submitInitResetPassword(this.state.user) + .then(() => this.setState({ success: true })) + .catch((err) => this.setState({ error: { state: true, message: err.messages }})); }; render() { diff --git a/smart-hut/src/views/Signup.js b/smart-hut/src/views/Signup.js index 625dd80..7c68074 100644 --- a/smart-hut/src/views/Signup.js +++ b/smart-hut/src/views/Signup.js @@ -10,7 +10,7 @@ import { Message, } from "semantic-ui-react"; import { Redirect } from "react-router-dom"; -import { call } from "../client_server"; +import { Forms } from "../remote"; export default class Signup extends Component { constructor(props) { @@ -34,20 +34,10 @@ export default class Signup extends Component { username: this.state.username, }; - call - .register(params) - .then((res) => { - if (res.status === 200 && res.data) { - this.setState({ success: true }); - } - }) - .catch((err) => { - //console.log(err); - let errs = [ - ...new Set(err.response.data.errors.map((e) => e.defaultMessage)), - ]; - this.setState({ error: { state: true, message: errs } }); - }); + Forms. + submitRegistration(params) + .then(() => this.setState({ success: true })) + .catch((err) => this.setState({ error: { state: true, message: err.messages }})); }; onChangeHandler = (event) => {