2020-04-24 14:54:50 +00:00
|
|
|
import React, { Component } from "react";
|
2020-05-02 20:37:20 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Header,
|
|
|
|
Modal,
|
|
|
|
Icon,
|
|
|
|
Form,
|
|
|
|
Responsive,
|
|
|
|
Dropdown,
|
|
|
|
} from "semantic-ui-react";
|
2020-04-24 14:54:50 +00:00
|
|
|
import { connect } from "react-redux";
|
2020-05-02 20:37:20 +00:00
|
|
|
import { RemoteService, Forms } from "../remote";
|
2020-04-24 14:54:50 +00:00
|
|
|
import { appActions } from "../storeActions";
|
|
|
|
//import { update } from "immutability-helper";
|
|
|
|
|
|
|
|
class HostModal extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-05-02 20:37:20 +00:00
|
|
|
this.state = { guests: [], users: [] };
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
this.props
|
|
|
|
.fetchGuests()
|
|
|
|
.then(() => {
|
|
|
|
this.setState({
|
|
|
|
...this.state,
|
|
|
|
guests: this.props.guests.map((u) => u.id),
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch(console.error);
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
Forms.fetchAllUsers()
|
|
|
|
.then((users) =>
|
|
|
|
this.setState({
|
|
|
|
...this.state,
|
|
|
|
users: users.map((u) => ({
|
|
|
|
key: u.id,
|
|
|
|
text: `@${u.username} (${u.name})`,
|
|
|
|
value: u.id,
|
|
|
|
})),
|
|
|
|
})
|
|
|
|
)
|
|
|
|
.catch(console.error);
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
this.saveGuestSettings = this.saveGuestSettings.bind(this);
|
|
|
|
this.closeModal = this.closeModal.bind(this);
|
|
|
|
this.openModal = this.openModal.bind(this);
|
|
|
|
this.setGuests = this.setGuests.bind(this);
|
|
|
|
this.saveGuestSettings = this.saveGuestSettings.bind(this);
|
2020-04-24 14:54:50 +00:00
|
|
|
}
|
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
setGuests(_, guests) {
|
|
|
|
this.setState({ guests: guests.value });
|
|
|
|
}
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
closeModal() {
|
2020-04-24 14:54:50 +00:00
|
|
|
this.setState({ openModal: false });
|
2020-05-02 20:37:20 +00:00
|
|
|
}
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
openModal() {
|
2020-04-24 14:54:50 +00:00
|
|
|
this.setState({ openModal: true });
|
2020-05-02 20:37:20 +00:00
|
|
|
}
|
2020-04-24 14:54:50 +00:00
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
saveGuestSettings() {
|
|
|
|
this.props
|
|
|
|
.updateGuests(this.state.guests)
|
|
|
|
.then(this.closeModal)
|
|
|
|
.catch(console.error);
|
|
|
|
}
|
2020-05-02 14:40:29 +00:00
|
|
|
|
2020-04-24 14:54:50 +00:00
|
|
|
render() {
|
|
|
|
return (
|
2020-05-02 14:40:29 +00:00
|
|
|
<React.Fragment>
|
|
|
|
<Responsive minWidth={768}>
|
|
|
|
<Button icon labelPosition="left" inverted onClick={this.openModal}>
|
|
|
|
<Icon name="plus" size="small" />
|
|
|
|
Invitation settings
|
|
|
|
</Button>
|
|
|
|
</Responsive>
|
|
|
|
<Responsive maxWidth={768}>
|
2020-05-02 20:37:20 +00:00
|
|
|
<Button icon fluid labelPosition="left" onClick={this.openModal}>
|
|
|
|
<Icon name="plus" size="small" />
|
|
|
|
Invitation settings
|
|
|
|
</Button>
|
2020-05-02 14:40:29 +00:00
|
|
|
</Responsive>
|
2020-04-24 14:54:50 +00:00
|
|
|
|
|
|
|
<Modal closeIcon onClose={this.closeModal} open={this.state.openModal}>
|
2020-05-02 14:40:29 +00:00
|
|
|
<Header>Select guests</Header>
|
2020-04-24 14:54:50 +00:00
|
|
|
<Modal.Content>
|
2020-05-02 14:40:29 +00:00
|
|
|
<marquee scrollamount="50">
|
|
|
|
<h1>Spaghetti!</h1>
|
|
|
|
</marquee>
|
2020-05-02 20:37:20 +00:00
|
|
|
<Modal.Content>
|
|
|
|
<Form>
|
|
|
|
<Form.Field style={{ marginTop: "1rem" }}>
|
|
|
|
<label>Select which users are your guests: </label>
|
|
|
|
<Dropdown
|
|
|
|
name="guests"
|
|
|
|
placeholder="Select Guests"
|
|
|
|
fluid
|
|
|
|
multiple
|
|
|
|
onChange={this.setGuests}
|
|
|
|
options={this.state.users}
|
|
|
|
value={this.state.guests}
|
|
|
|
/>
|
|
|
|
</Form.Field>
|
|
|
|
</Form>
|
|
|
|
</Modal.Content>
|
2020-04-24 14:54:50 +00:00
|
|
|
</Modal.Content>
|
|
|
|
<Modal.Actions>
|
|
|
|
<Button color="red" onClick={this.closeModal}>
|
2020-05-02 14:40:29 +00:00
|
|
|
<Icon name="remove" /> Discard changes
|
2020-04-24 14:54:50 +00:00
|
|
|
</Button>
|
|
|
|
|
2020-05-02 14:40:29 +00:00
|
|
|
<Button color="green" onClick={this.saveGuestSettings}>
|
|
|
|
<Icon name="checkmark" /> Save changes
|
2020-04-24 14:54:50 +00:00
|
|
|
</Button>
|
|
|
|
</Modal.Actions>
|
|
|
|
</Modal>
|
2020-05-02 14:40:29 +00:00
|
|
|
</React.Fragment>
|
2020-04-24 14:54:50 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const setActiveHost = (activeHost) => {
|
2020-05-02 14:40:29 +00:00
|
|
|
return (dispatch) => dispatch(appActions.setActiveHost(activeHost));
|
2020-04-24 14:54:50 +00:00
|
|
|
};
|
|
|
|
|
2020-05-02 20:37:20 +00:00
|
|
|
const mapStateToProps = (state) => ({
|
|
|
|
guests: state.guests,
|
2020-04-24 14:54:50 +00:00
|
|
|
});
|
|
|
|
const HostModalContainer = connect(
|
|
|
|
mapStateToProps,
|
|
|
|
{ ...RemoteService, setActiveHost },
|
|
|
|
null,
|
|
|
|
{ forwardRef: true }
|
|
|
|
)(HostModal);
|
|
|
|
export default HostModalContainer;
|