santiago-rodrig/bookstore

Bookstore application. Built with React & Redux.

bookstore's Issues

React Connections

Requirements

• BooksForm
  • state is enabled for this component, title and category are tracked
  • events are handled, onChange for the input and the select elements
  • event submit must add a book to the redux store and reset the component's state
• BooksList
  • add and extra column to the table with a button saying "Remove Book"
  • handle books' removal from the Redux's store

Filters

Requirements

• Redux store
  • add a filter state that has string values, it must have a filter value 'all' by default that will display all the books
  • create the changeFilter action
  • create the filter.js reducer
• implement a <CategoryFilter /> component
  • renders a select box with categories
  • add the categories plus the 'all' category (this is not a valid category, it serves only to display all books)
  • insert the component inside of the <BooksList /> component
  • create a method that returns the filtered books inside of <BooksList /> component

Setup

Requirements

• create a new React app using create-react-app
• delete unnecessary files
• add prop-types to the project for props typechecking
• add redux and react-redux NPM packages
• deploy the app to Heroku using create-react-app-buildpack

Redux Connections

Requirements

• create components directory under src, this directory will hold presentational components
• create containers directory under src, this directory will hold container components
• create actions directory under src, this directory will have an index.js file where all Redux actions are going to be defined
• create reducers directory under src with two files: books.js and index.js, the former must implement all the reducers related to books, while the last one will combine all the reducers inside of reducers directory
• implement the App component, it must wrap BookList and BooksForm in a <div></div> and render it. Attach App to the render function inside of src/index.js
• implement the BookList component. It must display the books as an HTML table. Each row must contain the ID, title, and category. It must be connected to the Redux store, from where it fetches the books
• implement the Book component. It must accept a book as a prop. It must represent a single row in the books table
• implement the BooksForm component. It must have a text input for the book title and a select field for the category. The categories are defined by the following array: ["Action", "Biography", "History", "Horror", "Kids", "Learning", "Sci-Fi"]
• implement the Redux actions and reducers. books.js recognizes CREATE_BOOK and REMOVE_BOOK actions. actions/index.js must define CREATE_BOOK and REMOVE_BOOK action creators.
• implement the Redux store. Define the initial state object at src/index.js. Use Math.Random to generate the IDs for the books. Use <Provider /> to wrap the App component, passing the store as a prop

Style

Requirements

• clone the design of this. Credentials are in the Microverse curriculum.