401 JS -- Lab 31 Budget Tracker

Submission Instructions

Work in a fork of this repository
Work in a branch on your fork
Write all of your code in a directory named lab- + <your name> e.g. lab-duncan
Submit a pull request to this repository
Submit a link to your pull request on canvas
Submit a question, observation, and how long you spent on canvas

Learning Objectives

Students will learn to create front end routes using react-router-dom
Students will learn to restructure their applications into modules
Students will learn the difference between view state and application state
Students will learn to lift application state to better control one way data flow
Students will learn to create and import sass partials

Requirements

Configuration

Your lab directory must include

README.md -- with a documention about your lab
.babelrc -- with all dependencies and dev-dependencies
.eslintrc -- with the class .eslintrc file
.gitignore -- with a robust gitignore
.eslintignore -- with the class .eslintignore
yarn.lock -- with the yarn lockfile
package.json -- with all dependencies and dev-dependencies
webpack.config.js -- with webpack config
src/ -- containing the front end code
src/main.js -- containing the entire app
src/style -- containing your sass
src/style/main.scss -- for importing and including reset and base
src/style/_vars.scss -- sass variables
src/style/_reset.scss -- sass reset
src/style/_base.scss -- base styles
src/style/_layout.scss -- layout styles

Feature Tasks

redux

reducer

create a category reducer in your your reducer direcoty
this reducer should support the following interactions
- CATEGORY_CREATE
- CATEGORY_UPDATE
- CATEGORY_DESTORY

action creators

you should create an action createor for each interaction supported by your category reducer

store

in lib/store.js export a function that will return a new redux store from your category reducer

Components

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

App
  Provider 
    BrowserRouter
      Route / Dashboard
        CategoryForm -- for creating categorys
        [Category Item]
           CategoryForm  -- for updating categorys

App Component

The App component should set up the Provider for the redux store and the Router.

Dashboard Component

should be displayed on the / route
should use react-redux's connect to map state and dispatchable methods to props
should display a CategoryForm for adding categories to the app state
should display a CategoryItem for each category in the app state

CategoryForm Component

should expect an onComplete prop to be a function
- that function should be invoked with the CategoryForms State when the form is submited
should expect a buttonText prop to be configure the submit buttons text
should support and optional category prop that will initialize the state of the form

CategoryItem Component

should display the category's name and budget
should display a delete button
- onClick the category should be removed from the application state
should display a CategoryForm
- onComplete the form should update the component in the application state

Test

Test each interaction of your your category reducer

Documentation

Write a description of the project in your README.md

KAardal/lab-31-34-budget-tracker