Saving up work on ChatRoomEditor related files.

Author: przucidlo

src/app/chatroom/creator/ChatRoomCreator.js

@@ -1,18 +1,19 @@
-import React, { Component, useRef } from 'react'
+import React, { Component} from 'react'
 import ChatRoomModal from './ChatRoomModal';
 
 export default class ChatRoomCreator extends Component {
 
  constructor(props) {
  super(props);
- this.childRef = React.createRef();
+ this.modalRef = React.createRef();
  }
 
  render() {
  return (
  <div>
- <ChatRoomModal ref={this.childRef} />
- <button type="button" class="btn btn-primary" onClick={() => { this.childRef.current.toggle() }}>Create ChatRoom</button>
+ <ChatRoomModal ref={this.modalRef} chatRoomId={this.props.chatRoomId}/>
+ 
+ <button type="button" class="btn btn-primary" onClick={() => { this.modalRef.current.toggle() }}>Create ChatRoom</button>
  </div>
  )
  }

src/app/chatroom/editor/ChatRoomEditor.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import ChatRoomEditorModal from './ChatRoomEditorModal';
+import {connect} from 'react-redux';
+
+class ChatRoomEditor extends Component {
+ constructor(props){
+ super(props);
+ }
+ 
+ render() {
+ return (
+ <div>
+ <ChatRoomEditorModal ref='modal' chatRooomId={this.props.chatRooomId}/>
+ <button type="button" class="btn btn-primary" onClick={() => { this.refs.modal.getWrappedInstance().toggle() }}>Edit</button>
+ </div>
+ )
+ }
+}
+
+export default connect()(ChatRoomEditor);

src/app/chatroom/editor/ChatRoomEditorModal.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import {connect} from 'react-redux';
+
+
+class ChatRoomEditorModal extends Component {
+ constructor(props){
+ super(props);
+ 
+ this.state = {
+ modal: false
+ }
+ this.toggle = this.toggle.bind(this);
+ }
+
+ toggle(){
+ this.setState({
+ modal: !this.state.modal
+ })
+ }
+
+ render() {
+ return (
+ <div>
+ <Modal isOpen={this.state.modal} toggle={this.toggle}>
+ <ModalHeader toggle={this.toggle}>Edit ChatRoom</ModalHeader>
+ <ModalBody>
+ <label>Name:</label>
+ <input type="text" className="form-control" value={this.state.nameInput} onChange={this.handleNameInput} />
+ <label>Description:</label>
+ <input type="text" className="form-control" value={this.state.descInput} onChange={this.handleDescInput} />
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={this.createChatRoom}>Edit</Button>{' '}
+ <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = (state) => ({
+ chatRooms: state.rooms.chatRooms
+})
+
+export default connect(mapStateToProps, null, null, {withRef: true})(ChatRoomEditorModal);

src/app/chatroom/list/ChatRoomList.js

@@ -4,6 +4,7 @@ import {connect} from 'react-redux';
 import {addChatRoom, updateChatRoom, selectChatRoom} from '../../../redux/actions/ChatRoomActions';
 import {socketSubscribe, socketSend} from '../../../redux/actions/SocketActions';
 import {fetchUserChatRoomList, subscribeChatRoomListTopic} from './ChatRoomListAPI';
+import ChatRoomEditor from '../editor/ChatRoomEditor';
 
 class ChatRoomList extends React.Component{
  constructor(props){
@@ -23,8 +24,9 @@ class ChatRoomList extends React.Component{
 
  displayList(){
  return this.props.chatRooms.map((chatRoom) => 
- <div key={chatRoom.id} onClick={() => { this.props.selectChatRoom(chatRoom.id)}}>
- {chatRoom.name}
+ <div key={chatRoom.id} >
+ <a onClick={() => { this.props.selectChatRoom(chatRoom.id)}}>{chatRoom.name}</a>
+ <ChatRoomEditor chatRoomId={chatRoom.id}/>
  </div>
  )
  }