epam-ai-conductor 0.1.0

package/dist/content/content/module-3/theory/module-3_state-actions-reducers.md

@@ -0,0 +1,445 @@
+---
+sidebar_position: 2
+sidebar_label: "State, Actions and Reducers"
+title: "State, Actions and Reducers"
+---
+
+The next step to manage a work with the store is to create `Reducer` with `State`.
+
+The easiest way to understand how it works is to consider it as an example.
+Let's create a store for our 'Courses' application.
+
+**Files structure**:
+
+```
+store
+|-- courses
+|   |-- reducer.js
+|   |-- actions.js
+|   |__ types.js
+|
+|-- rootReducer.js
+|
+|-- index.js
+```
+
+## Initial state
+
+One of the core principles of React and Redux is that **your UI should be based on your state**.
+One strategy for designing an application involves initially considering all the state required to describe its functionality.
+It is also beneficial to aim for describing your UI using as few values in the state as possible,
+which results in less data to monitor and update.
+
+\*Conceptually, the primary aspect of this application is the actual list of current course items.
+
+In our case, since we don't have any courses for the initial state, we should obtain them through an API request.
+
+```jsx
+const initialCoursesState = [];
+```
+
+## Actions
+
+**Actions are plain JavaScript objects that have a `type` field.**
+
+```js
+const ACTION = {type: string, payload?: any};
+```
+
+_Similar to designing the state structure based on the app's requirements, we should be able to generate a list of
+actions that describe the events occurring in the app:_
+
+1. _Save courses from the response to the store_
+2. _Add a new course entry based on the data the user entered._
+3. _Delete a course._
+
+Typically, any additional data needed to describe an event is placed in the `action.payload` field. This data could be a number, a string, or an object with multiple fields.
+
+`action.type` is simply a string, and you can create any type you prefer. The Redux store is not concerned with the actual text of the `action.type` field. It's recommended to select action types that are easily understandable and accurately describe the event.
+This way, it will be much more straightforward to realize the actions when reviewing them later.
+
+_For our COURSES application, let's create the action types in a `types.js` file._
+
+```js
+//types.js
+
+export const SAVE_COURSES = "SAVE_COURSES";
+export const DELETE_COURSE = "DELETE_COURSE";
+export const ADD_COURSE = "ADD_COURSE";
+```
+
+_The next step is to create action creators for these types in an `actions.js` file._
+
+```js
+// actions.js
+
+import { SAVE_COURSES, DELETE_COURSE, ADD_COURSE } from './types.js'
+
+const addCourseAction = (payload) => ({ type: ADD_COURSE, payload });
+const deleteCourseAction = (payload) => ({ type: DELETE_COURSE, payload });
+const saveCoursesAction = (payload) => ({ type: SAVE_COURSES, payload });
+
+```
+
+## Reducers
+
+With the knowledge of our state structure and the actions, we can now proceed to write our first reducer.
+
+**Reducers are functions that take the current `state` and an `action` as arguments, and return a new `state` result.**
+
+```js
+const reducer = (state, action) => newState;
+```
+
+### Creating the Reducer
+
+A Redux app essentially has a single reducer function: the "root reducer" function that
+will be passed to `configureStore` at a later stage.<br/>
+
+_(In some example code, you may see createStore instead, but it is now deprecated. <br />
+IAlthough it still works and is mentioned in the Redux documentation for "plain" Redux,
+using Redux Toolkit is the recommended approach.<br />
+Please use `configureStore`. See more [here](https://stackoverflow.com/a/71947129/12236670).)_
+
+The single root reducer function is responsible for handling all dispatched actions and
+determining the entire new state result each time an action occurs.
+
+Let's start by creating a `coursesReducer` in `reducer.js` file for our application.
+
+Every reducer requires an initial state.
+After defining the initial state, we can draft a framework for the logic inside the reducer function:
+
+```js
+import { SAVE_COURSES, DELETE_COURSE, ADD_COURSE } from './types.js'
+
+export const coursesInitialState = [];
+// Use the initialState as a default value
+export  const coursesReducer = (state = coursesInitialState, action) => {
+  // The reducer normally looks at the action type field to decide what happens
+  switch (action.type) {
+    // Do something here based on the different types of actions
+    default:
+      // If this reducer doesn't recognize the action type, or doesn't
+      // care about this specific action, return the existing state unchanged
+      return state
+  }
+}
+```
+
+Following that, let's implement the logic to handle the `SAVE_COURSES` and `ADD_COURSE` actions.
+
+```js
+export const coursesReducer = (state = coursesInitialState, action) => {
+  switch (action.type) {
+    // in this case we need to return
+    case SAVE_COURSES:
+      return action.payload;
+
+    case ADD_COURSE:
+      return [...state, action.payload];
+
+    default:
+      return state;
+  }
+};
+```
+
+Continue implementing the logic for each action as needed.
+
+### Creating the Root Reducer
+
+You might have numerous reducers, but it's necessary to create a single root reducer to combine all of them.
+
+**Create the root reducer using `combineReducers`.**
+
+```js
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+
+import { coursesReducer } from "./courses/reducer.js"; // reducer that we already have
+
+const rootReducer = combineReducers({
+  courses: coursesReducer,
+  //could be extended by another slice of reducer that respond for other part of your app
+});
+
+export const store = configureStore({ reducer: rootReducer });
+```
+
+**Create root reducer without `combineReducers`.**
+
+```js
+import { combineReducers } from "@reduxjs/toolkit";
+import { coursesReducer } from "./courses/reducer.js"; // reducer that we already have
+
+export const store = configureStore({
+  reducer: {
+    courses: coursesReducer,
+    //could be extended by another slice of reducer that respond for other part of your app
+  },
+});
+```
+
+:::info
+**`reducer`**  
+If there is single function, it can be directly employed as the root reducer for the store.
+
+If it is an object of slice reducers, like `{courses : coursesReducer, user : userReducer}`,
+`configureStore` will automatically create the root reducer by passing this object to the
+[Redux combineReducers utility](https://redux.js.org/api/combinereducers).
+:::
+
+### Rules of Reducers
+
+**Reducers must always follow some special rules:**
+
+&#9989; They should only calculate the new `state` value based on the state and action arguments.
+
+&#10062; They are not allowed to modify the existing `state`.
+
+Instead, reducers must perform immutable updates by copying the existing state and applying changes to the copied values.
+
+&#10060; Reducers must not implement any asynchronous logic or other ["side effects"](https://dev.to/vonheikemen/dealing-with-side-effects-and-pure-functions-in-javascript-16mg)
+
+A function that adheres to these rules is also referred to as a ["pure" function](get-started#three-redux-fundamental-principles), even if it's not specifically written as a reducer function.
+
+### &#10071; Courses reducer with TypeScript
+
+Let's add type checking with TS to our example.
+
+1. Describe the course entity type
+
+```ts
+type CourseType = {
+  id: string;
+  title: string;
+  description: string;
+  creationDate: string;
+  duration: number;
+  authors: string[];
+};
+```
+
+2. Create `enum` for possible courses' action types
+
+```ts
+const enum CoursesActionTypes {
+  SAVE_COURSES = "SAVE_COURSES",
+  ADD_COURSE = "ADD_COURSE",
+  DELETE_COURSE = "DELETE_COURSES",
+}
+```
+
+With the use of an enum, there is no need to describe the action in an `actions.ts` file.
+Enum serves as a self-descriptive representation of the action types.
+
+3. Once we have actions, we need to create action creators. As an example let's create action creator for ADD_COURSE action.
+
+```ts
+type AddNewCourseAction = {
+  type: CoursesActionTypes.ADD_COURSE;
+  payload: CourseValues;
+};
+
+export const addNewCourseAction = (
+  courseData: CourseType,
+): AddNewCourseAction => ({
+  type: CoursesActionTypes.ADD_COURSE,
+  payload: courseData,
+});
+```
+
+4. Create `interface` for each action and type for courses actions
+
+```ts
+interface SaveCourses {
+  type: CoursesActionTypes.SAVE_COURSES;
+  payload: CourseType[];
+}
+
+interface AddCourse {
+  type: CoursesActionTypes.ADD_COURSE;
+  payload: CourseType;
+}
+
+interface DeleteCourse {
+  type: CoursesActionTypes.DELETE_COURSE;
+  payload: string;
+}
+
+type CoursesAction = SaveCourses | AddCourse | DeleteCourse;
+```
+
+5. It's time to write the reducer:
+
+```ts
+const initCoursesState = [] as CourseType[];
+
+export function coursesReducer(
+  state = initCoursesState,
+  action: CoursesAction,
+) {
+  switch (action.type) {
+    case CoursesActionTypes.SAVE_COURSES:
+      return action.payload;
+    case CoursesActionTypes.ADD_COURSE:
+      return [...state, action.payload];
+
+    default:
+      return state;
+  }
+}
+```
+
+## Store
+
+### Function `createStore`
+
+Now let's create store for COURSES application.
+
+```jsx
+// store/index.js
+
+import { createStore } from "redux";
+
+import rootReducer from "./rootReducer";
+import { coursesInitialState } from "./courses/reducer.js";
+
+const appInitialState = {
+  courses: coursesInitialState,
+};
+const store = createStore(rootReducer, appInitialState);
+
+export default store;
+```
+
+The `createStore` function accept 3 arguments:
+
+1. `rootReducer` (we have created it early).
+
+2. `initialState (optional)` - Represents the initial structure of your app's state.
+   If you created a `rootReducer` using `combineReducers`, this must be a plain object with the same shape
+   as the keys passed to it. Otherwise, you are free to pass any data type that your reducer can process.
+
+3. The store enhancer (optional) - You have the option to specify a store enhancer to augment the store with
+   third-party features such as middleware, time travel, persistence, and more.
+   The only store enhancer that ships with Redux is [`applyMiddleware()`](https://redux.js.org/api/applymiddleware)(this function is described in the [next module](/docs/module-4/redux-thunk#how-to-add-and-configure-thunk)).
+
+Add store to the entire COURSES application:
+
+1. Wrap `App` into the `Provider`
+2. Pass our store to the `Provider`
+
+```jsx
+// src/index.js
+import ReactDOM from "react-dom";
+
+import { Provider } from "react-redux";
+import store from "./store";
+import App from "./App";
+
+import "./index.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
+  <Provider store={store}>
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  </Provider>,
+);
+```
+
+### Function `configureStore`
+
+`configureStore` is the recommended way to create store. It is an abstraction under `createStore` function.
+
+It helps to simplify store setup by:
+
+1. Utilizing an options object with "named" parameters can enhance readability and make it easier to understand when working with function arguments.
+2. By allowing you to supply arrays of middleware and enhancers to be added to the store, Redux handles the calls to `applyMiddleware` and `compose` automatically, streamlining the store configuration process.
+3. Enables the Redux DevTools Extension automatically, making it easier to debug your application's state and actions.
+   In addition, `configureStore` adds some middleware by default, each with a specific goal:
+4. [**Redux-thunk**](https://github.com/reduxjs/redux-thunk) is the most commonly used middleware for handling both synchronous and asynchronous logic outside of components.
+5. In development, middleware checks for common mistakes, such as state mutation or the use of non-serializable values.
+   This results in shorter and more readable store setup code and provides good default behavior right out of the box.
+   The simplest way to utilize it is by passing the root reducer function as a parameter named reducer:
+
+```js
+import { configureStore } from "@reduxjs/toolkit";
+import rootReducer from "./rootReducer";
+
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+export default store;
+```
+
+### Redux DevTools
+
+:::info
+Redux DevTools is enabled by default in case of using `configureStore` (redux/toolkit).
+This upcoming section is for when using reac-redux without toolkit.
+:::
+
+```npm
+npm i redux-devtools-extension
+```
+
+Let's look at the store with DevTools applied example.
+
+```jsx
+// store/index.js
+
+import { composeWithDevTools } from "redux-devtools-extension"; // import DevTools
+import { createStore } from "redux";
+import rootReducer from "./rootReducer";
+import { coursesInitialState } from "./courses/reducer.js";
+
+const appInitialState = {
+  courses: coursesInitialState,
+};
+
+const store = createStore(
+  rootReducer,
+  appInitialState,
+  composeWithDevTools(), //apply React DevTools enhancer
+);
+
+export default store;
+```
+
+After this, React DevTools will have access to you web application.  
+Go to the Chrome DevTools and find the tab `Redux`.  
+![](images/redux-dev-tools.jpg)
+
+[Link to the Chrome Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
+
+## Data Flow
+
+- Initial setup:
+  - A Redux store is created by using a root reducer function.
+  - The store invokes the root reducer once and stores the returned value as its initial state.
+  - When the UI is initially rendered, UI components access the current state of the Redux store and utilize that data to determine what to render on the screen. Additionally, UI components subscribe to future store updates, allowing them to detect any changes in the state and respond accordingly.
+- Updates:
+  - Something happens in the app, such as a user add new course.
+  - The app code dispatches an `action` to the Redux store, like:
+  ```jsx
+  onClick((event) => dispatch(addCoursesAction(newCourse)));
+  ```
+
+  - The store executes the reducer function again, passing the previous `state` and the current action. It then saves the returned value as the new `state`.
+  - The store informs all subscribed UI components that an update has taken place in the store's state.
+  - Each UI component that relies on data from the store verifies if the state parts they require have undergone changes.
+  - Any component that detects changes in its data triggers a re-render using the new data, updating the content displayed on the screen accordingly.
+
+Here's what that data flow looks like visually:
+![Redux data flow](./images/data-flow2.gif)
+
+## Materials
+
+1. [Redux Fundamentals: State, Actions, and Reducers.](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#designing-the-state-structure)
+2. [What is Redux Toolkit?](https://redux.js.org/redux-toolkit/overview)
+3. [Modern Redux with Redux Toolkit.](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux)
+4. [Redux Data Flow.](https://redux.js.org/tutorials/essentials/part-3-data-flow)

package/dist/content/content/module-4/task/module-4_home-task_components.md

@@ -0,0 +1,187 @@
+---
+sidebar_position: 2
+sidebar_label: 'COMPONENTS'
+title: 'Components description for Tasks 4'
+---
+
+## App
+ - Use the Redux Thunk for `courses/all` and `authors/all` GET requests.
+---
+
+
+## Store
+- Add a new value `role` to the initial state of user
+```js
+const userInitialState = {
+	isAuth: '',
+	name: '',
+	email: '',
+	token: '',
+	role: '', // new value
+};
+```
+---
+## Courses component
+- Make a request to get current user `/users/me`. Now you have `name`, `email` and `role` values.  
+  Save this data to the store. Use **Thunk** for it.  
+  If you have user's data you should redirect him to the `\courses`.
+
+:::tip
+Don't forget to add header `Authorization: token`.
+:::
+
+- Button `Add new course` and route `/courses/add` **should be available only for ADMIN role**.
+
+---
+## Private route (new component)
+### Create [`PrivateRoute` component](/docs/module-4/private-routes).
+- This component should render any component as a children.
+
+
+- This component checks user's role and if it is **ADMIN** `PrivateRoute` returns
+  component as children otherwise redirects to `/courses`.
+
+---
+## Header
+### Add new functionality for the `logout` button
+- When user clicks `logout` button you should make a request to logout.
+   ```
+   Swagger:  
+   url: "/logout",  
+   method: "DELETE". 
+   ```
+
+---
+## `EmptyCourseList` component
+### Implement a new feature for `EmptyCourseList` component:
+FOR ADMIN USER:
+- By clicking 'ADD NEW COURSE' button user should be navigated to the route `courses/add`.
+
+FOR NON-ADMINS (REGULAR USERS):
+- Message "You don't have permissions to create a course. Please log in as ADMIN" is displayed instead of 'ADD NEW COURSE' button.
+___
+
+## CourseCard component
+:::caution
+This components has different functionality for users with different roles.
+:::
+
+*CourseCard component without ADMIN role:*
+![](images/course_card.jpg)  
+
+
+*CourseCard component with ADMIN role:*  
+![](images/course_card_admin.jpg)  
+
+## Course card with ADMIN role
+
+When user has a role **ADMIN** `CourseCard` two new buttons should be displayed:
+1. `Delete course` button:  
+   When user clicks this button - course should be deleted from back-end.
+   Delete this course from store after success response. Use Thunk for it.
+   ```
+      Swagger:  
+      url: "/courses/:id",  
+      method: "DELETE".
+   ```
+
+2. `Update course` button:  
+   When user clicks this button **Update course** form is opened by the route `/courses/update/:courseId`.
+
+---
+## Add new course
+### Implement new features for CourseForm component:
+
+- `CourseForm` should be displayed only for user with a role **ADMIN**.
+
+
+- Use `PrivateRoure` for `/courses/add` route.
+
+
+- When user clicks the `Create course` button:
+  -  New course should be sent to back-end.
+   ```
+      Swagger:  
+      url: "/courses/add",  
+      method: "POST".
+   ```
+  - Save the response course result to the **store**.
+
+  - Navigate to the `Courses` component.
+
+  - New course should be in the courses list.
+
+
+-  When user clicks the `Create author` button:
+     - New author should be sent to back-end.
+    ```
+      Swagger:  
+      url: "/authors/add",  
+      method: "POST".
+    ```
+    - Save the response author result to the **store**.
+
+    - New author should be in the all authors list.
+
+
+:::info
+Now you do not have to generate **id** for new course and author and **creation date**.  
+API generates id for new course and author automatically.
+:::
+
+Models of course and author info must be as bellow:
+```js
+// Course
+ {
+   title: string
+   description:	string
+   duration: number
+   authors: [authorId]
+}
+
+// Author
+{
+    name: string
+}
+```
+---
+
+## Update course
+
+### Now you should use `CourseFrom` (old `CreateCourse`) for course creation and course updating.
+When user clicks `Update` button on the `CourseCard`:
+
+- `CourseForm` is rendered instead of the Courses component by route `/courses/update/:courseId`
+ (`courseId` - id of the course that should be updated).  
+  (Use `useParams` hook to get courseId).
+
+
+
+- All fields on the `CourseForm` page have prefilled data from opened course.
+
+
+- Route `/courses/update/:courseId` should be accessible only for a role **ADMIN**.
+  (Use **Private route** component).
+
+
+- After clicking on the `Update course` button, the course should be updated on API.
+  ```
+  Swagger:  
+  url: "/courses/:id",  
+  method: "PUT". 
+  ```
+  A returned from API course should be added to **store** as updated course.
+
+
+-  When user clicks the `Create author` button:
+     - New author should be sent to the back-end.
+    ```
+      Swagger:  
+      url: "/authors/add",  
+      method: "POST".
+    ```
+    - Save the response author result to the **store**.
+
+    - New author should be in the all authors list.
+___
+