Last commit for "2020 hacktoberfest"
Published: 2020-10-29 21:06:23

##getting start
For my last contribution to "2020 hacktoberfest", I chose a little simple project but really needs some help. [Awesome-Adoption](https://github.com/redxzeta/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](https://www.petfinder.com/developers/).

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](https://github.com/redxzeta/Awesome-Adoption/issues/30#issuecomment-718983445) 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](https://github.com/redxzeta/Awesome-Adoption/pull/34)

##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!!