My first Open Source Contribution!

I made my first Open Source Contribution and it went better than I expected.

Some of the things that I noticed while looking for a project to contribute to are:

1. People will stake claim to an issue and then do nothing with it. 
2. People fix the issue, create a pull request and then never make any of the requested changes so the issue stays open. 

It looks like the project I contributed to was the latter. Someone had claimed it, submitted a pull request but then something went wrong and they didn't go back to it. Who knows why, maybe they got busy, maybe they didn't understand what was being asked of them. 

When I first came across the issue, it was like reading a math word problem. I read it and then went "huh?". Then I read it again and realized at the very least I could do the basic part of converting html into React. 

I forked the project and cloned it onto my computer. After looking around a bit. I read over the requirements again.

Here is what I was asked to do: 

The work consist from:

• move html from index.html to the component (do not forget to change class attributes to className)
• change display type of the footer element in css (desribed in pullrequest comment)
• (optionally) set up the translation for the element as is in other components

A lot of what I looked for when poking around the files was to see how the other files were structured. For example. The header file (which was already converted from HTML to React) was written as a stateless component.
Here is what that would look like:


Stateless components are great for allowing another component to handle data/state. 

A stateful component would be written like this: 



Stateful components are like the boss that's delegating work to the employees. They pass information to other components and track what's happening with it.


The first part of what I had to do, move html from index.html to the component was done by:

1. Decide between a stateful and stateless component. After looking at the header file, I chose to do a stateless component. 
2. Create the footer file and setup as a stateless component. Remember that components have to start with a capital letter. 
3. Copy the footer code from the index.html file and paste it in the footer file
4. In my code editor, Atom, I'm able to find all instances of a piece of code and then change them all at once. So, I found all the instances of "class=" and changed them to className=

This full satisfied the first requirement. 

The next part was to change the display type of the footer element in the css. This was easy. The previous person who attempted it had written inline styles. The owner of the repo gave a hint about changing one specific style. Super easy to fix.

I was a little confused on the last request for this github issue.
Setup the translation for the element as is in other components.

I looked around and was able to implement parts of it before submitting my pull request. After a little while of it not working, I submitted my pull request anyways.

I made a comment saying that I did what they asked but was confused about the language part.
That part used react-translate and I had never used that before.
I was confused about how the site was being translated.
I got a response the next day saying that everything looked good but to finish the language part, to look at the react-translate website and the project for more information. After some digging, it made more sense. The translations were manually entered in a json file and then react-translate pulled them out by their key. You created a nested object



react-translate checks in the footer for all of the codenames. You reference them by using a built in function, props.t("codename"). That will automatically input your language based on the language selected for the whole site.

I created my commits and pushed them to the project. I left them a note because I wasn't sure if I needed to do anything else.

I got an email today, saying that I did everything they wanted for that issue and that my pull request was accepted and the issue was closed.

Success!
This was a great Open Source experience and I can't wait to contribute more!