smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

WIP on final conversion to redux

Browse source
This commit is contained in:
Claudio Maggioni (maggicl) 2020-04-11 13:57:03 +02:00
parent ad54cae0e2
commit ed68bebe8e
7 changed files with 95 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
smart-hut/src/components/modalform.js → smart-hut/src/components/RoomModal.js
View file

@ -10,31 +10,48 @@ import {
Image, Image,
} from "semantic-ui-react"; } from "semantic-ui-react";
import SelectIcons from "./SelectIcons"; import SelectIcons from "./SelectIcons";
import { connect } from "react-redux";
import { RemoteService } from "../remote";
import { appActions } from "../storeActions";
import { update } from "immutability-helper";
const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png"; const NO_IMAGE = "https://react.semantic-ui.com/images/wireframe/image.png";
export default class ModalWindow extends Component { class RoomModal extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = this.initialState;
if (typeof this.props.idRoom === "function") { this.setInitialState();
this.idRoom = this.props.idRoom();
} else {
this.idRoom = this.props.idRoom;
}
this.state = {
id: "",
selectedIcon: "",
name: this.props.type === "new" ? "New Room" : this.idRoom.name,
img: this.props.type === "new" ? null : this.idRoom.image,
openModal: false,
};
this.fileInputRef = React.createRef(); this.fileInputRef = React.createRef();
this.addRoomModal = this.addRoomModal.bind(this); this.addRoomModal = this.addRoomModal.bind(this);
this.updateIcon = this.updateIcon.bind(this); this.updateIcon = this.updateIcon.bind(this);
this.removeImage = this.removeImage.bind(this);
}
get initialState() {
return {
selectedIcon: "home",
name: this.type === "new" ? "New Room" : this.props.room.name,
img: this.type === "new" ? null : this.props.room.image,
openModal: false,
};
}
removeImage(e) {
e.preventDefault();
this.setState(update(this.state, {
image: {$set: NO_IMAGE}
}));
}
setInitialState() {
this.setState(this.initialState);
}
get type() {
return !this.props.id ? "new" : "modify";
} }
addRoomModal = (e) => { addRoomModal = (e) => {
@ -43,29 +60,37 @@ export default class ModalWindow extends Component {
name: this.state.name, name: this.state.name,
image: this.state.img, image: this.state.img,
}; };
this.props.addRoom(data);
this.setState({ this.props.saveRoom(data, null)
name: "Device", .then(() => {
}); this.setInitialState();
this.closeModal(); this.closeModal();
})
.catch((err) => console.error('error in creating room', err));
}; };
modifyRoomModal = (e) => { modifyRoomModal = (e) => {
let data = { let data = {
icon: icon:
this.state.selectedIcon === "" this.state.selectedIcon === ""
? this.idRoom.icon ? this.props.room.icon
: this.state.selectedIcon, : this.state.selectedIcon,
name: this.state.name === "" ? this.idRoom.name : this.state.name, name: this.state.name === "" ? this.props.room.name : this.state.name,
image: this.state.img, image: this.state.img,
}; };
this.props.updateRoom(data);
this.closeModal(); this.props.saveRoom(data, this.props.id)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error('error in updating room', err));
}; };
deleteRoom = (e) => { deleteRoom = (e) => {
this.props.deleteRoom(); // no need to close modal since this room modal instance will be deleted
this.closeModal(); this.props.deleteRoom(this.props.id)
.catch((err) => console.error('error in deleting room', err));
}; };
changeSomething = (event) => { changeSomething = (event) => {
@ -107,7 +132,7 @@ export default class ModalWindow extends Component {
{!this.props.nicolaStop ? ( {!this.props.nicolaStop ? (
<div> <div>
<Responsive minWidth={768}> <Responsive minWidth={768}>
{this.props.type === "new" ? ( {this.type === "new" ? (
<Button <Button
icon icon
labelPosition="left" labelPosition="left"
@ -122,7 +147,7 @@ export default class ModalWindow extends Component {
)} )}
</Responsive> </Responsive>
<Responsive maxWidth={768}> <Responsive maxWidth={768}>
{this.props.type === "new" ? ( {this.type === "new" ? (
<Button <Button
icon icon
fluid fluid
@ -149,7 +174,7 @@ export default class ModalWindow extends Component {
<Modal onClose={this.closeModal} open={this.state.openModal}> <Modal onClose={this.closeModal} open={this.state.openModal}>
<Header> <Header>
{this.props.type === "new" ? "Add new room" : "Modify room"} {this.type === "new" ? "Add new room" : "Modify room"}
</Header> </Header>
<Modal.Content> <Modal.Content>
<Form> <Form>
@ -167,7 +192,7 @@ export default class ModalWindow extends Component {
<p>Insert an image of the room:</p> <p>Insert an image of the room:</p>
<Form.Field> <Form.Field>
<Image <Image
src={this.state.img == null ? NO_IMAGE : this.state.img} src={this.state.img === null ? NO_IMAGE : this.state.img}
size="small" size="small"
onClick={() => this.fileInputRef.current.click()} onClick={() => this.fileInputRef.current.click()}
/> />
@ -182,6 +207,9 @@ export default class ModalWindow extends Component {
onChange={this.getBase64.bind(this)} onChange={this.getBase64.bind(this)}
/> />
</Form.Field> </Form.Field>
{this.state.img ?
<Button onClick={this.unsetImage}>Remove image</Button>
: null }
</Form> </Form>
<div style={spaceDiv}> <div style={spaceDiv}>
@ -189,12 +217,12 @@ export default class ModalWindow extends Component {
<SelectIcons <SelectIcons
updateIcon={this.updateIcon} updateIcon={this.updateIcon}
currentIcon={ currentIcon={
this.props.type === "new" ? "home" : this.idRoom.icon this.type === "new" ? "home" : this.props.room.icon
} }
/> />
</div> </div>
{this.props.type === "modify" ? ( {this.type === "modify" ? (
<Button <Button
icon icon
labelPosition="left" labelPosition="left"
@ -210,19 +238,19 @@ export default class ModalWindow extends Component {
<Modal.Actions> <Modal.Actions>
<Button color="red" onClick={this.closeModal}> <Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "} <Icon name="remove" />{" "}
{this.props.type === "new" ? "Cancel" : "Discard changes"} {this.type === "new" ? "Cancel" : "Discard changes"}
</Button> </Button>
<Button <Button
color="green" color="green"
onClick={ onClick={
this.props.type === "new" this.type === "new"
? this.addRoomModal ? this.addRoomModal
: this.modifyRoomModal : this.modifyRoomModal
} }
> >
<Icon name="checkmark" />{" "} <Icon name="checkmark" />{" "}
{this.props.type === "new" ? "Add room" : "Save changes"} {this.type === "new" ? "Add room" : "Save changes"}
</Button> </Button>
</Modal.Actions> </Modal.Actions>
</Modal> </Modal>
@ -230,3 +258,18 @@ export default class ModalWindow extends Component {
); );
} }
} }
const setActiveRoom = (activeRoom) => {
return (dispatch) => dispatch(appActions.setActiveRoom(activeRoom));
};
const mapStateToProps = (state, ownProps) => ({
room: ownProps.id ? state.rooms[ownProps.id] : null
});
const RoomModalContainer = connect(
mapStateToProps,
{ ...RemoteService, setActiveRoom },
null,
{ forwardRef: true }
)(RoomModal);
export default RoomModalContainer;

4
smart-hut/src/components/dashboard/DevicePanel.js
View file

@ -2,8 +2,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Grid } from "semantic-ui-react"; import { Grid } from "semantic-ui-react";
import { editButtonStyle, panelStyle } from "./devices/styleComponents"; import { panelStyle } from "./devices/styleComponents";
import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
import Device from "./devices/Device"; import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice"; import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -49,6 +48,7 @@ const mapStateToProps = (state, _) => ({
if (state.active.activeRoom === -1) { if (state.active.activeRoom === -1) {
return Object.values(state.devices); return Object.values(state.devices);
} else { } else {
console.log(state.active.activeRoom);
const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort(); const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
console.log(deviceArray); console.log(deviceArray);
return deviceArray.map((id) => state.devices[id]); return deviceArray.map((id) => state.devices[id]);

4
smart-hut/src/components/dashboard/devices/SmartPlug.js
View file

@ -7,9 +7,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { import {
BottomPanel, BottomPanel,
StyledDiv, StyledDiv
editModeIconStyle,
editModeStyleLeft,
} from "./styleComponents"; } from "./styleComponents";
import { Image } from "semantic-ui-react"; import { Image } from "semantic-ui-react";
import { import {

2
smart-hut/src/remote.js
View file

@ -60,7 +60,7 @@ const Endpoint = {
Authorization: `Bearer ${Endpoint.token}`, Authorization: `Bearer ${Endpoint.token}`,
}, },
}).then((res) => { }).then((res) => {
if (!res.data && method != "delete") { if (!res.data && method !== "delete") {
console.error("Response body is empty"); console.error("Response body is empty");
return null; return null;
} else { } else {

9
smart-hut/src/store.js
View file

@ -1,6 +1,5 @@
import { createStore, applyMiddleware } from "redux"; import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk"; import thunk from "redux-thunk";
import action from "./storeActions";
import update from "immutability-helper"; import update from "immutability-helper";
function reducer(previousState, action) { function reducer(previousState, action) {
@ -97,7 +96,6 @@ function reducer(previousState, action) {
} }
} }
} }
console.log(change, action.devices);
newState = update(previousState, change); newState = update(previousState, change);
@ -130,10 +128,10 @@ function reducer(previousState, action) {
} }
} }
console.log(change);
newState = update(newState, change); newState = update(newState, change);
break; break;
case "ROOM_SAVE": case "ROOM_SAVE":
newState = previousState;
createOrUpdateRoom(action.room); createOrUpdateRoom(action.room);
break; break;
case "DEVICE_SAVE": case "DEVICE_SAVE":
@ -157,6 +155,11 @@ function reducer(previousState, action) {
} }
change.rooms = { $unset: [action.roomId] }; change.rooms = { $unset: [action.roomId] };
if (previousState.active.activeRoom === action.roomId) {
change.active = { activeRoom: {$set: -1}};
}
newState = update(previousState, change); newState = update(previousState, change);
break; break;
case "DEVICE_DELETE": case "DEVICE_DELETE":

11
smart-hut/src/views/Navbar.js
View file

@ -8,7 +8,7 @@ import {
Dropdown, Dropdown,
} from "semantic-ui-react"; } from "semantic-ui-react";
import { editButtonStyle } from "../components/dashboard/devices/styleComponents"; import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
import ModalWindow from "../components/modalform"; import RoomModal from "../components/RoomModal";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { appActions } from "../storeActions"; import { appActions } from "../storeActions";
@ -39,7 +39,6 @@ class Navbar extends Component {
} }
get activeItemName() { get activeItemName() {
console.log(this.constructor);
if (this.props.activeRoom === -1) return "Home"; if (this.props.activeRoom === -1) return "Home";
return this.props.rooms[this.props.activeRoom]; return this.props.rooms[this.props.activeRoom];
} }
@ -98,7 +97,7 @@ class Navbar extends Component {
<Grid.Column width={8}>{e.name}</Grid.Column> <Grid.Column width={8}>{e.name}</Grid.Column>
<Grid.Column floated="right"> <Grid.Column floated="right">
{this.state.editMode ? ( {this.state.editMode ? (
<ModalWindow type="modify" idRoom={e.id} /> <RoomModal id={e.id} />
) : null} ) : null}
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
@ -110,7 +109,7 @@ class Navbar extends Component {
<Menu.Item name="newM"> <Menu.Item name="newM">
<Grid> <Grid>
<Grid.Row centered name="new"> <Grid.Row centered name="new">
<ModalWindow type="new" /> <RoomModal id={null} />
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Menu.Item> </Menu.Item>
@ -157,7 +156,7 @@ class Navbar extends Component {
<Grid.Column>{e.name}</Grid.Column> <Grid.Column>{e.name}</Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
<ModalWindow type="modify" nicolaStop={true} idRoom={e} /> <RoomModal nicolaStop={true} id={e} />
</Dropdown.Item> </Dropdown.Item>
); );
})} })}
@ -167,7 +166,7 @@ class Navbar extends Component {
<Grid inverted> <Grid inverted>
<Grid.Row> <Grid.Row>
<Grid.Column width={8}> <Grid.Column width={8}>
<ModalWindow type="new" /> <RoomModal id={null} />
</Grid.Column> </Grid.Column>
{this.activeRoom !== -1 ? ( {this.activeRoom !== -1 ? (
<Grid.Column width={8}> <Grid.Column width={8}>

4
smart-hut/src/views/Signup.js
View file

@ -34,8 +34,8 @@ export default class Signup extends Component {
username: this.state.username, username: this.state.username,
}; };
Forms. Forms
submitRegistration(params) .submitRegistration(params)
.then(() => this.setState({ success: true })) .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 }}));
}; };