Documentation

• typescript, in 5 minutes
• Typescript basic types
• Typescript interfaces vs types (more similar than you think)
• TypeScript Generics
• Introduction Documentation to react-jss
• React Query overview by the creator
• React Query and Typescript
• Example of using js ternary operators (these are everywhere in our app, get familiar)
• Examples of js object destructuring: destructure, rename, default values
• Example of js array destructuring (this can be seen often with component props)

Supplemental Reading

• CSS in JS - An excellent summary of current solutions

Getting Started

• If using vsCode the first time you open this repository you will be asked if you'd like to install the recommended Extensions. This is, obviously, recommended.

• npm install

• npm start

• DO spend some time reading the above documentation, the required information to complete the tasks below are contained within.

Tasks

1. Fix the color variable within the Customer interface found here by creating a "Color" type, that only allows the 4 choosable colors. You will have to follow the type around to fix associated components found: here and here

2. Using "react-jss" and "createUseStyles" create a new SnazzyButton component (reference ColoredTd), this new component will use the Patternfly Button component as a base and have a single additional prop called isSnazzy. When the button isSnazzy, apply the css string literal styling found here. Replace the Submit Button component found here, ensuring the new SnazzyButton has it's isSnazzy prop applied.

3. Using React Query and our Super real API calls, complete the functionality of the Add New Customer Modal, if you're feeling confident, impliment the "optimistic update" functionality mentioned in the React Query overview by the creator.

4. Make the Add New Customer Modal it's own component, importing it into the main table page.

5. Using React Query and our Super real API calls, add a menu kebab to each item in the table with the "Delete" action. Use this design as a reference to help you.

6. Using the existing darkmode context variable and useAppContext hook, fix the nightmode issues found within the table and the modal, feel free to use a ternary operator where needed.

7. Add a second parameter to the callApi function within the GetCustomers api call so that it reads: callAPI(customersGetter, 0.7). This will create intermittent errors on that endpoint. Handle those errors with the options parameter of useQuery found here.

8. (HARD) Using Typescript generics (inherited types), fix the "any" types found within the "callApi" function found here. Our goal is to always see the outputted types from our Super real API calls