Added ChatRoomEditor to ChatRoomList

Author: przucidlo

src/app/chatroom/editor/ChatRoomEditor.js

@@ -1,17 +1,38 @@
 import React, { Component } from 'react'
 import ChatRoomEditorModal from './ChatRoomEditorModal';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
+import { getUserRoomRight } from './ChatRoomEditorAPI';
+import settingIcon from './assets/settings.svg';
 
 class ChatRoomEditor extends Component {
- constructor(props){
+ constructor(props) {
  super(props);
+ this.state = {
+ isUserAbleToEdit: false
+ }
  }
- 
+
+ componentDidMount() {
+ this.checkIfUserIsAbleToEdit();
+ }
+
+ checkIfUserIsAbleToEdit() {
+ getUserRoomRight(this.props.chatRoomId).then(responseJson => {
+ if (responseJson.rightLevel === 'OWNER') {
+ this.setState({ isUserAbleToEdit: true });
+ }
+ })
+ }
+
  render() {
+ let editTrigger;
+ if (this.state.isUserAbleToEdit)
+ editTrigger = <img src={settingIcon} onClick={() => { this.refs.modal.getWrappedInstance().toggle() }} />
+ 
  return (
- <div>
- <ChatRoomEditorModal ref='modal' chatRoomId={this.props.chatRoomId}/>
- <button type="button" class="btn btn-primary" onClick={() => { this.refs.modal.getWrappedInstance().toggle() }}>Edit</button>
+ <div className="float-right">
+ <ChatRoomEditorModal ref='modal' chatRoomId={this.props.chatRoomId} />
+ {editTrigger}
  </div>
  )
  }

src/app/chatroom/editor/ChatRoomEditorAPI.js

@@ -18,4 +18,15 @@ export const editChatRoom = async (id, name, description) => {
  }).then(jsonResponse => {
  return jsonResponse;
  })
+}
+
+export const getUserRoomRight = async (roomId) => {
+ return fetch(appConfig.apiUrl + 'secure/user/role?roomId=' + roomId, {
+ method: 'GET',
+ headers: {
+ 'Authorization': Cookies.get('Authorization')
+ }
+ }).then(response => {
+ return response.json();
+ })
 }

src/app/chatroom/editor/assets/settings.svg

@@ -94,6 +94,10 @@ class ChatRoomJoinModal extends Component {
  }
 
  prepareEachChatRoomForDisplay() {
+ if(this.state.roomList.length === 0){
+ return (<div>Well there is not rooms you can join at this momement, you might consider creating your own room!</div>)
+ }
+ 
  return this.state.roomList.map((chatRoom) => {
  let isUserMemberOfThisRoom = this.isUserMemberOfThisChatRoom(chatRoom.id); 
 

src/app/chatroom/join/ChatRoomJoinModal.js

@@ -5,4 +5,5 @@
 .chat-room-list{
  height: 320px;
  overflow: auto;
+ border: solid 1px rgba(0, 0, 0, 0.12) ;
 }

src/app/chatroom/join/ChatRoomJoinStyle.css

@@ -30,6 +30,8 @@ class ChatRoomList extends React.Component {
  displayList() {
  return this.props.chatRooms.map((chatRoom) =>
  <div key={chatRoom.id} onClick={() => { this.props.selectChatRoom(chatRoom.id) }} className="room">
+ <ChatRoomEditor chatRoomId={chatRoom.id} />
+ 
  {chatRoom.name}
  </div>
  )
@@ -41,14 +43,14 @@ class ChatRoomList extends React.Component {
  <div className="site-logo"><h2>ReactChat</h2></div>
  <h5 className="public-category">Public:</h5>
  <div className="room-list d-flex flex-fill flex-column flex-grow-1">
- 
+
  {this.displayList()}
  </div>
  <div className="d-flex flex-shrink-1 button-bar">
  <ChatRoomCreator />
- <div className="divider"/>
+ <div className="divider" />
  <ChatRoomJoin />
- <div className="divider"/>
+ <div className="divider" />
  <LogoutButton />
  </div>
  </div>