From 2628c70cdfbd8a13071c219ab2e78f4538d71d79 Mon Sep 17 00:00:00 2001 From: Manuel Stahl Date: Thu, 22 Aug 2019 19:58:29 +0200 Subject: [PATCH] Add component room-admin/AddRoomDialog Change-Id: Ia6546dff76388b4542f8a2fe22181556297cc3b6 --- src/features/room-admin/AddRoomDialog.js | 127 ++++++++++++++++++ src/features/room-admin/AddRoomDialog.scss | 1 + src/features/room-admin/List.js | 50 +++++-- src/features/room-admin/index.js | 1 + src/features/room-admin/style.scss | 1 + .../features/room-admin/AddRoomDialog.test.js | 19 +++ 6 files changed, 191 insertions(+), 8 deletions(-) create mode 100644 src/features/room-admin/AddRoomDialog.js create mode 100644 src/features/room-admin/AddRoomDialog.scss create mode 100644 tests/features/room-admin/AddRoomDialog.test.js 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 ( + + Add Room + + {createRoomError && {createRoomError.message}} +
+
+ } + margin="dense" + labelPlacement="start" + /> + } + margin="dense" + labelPlacement="start" + /> +
+
+
+
+ {createRoomPending ? + () : + ( + + + ) + } + +
+ + ); + } +} + +/* 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 (
{(!mtx || !mtx.clientRunning) && } {fetchRoomsPending && logging in} + + @@ -68,4 +102,4 @@ function mapDispatchToProps(dispatch) { export default connect( mapStateToProps, mapDispatchToProps -)(List); +)(withStyles(styles, { withTheme: true })(List)); diff --git a/src/features/room-admin/index.js b/src/features/room-admin/index.js index 2d01c86..9d5da0e 100644 --- a/src/features/room-admin/index.js +++ b/src/features/room-admin/index.js @@ -1 +1,2 @@ export { default as List } from './List'; +export { default as AddRoomDialog } from './AddRoomDialog'; diff --git a/src/features/room-admin/style.scss b/src/features/room-admin/style.scss index 9c6d373..94192c8 100644 --- a/src/features/room-admin/style.scss +++ b/src/features/room-admin/style.scss @@ -1,2 +1,3 @@ @import '../../styles/mixins'; @import './List'; +@import './AddRoomDialog'; diff --git a/tests/features/room-admin/AddRoomDialog.test.js b/tests/features/room-admin/AddRoomDialog.test.js new file mode 100644 index 0000000..2540961 --- /dev/null +++ b/tests/features/room-admin/AddRoomDialog.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { AddRoomDialog } from '../../../src/features/room-admin/AddRoomDialog'; + +describe('room-admin/AddRoomDialog', () => { + it('renders node with correct class name', () => { + const props = { + roomAdmin: {}, + actions: {}, + }; + const renderedComponent = shallow( + + ); + + expect( + renderedComponent.find('.room-admin-add-room-dialog').length + ).toBe(1); + }); +});