React with Redux Example App

To run the app locally:

Install Node.js: https://nodejs.org/en/

Clone the repo into a directory:

git clone https://github.com/liz/react-example.git

In the project directory, you can run:

npm install

To install dependencies

After dependencies are installed in the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

To run tests locally:

npm test

Launches the test runner in the interactive watch mode. This currently has about 115 passing tests for me.

Task:

Create a simple interface with two screens:

• Initial screen to enter a github API Token
• After submitting an accepted token, list the user's repos on the left side of the screen. After selecting a repo on the left side of the screen, list the repo's issues in a sortable table (in desktop, these stack in mobile)

Sort order and sort direction should be saved in the user's session and stay after refresh

This is:

• Basic react app setup with Create React App
• index.js pulls in app.js, wraps it in the redux store Provider
• app.js will take you to SaveKey to enter an apiKey, if your apiKey has been entered and github accepts it, it will take you to Listing to list your repos (if github does not accept your key, it will respond with an error and ask you to enter a different key)
• listing.jsx lists your repos. If you select a repo in listing.jsx, it will load issue-listing.jsx with your selectedRepo's issues listed in a sortable table (if github responds with no issues/an error, it will tell you "Github cannot find any issues for this repo")
• If you refresh, you'll see your last chosen sorting options, with the same repo selected -- this is set and set with window.sessionStorage. It is tested with jest-localstorage-mock
• reducers.js and actions.js use Redux to save the user's API key entered on the first screen
• For the layout this project includes a few basic reusable components like Button, Image, and Container. It includes a very small bit of utility SCSS in utils.scss.
• For a project any larger than this, instead of using grid components created above and the small utils.scss file, I'd most likely import a select few pieces of the bootstrap 4 grid and SCSS utilities into the SCSS and use the bootstrap 4 grid and utilities for the grid, responsiveness, and spacing in the project. I've written some small styled-components components for this project to show I can make a grid/responsive layout from scratch without the assistance of a framework. But anything larger I'd probably just use select bits of bootstrap 4 and not re-invent components/style utility classes what they have already made.
• Theres a mix of functional and class components, all could be changed to functional components if that's desired. In general in terms of coding style/syntax I tend to follow the patterns I see if I am working in a project that already exists to stay consistent with the project and can learn and follow new patterns if any patterns are seen in this project that are not desired.

Screenshots of this when I run it locally in chrome:

Desktop on load:

Mobile on load:

Button enables when field is not empty:

Error response when Github responds with an error:

Desktop when github responds with repo results:

Mobile when github responds with repo results:

Desktop when a repo is selected from the "Select a Repo" list list and the repo has issues:

Mobile when a repo is selected from the "Select a Repo" list and the repo has issues:

When github responds with an error when looking for issues for the repo (like if the repo has no issues):

When the user has selected a different sort order/sort direction (different than the default of created/desc), and refreshes the page and looks a the issues for a repo in the same browser session, they see the different sort order/sort direction in desktop:

When the user has selected a different sort order/sort direction (different than the default of created/desc), and refreshes the page and looks a the issues for a repo in the same browser session, they see the different sort order/sort direction in mobile:

IE 11 compatibility:

While locally testing, ran into some issues with react-create-app's scripts in IE 11: facebook/create-react-app#8084 / facebook/create-react-app#8153 For now using the 3.2.0 version of react-scrips works for loading IE 11 locally.

Initial screen in IE 11 on browserstack:

Listing screen in IE 11 on browserstack:

Listing screen in IE 11 on browserstack when a repo has been selected: