/28-routing-and-testing

cf 28: To Do

Submission Instructions

  • Follow the instructions in the "Lab Instructions" documentation in the reference folder of the class repository

Requirements

  • src/ -- containing the frontend code
  • src/main.js -- for appending your app to the DOM
  • src/components/ -- containing your components
  • src/components/app/index.js -- containing your App component
  • src/components/landing/index.js -- containing your Landing component
  • src/components/dashboard/index.js -- containing your Dashboard component
  • src/components/note-create-form/index.js -- containing your NoteCreateForm component
  • src/components/note-list/index.js -- containing your Notelist component
  • src/components/note-item/index.js -- containing your NoteItem component
  • src/style -- containing your sass
  • src/style/main.scss -- for importing and including reset and base

Feature Tasks

Create the following components and structure them according to the following diagram.

App
  Landing
  Dashboard
    NoteCreateForm
    NoteList
      Noteitem
App Component
  • The App component should manage the frontend routes and have a navbar
  • the / route should display the Landing component
  • the /dashboard route should display the Dashboard component
Landing Component
  • The Landing component should display a brief description of the notes app
Dashboard Component
  • The Dashboard component should manage the entire application state
  • The state should contain a notes array
  • It should have a bound addNote(note) method that adds a note to state.notes
    • each note that gets added should have the following data
      • id: always should contain the result of uuid.v1()
      • editing: false by default
      • completed: false by default
      • content: user provided content
      • title: user provided title
  • It should have a bound removeNote(note) method that removes a note from state.notes based on its id
NoteForm Component
  • onComplete the NoteForm should add a note to the application state
NoteList Component
  • should display an unordered list of NoteItem components
NoteItem
  • should display the notes content and title
  • should display a delete button
    • onClick the note should be removed from the application state

Test

  • Test Dashboard
    • Test the initial state
  • Test NoteCreateForm
    • Test the initial state

Documentation

Write a description of the project in your README.md