Fixed registration bug

This commit is contained in:
britea 2020-04-16 15:15:33 +02:00
parent cbbb703803
commit 56da195894
6 changed files with 193 additions and 17 deletions

View file

@ -49,7 +49,16 @@ class RoomModal extends Component {
}
setInitialState() {
this.setState(this.initialState);
for (let key in this.initialState) {
if (this.initialState.hasOwnProperty(key)) {
//console.log(key + " -> " + this.initialState[key]);
this.setState({
key: this.initialState[key],
});
}
}
console.log(this.initialState);
//this.setState(state);
}
get type() {

View file

@ -1,5 +1,14 @@
import React, { Component } from "react";
import { Button, Header, Modal, Icon, Responsive } from "semantic-ui-react";
import {
Button,
Header,
Modal,
Icon,
Responsive,
Form,
Input,
Dropdown,
} from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
@ -10,6 +19,7 @@ class SceneModal extends Component {
super(props);
this.state = this.initialState;
this.setInitialState();
this.getDevices();
this.addSceneModal = this.addSceneModal.bind(this);
this.modifySceneModal = this.modifySceneModal.bind(this);
@ -18,7 +28,9 @@ class SceneModal extends Component {
get initialState() {
return {
//INITIAL STATE HERE
name: this.type === "new" ? "New Scene" : this.props.room.name,
sceneDevices: this.type === "new" ? [{}] : [this.props.scene.devices],
openModal: false,
};
}
@ -30,6 +42,12 @@ class SceneModal extends Component {
return !this.props.id ? "new" : "modify";
}
getDevices() {
this.props
.fetchDevices()
.catch((err) => console.error(`error fetching devices:`, err));
}
addSceneModal = (e) => {
/*let data = {
// DATA HERE
@ -81,7 +99,21 @@ class SceneModal extends Component {
this.setState({ openModal: true });
};
setSceneDevice(e, d) {
this.setState({ sceneDevices: d.value });
}
render() {
const availableDevices = [];
this.props.devices.forEach((e) => {
if (!this.state.sceneDevices.includes(e)) {
availableDevices.push({
key: e.id,
text: e.name,
id: e.id,
});
}
});
return (
<div>
{!this.props.nicolaStop ? (
@ -132,9 +164,30 @@ class SceneModal extends Component {
{this.type === "new" ? "Add new scene" : "Modify scene"}
</Header>
<Modal.Content>
{
//TODO FORM TO ADD OR MODIFY SCENE
}
<Form>
<p>Insert the name of the scene:</p>
<Form.Field>
<Input
label="Scene name"
placeholder="Scene Name"
name="name"
type="text"
onChange={this.changeSomething}
value={this.state.name}
/>
</Form.Field>
<Form.Field>
<label>Select devices you want to attach: </label>
<Dropdown
name="scene devices"
placeholder="Select Devices"
fluid
multiple
onChange={this.setSceneDevice}
options={availableDevices}
/>
</Form.Field>
</Form>
{this.type === "modify" ? (
<Button
@ -176,6 +229,16 @@ const setActiveScene = (activeScene) => {
};
const mapStateToProps = (state, ownProps) => ({
get devices() {
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
const deviceArray = [
...state.rooms[state.active.activeRoom].devices,
].sort();
return deviceArray.map((id) => state.devices[id]);
}
},
scene: ownProps.id ? state.scenes[ownProps.id] : null,
});
const SceneModalContainer = connect(

View file

@ -0,0 +1,87 @@
import React, { Component } from "react";
import { Button, Modal, Icon, Image } from "semantic-ui-react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import styled from "styled-components";
//import { appActions } from "../../storeActions";
const StyledDiv = styled.div`
background-color: #505bda;
padding: 3rem;
width: 10rem;
height: 10rem;
border-radius: 100%;
border: none;
position: relative;
box-shadow: 3px 2px 10px 5px #ccc;
transition: all 0.3s ease-out;
:hover {
background-color: #4345d9;
}
:active {
transform: translate(0.3px, 0.8px);
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
}
`;
class NewSceneDevice extends Component {
constructor(props) {
super(props);
this.state = {
openModal: false,
};
}
handleOpen = () => {
this.setState({ openModal: true });
};
handleClose = () => {
this.setState({ openModal: false });
};
resetState = () => {
this.setState(this.baseState);
this.handleClose();
};
render() {
return (
<Modal
closeIcon
open={this.state.openModal}
onClose={this.resetState}
trigger={
<StyledDiv onClick={this.handleOpen}>
<Image src="/img/add.svg" style={{ filter: "invert()" }} />
</StyledDiv>
}
centered={true}
>
<Modal.Header>Add a New Scene Device</Modal.Header>
<Modal.Content></Modal.Content>
<Modal.Actions>
<Button
onClick={this.createDevice}
color="blue"
icon
labelPosition="right"
>
<Icon name="up arrow" />
Finish
</Button>
</Modal.Actions>
</Modal>
);
}
}
const mapStateToProps = (state, _) => ({
devices: Object.values(state.devices),
activeRoom: state.active.activeRoom,
});
const NewSceneDeviceContainer = connect(
mapStateToProps,
RemoteService
)(NewSceneDevice);
export default NewSceneDeviceContainer;

View file

@ -1,21 +1,36 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import NewSceneDevice from "./NewSceneDevice";
import { Grid } from "semantic-ui-react";
class ScenesPanel extends Component {
constructor(props) {
super(props);
console.log(this.props.activeRoom, this.props.activeTab);
console.log(this.props.activeScene);
}
render() {
return <h1 color="black">SCENES</h1>;
return (
<Grid doubling columns={2} divided="vertically">
{
//TODO DISPLAY DEVICES IN SCENE
}
{this.props.isActiveDefaultScene ? (
<Grid.Column>
<NewSceneDevice />
</Grid.Column>
) : null}
</Grid>
);
}
}
const mapStateToProps = (state, _) => ({
activeRoom: state.active.activeRoom,
activeTab: state.active.activeTab,
get isActiveDefaultScene() {
return state.active.activeScene === -1;
},
activeScene: state.active.activeScene,
});
const ScenesPanelContainer = connect(
mapStateToProps,

View file

@ -39,8 +39,8 @@ const Endpoint = {
* @param {[String]String} query query ('?') parameters (no params by default)
* @param {any} body the JSON request body
*/
send: (method, route, query = {}, body = null) => {
if (!Endpoint.token) {
send: (method, route, query = {}, body = null, registration) => {
if (!registration && !Endpoint.token) {
throw new Error("No token while performing authenticated request");
}
@ -48,9 +48,11 @@ const Endpoint = {
method: method,
params: query,
data: ["put", "post"].indexOf(method) !== -1 ? body : null,
headers: {
Authorization: `Bearer ${Endpoint.token}`,
},
headers: !registration
? {
Authorization: `Bearer ${Endpoint.token}`,
}
: {},
}).then((res) => {
if (!res.data && method !== "delete") {
console.error("Response body is empty");
@ -109,7 +111,7 @@ const Endpoint = {
* @returns {Promise<*, *>} The Axios-generated promise
*/
post(route, query, body) {
return this.send("post", route, query, body);
return this.send("post", route, query, body, true);
},
/**

View file

@ -31,7 +31,7 @@ class Login extends Component {
.login(this.state.user, this.state.password)
.then(() => this.props.history.push("/dashboard"))
.catch((err) => {
console.log(err);
console.log("CIAO", err);
this.setState({
error: { state: true, message: err.messages.join(" - ") },
});