I'd like to add a feature that dynamically updates the route when a search query is entered into the main search bar. For example, when a user enters react into the search bar, the route should change from / to something like /q=react or something similar (it's not a big deal to me 😄).

The new dynamic routes should also not change the page at all, the page should still be the same, rendering the main component SearchPage.

• Update package.json version
• Update version in UI
• Post change update in gitter lobby

For each route in the app we should update the page titles to look something like:

Home | IWantToContribute
About | IWantToContribute
etc...

A State doc already exists for this project's doc book, but is currently an empty place holder until its contents are filled in.

This doc should be updated to include all things state related for react. Including things like:

• What is component state?
• Why is managing state important?
• Why you can't and shouldn't directly mutate state?
• How to set initial state
• How to update a component's state
• How to update a component's state on an event action (preferably with code example)
• How re-rendering works when state changes

This doc should include some basic info about react-router and it's usage (make sure to use v4 docs). We should probably add an example of basic routes as well as query params based upon form submission content.

@cubadomingo and @tmobaird can knock this out.

If anyone else wants to help out, feel free to comment on this issue and join in!

Currently when an open issue in the Open Issue List is clicked it will direct you to that issue on Github in your browser. (FYI, this list):

I feel we should change this to opening the link in a new tab, since the link will be taking the user outside of the app.

This is a SUPER easy change. The change needs to be made in OpenIssue.jsx. The component currently renders a link with:

<a href={this.props.data.html_url}>

This should be updated to add the html attribute target="_blank" to the anchor/link (<a>) tag.

There's a rest client node module for the Github API, this should make things way more straight forward as well as easier to test.

I'm not sure exactly everything that needs to be optimized for a better mobile experience, but here are some of the things I know of so far, and some possible solutions:

• [Claimed] Find me on Github navbar link goes out of viewport:
  

• ResultStatsRow Content flowing outside of Panel:
  

If anyone finds any others, feel free to post on this thread about them!

• Add social buttons to about page
• Miscellaneous Clean up
• Update package.json version
• Update AboutPage version

• Sometimes people want search across GitHub to find available issues based on tags alone (and without knowing repo names). e.g. hacktoberfest, beginner friendly

The server should have a backup port incase port 5000 is already in use. Currently it just throws this error and the yarn start command exits.

This should wait until react-boostrap upgrades to this version as well. It will currently trigger warnings if this upgrade is made

In the navbar we should add a link to the github repository.

I'm currently envisioning a link in the right side of navbar that includes some text like Find me on Github with the Github logo next to it.

This will help people easily find the repo from the app.

Example:

I think we should create an Additional Resources doc that includes links to a bunch of other good reference points for learning react and other related topics/tools (redux, webpack, es6, etc). We don't need to fill out this doc all at one time, but create the simple template initially and add to it as we go.

The doc should probably delimited by each topic. For example, in this doc we would probably include a bunch of headers for each topic, with bulleted links within those. Example:

React

• Link 1
• Link 2

Redux

• Link 3
• Link 4

The Open Issues list for each repository is supposed to only include open issues, but it appears that is including both open issues and open pull requests. This should be fixed to only include open issues.

The fix most likely needs to be made in the file githubHelper.js

When looking at the additional information for a repository and the recent issues it has listed for it, there are times when a label on this issue comes with a color that is fairly light. This can cause visibility problems because the labels currently on support white text, which can make the text inside labels unreadable at times. Example:

If you take a look at the last item, the text within the yellow label is unreadable because the color of yellow used.

To fix this, we should add a check to the BsSpecialLabel class that makes a check on the given color prop, and if it is deemed light enough to where viewing white text is a problem, then the text will be black. If it's not light enough, we can keep the text color white.

any plans to upgrade react-router v4?

A Proptypes doc already exists for this project's doc book, but is currently an empty place holder until its contents are filled in.

This doc should be updated to include all things proptype related for react. Including things like:

• What is typechecking?
• What are PropTypes?
• Why use PropTypes?
• How to use PropTypes

Also this doc should make sure we are referencing PropTypes usage from the recent React 15.5 or later. This is because this release moved PropTypes out of the main React node module and into a separate module of its own.

Code example should be used when possible! 🙂

When an OpenIssue is displayed in the app, there is currently no formatting being used for the created_at date of the issue that is being displayed. This date output right now is pretty ugly and should be updated to something prettier (whether it be something like 5/9/2017 or 1 day ago, it doesn't matter too much to me).

Here's an example of how it's being displayed:

As you can see the date is being displayed as Opened on 2017-05-08T04:13:53Z.

A viable solution from something I've used before is react-timeago. Super neat library that displays the amount of time passed since a DateTime. Super easy to use and really pretty output. It should also, by default, to parse the date string that was being displayed above (not 100% sure on that though).

Here is where the important part of the update will need to be made: OpenIssue.jsx:23

The error is a missing prop error for the MapMarkerPopupInformation component.

• Update version in package.json
• Configure Netlify
• Update Github Pages section in main page to include Netlify info
• Add env vars to Netlify space

I think this could be a cool feature as well for usage purposes. I'm suggesting that we integrate a changelog for the app into the actual app. I think this should be fairly easy too. This should probably just consist of a page with a list of recent changes/additions that have been made.

I believe as far as data goes for this, we should probably create a changelog.json file in the root of the project. The schema could probably look something like:

{
  "recent": [
    {
      "type": "Bug Fix",
      "title": "Fixing Spelling Error",
      "body": "There was a spelling error on the contributors page, this was updated.",
      "pull_request_id": 120
    },
    {
      "type": "New Feature",
      "title": "Adding Contributors Map",
      "body": "Integrated the contributors map into the actual app using leaflet maps.",
      "pull_request_id": 100
    }
  ]
}

This data set could then be parsed and displayed in the app.

This isn't definitive, but here's a list of what I think would need to be done for this:

• Add changelog.json
• Read changelog.json data. Maybe into redux initial state?
• Create react-router route. (ex. /changelog)
• Create ChangelogPage component
• Create components to display content
• Display current app version in navbar

This will be a bit of work, but this is a really good issue for anyone who wants to learn react, react-router, redux through some practical work.

The total highlighted in the image above says 9 watchers, although GitHub web reports the total number of watchers to be 4.

I haven't read the GitHub API docs deeply on this, but I assume it is something similar to the Issue/Pull Request total.

For all api calls we should set up an express server that actually fetches this data. This requires us to separate the client side served code out from a background node server. Things to do for this:

• Create server directory in src
• Add index.js to server directory
• Refactor github helper for server side
• Refactor githubHelper on client side to query express server
• Figure out dev environment configuration
• Figure out express server url on client side
• Figure out production environment configuration

The word contribute is currently misspelled in the app's page title. It is currently IWantToContriubte but should be IWantToContribute.

This changes needs to be made in index.html

There are a couple bugs currently in the docs. These are super simple fixes if anyone wants to knock them out.

• Make CONTRIBUTING link in bottom README actually link to the CONTRIBUTING doc.
• Make list of links in CONTRIBUTING doc link to the proper sections of the doc. For example, Setting Up Your Dev Environment currently goes to #Setting-Up-Your-Dev-Environment instead of the proper #setting-up-your-dev-environment.
  • Setting Up Your Dev Environment
  • Doc Changes
  • General Non-Doc Contribution Flow
  • Running Tests

If github returns no results then a message or component should be rendered to tell the user no results have been found. Currently it's displaying:

It's basically rendering the SearchResultsBox but showing an empty space because the props.results.data value is empty.

A potential solution is to add show={this.props.search.submitted && this.props.results.data} to the SearchResultsBox component inside the SearchPage container and then a conditional to render the message:

(!this.props.search.submitted && !this.props.results.data) ? <NoResults /> : ''

or just remove the show key from the SearchResultsBox and use this:

(!this.props.search.submitted && !this.props.results.data) ? <NoResults /> : <SearchResultsBox {...props}'

This is completely completely my fault. I cavalierly pulled in the bootstrap css from their latest stable CDN. The problem with this, is that the CDN has obviously changed to include source for v4 instead of 3.x (which we have been coding for).

This can be fixed by either compiling bootstrap3's css as a part of the project or finding a bootstrap 3 CDN that is public.

The source of the problem can be found here: https://github.com/tmobaird/i-want-to-contribute/blob/master/public/index.html#L7

Currently the issue totals that are listed in the project badges are incorrect. This is due to a misunderstanding of the Github API, where the API lists and issue total as the sum of issues and pull requests for a repo.

The backend currently doesn't use es6, which kinda sucks. This should be updated to keep both the frontend and backend in sync.

A Read GitBook link should be added with the GitBook logo to the float right section of the navbar. This should be exactly how the Find me on Github link functions, but to the left of the Github link and linking to this project's GitBook.

The GitBook for this project can be found here.