Migrate Rewards to Next.js

[ty730]

Problem

We are migrating the web-app to Next.js to take advantage of all its features to improve user experience, improve developer experience, integrate TypeScript and Inversify.js to create a more type safe and testable app, and much more.

In the next-js-migration branch we need the Rewards component to be migrated to use Next.js and TypeScript. Also, we need Unit Tests to be written to test the component.

Goal

• Have the Rewards component in TypeScript
• 100% coverage of Unit Tests for Rewards
• Automate all tests using GitHub actions
• Clean up coding style to make the codebase more consistent and readable

Additional context

Things to look for:

• Wherever we previously used history.push consider using the Next.js router and prefetching
• Whenever changing styles or adding in styling try to first use already defined scss classes or mixins
• Make updates to better match how the web-app was designed in Figma: Colors/Spacing Figma, Figma for most components, Figma for Rewards
• Update variable names, class names, and file names to keep things consistent across the codebase
• Use more descriptive and accurate HTML elements

To get started create a next-js-migration branch in your fork of the web-app. Once you've switched to the branch then use npm install to install dependencies and npm run dev to start the development server. You'll probably need to upgrade your node version to 16.0.0 or higher to have things work correctly.

Here are links to more details about the migration including details on Next.js and TypeScript, SCSS structure and guide, naming conventions, and unit tests.

Take a look at the official Next.js documentation and official TypeScript documentation as well as this TypeScript cheat sheet.

For reference here are simple unit tests in Next.js and more complex unit tests from the old CRA framework.