Hacktoberfest -3

Finding an issue for Hacktoberfest has been tough, It took me long enough to find an interesting repository, but luckily, I came across this project called Awesome-Adoption, it is a Pet Adoption web application developed using React. The repository owner requested for a new feature to be added to the web application, initially, each pet detail page only displays a single picture of the pet, my task was to try to implement the ability to view all available photos of the pet by adding two buttons to navigate between photos.

Since I have worked with React library back in the WEB-422 course, I felt pretty confident starting this project, but it didn't take long for me to realize that this something I have never worked with before. Back when I worked with React, class based components were used, but absolutely 0 class component were use in this project, this had me confused, time to learn something new again. After a bit of researching I found the video "Learn useState In 15 Minutes - React Hooks Explained" by Web Dev Simplified, and realized that the project was using functional components instead, and it used state hooks to hold the states of objects.

After making sense of using hooks (useState), I began trying to implement the new feature, I noticed that in the existing code, the pet object is stored in a state variable called "pet" which contains all the photos for the pet along with other information on the current page, and it has a "setPet" state setting function from the hook, the page only displays "{pet.photos[0].large}" which is the first photo within the object. This was difficult to work with, because I couldn't directly work with the pet object's state to navigate between photos. It took me quite a while to come up with a solution, that is to make another state variable using the useState hook, this state variable represent the index of the photo, it is initially set to 0 to display the first image, every time when "previous photo" or "next photo" button is clicked, it will check if the previous or next photo exists, if it does, use "setPhotoIndex" hook function to increment/decrement to change the value of the index variable, and change "{pet.photos[0].large}" to "{pet.photos[index].large}" for the image source, which allows navigation between photos.

Links:

Repo: https://github.com/redxzeta/Awesome-Adoption

Issue: https://github.com/redxzeta/Awesome-Adoption/issues/10

PR: https://github.com/redxzeta/Awesome-Adoption/pull/14

Comments

Post a Comment

Popular posts from this blog

Working on the Telescope Project

Image
Two weeks ago, I've had my first chance of working with the Telescope project and utilized it's back-end API to work with my DLCheck Project. In the past few days, I got more involved, played around and worked with Telescope's front-end portion. One of the issues that I found in the project repository got an idea from the Node.js webpage and requested for a React Component to display the contributors' information to thank them for their effort in developing/maintaining the Telescope project. In the beginning, I was a bit lost by reading the existing code, but luckily, the telescope project was developed using the React JS library and utilizes Material-UI framework, I have worked with a project which was also developed using the same tools during my Release 0.2 assignment, therefore, I was able to understand pieces of codes fairly quick. The new Card Component was overall not that hard to implement but it still took me a quite bit of time, I was given a custom React Hook...
Read more

Hacktoberfest -1

 This week the Hacktoberfest event has finally started and I had the chance to contribute to real open source projects. Finding an issue that I can fix took way longer than I thought it would, most of the issues were either taken or they were too complicated for a first time contributor. After a while of searching around GitHub repos with "good-first-issue" labels applied, I found a couple repositories that seemed interesting to me. One of the repositories requested for a new URL redirects in their projects, I thought this was an easy fix, but that it was more complicated than I thought it would be, the original repository had no instruction on how to run and test the application, therefore, I had to leave a comment in the issue asking for instructions. As it turns out a test must be written first before adding any code to the project, and when I ran the initial test before adding anything into the project, I was already getting testing errors, it seems like a challenging one...
Read more

Using Code Formatter and Linter

This week I was introduced to automated code formatting and linter to check for mistakes in code, I have heard of those tools before but never used them until this week. Those tools assisted me to maintain the code structure and readability, using those tools resulted in huge differences between the original project and "fixed project". To install Prettier, I followed their official installation instructions, which can be found here , and I did the same to install ESLint . There was a small problem that I ran into when I ran "eslint file.js" command, the system warmed that "eslint" is not a valid command, this was eventually solved by installing the eslint-cli, which was not mentioned in the official instructions. After I finished the set ups and configurated the tools, I ran the "script npx prettier --write ." to automate the formatting, this changed hundreds of lines in my .js files, I wasn't really surprised by this because I have always t...
Read more