Last commit for "2020 hacktoberfest"

getting start

For my last contribution to "2020 hacktoberfest", I chose a little simple project but really needs some help. Awesome-Adoption is a working project, finding available pets for adoption.

To get all the information for pets, this project is using a third party API PetFinder.

The issue was token is not stored in local-storage, so whenever refreshing the browser or changing the components the api request kept sending to the server.

...
export default function App() {
  const [token, setToken] = useState("");
  useEffect(() => {
    axios
      .post(
        "https://api.petfinder.com/v2/oauth2/token",
        `grant_type=client_credentials&client_id=${process.env.REACT_APP_PETFINDER_KEY}`
      )
      .then((response) => {
        setToken(response.data.access_token);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);
...

I suggested a better solution which is using redux. The token will be used across the component and it shouldn't be changed as long as the user is same. redux can keep the token as an available state for all jsx components, and it won't be removed if it is in the localstorage.

HOWEVER, this could cost a lot of time to modify the codes, and change a lot of lines of code, so I tried to make a small change and follow the original code as possible as I can.

First, I created a function for axios fetch

...
function fetchFunction(){
  axios
  .post(
    "https://api.petfinder.com/v2/oauth2/token",
    `grant_type=client_credentials&client_id=${process.env.REACT_APP_PETFINDER_KEY}`
  )
  .then((response) => {
    localStorage.setItem("token",response.data.access_token);
  })
  .catch((error) => {
    console.log(error);
  });
}
...

If there is a token in a localstorage it doesn't need to send post request, otherwise it should.

...
if (!localStorage.getItem("token")) {
  fetchFunction();
}
...
useEffect(() => {
    ...
    if(!localStorage.getItem("token")){
      fetchFunction();
    }
    setToken(localStorage.getItem("token"));
  }, []);

Here is PR

Conclusion

This 2020 hacktoberfest is the first time for me to work as a open source developer. I always tried to contribute to bigger and commercial project, but I couldn't find the reason for the bug or don't know how to fix it. Also, I felt it is really hard to find a "good" project which I can handle.

The good things for me is there are still hundreds of small projects that I can actually help! They are really looking for a small contribution, but no one really care about them. For a beginner, these project would be the "good first contribution." However, I am not so happy that I didn't contribute to the bigger project.

Is that because of my lack of skills? or Am I too afraid of getting the first step on the big project? The answer was both. I was too intimidated by a "fancy" project. At the same time, I needed to learn a more thing about "server", "testing" or other deeper advanced programming skills. Luckily, this is just a beginning!!