Lorem Ipsum Master Detail

Code Wars Challenge

Create a ipsum viewer/editor that:

Displays a lists of ipsum's and when an ipsum is clicked, it populates a detail view with full information.
Add an input form and button for a title that adds a new ipsum and makes it the selected item.
BONUS: The Detail has an edit button that toggles to a form and allows editing. Includes sample text in html

(BONUS: Can you get the detail to switch to edit mode?)

Your app components should be structured as follows:

App
  Header
  Ipsums
    AddIpsum
    IpsumList
        IpsumItem
    Ipsum
        IpsumDetail
        IpsumForm

App
- Top Level Component
Header
- Logo and Title
Ipsums
- owns the "ipsum list" state (data, use your ipsumApi service)
  - adds and updates need to be done in this component!
- owns the "selected" state (initially null)
- passes IpsumList list of ipsums and a callback function, onSelect
- passes AddIpsum a callback function onAdd
- passes Ipsum the ipsum (it's selected data) and an onUpdate callback
IpsumList
- calls the passed onSelect when an ipsum is selected, passing the corresponding object to the onSelect function
- show name and category
IpsumForm
- Form for creating or updating an ipsum
- gets passed an onAdd callback called for add and edit when form submitted
- gets passed the ipsum if updating
- Has own state for managing data being updated (copy in data function when editing)
- Only show "cancel" button when updating. Calls onCancel when cancel button clicked
Ipsum
- Container for switching between viewer and editor (form)
- Has "editing" state (data)
- If ipsum is null displays message to make a selection
- Passes IpsumDetail the ipsum for display
- Passes IpsumForm the ipsum to edit, a onCancel callback function, and the onUpdate from Ipsums
IpsumDetail
- gets passed the ipsum

Work through the tasks incrementally:

Include npm test script that runs npm run lint