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,
} from "semantic-ui-react";
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";
export default class ModalWindow extends Component {
class RoomModal extends Component {
constructor(props) {
super(props);
if (typeof this.props.idRoom === "function") {
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.state = this.initialState;
this.setInitialState();
this.fileInputRef = React.createRef();
this.addRoomModal = this.addRoomModal.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) => {
@ -43,29 +60,37 @@ export default class ModalWindow extends Component {
name: this.state.name,
image: this.state.img,
};
this.props.addRoom(data);
this.setState({
name: "Device",
});
this.closeModal();
this.props.saveRoom(data, null)
.then(() => {
this.setInitialState();
this.closeModal();
})
.catch((err) => console.error('error in creating room', err));
};
modifyRoomModal = (e) => {
let data = {
icon:
this.state.selectedIcon === ""
? this.idRoom.icon
? this.props.room.icon
: 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,
};
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) => {
this.props.deleteRoom();
this.closeModal();
// no need to close modal since this room modal instance will be deleted
this.props.deleteRoom(this.props.id)
.catch((err) => console.error('error in deleting room', err));
};
changeSomething = (event) => {
@ -107,7 +132,7 @@ export default class ModalWindow extends Component {
{!this.props.nicolaStop ? (
<div>
<Responsive minWidth={768}>
{this.props.type === "new" ? (
{this.type === "new" ? (
<Button
icon
labelPosition="left"
@ -122,7 +147,7 @@ export default class ModalWindow extends Component {
)}
</Responsive>
<Responsive maxWidth={768}>
{this.props.type === "new" ? (
{this.type === "new" ? (
<Button
icon
fluid
@ -149,7 +174,7 @@ export default class ModalWindow extends Component {
<Modal onClose={this.closeModal} open={this.state.openModal}>
<Header>
{this.props.type === "new" ? "Add new room" : "Modify room"}
{this.type === "new" ? "Add new room" : "Modify room"}
</Header>
<Modal.Content>
<Form>
@ -167,7 +192,7 @@ export default class ModalWindow extends Component {
<p>Insert an image of the room:</p>
<Form.Field>
<Image
src={this.state.img == null ? NO_IMAGE : this.state.img}
src={this.state.img === null ? NO_IMAGE : this.state.img}
size="small"
onClick={() => this.fileInputRef.current.click()}
/>
@ -182,6 +207,9 @@ export default class ModalWindow extends Component {
onChange={this.getBase64.bind(this)}
/>
</Form.Field>
{this.state.img ?
<Button onClick={this.unsetImage}>Remove image</Button>
: null }
</Form>
<div style={spaceDiv}>
@ -189,12 +217,12 @@ export default class ModalWindow extends Component {
<SelectIcons
updateIcon={this.updateIcon}
currentIcon={
this.props.type === "new" ? "home" : this.idRoom.icon
this.type === "new" ? "home" : this.props.room.icon
}
/>
</div>
{this.props.type === "modify" ? (
{this.type === "modify" ? (
<Button
icon
labelPosition="left"
@ -210,19 +238,19 @@ export default class ModalWindow extends Component {
<Modal.Actions>
<Button color="red" onClick={this.closeModal}>
<Icon name="remove" />{" "}
{this.props.type === "new" ? "Cancel" : "Discard changes"}
{this.type === "new" ? "Cancel" : "Discard changes"}
</Button>
<Button
color="green"
onClick={
this.props.type === "new"
this.type === "new"
? this.addRoomModal
: this.modifyRoomModal
}
>
<Icon name="checkmark" />{" "}
{this.props.type === "new" ? "Add room" : "Save changes"}
{this.type === "new" ? "Add room" : "Save changes"}
</Button>
</Modal.Actions>
</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 { Grid } from "semantic-ui-react";
import { editButtonStyle, panelStyle } from "./devices/styleComponents";
import { checkMaxLength, DEVICE_NAME_MAX_LENGTH } from "./devices/constants";
import { panelStyle } from "./devices/styleComponents";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux";
@ -49,6 +48,7 @@ const mapStateToProps = (state, _) => ({
if (state.active.activeRoom === -1) {
return Object.values(state.devices);
} else {
console.log(state.active.activeRoom);
const deviceArray = [...state.rooms[state.active.activeRoom].devices].sort();
console.log(deviceArray);
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 {
BottomPanel,
StyledDiv,
editModeIconStyle,
editModeStyleLeft,
StyledDiv
} from "./styleComponents";
import { Image } from "semantic-ui-react";
import {

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

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

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

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

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

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