Project requirements

• You will find all the details of the Bookstore design in Zeplin. Login to Zeplin (hint: you will find the credentials in the [sneak peek]- -(https://github.com/microverseinc/curriculum-react-redux/blob/main/bookstore/sneak_peek_v2_0.md) of the project).
• Open the project Bookstore CMS.
• Use the information detailed in Zeplin to style the website.
• Your final design should match Zeplin's design.

Proposed changes

The aim of this pull request is to connect with API.

The following setups were implemented

• Read the Bookstore API documentation to learn how to use the API.
• Use fetch or axios with createAsyncThunk for making API calls.
• Fetch book list from Bookstore API on Books page load.
• Add an Action Creator, that returns a function.
• Fetch list of books.
• Dispatch another action (add an action type) that will pass API response to reducer and updates the state.
• Refactor your add book and remove book features to persist your changes in the server.
• Change your existing Action Creators, so they return functions.
• Make changes by using API.
• Dispatch an action (action type that existed before refactor) that will updates the state accordingly.
• Add book and remove book should work in the same way after the refactor.
• No styling is required.

Type of change

• New feature

Checklist

•  Linting tests pass locally with my changes
•  Used correct GitHub flow
•  Documentation is done in a professional way

Proposed changes

The aim of this pull request is to add react and redux to the project

The following setups were implemented

• First of all - make sure that you keep state immutable in reducers!
• Secondly, change the default state in your books reducer from an empty array to an array with a few books. One of the goals is to display them in your React components.
• Import Redux Provider and your store in the main component of your React app.
• Connect your app to the Redux store.
• Make sure that list of books displays books from Redux store.
• Use useSelector to consume the state.
• In your React component responsible for adding new books, add functionality for "Add new" button click:
• Import Redux useDispatch.
• Set the data inputs in the local React state (set title and author - NOTE: categories and comments are NOT part of this step).
• Takes the inputs from the state and generate a unique id and add them to an object.
• Once your new book object is ready to be submitted to Redux store, dispatch a corresponding action (import Action Creator that you created before and use it here).
• In your React component responsible for removing books, add a functionality for "Remove" button click:
• Import Redux useDispatch.
• Dispatch a corresponding action (import Action Creator that you created before and use it here).
• In your React component responsible for categories, add a functionality for "Check status" button click:
• Import Redux useDispatch.
• Dispatch a corresponding action (import Action Creator that you created before and use it here).

Type of change

• New feature

Checklist

•  Linting tests pass locally with my changes
•  Used correct GitHub flow
•  Documentation is done in a professional way

Proposed changes

The aim of this pull request is to add reducer and actions to the project

The following setups were implemented

• Add Redux Toolkit(npm install react-redux @reduxjs/toolkit).

• Structure your application files using a "feature folder" approach and use the ducks pattern for your Redux files. Your files/folder structure could look like this:

... /src |---/components |---/redux |--- /books | books.js |--- /categories | categories.js | configureStore.js | index.js

• Write your book's actions and reducer (in /src/redux/books/books.js) using the ducks pattern.

• Define action types for adding and removing a book.

• Set the initial state to be an empty array of books.

• Export Action Creators for your actions.

• Write your reducer and export it as default.

• Define state changes for the actions that you created.

• In case of unknown action - return the current state.

• Write your categories actions and reducer (in /src/redux/categories/categories.js) using the ducks pattern.

• Define an action type for checking the status.

• Set the initial state to be an empty array of categories.

• Export Action Creators for your actions.

• Write your reducer and export it as default.

• For the check status action return a string "Under construction".

• In case of unknown action - return the current state.

• Configure the Redux Store (/src/redux/configureStore.js):

• Importing the necessary methods from Redux Toolkit.

• Combine both reducers into a root reducer by using configureStore function.

Type of change

• New feature

Checklist

•  Linting tests pass locally with my changes
•  Used correct GitHub flow
•  Documentation is done in a professional way

Proposed changes

The aim of this pull request is to setup a book store react project.

The following setups were implemented Initialise React app:

• The building blocks of your app should be set as re-usable components. Create a directory for your components.
• Add React Router and set two s and s for the app's navigation: Books - the default view:
• Should display the list of books (empty at this point but it should be ready for the data) with the Remove button (no funcionality yet).
• Create a component called Book for displaying a single book (receive a title and an author as prop) and reuse it in a - - -component that displays a list of books.
• Should have a form for adding a book (no functionality yet).
• Create a separate component for this form (with inputs for a title and an author [IMPORTANT in the design you can see an input for a category - please replace it with an author.]). Categories
• Should display a button "Check status" only.
• Styling is not required at this point.

Type of change

• New feature

Checklist

•  Linting tests pass locally with my changes
•  Used correct GitHub flow
•  Documentation is done in a professional way