Skip to content
This repository has been archived by the owner on Feb 7, 2020. It is now read-only.

-Created UI functionality for changing room name #59

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

-Created UI functionality for changing room name #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d23a916
-Created UI functionality for changing room name
saadqadeernmx Jul 4, 2018
cc923a0
-Updated code for updating room name
saadqadeernmx Jul 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions public/index.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 38 additions & 17 deletions src/components/RoomHeader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
}) => (
<header className={style.component}>
<button onClick={e => setSidebar(!sidebarOpen)}>
<svg>
<use xlinkHref="index.svg#menu" />
</svg>
</button>
<h1>{room.name && room.name.replace(user.id, '')}</h1>
{room.users && (
<div onClick={e => setUserList(!userListOpen)}>
<span>{room.users.length}</span>
<header className={style.component}>
<button onClick={e => setSidebar(!sidebarOpen)}>
<svg>
<use xlinkHref="index.svg#members" />
<use xlinkHref="index.svg#menu" />
</svg>
</div>
)}
</header>
)
</button>
{
(room.name && !inputIsOpen) && <h1 onClick={e => setTitleEditable(!inputIsOpen, room.name)}>
{room.name.replace(user.id, '')}
</h1>
}

{
inputIsOpen &&
<h1>{[
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could un-nest this a bit.. perhaps what we should be aiming for is something like:

<form className={style.horizontal}>
  <input />
  <button />
</form>

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lukejacksonn are you talking about changing the indentation or logic here ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just not wrapping things so much.. like, having a form in an h1 feels a bit wrong.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had wrapped the form in h1 because h1 had styles properties that were used by the heading before editable field is set true. So what I can do now is that to make another style object with same properties and apply it to form. But it will be like duplicating things. Apart from that I don't think that we need a form here either. If I remove it it'll work fine. So, should I remove it ?

<form >
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good practice when using forms is to add an onSubmit prop that, at least does e.preventDefault otherwise if someone hits return inside the form then the page gets reloaded.

Copy link
Author

@MuhammadSaadQadeer MuhammadSaadQadeer Jul 10, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lukejacksonn okay I'll add it.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could also call the updateRoom function from within onSubmit and then make your SVG a button type='submit'.. then when someone clicks on it or presses enter, then it will do the right thing 👌

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What exactly are you implying , I am missing your point here, do you want me to remove the svg and add a button & I haven't used onSubmit prop, I did use it in redux forms but that was different scenario. Can you elaborate a bit more ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is a form that handles both the user hitting enter and them clicking the submit button. This way the input it not controlled but left to do its thing until the user submits the form. Which requires less wiring (no changeInputTitle action or roomTitle in state).

<form onSubmit={e => {
  e.preventDefault()
  updateRoom(room.id, e.target.elements[0].value)
}}>
  <input />
  <button type='submit'><svg /></button>
</form>

Does that make sense? What do you think?

<span className={style.horizontal}>
<input onChange={changeInputTitle} className={style.inputComponent} value={roomTitle} />
&nbsp;
<svg onClick={e => updateRoom(room.id, roomTitle)}>
<use xlinkHref="index.svg#done" />
</svg>
</span>
</form>
]}</h1>
}


{room.users && (
<div onClick={e => setUserList(!userListOpen)}>
<span>{room.users.length}</span>
<svg>
<use xlinkHref="index.svg#members" />
</svg>
</div>
)}
</header>
)
15 changes: 15 additions & 0 deletions src/components/RoomHeader/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
28 changes: 24 additions & 4 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }),

// --------------------------------------
Expand Down Expand Up @@ -76,6 +78,24 @@ class View extends React.Component {
createRoom: options =>
this.state.user.createRoom(options).then(this.actions.joinRoom),

updateRoom:(roomId,roomName)=>{

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 => {
if (options.user.id !== this.state.user.id) {
const exists = this.state.user.rooms.find(
Expand Down Expand Up @@ -221,7 +241,7 @@ class View extends React.Component {
sidebarOpen,
userListOpen,
} = this.state
const { createRoom, createConvo, removeUserFromRoom } = this.actions
const { createRoom, createConvo, removeUserFromRoom , updateRoom } = this.actions

return (
<main>
Expand All @@ -238,7 +258,7 @@ class View extends React.Component {
{user.id && <CreateRoomForm submit={createRoom} />}
</aside>
<section>
<RoomHeader state={this.state} actions={this.actions} />
<RoomHeader state={this.state} actions={this.actions} updateRoomName={updateRoom} />
{room.id ? (
<row->
<col->
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down