CS 347: Lab 20 – GitHub Search, Really

Welcome to lab, which is a replay of the last lab that got nixed by technical difficults with NPM. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in an exercise, which you will complete in small groups.

Within your breakout room, designate one of your team to be the host. Host, claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Host, be careful not to dominate. All members should contribute ideas.

Task

Your task is to write a React/Redux app that shows GitHub repositories matching a query. The matches will be provided by GitHub’s REST API. The end product will look something like this:

Setup

Host, follow these steps:

The next three sections can be done in parallel. Split them up between team members.

Store

Create store.js that looks just like the one made in the videos. It uses the reducer (defined elsewhere) and the thunk middleware.

Provider

In index.js, add a Provider component and pass your store as a prop as demonstrated in the videos.

Reducer

Create reducer.js with a similar structure to the one made in the videos. Use this initial state:

const initialState = {
  matches: [
    {
      full_name: 'twodee/fiction',
      description: 'This repository does not exist.',
      html_url: 'https://github.com/twodee/fiction',
    },
  ],
};

The reducer should handle just the default case for the moment. Whatever the action, return the unmodified state.

Repository

Define a Repository component in Repository.js. It receives a prop named repository, which is an object shaped like the example from the initial state shown above, having keys full_name, description, and html_url. Display the repository’s full name in an anchor tag and the repository’s description.

App

Your next task is to reach into the global store and turn its matches into viewable components. Complete the following steps in App.js.

Actions

Now that you’ve got the initial state showing, it’s time to add some actions to pull down new state from GitHub’s REST API. Complete the following steps.

Submission

Screen sharer, when your group is done or when time is up, submit just your group’s actions.js on Crowdsource.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *