How I brought Yahoo Chat back to life in 5 hours: Part 1 — The Easy Stuff

Image for post
Image for post
Grainy photo for reference

The Set Up

yarn create react-app chatroom 
cd chatroom
mkdir chatroom-frontend
cd chatroom-frontend
yarn add redux react-redux
yarn start
Image for post
Image for post

Redux

Auto-Scrolling

handleObserverForScroll = () => {
let messagesList = document.querySelector('.message-list')
let observer = new MutationObserver(() =>
this.scrollToBottom(messagesList)
)
let config = {childList: true}
observer.observe(messagesList, config)
}
scrollToBottom = (messagesList) => {
messagesList.scrollTop = messagesList.scrollHeight
}

What Next?

Full-Stack Developer, Software Engineer, and UX/UI Aficionado

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store