epam-ai-conductor 0.1.0

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

@@ -0,0 +1,139 @@
+---
+sidebar_position: 1
+sidebar_label: 'TASK'
+title: 'Module 4. Async Redux'
+---
+This is the fourth part of the application.  
+In this assignment,
+you should continue to work on your project with a slight modification.  
+This module designed to teach how to work with asynchronously Redux.
+
+## Prerequisite:
+
+:::info
+You don't need to install `redux-thunk` because by default `@reduxjs/toolkit` includes it.
+:::
+
+## Project structure requirements
+
+
+1. Create a new folder and `jsx / tsx` file for new components:
+  * src / components / PrivateRoute / **PrivateRoute.jsx/.tsx**
+
+
+2. Rename `CreateCourse` folder and file:
+  * src / components / CreateCourse / CreateCourse.jsx/.tsx => CourseForm / **CourseForm.jsx/.tsx**
+
+
+3. Create new `js/ts` files for thunk functions:
+```
+  src
+   |-- store
+   |   |
+   |   |-- user
+   |   |   |-- thunk.js/.ts //new file
+   |   |   |
+   |   |   |__ //old files
+   |   |
+   |   |-- courses
+   |   |   |-- thunk.js/.ts //new file
+   |   |   |
+   |   |   |__ // old files
+   |   |
+   |   |__ authors
+   |       |-- thunk.js/.ts //new file
+   |       |
+   |       |__ //old files
+   |   
+   |__ ...
+```   
+
+
+4. Admin credentials. These credentials provide role **ADMIN**.
+```javascript
+email: admin@email.com
+password: admin123
+```
+
+5. APIs from SWAGGER for Module 4:
+- `/courses/add` [POST] (use ADMIN credentials)
+- `/courses/{id}` [PUT] (use ADMIN credentials)
+- `/authors/add` [POST] (use ADMIN credentials)
+- `/courses/{id}` [DELETE] (use ADMIN credentials)
+- `/logout` [DELETE]
+- `/users/me` [GET]
+
+:::info
+For fetching requests you should add `Authorization` header with user's token  
+`Authorization: token`
+:::
+
+## Criteria (30 points max)
+
+### APIs
+
+* [8 points] - Use **Thunk** for asynchronous actions. Rewrite old GET requests `/courses/all` and `/authors/all`.
+
+
+* [2 points] - Create request to get current user if localStorage contains token. (See `/users/me [GET]` in the SWAGGER).
+
+### PrivateRoute Component
+* [2 points] - Create new component `PrivateRoute`.  
+  Use [`PrivateRoute`](/docs/module-4/home-task/components#private-route-new-component) for routes:
+  - `/courses/add`;
+  - `/courses/update/:courseId`.
+
+
+### Header
+* [2 points] - Modify **Logout** functionality. Call endpoint for loggout on a back-end. (See `/logout` in the SWAGGER)  
+
+### CourseCard Component
+* [1 point] - Show buttons `Delete course` and `Update course` when role - ADMIN.
+
+
+* [2 points] - Sent delete request to the back-end. (See `/courses/{id}` in the SWAGGER).
+
+
+* [1 point] - Delete the course from the **store** after success API response.  
+  *(**Course card with ADMIN role** in COMPONENTS.pdf)*.
+
+
+### CourseForm Component (create mode)
+
+* [1 point] - Show `/courses/add` route only for user with **ADMIN** role.
+
+
+* [2 points] - Send new course to the back-end. (See `/courses/add` in the SWAGGER).
+
+
+* [2 points] - Send new author to the back-end. (See `/authors/add` in the SWAGGER).
+
+
+* [1 point] - Save new course to the **store** after success response.  
+  *(**Add new course** in COMPONENTS)*.
+
+### CourseForm Component (update mode)
+* [1 point] - `Update Course` form should be opened by route `/courses/update/:courseId`.
+
+
+* [1 point] - Show route only for user with **ADMIN** role.
+
+
+* [1 point] - Show information about course in fields with the same name.
+
+
+* [2 points] - Send updated course to the back-end. (See [PUT] `/courses/{id}` in the SWAGGER).
+
+
+* [1 point] - Save updated course to the **store** after success response.  
+  *(**Update course** in COMPONENTS)*.
+
+
+### [EmptyCourseList Component](/docs/module-4/home-task/components#emptycourselist-component)
+
+* [4 point] - Navigate to `/courses/add` FOR ADMIN USER or show special message for REGULAR USER by clicking `Add New Course` button.
+
+
+:::info
+Please find detailed description of components and functionality in the [COMPONENTS](components) section.
+:::

package/dist/content/content/module-4/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();
+  });
+});

package/dist/content/content/module-4/tests/Courses.test.tsx

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Courses } from "../components/Courses/Courses";
+
+describe('Courses component', () => {
+  const mockedCoursesList = [
+    {
+      id: "1",
+      title: "Course 1",
+      description: "Course 1 description",
+      creationDate: "2022-01-01",
+      duration: 60,
+      authors: [
+        "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+        "f762978b-61eb-4096-812b-ebde22838167",
+      ],
+    },
+    {
+      id: "2",
+      title: "Course 2",
+      description: "Course 2 description",
+      creationDate: "2022-02-01",
+      duration: 90,
+      authors: ["df32994e-b23d-497c-9e4d-84e4dc02882f"],
+    },
+  ];
+  const onAddClick = jest.fn();
+
+  test("Should render list of courses", () => {
+    render(<Courses courseList={mockedCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const courseElements = screen.getAllByTestId("courseCard");
+
+    expect(courseElements[0]).toBeInTheDocument();
+    expect(courseElements).toHaveLength(2);
+  });
+
+  test("Should render 'Add new course' button", () => {
+    render(<Courses courseList={mockedCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const button = screen.getByText(/Add new course/);
+
+    expect(button).toBeInTheDocument();
+  });
+
+  test("Should render EmptyCourseList component if no courses", () => {
+    const mockedEmptyCoursesList: [] = [];
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const emptyContainerElement = screen.getByTestId("emptyContainer");
+    const addButtonElement = screen.getByTestId("addCourse");
+
+    expect(emptyContainerElement).toBeInTheDocument();
+    expect(addButtonElement).toBeInTheDocument();
+  });
+})
+
+describe('EmptyCourseList', () => {
+  const mockedEmptyCoursesList: [] = [];
+  const onAddClick = jest.fn();
+
+  test("Should render title", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const title = screen.getByText(/Your List Is Empty/);
+
+    expect(title).toBeInTheDocument();
+  });
+
+  test("Should render subtitle", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const subTitle = screen.getByText(/Please use/);
+
+    expect(subTitle).toBeInTheDocument();
+  });
+
+  test("Should render button", () => {
+    render(<Courses courseList={mockedEmptyCoursesList} onAddClick={onAddClick} setSelectedCourseId={(id) => {}}/>);
+
+    const button = screen.getByText('ADD NEW COURSE');
+
+    expect(button).toBeInTheDocument();
+  });
+})
+
+

package/dist/content/content/module-4/tests/CreateCourse.test.tsx

@@ -0,0 +1,122 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { CreateCourse } from "../components/CreateCourse/CreateCourse";
+
+describe("CreateCourse", () => {
+  const mockAuthors = [
+    { id: "1", name: "Author 1" },
+    { id: "2", name: "Author 2" },
+  ];
+
+  const mockCreateCourse = jest.fn();
+  const mockCreateAuthor = jest.fn();
+
+  beforeEach(() => {
+    mockCreateCourse.mockClear();
+    mockCreateAuthor.mockClear();
+  });
+
+  it("should create a new course with the entered data", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const titleInput = screen.getByTestId("titleInput");
+    const durationInput = screen.getByTestId("durationInput");
+    const descriptionTextArea = screen.getByTestId("descriptionTextArea");
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    // Enter the course title
+    fireEvent.change(titleInput, { target: { value: "Course Title" } });
+    fireEvent.change(durationInput, { target: { value: "20" } });
+
+    // Enter the course description
+    fireEvent.change(descriptionTextArea, {
+      target: { value: "Course Description" },
+    });
+
+    // Click the create course button
+    fireEvent.click(createCourseButton);
+
+    // Assert that createCourse is called with the correct data
+    expect(mockCreateCourse).toHaveBeenCalledWith({
+      id: expect.any(String),
+      title: "Course Title",
+      description: "Course Description",
+      creationDate: "",
+      duration: 20,
+      authors: [],
+    });
+  });
+
+  it("should not create a new course with the empty data", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const createCourseButton = screen.getByTestId("createCourseButton");
+
+    // Click the create course button
+    fireEvent.click(createCourseButton);
+
+    // Assert that createCourse is called with the correct data
+    expect(mockCreateCourse).not.toHaveBeenCalled();
+  });
+
+  it("should add an author to the course when CreateAuthor component creates a new author", () => {
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const createAuthorButton = screen.getByTestId("createAuthorButton");
+    const nameInput = screen.getByTestId(
+      "createAuthorInput"
+    ) as HTMLInputElement;
+
+    fireEvent.change(nameInput, { target: { value: "John" } });
+
+    fireEvent.click(createAuthorButton);
+
+    expect(mockCreateAuthor).toHaveBeenCalled();
+  });
+
+  it("should display the course authors in the course", () => {
+    const mockCourseAuthors = ["1", "2"];
+    render(
+      <CreateCourse
+        authorsList={mockAuthors}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+
+    const courseAuthorItems = screen.getAllByTestId("authorItem");
+    expect(courseAuthorItems.length).toBe(mockCourseAuthors.length);
+  });
+  it("should display the empty authors list message when there are no authors", () => {
+    render(
+      <CreateCourse
+        authorsList={[]}
+        createCourse={mockCreateCourse}
+        createAuthor={mockCreateAuthor}
+      />
+    );
+    const emptyText = screen.getByTestId("emptyText");
+
+    // Assert that the empty text is displayed
+    expect(emptyText).toBeInTheDocument();
+    expect(emptyText.textContent).toBe("Authors list is empty");
+  });
+});

package/dist/content/content/module-4/tests/Login.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { Login } from "../components/Login";
+import * as services from "../../../services";
+
+beforeEach(() => {
+  jest.spyOn(services, "login").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        result: "token",
+        user: {
+          name: "John Doe",
+        },
+      })
+    ) as jest.Mock
+  );
+
+  jest.spyOn(global, "fetch").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () =>
+          Promise.resolve({
+            result: "token",
+            user: {
+              name: "John Doe",
+            },
+          }),
+      })
+    ) as jest.Mock
+  );
+});
+
+describe("Login", () => {
+  test("renders login form", () => {
+    render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText("email")).toBeInTheDocument();
+    expect(screen.getByLabelText("password")).toBeInTheDocument();
+    expect(screen.getByText("Login")).toBeInTheDocument();
+    expect(
+      screen.getByText(/If you don't have an account you can/)
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link")).toBeInTheDocument();
+  });
+
+  test("submits login form", async () => {
+    render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.getByLabelText("email"), {
+      target: { value: "test@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("password"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByText("login"));
+
+    expect(services.login).toHaveBeenCalledWith({
+      email: "test@example.com",
+      password: "password123",
+    });
+  });
+});

package/dist/content/content/module-4/theory/module-4_async-redux.md

@@ -0,0 +1,99 @@
+---
+sidebar_position: 1
+sidebar_label: "Async Redux"
+title: "Async Redux"
+---
+
+In previous module we have talked about Redux and its possibilities for better moduling your application. Our code
+looks much better, but here comes another problem: if you want to fetch some data from api - you need to make async
+call to continue app executions - and when data is received, dispatch some action.
+
+**In this tutorial we will discuss
+how to include async login into Redux app.**
+
+## Intro into Middleware
+
+Earlier we said, that reducer has not to have side effect, but what if we do? That's why middleware was created.
+Middleware is also a function, like a bridge between call of dispatch action and reducer. In middleware, we can log
+something, delay the action call. <br/>
+We can also interact with redux, making async calls. Furthermore, since middleware is
+not reducer, we can pass to it functions to make available async flow.
+
+## Creating middleware function
+
+To begin, lets first create middleware in our store.
+
+```javascript
+const asyncFunctionMiddleware = (storeAPI) => (next) => (action) => {
+  // If the "action" is actually a function instead...
+  if (typeof action === "function") {
+    // then call the function and pass `dispatch` and `getState` as arguments
+    return action(storeAPI.dispatch, storeAPI.getState);
+  }
+
+  // Otherwise, it's a normal action - send it onwards
+  return next(action);
+};
+```
+
+The function above describes the purpose of middleware function. It checks first if passed argument is a function, when
+it's true, call the function.  
+Now, to enable async flow:
+
+```javascript
+import { applyMiddleware } from "redux";
+const middlewareEnhancer = applyMiddleware(asyncFunctionMiddleware);
+const store = createStore(rootReducer, middlewareEnhancer);
+```
+
+:::info
+This "Async function middleware" let us pass a function to dispatch.  
+Inside that function, we are able to write some async logic (an HTTP request).
+:::
+
+## Example of usage
+
+In next step we will create method, that will make api request and when response will come - we dispatch action to store.  
+Imagine, that we are working with library ![bookshelf](./images/bookshelf.png) system and want to display on page all
+available books for users.
+
+To code this, add a function:
+
+```javascript
+const fetchBooks = async (dispatch, getState) => {
+  const books = await api.get("books");
+  console.log(books);
+  dispatch({ type: "addBooks", payload: { books: books } });
+};
+
+store.dispatch(fetchBooks);
+```
+
+You can see, that our function `fetchBooks` takes arguments `dispatch` and `getState` - this is where middleware comes.
+In client code, we only call `store.dispatch(fetchBooks)` and middleware forward to this method automatically. Simple and
+clean, right?
+
+The whole process looks like this:
+![](./images/reduxasyncdataflowdiagram-d97ff38a0f4da0f327163170ccc13e80.gif)
+Look closer at gif, that describes in details Redux async flow using special library `thunk`. We will discuss it in next
+section (shortly speaking it's a Redux middleware).
+
+:::info
+You can write your application code without middleware, its just syntax sugar. Middleware allows you to do some side effects.
+:::
+
+## Summary
+
+So, to repeat all steps:
+
+- store dispatch an action, for example when user clicked on button;
+- middleware looks for a function, that we have passed into dispatch;
+- in function, we can do some async call, to get data from api;
+- when we get all needed data, we call dispatch action, that will update the store with new data.
+
+---
+
+## Materials
+
+1. [Redux async logic](https://redux.js.org/tutorials/fundamentals/part-6-async-logic)
+2. [Redux Tutorial - Learn Redux from Scratch (Video)](https://www.youtube.com/watch?v=poQXNp9ItL4&t=3450s)

package/dist/content/content/module-4/theory/module-4_private-routes.md

@@ -0,0 +1,55 @@
+---
+sidebar_position: 3
+sidebar_label: "Create Private Routes"
+title: "Private Routes"
+---
+
+## Why Using Private Routes?
+
+Sometimes you need to hide some routes from users depending on the conditions.
+These can be **private routes** that are only available to admins or pages that can only be viewed
+by authorized users.  
+The best approach to solving such a problem is to build a component that will have the appropriate logic.
+
+Why use a separate component for this?
+Why not just add the appropriate condition for each route?  
+It's simple: **readability** and **composition**.  
+The presence of such a component will make the routing code **more understandable**,
+and such a component is very convenient to **reuse**.
+
+## Example of PrivateRoute Component
+
+```jsx
+// PrivateRoute.jsx
+
+function PrivateRoute({ children }) {
+  const auth = getUserRole(); // add logic to determine the value for the condition
+
+  return auth ? children : <Navigate to="/login" />;
+}
+
+// App.jsx
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={[your public component]} />
+        <Route
+          path="/private"
+          element={
+            <PrivateRoute>
+              [your private component]
+            </PrivateRoute>
+          }
+        />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+It's look like very easy way to manage your routes, isn't it? &#128512;
+
+## Materials
+
+1. [Private Route in react-router v6](https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5)

package/dist/content/content/module-5/task/module-5_home-task_instruction.md

@@ -0,0 +1,68 @@
+---
+sidebar_position: 2
+sidebar_label: 'INSTRUCTIONS'
+title: Instructions
+---
+# Instruction for test writing
+**You should never use real data from the server for testing. Use only mocked data.**  
+## Reducer testing
+*A reducer is a function that takes state and action and returns a new state,
+so you can test it like general function.*
+
+
+- Go to the [link](https://redux.js.org/usage/writing-tests). Find the direct example for test `should return the initial state`.
+
+:::note
+You don't need to install `Babel`
+:::
+
+- Use this example for writing your tests.
+---
+
+## Components testing
+To test the React component you need to render this component in the test.  
+Use [link](https://testing-library.com/docs/react-testing-library/example-intro) to see example of rendering.  
+If you use store data in testing component you need to cover component in the `Provider` and pass the `mocked store`.
+
+*Example of mockedStore:*
+```js
+const mockedState = {
+  user: {
+    isAuth: true,
+    name: 'Test Name',
+  },
+  courses: [],
+  authors: [],
+};
+
+const mockedStore = {
+    getState: () => mockedState,
+    subscribe: jest.fn(),
+    dispatch: jest.fn(),
+};
+```
+
+*Example of using mockedStore in the test:*
+```js
+render(
+  <Provider store={mockedStore}>
+    <Header />
+  </Provider>
+);
+```
+
+Use `.toBeInTheDocument()` to check if something is on the page.
+
+*Example of expectation*:
+```js
+expect(screen.queryByText('Test Name')).toBeInTheDocument();
+```
+
+- Use [this link](https://testing-library.com/docs/vue-testing-library/cheatsheet/#queries) to see different queries.
+
+
+- To simulate events *('click' for buttons and 'change' for input)* you can use [Firing Events](https://testing-library.com/docs/dom-testing-library/api-events).
+
+
+- Read ["How To Mock Fetch in Jest" article](https://www.leighhalliday.com/mock-fetch-jest) to learn how to mock fetch.
+