From d23a916ccb629723f41963a89b350f2c59b2ef70 Mon Sep 17 00:00:00 2001 From: Saad Qadeer Date: Wed, 4 Jul 2018 10:25:36 +0500 Subject: [PATCH 1/2] -Created UI functionality for changing room name --- public/index.svg | 4 ++ src/components/RoomHeader/index.js | 55 +++++++++++++++------- src/components/RoomHeader/index.module.css | 15 ++++++ src/index.js | 25 ++++++++-- yarn.lock | 6 +-- 5 files changed, 81 insertions(+), 24 deletions(-) diff --git a/public/index.svg b/public/index.svg index 6c48eec..cab1390 100644 --- a/public/index.svg +++ b/public/index.svg @@ -31,4 +31,8 @@ + + + + diff --git a/src/components/RoomHeader/index.js b/src/components/RoomHeader/index.js index 2498758..cbac705 100644 --- a/src/components/RoomHeader/index.js +++ b/src/components/RoomHeader/index.js @@ -2,23 +2,44 @@ import React from 'react' import style from './index.module.css' export const RoomHeader = ({ - state: { room, user, sidebarOpen, userListOpen }, - actions: { setSidebar, setUserList }, + state: { room, user, sidebarOpen, userListOpen, inputIsOpen, roomTitle }, + actions: { setSidebar, setUserList, setTitleEditable, updateRoom, changeInputTitle }, }) => ( -
- -

{room.name && room.name.replace(user.id, '')}

- {room.users && ( -
setUserList(!userListOpen)}> - {room.users.length} +
+
- )} -
-) + + { + (room.name && !inputIsOpen) &&

setTitleEditable(!inputIsOpen, room.name)}> + {room.name.replace(user.id, '')} +

+ } + + { + inputIsOpen && +

{[ +
+ + +   + updateRoom(room.id, roomTitle)}> + + + +
+ ]}

+ } + + + {room.users && ( +
setUserList(!userListOpen)}> + {room.users.length} + + + +
+ )} + + ) diff --git a/src/components/RoomHeader/index.module.css b/src/components/RoomHeader/index.module.css index 543d60e..4f91e2f 100644 --- a/src/components/RoomHeader/index.module.css +++ b/src/components/RoomHeader/index.module.css @@ -9,6 +9,21 @@ /*box-shadow: 0 0 0.62rem rgba(0, 0, 0, 0.1);*/ } +.horizontal { + display: flex; + align-items: center; +} + +.inputComponent { + padding: 12px 20px; + font-size: 1.38rem; + color: rgba(0, 0, 0, 0.62); + margin: auto; + text-align: center; + font-weight: bold + +} + .component button { background: transparent; border: 1px solid rgba(0, 0, 0, 0.1); diff --git a/src/index.js b/src/index.js index 4688580..16a7ffc 100644 --- a/src/index.js +++ b/src/index.js @@ -28,21 +28,23 @@ class View extends React.Component { messages: {}, typing: {}, sidebarOpen: false, + inputIsOpen:false, userListOpen: window.innerWidth > 1000, + roomTitle:"" } actions = { // -------------------------------------- // UI // -------------------------------------- - + changeInputTitle:e => this.setState({roomTitle:e.target.value}), setSidebar: sidebarOpen => this.setState({ sidebarOpen }), setUserList: userListOpen => this.setState({ userListOpen }), + setTitleEditable:(inputIsOpen, roomTitle) => this.setState({inputIsOpen,roomTitle}), // -------------------------------------- // User // -------------------------------------- - setUser: user => this.setState({ user }), // -------------------------------------- @@ -76,6 +78,19 @@ class View extends React.Component { createRoom: options => this.state.user.createRoom(options).then(this.actions.joinRoom), + updateRoom:(roomId,roomName)=>{ + this.actions.setTitleEditable(!this.state.inputIsOpen) + this.state.user.updateRoom({ + roomId: roomId , + name: roomName, + private: false + }).then(() => { + alert(`Room name with ${roomId} updated successfully`) + }) + .catch(err => { + alert(err.info.error_description) + }) + }, createConvo: options => { if (options.user.id !== this.state.user.id) { const exists = this.state.user.rooms.find( @@ -221,11 +236,13 @@ class View extends React.Component { sidebarOpen, userListOpen, } = this.state - const { createRoom, createConvo, removeUserFromRoom } = this.actions + const { createRoom, createConvo, removeUserFromRoom , updateRoom } = this.actions return (
- + {room.id ? ( diff --git a/yarn.lock b/yarn.lock index c24f55b..2b125a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1063,9 +1063,9 @@ lodash "^4.2.0" to-fast-properties "^2.0.0" -"@pusher/chatkit@^0.7.3": - version "0.7.9" - resolved "https://registry.yarnpkg.com/@pusher/chatkit/-/chatkit-0.7.9.tgz#34587299107baf55b36b3fe1c9870ea99e90a62a" +"@pusher/chatkit@^0.7.9": + version "0.7.16" + resolved "https://registry.yarnpkg.com/@pusher/chatkit/-/chatkit-0.7.16.tgz#a234deccc885c56ce25bf6ae59c22ba77fa2e975" dependencies: pusher-platform "^0.15.1" ramda "^0.25.0" From cc923a07f245e60df3af0d5a893412c7d39b36d0 Mon Sep 17 00:00:00 2001 From: Saad Qadeer Date: Fri, 6 Jul 2018 10:43:26 +0500 Subject: [PATCH 2/2] -Updated code for updating room name -Removed unnecessary console.log --- src/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 16a7ffc..7de4a25 100644 --- a/src/index.js +++ b/src/index.js @@ -79,16 +79,21 @@ class View extends React.Component { this.state.user.createRoom(options).then(this.actions.joinRoom), updateRoom:(roomId,roomName)=>{ - this.actions.setTitleEditable(!this.state.inputIsOpen) + this.state.user.updateRoom({ roomId: roomId , name: roomName, private: false }).then(() => { + this.setState({ + roomTitle:roomName + }) alert(`Room name with ${roomId} updated successfully`) + this.actions.setTitleEditable(!this.state.inputIsOpen) }) .catch(err => { alert(err.info.error_description) + this.actions.setTitleEditable(!this.state.inputIsOpen) }) }, createConvo: options => { @@ -241,8 +246,6 @@ class View extends React.Component { return (