The last PR that I have contribute is ChatSociety & PR. The ChatSociety is simple chat application that user can join and have communication like Discord channel and Slack room. The issue is the scroll-view on holds very top of message even there are new message on the bottom when user joins the chat room after log-in
This issue is very familiar to me because I have chance to use React and Hook on the Hacktoberfest#1. As soon as I reviewed the code, there is no useEffect for controlling scroll-view side-effects in functional components like componentDidMount and componentDidUpdate in React class. But the project maintainer has created useRef called dummy for updating the scroll-view when user enter the new message. Therefore instead of having duplicate code for same functionality. I have create a function called scrollToBottom which scroll to bottom with smooth animation. I have placed scrollToBottom function inside of useEffect and replace ScrollToBottom to SendMessage function where the update scroll-view when user enters the new message.
All the processes of fixing the issue are very straightforward. The only part that I have little stuck is how to implement auto scroll to bottom of the page. It is always good practice that research on the Mozilla MDN website first if I have concern with JavaScript.
After I have done 4 pull requests during the Hacktoberfest, it is kind of sad that I only used React, JavaScript, HTML, and CSS. There are many open-source project written with Python and other programming language. I intended to join the open-source project that involves web development because I want to focus on web. Next year I would like to learn different languages and challenge myself to join open-source project.
Top comments (0)