From 5965563b7ad155be2c3c1a7b22ca6b389f698968 Mon Sep 17 00:00:00 2001
From: DevFlex <18128146+DevFlex@users.noreply.github.com>
Date: Mon, 9 Apr 2018 18:35:14 -0300
Subject: [PATCH 1/4] Initial attempt to add notification support. There is
 still and issue that when you refresh it shows all of the notifications
 again. It also needs some touch up work around the requesting user permission
 flow for the notifications.

---
 .gitignore   |  1 +
 src/index.js | 94 ++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/.gitignore b/.gitignore
index 18a727a..3b4c60d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 build
 client/static/index.js
 .DS_Store
+.idea/
diff --git a/src/index.js b/src/index.js
index 7ebbc19..ba06034 100644
--- a/src/index.js
+++ b/src/index.js
@@ -60,18 +60,19 @@ class View extends React.Component {
       this.actions.setRoom(room)
       this.actions.subscribeToRoom(room)
       this.state.messages[room.id] &&
-        this.actions.setCursor(
-          room.id,
-          Object.keys(this.state.messages[room.id]).pop()
-        )
+      this.actions.setCursor(
+        room.id,
+        Object.keys(this.state.messages[room.id]).pop()
+      )
     },
 
-    subscribeToRoom: room =>
+    subscribeToRoom: room => {
       !this.state.user.roomSubscriptions[room.id] &&
       this.state.user.subscribeToRoom({
         roomId: room.id,
         hooks: { onNewMessage: this.actions.addMessage },
-      }),
+      })
+    },
 
     createRoom: options =>
       this.state.user.createRoom(options).then(this.actions.joinRoom),
@@ -86,10 +87,10 @@ class View extends React.Component {
         exists
           ? this.actions.joinRoom(exists)
           : this.actions.createRoom({
-              name: this.state.user.id + options.user.id,
-              addUserIds: [options.user.id],
-              private: true,
-            })
+            name: this.state.user.id + options.user.id,
+            addUserIds: [options.user.id],
+            private: true,
+          })
       }
     },
 
@@ -102,8 +103,8 @@ class View extends React.Component {
       userId === this.state.user.id
         ? this.state.user.leaveRoom({ roomId })
         : this.state.user
-            .removeUserFromRoom({ userId, roomId })
-            .then(this.actions.setRoom),
+        .removeUserFromRoom({ userId, roomId })
+        .then(this.actions.setRoom),
 
     // --------------------------------------
     // Cursors
@@ -121,6 +122,12 @@ class View extends React.Component {
     addMessage: payload => {
       const roomId = payload.room.id
       const messageId = payload.id
+      const userId = this.state.user ? this.state.user.id : null
+
+      if(userId !== payload.senderId) {
+        this.actions.showNotification.call(this, payload)
+      }
+
       this.setState(set(this.state, ['messages', roomId, messageId], payload))
       if (roomId === this.state.room.id) {
         const cursor = this.state.user.readCursor({ roomId }) || {}
@@ -164,22 +171,54 @@ class View extends React.Component {
     // --------------------------------------
 
     setUserPresence: () => this.forceUpdate(),
+
+    // --------------------------------------
+    // Notifications
+    // --------------------------------------
+    requestUsersPermissionForNotifications: () => {
+      Notification.requestPermission()
+    },
+
+    showNotification: (payload) => {
+      const options = {
+        body: payload.text
+      }
+      const notification = new Notification('React Slack Clone', options)
+
+      notification.addEventListener('click', this.actions.handleNotificationClick.bind(this, payload))
+    },
+
+    handleNotificationClick: (payload, e) => {
+      e.preventDefault()
+
+      // focus on window that generated the notification
+      window.focus()
+
+      this.actions.showNotificationsMessage.call(this, payload.room)
+    },
+
+    showNotificationsMessage: (room) => {
+      this.actions.joinRoom(room)
+
+      this.actions.scrollToEnd()
+    }
   }
 
   componentDidMount() {
+    this.actions.requestUsersPermissionForNotifications()
     existingUser
       ? ChatManager(this, JSON.parse(existingUser))
       : fetch('https://chatkit-demo-server.herokuapp.com/auth', {
-          method: 'POST',
-          body: JSON.stringify({ code: authCode }),
-        })
-          .then(res => res.json())
-          .then(user => {
-            user.version = version
-            window.localStorage.setItem('chatkit-user', JSON.stringify(user))
-            window.history.replaceState(null, null, window.location.pathname)
-            ChatManager(this, user)
-          })
+        method: 'POST',
+        body: JSON.stringify({ code: authCode }),
+      })
+      .then(res => res.json())
+      .then(user => {
+        user.version = version
+        window.localStorage.setItem('chatkit-user', JSON.stringify(user))
+        window.history.replaceState(null, null, window.location.pathname)
+        ChatManager(this, user)
+      })
   }
 
   render() {
@@ -191,7 +230,12 @@ class View extends React.Component {
       sidebarOpen,
       userListOpen,
     } = this.state
-    const { createRoom, createConvo, removeUserFromRoom } = this.actions
+    const {
+      createRoom,
+      createConvo,
+      removeUserFromRoom
+    } = this.actions
+
     return (
       <main>
         <aside data-open={sidebarOpen}>
@@ -244,8 +288,8 @@ class View extends React.Component {
 // --------------------------------------
 
 window.localStorage.getItem('chatkit-user') &&
-  !window.localStorage.getItem('chatkit-user').match(version) &&
-  window.localStorage.clear()
+!window.localStorage.getItem('chatkit-user').match(version) &&
+window.localStorage.clear()
 
 const params = new URLSearchParams(window.location.search.slice(1))
 const authCode = params.get('code')

From f5589f8a463a971b004eecd9e60ef14aef2d51e0 Mon Sep 17 00:00:00 2001
From: DevFlex <18128146+devflex@users.noreply.github.com>
Date: Sat, 21 Apr 2018 14:10:30 -0300
Subject: [PATCH 2/4] Added emoji picker feature.

---
 package.json                                |   2 +
 src/components/CreateMessageForm/index.js   | 139 +++++++++++++++-----
 src/components/EmojiPicker/index.js         |  42 ++++++
 src/components/EmojiPicker/index.module.css |  32 +++++
 src/index.js                                |  12 +-
 yarn.lock                                   |  25 +++-
 6 files changed, 216 insertions(+), 36 deletions(-)
 create mode 100644 src/components/EmojiPicker/index.js
 create mode 100644 src/components/EmojiPicker/index.module.css

diff --git a/package.json b/package.json
index 2e5fce6..a7c1e9f 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
   "homepage": "https://pusher.github.io/react-slack-clone",
   "dependencies": {
     "@pusher/chatkit": "^0.7.9",
+    "emoji-js": "^3.4.0",
+    "emoji-picker-react": "^2.0.4",
     "object-path-immutable": "^1.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
diff --git a/src/components/CreateMessageForm/index.js b/src/components/CreateMessageForm/index.js
index 0f1685c..e7d90ed 100644
--- a/src/components/CreateMessageForm/index.js
+++ b/src/components/CreateMessageForm/index.js
@@ -1,36 +1,109 @@
-import React from 'react'
+import React, { Component } from 'react'
 import style from './index.module.css'
 import { FileInput } from '../FileInput'
+import EmojiPicker from '../EmojiPicker'
 
-export const CreateMessageForm = ({
-  state: { user = {}, room = {}, message = '' },
-  actions: { runCommand },
-}) =>
-  room.id ? (
-    <form
-      className={style.component}
-      onSubmit={e => {
-        e.preventDefault()
-        const message = e.target[0].value
-        e.target[0].value = ''
-        message.startsWith('/')
-          ? runCommand(message.slice(1))
-          : message.length > 0 &&
-            user.sendMessage({
-              text: message,
-              roomId: room.id,
-            })
-      }}
-    >
-      <input
-        placeholder="Type a Message.."
-        onInput={e => user.isTypingIn({ roomId: room.id })}
-      />
-      <FileInput state={{ user, room, message }} />
-      <button type="submit">
-        <svg>
-          <use xlinkHref="index.svg#send" />
-        </svg>
-      </button>
-    </form>
-  ) : null
+export class CreateMessageForm extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      message: '',
+      cursorPostion: 0
+    }
+  }
+
+  render() {
+    const { runCommand, toggleEmojiPicker } = this.props.actions
+    const { user, room, message, isPickerShowing } = this.props.state
+
+    return room.id ? (
+      <form
+        className={style.component}
+        onSubmit={e => {
+          e.preventDefault()
+          const message = this.state.message
+          message.startsWith('/')
+            ? runCommand(message.slice(1))
+            : message.length > 0 &&
+              user.sendMessage({
+                text: message,
+                roomId: room.id
+              })
+
+          this.setState({
+            message: ''
+          })
+        }}
+      >
+        <input
+          ref={input => {
+            this.messageInput = input
+          }}
+          placeholder="Type a Message.."
+          onInput={this.handleInput.bind(this)}
+          onClick={this.updateCursorPostion.bind(this)}
+          onKeyUp={e => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+              this.updateCursorPostion(e)
+            }
+          }}
+          value={this.state.message}
+        />
+        <EmojiPicker
+          state={{ isPickerShowing }}
+          actions={{
+            toggleEmojiPicker,
+            handleEmojiSelection: this.addEmojiToMessage.bind(this)
+          }}
+        />
+        <FileInput state={{ user, room, message }} />
+        <button type="submit">
+          <svg>
+            <use xlinkHref="index.svg#send" />
+          </svg>
+        </button>
+      </form>
+    ) : null
+  }
+
+  handleInput(e) {
+    const { user, room } = this.props.state
+    user.isTypingIn({ roomId: room.id })
+
+    this.setState({
+      message: e.target.value,
+      cursorPostion: e.target.selectionStart
+    })
+  }
+
+  updateCursorPostion(e) {
+    this.setState({
+      cursorPostion: e.target.selectionStart
+    })
+  }
+
+  addEmojiToMessage(emoji) {
+    let message = this.state.message
+    let newMessage = ''
+    let cursor = this.state.cursorPostion
+    let beforeCursorStr = ''
+    let afterCursorStr = ''
+
+    beforeCursorStr = message.substring(0, cursor)
+    afterCursorStr = message.substr(cursor)
+    newMessage = `${beforeCursorStr}${emoji}${afterCursorStr}`
+
+    // reset the cursor to be after the emoji
+    this.messageInput.setSelectionRange(
+      this.state.cursorPostion + 2,
+      this.state.cursorPostion + 2,
+      0
+    )
+
+    this.setState({
+      cursorPostion: this.state.cursorPostion + 2,
+      message: newMessage
+    })
+  }
+}
diff --git a/src/components/EmojiPicker/index.js b/src/components/EmojiPicker/index.js
new file mode 100644
index 0000000..6fa6908
--- /dev/null
+++ b/src/components/EmojiPicker/index.js
@@ -0,0 +1,42 @@
+import EmojiPicker from 'emoji-picker-react'
+import style from './index.module.css'
+
+import React from 'react'
+import JSEMOJI from 'emoji-js'
+
+let jsemoji = new JSEMOJI()
+
+const Picker = ({
+  state: { isPickerShowing },
+  actions: { toggleEmojiPicker, handleEmojiSelection }
+}) => (
+  <div
+    onClick={e => {
+      e.nativeEvent.stopImmediatePropagation()
+    }}
+    className={style.component}
+  >
+    <div
+      className={`${style.overlayWrapper} ${isPickerShowing ? style.show : ''}`}
+    >
+      <EmojiPicker
+        onEmojiClick={(emojiCode, emojiObj, e) => {
+          e.nativeEvent.stopImmediatePropagation()
+          const emoji = jsemoji.replace_colons(`:${emojiObj.name}:`)
+          handleEmojiSelection(emoji)
+          toggleEmojiPicker(!isPickerShowing)
+        }}
+      />
+    </div>
+    <a
+      href="#"
+      className={style.button}
+      onClick={e => {
+        e.preventDefault()
+        toggleEmojiPicker(!isPickerShowing)
+      }}
+    />
+  </div>
+)
+
+export default Picker
diff --git a/src/components/EmojiPicker/index.module.css b/src/components/EmojiPicker/index.module.css
new file mode 100644
index 0000000..df4a2bb
--- /dev/null
+++ b/src/components/EmojiPicker/index.module.css
@@ -0,0 +1,32 @@
+.component {
+  width: 2rem;
+  height: 2rem;
+  position: relative;
+}
+
+.overlayWrapper {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  bottom: 32px;
+  right: 0;
+  -webkit-transition: height .25s ease-in-out; /* Safari */
+  transition: height .25s ease-in-out;
+}
+
+.button {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background-image: url("https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/1f600.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.show {
+  /* find a better way to set this height */
+  height: 333px;
+}
diff --git a/src/index.js b/src/index.js
index 80b4b41..1c710fb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,6 +28,7 @@ class View extends React.Component {
     messages: {},
     typing: {},
     sidebarOpen: false,
+    isPickerShowing: false,
     userListOpen: window.innerWidth > 1000,
   }
 
@@ -38,6 +39,7 @@ class View extends React.Component {
 
     setSidebar: sidebarOpen => this.setState({ sidebarOpen }),
     setUserList: userListOpen => this.setState({ userListOpen }),
+    toggleEmojiPicker: isPickerShowing => this.setState({ isPickerShowing }),
 
     // --------------------------------------
     // User
@@ -210,6 +212,8 @@ class View extends React.Component {
         window.history.replaceState(null, null, window.location.pathname)
         ChatManager(this, user)
       })
+
+    document.addEventListener('click', e => { this.actions.toggleEmojiPicker(false) }, false)
   }
 
   render() {
@@ -220,8 +224,14 @@ class View extends React.Component {
       typing,
       sidebarOpen,
       userListOpen,
+      isPickerShowing
     } = this.state
-    const { createRoom, createConvo, removeUserFromRoom } = this.actions
+    const {
+      createRoom,
+      createConvo,
+      removeUserFromRoom,
+      toggleEmojiPicker
+    } = this.actions
 
     return (
       <main>
diff --git a/yarn.lock b/yarn.lock
index c24f55b..4dc0526 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,7 +1063,7 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@pusher/chatkit@^0.7.3":
+"@pusher/chatkit@^0.7.9":
   version "0.7.9"
   resolved "https://registry.yarnpkg.com/@pusher/chatkit/-/chatkit-0.7.9.tgz#34587299107baf55b36b3fe1c9870ea99e90a62a"
   dependencies:
@@ -1611,7 +1611,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.22.0, babel-runtime@^6.25.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -2964,6 +2964,23 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emoji-datasource@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-4.0.0.tgz#3fc9c0c2f4fb321d9291138819f6d100603d3e2f"
+
+emoji-js@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/emoji-js/-/emoji-js-3.4.0.tgz#dabdeda60c92d1948a5177e51ba9421d2029b052"
+  dependencies:
+    emoji-datasource "4.0.0"
+
+emoji-picker-react@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-2.0.4.tgz#a58edc3412d39726dbcd64a7811806ccc90d9b46"
+  dependencies:
+    babel-runtime "^6.25.0"
+    throttle-debounce "^1.0.1"
+
 emoji-regex@^6.1.0:
   version "6.5.1"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
@@ -7955,6 +7972,10 @@ throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
 
+throttle-debounce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.0.1.tgz#dad0fe130f9daf3719fdea33dc36a8e6ba7f30b5"
+
 through2@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.3.tgz#0004569b37c7c74ba39c43f3ced78d1ad94140be"

From 040304f38b1772911e9e5137fa149f910440fe93 Mon Sep 17 00:00:00 2001
From: DevFlex <18128146+devflex@users.noreply.github.com>
Date: Sat, 21 Apr 2018 14:42:41 -0300
Subject: [PATCH 3/4] fixed up code formatting using prettier

---
 src/index.js | 80 ++++++++++++++++++++++++++--------------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/index.js b/src/index.js
index 1c710fb..fccaf8e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,7 +29,7 @@ class View extends React.Component {
     typing: {},
     sidebarOpen: false,
     isPickerShowing: false,
-    userListOpen: window.innerWidth > 1000,
+    userListOpen: window.innerWidth > 1000
   }
 
   actions = {
@@ -62,18 +62,18 @@ class View extends React.Component {
       this.actions.setRoom(room)
       this.actions.subscribeToRoom(room)
       this.state.messages[room.id] &&
-      this.actions.setCursor(
-        room.id,
-        Object.keys(this.state.messages[room.id]).pop()
-      )
+        this.actions.setCursor(
+          room.id,
+          Object.keys(this.state.messages[room.id]).pop()
+        )
     },
 
     subscribeToRoom: room => {
       !this.state.user.roomSubscriptions[room.id] &&
-      this.state.user.subscribeToRoom({
-        roomId: room.id,
-        hooks: { onNewMessage: this.actions.addMessage },
-      })
+        this.state.user.subscribeToRoom({
+          roomId: room.id,
+          hooks: { onNewMessage: this.actions.addMessage }
+        })
     },
 
     createRoom: options =>
@@ -89,10 +89,10 @@ class View extends React.Component {
         exists
           ? this.actions.joinRoom(exists)
           : this.actions.createRoom({
-            name: this.state.user.id + options.user.id,
-            addUserIds: [options.user.id],
-            private: true,
-          })
+              name: this.state.user.id + options.user.id,
+              addUserIds: [options.user.id],
+              private: true
+            })
       }
     },
 
@@ -105,8 +105,8 @@ class View extends React.Component {
       userId === this.state.user.id
         ? this.state.user.leaveRoom({ roomId })
         : this.state.user
-        .removeUserFromRoom({ userId, roomId })
-        .then(this.actions.setRoom),
+            .removeUserFromRoom({ userId, roomId })
+            .then(this.actions.setRoom),
 
     // --------------------------------------
     // Cursors
@@ -142,7 +142,7 @@ class View extends React.Component {
         invite: ([userId]) => this.actions.addUserToRoom({ userId }),
         remove: ([userId]) => this.actions.removeUserFromRoom({ userId }),
         leave: ([userId]) =>
-          this.actions.removeUserFromRoom({ userId: this.state.user.id }),
+          this.actions.removeUserFromRoom({ userId: this.state.user.id })
       }
       const name = command.split(' ')[0]
       const args = command.split(' ').slice(1)
@@ -186,7 +186,7 @@ class View extends React.Component {
           `New Message from ${message.sender.id}`,
           {
             body: message.text,
-            icon: message.sender.avatarURL,
+            icon: message.sender.avatarURL
           }
         )
         notification.addEventListener('click', e => {
@@ -194,7 +194,7 @@ class View extends React.Component {
           window.focus()
         })
       }
-    },
+    }
   }
 
   componentDidMount() {
@@ -202,18 +202,24 @@ class View extends React.Component {
     existingUser
       ? ChatManager(this, JSON.parse(existingUser))
       : fetch('https://chatkit-demo-server.herokuapp.com/auth', {
-        method: 'POST',
-        body: JSON.stringify({ code: authCode }),
-      })
-      .then(res => res.json())
-      .then(user => {
-        user.version = version
-        window.localStorage.setItem('chatkit-user', JSON.stringify(user))
-        window.history.replaceState(null, null, window.location.pathname)
-        ChatManager(this, user)
-      })
-
-    document.addEventListener('click', e => { this.actions.toggleEmojiPicker(false) }, false)
+          method: 'POST',
+          body: JSON.stringify({ code: authCode })
+        })
+          .then(res => res.json())
+          .then(user => {
+            user.version = version
+            window.localStorage.setItem('chatkit-user', JSON.stringify(user))
+            window.history.replaceState(null, null, window.location.pathname)
+            ChatManager(this, user)
+          })
+
+    document.addEventListener(
+      'click',
+      e => {
+        this.actions.toggleEmojiPicker(false)
+      },
+      false
+    )
   }
 
   render() {
@@ -223,15 +229,9 @@ class View extends React.Component {
       messages,
       typing,
       sidebarOpen,
-      userListOpen,
-      isPickerShowing
+      userListOpen
     } = this.state
-    const {
-      createRoom,
-      createConvo,
-      removeUserFromRoom,
-      toggleEmojiPicker
-    } = this.actions
+    const { createRoom, createConvo, removeUserFromRoom } = this.actions
 
     return (
       <main>
@@ -285,8 +285,8 @@ class View extends React.Component {
 // --------------------------------------
 
 window.localStorage.getItem('chatkit-user') &&
-!window.localStorage.getItem('chatkit-user').match(version) &&
-window.localStorage.clear()
+  !window.localStorage.getItem('chatkit-user').match(version) &&
+  window.localStorage.clear()
 
 const params = new URLSearchParams(window.location.search.slice(1))
 const authCode = params.get('code')

From 1664fe5c12b28f4a55ef8a15da36c64b30151624 Mon Sep 17 00:00:00 2001
From: DevFlex <18128146+DevFlex@users.noreply.github.com>
Date: Sat, 21 Apr 2018 15:13:13 -0300
Subject: [PATCH 4/4] made more updates to code formatting so it matches the
 origin. I also changed the anchor tag to a button because I forgot to change
 it back when I was debugging.

---
 src/components/EmojiPicker/index.js         |  6 +++---
 src/components/EmojiPicker/index.module.css |  2 ++
 src/index.js                                | 16 ++++++++--------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/EmojiPicker/index.js b/src/components/EmojiPicker/index.js
index 6fa6908..cdac12a 100644
--- a/src/components/EmojiPicker/index.js
+++ b/src/components/EmojiPicker/index.js
@@ -8,7 +8,7 @@ let jsemoji = new JSEMOJI()
 
 const Picker = ({
   state: { isPickerShowing },
-  actions: { toggleEmojiPicker, handleEmojiSelection }
+  actions: { toggleEmojiPicker, handleEmojiSelection },
 }) => (
   <div
     onClick={e => {
@@ -28,8 +28,8 @@ const Picker = ({
         }}
       />
     </div>
-    <a
-      href="#"
+    <input
+      type={'button'}
       className={style.button}
       onClick={e => {
         e.preventDefault()
diff --git a/src/components/EmojiPicker/index.module.css b/src/components/EmojiPicker/index.module.css
index df4a2bb..8f3c5f9 100644
--- a/src/components/EmojiPicker/index.module.css
+++ b/src/components/EmojiPicker/index.module.css
@@ -24,6 +24,8 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
+  border: none;
+  cursor: pointer;
 }
 
 .show {
diff --git a/src/index.js b/src/index.js
index fccaf8e..0953144 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,7 +29,7 @@ class View extends React.Component {
     typing: {},
     sidebarOpen: false,
     isPickerShowing: false,
-    userListOpen: window.innerWidth > 1000
+    userListOpen: window.innerWidth > 1000,
   }
 
   actions = {
@@ -72,7 +72,7 @@ class View extends React.Component {
       !this.state.user.roomSubscriptions[room.id] &&
         this.state.user.subscribeToRoom({
           roomId: room.id,
-          hooks: { onNewMessage: this.actions.addMessage }
+          hooks: { onNewMessage: this.actions.addMessage },
         })
     },
 
@@ -91,7 +91,7 @@ class View extends React.Component {
           : this.actions.createRoom({
               name: this.state.user.id + options.user.id,
               addUserIds: [options.user.id],
-              private: true
+              private: true,
             })
       }
     },
@@ -142,7 +142,7 @@ class View extends React.Component {
         invite: ([userId]) => this.actions.addUserToRoom({ userId }),
         remove: ([userId]) => this.actions.removeUserFromRoom({ userId }),
         leave: ([userId]) =>
-          this.actions.removeUserFromRoom({ userId: this.state.user.id })
+          this.actions.removeUserFromRoom({ userId: this.state.user.id }),
       }
       const name = command.split(' ')[0]
       const args = command.split(' ').slice(1)
@@ -186,7 +186,7 @@ class View extends React.Component {
           `New Message from ${message.sender.id}`,
           {
             body: message.text,
-            icon: message.sender.avatarURL
+            icon: message.sender.avatarURL,
           }
         )
         notification.addEventListener('click', e => {
@@ -194,7 +194,7 @@ class View extends React.Component {
           window.focus()
         })
       }
-    }
+    },
   }
 
   componentDidMount() {
@@ -203,7 +203,7 @@ class View extends React.Component {
       ? ChatManager(this, JSON.parse(existingUser))
       : fetch('https://chatkit-demo-server.herokuapp.com/auth', {
           method: 'POST',
-          body: JSON.stringify({ code: authCode })
+          body: JSON.stringify({ code: authCode }),
         })
           .then(res => res.json())
           .then(user => {
@@ -229,7 +229,7 @@ class View extends React.Component {
       messages,
       typing,
       sidebarOpen,
-      userListOpen
+      userListOpen,
     } = this.state
     const { createRoom, createConvo, removeUserFromRoom } = this.actions