kchia commented 3 years ago

User-story-5: List all customers

As a CSR, I would like to view a list of the most recently added customers, so that I can follow up with them regarding their orders.

Acceptance Criteria:

Given that I am on the Customers page, Whenever the page is loaded, Then I see a list of the customers (ordered from most to least recently added).

Requirements/Validations:

Frontend

Navigating to the /customers or / path should route to the Customers page which displays a list of customers. This route is the home page/dashboard for the application
The page should display each customer’s id, first name, last name, phone, city and zipcode
Backend
The API GET api/customers will return a status code of 200 and a set of all customer record(s) as JSON (see the "Outputs" section below).

Inputs:

None

Outputs:

The API GET api/customers will return a status code of 200 and a set of all customer record(s) as JSON:

[{
  "id": 1,
  "first_name": "Bernadine",
  "middle_name": "Ulysses",
  "last_name": "Ownsworth",
  "phone": "516-768-8190",
  "email": "uownsworth0@cocolog-nifty.com",
  "notes": "Curabitur convallis.",
  "address_id": 1
}, {
  "id": 2,
  "first_name": "Ruddie",
  "middle_name": "Merwyn",
  "last_name": "Bussell",
  "phone": "117-873-1443",
  "email": "mbussell1@admin.ch",
  "notes": "Mauris ullamcorper purus sit amet nulla.",
  "address_id": 2
}, {
  "id": 3,
  "first_name": "Reade",
  "middle_name": "Byran",
  "last_name": "Figgen",
  "phone": "379-317-2206",
  "email": "bfiggen2@disqus.com",
  "notes": "Sed vel enim sit amet nunc viverra dapibus. Nulla suscipit ligula in lacus.",
  "address_id": 3
}, {
  "id": 4,
  "first_name": "Hernando",
  "middle_name": "Janet",
  "last_name": "Catley",
  "phone": "621-883-6154",
  "email": "jcatley3@tinyurl.com",
  "notes": "Suspendisse potenti.",
  "address_id": 4
}, {
  "id": 5,
  "first_name": "Grata",
  "middle_name": "Benito",
  "last_name": "Atling",
  "phone": "705-418-3300",
  "email": "batling4@hubpages.com",
  "notes": "Aliquam augue quam, sollicitudin vitae, consectetuer eget, rutrum at, lorem.",
  "address_id": 5
}, {
  "id": 6,
  "first_name": "Laina",
  "middle_name": "Hugh",
  "last_name": "Colbridge",
  "phone": "130-840-0484",
  "email": "hcolbridge5@networksolutions.com",
  "notes": "Phasellus sit amet erat.",
  "address_id": 6
}, {
  "id": 7,
  "first_name": "Elysee",
  "middle_name": "Raleigh",
  "last_name": "Hagart",
  "phone": "674-806-7510",
  "email": "rhagart6@so-net.ne.jp",
  "notes": "Integer pede justo, lacinia eget, tincidunt eget, tempus vel, pede.",
  "address_id": 7
}, {
  "id": 8,
  "first_name": "Burtie",
  "middle_name": "Lloyd",
  "last_name": "Sawdon",
  "phone": "382-341-5595",
  "email": "lsawdon7@comsenz.com",
  "notes": "Donec vitae nisi. Nam ultrices, libero non mattis pulvinar, nulla pede ullamcorper augue, a suscipit nulla elit ac nulla.",
  "address_id": 8
}, {
  "id": 9,
  "first_name": "Levy",
  "middle_name": "Eugenio",
  "last_name": "Rief",
  "phone": "861-169-9885",
  "email": "erief8@tamu.edu",
  "notes": "Proin interdum mauris non ligula pellentesque ultrices.",
  "address_id": 9
}, {
  "id": 10,
  "first_name": "Leigha",
  "middle_name": "Mathilda",
  "last_name": "Auguste",
  "phone": "666-249-7625",
  "email": "mauguste9@bravesites.com",
  "notes": "Aenean auctor gravida sem. Praesent id massa id nisl venenatis lacinia.",
  "address_id": 10
}]

Recommended steps

Create a simple wireframe (styles NOT needed) for the page.
Determine what components are needed for the page
Create the folder/files for the components, and create static components in each file.
Set up the routes needed to route the user to the placeholder components
Add state/props and other functionality to your components.
Since your backend is not likely built yet while you're creating the front-end, you can add test data to db.json and use the fake json-server API instead.
Build out the backend.
Update the front-end to call the real backend API. Make sure everything works.
When everything is working, style your application. Follow the style guide
Refactor your code, as needed.