React App Kata 5 TypeScript

July 13, 2018 ยท View on GitHub

Code for Kata 5 is available in the app-ts-5 folder.

Learning aims

Up to now all data manipulation used the data.ts file to focus on frontend work. We are now moving the data to a backend server in aspnet core.

The idea here is to learn how a web app can interact with a backend server through REST API calls.

Requirements

Get started

You will need 2 terminals

  1. Web API server

    • go to ./app-ts-5
    • verify dotnet version dotnet --version is 2.0.0
    • run dotnet build
    • run dotnet run

    This should build the web api server and serve it at http:\\localhost:5000

  2. Web app

  • in another terminal
  • go to ./app-ts-5/app/
  • follow the instructions in the README.
  • your app should be running at port 3000

REST API

You are given a server that exposes the following REST endpoints.

descriptionmethodapi callnotes
list all productsGEThttp:localhost:5000/api/products/get
delete productDELETEhttp:localhost:5000/api/products/delete/readyroll
add productPOSThttp:localhost:5000/api/products/addjson/application with body {name: 'product1', description: 'product description here'}

Notes:

  1. There is a proxy between the web server(port 5000) and the app server (port 3000) so that in the app you can use /api/products/get. This then gets resolved to localhost:5000/api/products/get behind the scenes.
  2. delete and add api calls return the list of products so that you can update the products data right away instead of calling /api/products/get again.

Task

Write the TypeScript/React code to:

  1. List all products in the homepage when the app is loaded using the REST api.
    • you can use technologies like fetch or jQuery.ajax
    • to add a package do yarn add
    • eg: yarn add whatwg-fetch
    • after this you should be able to
      • Navigate to each product page
      • Have hard links on products names
  2. Add a remove button so that the user can remove a product from the list.
    • you should use the REST api for this, /api/products/delete/productname (see above for details)
    • Remember that onSubmit and onChange are form events this means that in TypeScript you should define the types of those events as React.FormEvent<HTMLFormElement> or React.FormEvent<HTMLInputElement>.
  3. Add a form so that user is able to add a new product (name and description) to the list.
    • you should use the REST api for this /api/products/add (see above for details)
  4. Changes to the data should persist through sessions:
    • delete a product
    • add a new product
    • open a new tab with the app
    • verify the removed product is not present
    • verify the added product is present

Resources