epam-ai-conductor 0.1.0

package/dist/content/module-2/theory/module-2_react-router.md

@@ -0,0 +1,328 @@
+---
+sidebar_position: 1
+sidebar_label: 'What is React Router?'
+title: 'A Simple React Router'
+---
+
+## What is React Router?
+
+React Router is a library for routing in React. It helps users to navigate among views of
+various components in a React Application and allows changing the browser URL. Basically it
+means that user is able to see "different pages" of SPA changing the URL. The main feature of
+React Router is that there is no need to make request to server again, everything happens on
+the client side without page refreshing.
+
+## Installation
+
+Run this command to install the React Router:
+
+```http request
+npm install react-router-dom
+```
+
+This command will add React Router to dependencies of your project.
+
+:::tip
+To install a certain version of `react-router-dom` you can add "@[version]" to the end.  
+For example, to install the 6th version run:  
+`npm install react-router-dom@6`
+:::
+
+## Connecting React Router to App
+
+When we are done with installation we should connect our app to the browser's URL:  
+import
+`BrowserRouter` and wrap `App` component in it.
+
+```javascript
+// src/index.js
+import ReactDOM from 'react-dom';
+import App from './App';
+
+// add this import
+import { BrowserRouter } from 'react-router-dom';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);
+```
+
+Now let's add some links to our application.
+
+## Adding Links
+
+As you already know, we are not going to refresh our page when we navigate through pages
+(components) inside our app, that's why we shouldn't use regular tag:
+```html
+<a href="URL">...</a>
+```
+instead, we should use special component:
+```jsx
+<Link to="URL">...</Link>
+```
+which is provided by `react-router-dom` library, so we can just import it and use, for
+instance, inside our App component.
+
+```jsx
+// src/component/Login/Login.jsx.jsx
+
+import { Link } from "react-router-dom";
+
+ const Login = () => {
+  return (
+    <div>
+      <form>
+        // Login form code
+      </form>
+      <div>
+        <Link to="/regiscration">Registration</Link>
+      </div>
+    </div>
+  );
+}
+```
+
+If you click on the link 'Registration' you can see that URL changes and the page does not reload when
+we navigate to the `Registration` component. So now, when we have links, it is time to create our routes
+with components which will be rendered when we follow our links.
+
+## Adding Routes
+
+First, let's create two components for **Login** and **Registration** page.  
+
+* src/components/Login.jsx
+* src/component/Registration.jsx
+
+Inside both pages let's add some `jsx` in order to see some difference between them:
+```jsx
+// src/pages/FirstPage.jsx
+
+import { Link } from "react-router-dom";
+
+const Login = () => {
+  return (
+    <>
+      <h2>Login</h2>
+      <form>
+        // Login form code
+      </form>
+      <p>If you don't have an account you may</p>
+      <Link to="/registration">Registration</Link>
+    </>
+  );
+}
+```
+
+```jsx
+// src/pages/SecondPage.jsx
+
+import { Link } from "react-router-dom";
+
+const Registration = () => {
+  return (
+      <>
+        <h2>Registration</h2>
+        <form>
+          // Registration form code
+        </form>
+        <p>If you have an account you may </p>
+        <Link to="/registration">Login</Link>
+      </>
+  );
+}
+```
+
+Now we can add our components as Routes of our application.  
+For this purpose we should import `Routes` and `Route` components from "react-router-dom" library.
+
+```jsx
+// src/App.js
+
+import { Routes, Route } from "react-router-dom";
+
+import { Courses } from "./components/Courses.jsx";
+import { Login } from "./component/Login.jsx";
+import { Registration } from "./component/Registration.jsx";
+
+const App = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Courses />}/>
+      <Route path="/login" element={<Login />}/>
+      <Route path="/registration" element={<Registration />}/>
+    </Routes>
+  )
+}
+```
+
+Pay attention that **Route** components should be inside **Routes** component.  
+For the `element` attribute of **Route** we have to provide a component
+we want to be rendered when our relative path matches with `path` attribute.
+
+### Previous versions of `react-router-dom`
+
+Sometimes, on the "old" projects, you may see another version of routing. In our case it
+would look like this:
+
+```jsx
+// src/App.js
+
+import { Route, Switch } from "react-router-dom";
+
+import { Courses } from "./components/Courses.jsx";
+import { Login } from "./component/Login.jsx";
+import { Registration } from "./component/Registration.jsx";
+
+render(
+  <Switch>
+    <Route exact path="/" children={<Courses />} />
+    <Route path="/login" children={<Login />} />
+    <Route path="/registration" children={<Registration />} />
+  </Switch>
+);
+```
+
+This is the older version of `react-router-dom`.  
+**Pay attention that this code will not work with `react-router-dom` v6. **So if you want
+to try this, don't forget to install `react-router-dom` version 5.  
+You can find additional information here:
+[Simple React Router v4 Tutorial](https://blog.pshrmn.com/simple-react-router-v4-tutorial/)
+
+:::info
+You may also create routes by using the [useRoutes()](./hooks.md#useroutes) hook, which we'll cover in the [React Router Hooks](./hooks.md) section.
+:::
+
+## Path Params
+
+Sometimes you need to get information from the URL to render a specific page.  
+You can retract the information by using
+`path params`, and pass that information from the URL to the page.   
+
+To see how it works let's do the following steps:
+
+1. Create new component. In our example it will be `CourseInfo`.
+
+```jsx
+// src/component/CourseInfo.jsx
+
+const CourseInfo = () => {
+    return <h2>Course id that came from URL is ???</h2>;
+}
+```
+And we want to show some course id on the page instead of `???`.
+
+2. Now we have to add course item inside `Courses` component.
+```jsx
+// src/component/Courses.jsx
+
+import { Link } from "react-router-dom";
+
+const Courses = () => {
+  return (
+    <>
+      <p>React course</p>
+      <Link to={`/courses/${id}`}>SHOW COURSE</Link>
+    </>
+  );
+}
+```
+You can see that currently we don't have pages for routes `/courses/:courseId`. For this purposes we
+should do this step next.
+
+3. Creating new `Route` with URL param `:courseId`.
+
+```jsx
+// src/App.js
+
+import { Routes, Route } from "react-router-dom";
+
+import { Courses } from "./components/Courses.jsx";
+import { Login } from "./component/Login.jsx";
+import { Registration } from "./component/Registration.jsx";
+import { CourseInfo } from "./compoments/CourseInfo.jsx";
+
+render(
+  <Switch>
+    <Route exact path="/" children={<Courses />} />
+    <Route path="/login" children={<Login />} />
+    <Route path="/registration" children={<Registration />} />
+    <Route path='/courses/:courseId' element={<CourseInfo/>}/>
+  </Switch>
+);
+```
+This `:courseId` construction means that this URL will match any URL like `courses/id1`, or
+`courses/id2`.
+
+5. And the last step is passing this param to our `CourseInfo`. For this purpose we should import
+  `useParams` hook from `react-router-dom` and use it like this:
+
+```jsx
+// src/component/CourseInfo.jsx
+
+import { useParams } from "react-router-dom";
+
+const CourseInfo = () => {
+  const params = useParams();
+
+  return <h2>Course id that came from URL is {params.courseId}</h2>;
+}
+```
+:::caution
+**courseId** should be the same key as we're passing `courseId` in our route in the `App` component.  
+:::
+
+And if we click on `SHOW COURSE`, we can see page with `CourseInfo` component and selected id.
+
+## Redirect
+
+Also, there is a possibility to redirect user from some, for instance, non-existing URL. To do that
+we should create such construction.
+```jsx
+<Route
+  path="*" 
+  element={<Navigate to="/" />}
+/>
+```
+:::caution
+Don't forget to import `Navigate` component from `react-router-dom`.  
+:::
+
+This will redirect user from all non-existing URLs to the one stated in the element attribute.  
+`*` element means that if all routes above didn't match, this path will be used for the address.
+So if we use this construction in our application, all our attempts to visit for instance URL `localhost:3000/hello` will navigate us back to
+`localhost:3000/`:
+
+```jsx
+// src/App.jsx
+
+import { Routes, Route, Navigate } from "react-router-dom";
+
+import { Courses } from "./components/Courses.jsx";
+import { Login } from "./component/Login.jsx";
+import { Registration } from "./component/Registration.jsx";
+import { CourseInfo } from "./compoments/CourseInfo.jsx";
+
+render(
+  <Switch>
+    <Route exact path="/" children={<Courses />} />
+    <Route path="/login" children={<Login />} />
+    <Route path="/registration" children={<Registration />} />
+    <Route path='/courses/:courseId' element={<CourseInfo/>}/>
+    <Route path="*" element={<Navigate to="/" />}/>
+  </Switch>
+);
+```
+
+## Conclusion
+That's it. Congratulations! We have covered all basic topics and successfully implemented navigation
+in our simple React application using `React Router`.
+
+---
+## Materials
+1. [Official React Router documentation. Tutorial](https://reactrouter.com/en/6.18.0/start/tutorial)

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

@@ -0,0 +1,94 @@
+---
+sidebar_position: 2
+sidebar_label: "COMPONENTS"
+title: Components description for Tasks 3
+---
+
+## App component
+
+1. Use [configureStore](https://redux-toolkit.js.org/api/configureStore) function to create store.
+2. Import store to the `index.js`.
+3. Wrap `App` component in the [Provider](https://react-redux.js.org/tutorials/quick-start#provide-the-redux-store-to-react).
+4. Pass `store` to the `Provider`.
+
+Now all components have access to the store, and you can use `Redux Hooks`.
+
+:::tip
+[Reading State from the Store with `useSelector`](https://redux.js.org/tutorials/fundamentals/part-5-ui-react#reading-state-from-the-store-with-useselector)  
+[Dispatch actions using `useDispatch`](https://react-redux.js.org/api/hooks#usedispatch)
+:::
+
+---
+
+## Courses component
+
+### Implement new feature for Courses component:
+
+- Get courses data from the back-end. See SWAGGER `/courses/all` API.
+
+- Get authors data from the back-end. See SWAGGER `/authors/all` API.
+
+- Save courses and authors responses' results to the store.
+
+- Courses list should be rendered based on the data from the `courses` and `authors` properties in the **store**.
+
+:::tip
+
+See example [How to create your first reducer](/docs/module-3/state-actions-reducers)
+:::
+
+---
+
+## CourseCard component
+
+![](images/course_card_admin.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=2XuYekWUy7fL4Ba9-0)
+
+### Implement new features for CourseCard component:
+
+- Update `CourseCard` component by adding two buttons: `Delete` and `Update`.  
+  (These buttons should be reusable component `Button`).
+
+- When user clicks the `Delete` button current course should be removed from the
+  store and new courses list should be rendered.
+
+- `Update` button has **NO functionality in this module**.  
+  It will be added in the next module.
+
+---
+
+## Add new course
+
+### Implement new features for CreateCourse component:
+
+- When user clicks `Create author` button the new author should be saved to the store.
+
+- When user clicks `Create course` button the new course should be saved to the store.
+
+---
+
+## Login component
+
+### Implement new features for Login component:
+
+- Save information (name, token, email) from response to the store.
+
+- Save token to the `localStorage` after success login.
+
+---
+
+:::caution
+If we have a token in the `localStorage` the user should be immediately redirected to the Courses page when opening the application.
+:::
+
+## Header
+
+### Implement new features for Header component:
+
+- Take information about user from the store.
+
+- When user clicks `LOGOUT` button you should dispatch action to the store.
+
+- Delete token from the `localStorage` after logout.
+
+---

package/dist/content/module-3/task/module-3_home-task_good_practices.md

@@ -0,0 +1,26 @@
+---
+sidebar_position: 3
+sidebar_label: 'GOOD PRACTICES'
+title: GOOD PRACTICES
+---
+
+# GOOD PRACTICES THAT YOU CAN APPLY FOR THIS TASK:
+1. Use `Redux DevTools` extension for Chrome browser to see store changes in the browser.
+
+
+2. Use separate `selectors.js` file for `useSelector` callbacks. For example:
+```js
+// BAD
+
+// Courses.jsx
+const courses = useSelector(state => state.courses);
+
+
+// GOOD
+
+// selectors.js
+export const getCourses = state => state.courses;
+
+// Courses.jsx
+const courses = useSelector(getCourses);
+```

package/dist/content/module-3/task/module-3_home-task_task.md

@@ -0,0 +1,170 @@
+---
+sidebar_position: 1
+sidebar_label: 'TASK'
+title: 'Module 3. State Management'
+---
+This is the third part of the application.  
+In this assignment,
+you should continue to work on your project with a slight modification.  
+This module is designed to teach how to work with state management in React and what is Redux.
+
+## Prerequisite:
+Firstly, you need to install the [Redux Toolkit](https://redux-toolkit.js.org/introduction/getting-started) and React-redux modules in your project using npm:
+
+1. Go to your project directory
+
+
+2. Install redux and react-redux
+```http request
+npm i @reduxjs/toolkit react-redux --save
+```
+
+3. Run your project
+```http request
+npm run start
+```
+
+## Project structure requirements:
+
+1. Create new folders where put the code for redux `src/store`.
+
+
+2. Create new file `services.js / .ts`.
+
+
+3. Folder structure `src/store`:
+```
+   src
+   |-- store
+   |   |-- index.js/.ts // Add store creation
+   |   |
+   |   |-- rootReducer.js/.ts // combine your reducers here
+   |   |
+   |   |
+   |   |-- user
+   |   |   |-- reducer.js // Code with reducer for user
+   |   |   |-- actions.js // Code with actions
+   |   |   |__ types.js // Code with action types
+   |   |
+   |   |-- courses
+   |   |   |-- reducer.js // Code with reducer for courses
+   |   |   |-- actions.js // Code with actions
+   |   |   |__ types.js // Code with action types
+   |   |
+   |   |__ authors
+   |       |-- reducer.js // Code with reducer for user
+   |       |-- actions.js // Code with actions
+   |       |__ types.js // Code with action types
+   |   
+   |-- services.js
+   |
+   |__ ...
+   ```
+
+4. Delete `mockedCoursesList` and `mockedAuthorsList`.
+
+5. Store should have model where `user`, `authors` and `courses` should have own reducer:
+    ```javascript
+        const store = {
+            user: {
+                isAuth: boolean, // default value - false. After success login - true
+                name: string, // default value - empty string. After success login - name of user
+                email: string, // default value - empty string. After success login - email of user
+                token: string, // default value - empty string or token value from localStorage. After success login - value from API /login response. See Swagger.
+            },
+            courses: [], // list of courses. Default value - empty array. After success getting courses - value from API /courses/all response. See Swagger. 
+            authors: [] //  list of authors. Default value - empty array. After success getting authors - value from API /authors/all response. See Swagger.     
+   }    
+    ```
+
+6. APIs from SWAGGER for Module 3:
+- `courses/all`[GET];
+- `authors/all`[GET].
+
+## Criteria (35 points max)
+
+### APIs
+
+* [2 points] - All functionality with back-end should be in `services.js`.  
+  (Create **api service** for each endpoint that you use and call methods or functions from service into your components)
+
+
+* [2 points] - Get courses from back-end. See API `/courses/all` in the SWAGGER. Save courses list to the store.
+
+
+* [2 points] - Get authors from back-end. See API `/authors/all` in the SWAGGER. Save authors list to the store.
+
+
+### Store
+* [3 points] - Store should have **User** reducer.  
+  **User** reducer manage data with user's info and should have next model:
+    ```js
+     const userInitialState = {
+         isAuth: boolean, // default value - false. After success login - true
+         name: string, // default value - empty string. After success login - name of user
+         email: string, // default value - empty string. After success login - email of user
+         token: string, // default value - empty string or token value from localStorage. 
+         // After success login - value from API /login response. See Swagger.
+     };
+     ```
+  **User** reducer has logic:
+    - After success login `isAuth` property has value `true`, save token, email and name.
+    - After logout `isAuth` property has value `false`, token, email and name have value as empty string.  
+
+
+* [3 point] - Store should have **Courses** reducer.  
+  **Courses** reducer manage data with courses list and should have next model:
+    ```js
+       const coursesInitialState = [] // default value - empty array. After success getting courses from API - array of courses.
+     ```
+  **Courses** reducer has logic:
+    - Get courses. Save courses to the **store** after getting them from API. See Swagger `/courses/all`.
+    - Save new course.
+    - Delete course.
+    - Update course (we will use this action in the next task).
+
+
+* [3 point] - Store should have **Authors** reducer.  
+  **Authors** reducer manage data with authors list and should have the next model:
+    ```js
+      const authorsInitialState = [] // default value - empty array. After success getting authors from API - array of authors.
+     ```
+  **Authors** reducer has logic:
+    - Save a new author.
+    - Get authors. Save authors to **store** after getting them from API. See Swagger `/authors/all` .
+
+
+### Login Component
+* [2 point]  - Save user's info to the store after success login.
+
+
+### Header Component
+* [1 point]  - Get user's name from the store.
+
+* [2 point] - Dispatch REMOVE_USER action by `LOGOUT` button click.
+
+
+### Courses Component
+* [3 point] - Get courses from the store and render them into **Courses** component.
+
+* [3 points] - If token is present in the localStorage the user should be immediately redirected to the `Courses` page when opening the application.
+
+### CreateCourse Component
+* [2 points] - After saving course in **CreateCourse** component course should be added to **store**.
+
+* [2 point] - Get authors from the store.
+
+* [1 point] - Save new authors to the store.
+
+
+### CourseCard Component
+* [2 point]  - Add a new button "Delete course" into CourseCard.
+
+* [1 point]  - Add a new button "Update course" into CourseCard *(**CourseCard** in COMPONENTS)*.
+
+* [1 point] - After clicking on the `Delete course` button a selected course should be deleted from the **store**.
+
+
+:::info
+Please find detailed description of components and functionality in the [COMPONENTS](components) section.
+:::

package/dist/content/module-3/tests/App.test.tsx

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import App from "../App";
+
+describe("App", () => {
+  test("renders Login component when token is not present", () => {
+    localStorage.removeItem("token");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+      </MemoryRouter>
+    );
+
+    expect(
+      screen.getByText(/If you don't have an account you can/)
+    ).toBeInTheDocument();
+  });
+
+  test("renders Courses component when token is present", () => {
+    localStorage.setItem("token", "token");
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    const courseElements = screen.getAllByTestId("courseCard");
+
+    expect(courseElements[0]).toBeInTheDocument();
+  });
+
+  test("renders Registration component", () => {
+    render(
+      <MemoryRouter initialEntries={["/registration"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText("name")).toBeInTheDocument();
+    expect(screen.getByLabelText("email")).toBeInTheDocument();
+    expect(screen.getByLabelText("password")).toBeInTheDocument();
+  });
+
+  test("renders course add component", () => {
+    render(
+      <MemoryRouter initialEntries={["/courses/add"]}>
+        <App />
+        </MemoryRouter>
+    );
+
+    expect(screen.getByTestId("titleInput")).toBeInTheDocument();
+  });
+});