teaching machines

CS 347: Lab 19 – GitHub Search

November 5, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. 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:

• Open Visual Studio Code.
• Click File / Open Folder, create a new folder, and open it.
• With the Live Share extension installed, select View / Command Palette, and choose Live Share: Start Collaborative Session.
• Copy the invitation link to your chat. Have all team members join the session.
• In the terminal, create a new React app and move into its directory:

  npx create-react-app githubber
  cd githubber

• Install the helper packages that you’ll need:

  npm install --save redux react-redux redux-thunk

• Serve out your React app:

  npm start

  The Live Share extension should automatically pick up this server and share it with all guests. Guests should be able to access http://localhost:SHARED-PORT-NUMBER in their local browser to see the app.

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.

• Use the useSelector hook to grab the matches from the store.
• Map each match to a Repository component. You should see the initial state showing twodee/fiction.
• Add a text input for the query.
• Add state to hold the query text.
• Add a button to fire off the query.
• Add a callback for the button that dispatches a startSearching action (defined elsewhere).

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.

• Create actions.js. It will have a structure similar to the one shown in the videos.
• Add an object named Action that acts as an enum. Give it an entry for LoadMatches.
• Add an action creator named loadMatches that accepts an array of matches as a parameter. Have it return an object whose type is Action.LoadMatches and whose payload is the array of matches.
• Add a thunk action creator named startSearching that accepts a query string. It returns a lambda that accepts the dispatch function and fetches a list of repositories that match the query. Use the URL https://api.github.com/search/repositories?q=QUERY, replacing QUERY with the actual query string.
• Interpret the fetched results as JSON. The JSON has the structure specified under Default Response in this endpoint’s documentation. You can also see what is fetched by pasting the URL in your browser’s location bar.
• Once the JSON is parsed, dispatch a loadMatches action, passing in the matching repositories.
• In your reducer, add a case for Action.LoadMatches. Return a new state where matches maps to the action’s payload.

Submission

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

Peer Review

After you have submitted the exercise, transition into your peer review for project 2. The following things should happen:

• One individual volunteers to be a notetaker, summarizing each individual’s situation in 3-5 sentences.
• A different individual volunteers to be a timer. This person ensures that everyone has a full 5 minutes to share before the end of class.
• Each group member shares for 5 minutes on their progress. Discuss your project idea, what database will be in the database, what your endpoints will look like, and what your user interface will look like.
• Peers critique each other’s work. Constructively shape and challenge each other as you would if you were going to be employed by the same company for your entire careers. Help your peers see where they may be trying to do too much.
• The notetaker submits the group’s notes on a direct message in Slack. Address the direct message to all group members and your instructor. Your instructor will read this report to stay informed and to grant credit for this week’s review.