chrispiccaro18 / sort-table-mob

Sorted Contacts

Render a table of contacts and allow user to specify sort order

Contacts Data

The file data/contacts.js contains an array of 50 faux contacts

Process

1. DDD makeContactRow template function
2. Add Contacts Component
   1. File contacts-component.js
   2. Move makeContactRow function here (named export for testing);
   3. Reference (make a variable) for <tbody> where rows will go
   4. exports default loadContacts(contacts) function
   5. loadContacts function loops contacts and creates a table row for each one (don't worry about clearing rows yet).
3. Load Contacts Component in index.js
   1. import contacts
   2. import loadContacts
   3. call loadContacts with contacts
4. TDD sort-contacts function
   1. takes array of contacts and sort object with field
   2. returns sorted array
   3. when done, move to sort-contacts.js file
5. Add Sort Component
   1. File sort-component.js
   2. Reference (make a variable for) <select> element
   3. exports default loadSort(callback) function
   4. loadSort listens for select change and
      1. creates a sortChoices object
      2. calls callback with sortChoices object
6. Load Sort Component in index.js
   1. import loadSort
   2. import sortContacts
   3. call loadSort with callback function
   4. callback function
      1. calls sortContacts with contacts and sortChoice
      2. call loadContacts with new array
7. Contacts Component
   1. clear rows when loadContacts is called