diff --git a/src/features/room-admin/AddRoomDialog.js b/src/features/room-admin/AddRoomDialog.js new file mode 100644 index 0000000..8e5799f --- /dev/null +++ b/src/features/room-admin/AddRoomDialog.js @@ -0,0 +1,127 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core'; +import { Button, Checkbox, CircularProgress, FormControlLabel, TextField } from '@material-ui/core'; +import * as actions from './redux/actions'; + +export class AddRoomDialog extends Component { + static propTypes = { + open: PropTypes.bool.isRequired, + onClose: PropTypes.func.isRequired, + roomAdmin: PropTypes.object.isRequired, + actions: PropTypes.object.isRequired, + }; + + constructor(props) { + super(props); + + this.state = { + is_public: false, + is_federated: false, + room_alias_name: '', + name: '', + topic: '', + }; + + this.handleChange = this.handleChange.bind(this); + this.handleCheckbox = this.handleCheckbox.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + if (this.props.roomAdmin.createRoomError) this.props.actions.dismissCreateRoomError(); + } + + componentDidUpdate(prevProps) { + if (!this.props.roomAdmin.createRoomError + && prevProps.roomAdmin.createRoomPending + && !this.props.roomAdmin.createRoomPending) { + this.props.onClose(); + } + } + + handleChange(e) { + const { name, value } = e.target; + this.setState({ [name]: value }); + if (this.props.roomAdmin.createRoomError) this.props.actions.dismissCreateRoomError(); + } + + handleCheckbox(e) { + const { name, checked } = e.target; + this.setState({ [name]: checked }); + if (this.props.roomAdmin.createRoomError) this.props.actions.dismissCreateRoomError(); + } + + handleSubmit(e) { + e.preventDefault(); + const { is_public, is_federated } = this.state; + var creation_content = {}; + creation_content['m.federate'] = is_federated; + this.setState({ + visibility: is_public ? 'public' : 'private', + creation_content: creation_content, + }); + this.props.actions.createRoom(this.state) + } + + render() { + const { open, onClose } = this.props; + const { createRoomPending, createRoomError } = this.props.roomAdmin; + return ( + + ); + } +} + +/* istanbul ignore next */ +function mapStateToProps(state) { + return { + roomAdmin: state.roomAdmin, + }; +} + +/* istanbul ignore next */ +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({ ...actions }, dispatch) + }; +} + +export default connect( + mapStateToProps, + mapDispatchToProps +)(AddRoomDialog); diff --git a/src/features/room-admin/AddRoomDialog.scss b/src/features/room-admin/AddRoomDialog.scss new file mode 100644 index 0000000..c89b4a5 --- /dev/null +++ b/src/features/room-admin/AddRoomDialog.scss @@ -0,0 +1 @@ +@import '../../styles/mixins'; diff --git a/src/features/room-admin/List.js b/src/features/room-admin/List.js index a59ac48..b386c6b 100644 --- a/src/features/room-admin/List.js +++ b/src/features/room-admin/List.js @@ -3,28 +3,62 @@ import PropTypes from 'prop-types'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { Redirect } from 'react-router-dom' -import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'; +import { withStyles } from '@material-ui/core/styles'; +import { Fab, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core'; +import AddIcon from '@material-ui/icons/Add'; +import AddRoomDialog from './AddRoomDialog'; import * as actions from './redux/actions'; +const styles = theme => ({ + fab: { + margin: 0, + top: 'auto', + right: 20, + bottom: 20, + left: 'auto', + position: 'fixed', + }, +}); + export class List extends Component { static propTypes = { roomAdmin: PropTypes.object.isRequired, actions: PropTypes.object.isRequired, + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, }; - componentDidMount() { - const { fetchPublicRooms } = this.props.actions; - fetchPublicRooms(); + constructor(props) { + super(props); + + this.state = { + addRoomDialogOpen: false, + }; } - render() { - const { mtx } = this.props; - const { roomList, fetchRoomsPending } = this.props.roomAdmin; + componentDidMount() { + this.props.actions.fetchPublicRooms(); + } + handleOpenAddDialog = () => { + this.setState({ addRoomDialogOpen: true }); + }; + + handleCloseAddDialog = () => { + this.setState({ addRoomDialogOpen: false }); + this.props.actions.fetchPublicRooms(); + }; + + render() { + const { classes, mtx } = this.props; + const { roomList, fetchRoomsPending } = this.props.roomAdmin; + const { addRoomDialogOpen } = this.state; return (