Documentation

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

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
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.
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.
Make the Add New Customer Modal it's own component, importing it into the main table page.
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.
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.
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.
(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

Andrewgdewar/React-typescript-demo

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages