epam-ai-conductor 0.1.0

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

@@ -0,0 +1,313 @@
+---
+sidebar_position: 2
+sidebar_label: "COMPONENTS"
+title: Components description for Tasks 2
+---
+
+## App component
+
+### Add the router to the App component.
+
+All movements on the pages of the application can be carried out through the [react-router-dom](https://reactrouter.com/en/main/start/tutorial).  
+Router should be described in `App.jsx`.  
+[Adding routes](/docs/module-2/react-router#adding-routes).
+
+---
+
+## Registration (new component)
+
+![](images/registration.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2932-219&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `Registration` component.
+
+- This component should contain the following elements:
+  - `name` field;
+
+  - `email` field;
+
+  - `password` field;
+
+  - `Registration` button;
+
+  - link that navigates to `Login` component.
+
+- This component should be rendered by the route `/registration`.  
+  `Registration` component should have functionality to send request to API for creating a new user.  
+  See `/register` endpoint in API Swagger.
+
+- After successful registration, user is redirected to the `Login` page by route `/login`.
+
+:::tip
+For redirection you can use [`Link`](https://reactrouter.com/en/main/components/link) or
+[`useNavigate`](https://reactrouter.com/en/main/hooks/use-navigate) hook.
+:::
+
+- Use `form` tag.
+
+- You should reuse `Input` and `Button` components.
+
+- Request should be sent by `submit` event. Use `onSubmit` props for `form`.
+
+- Validation should be added (all fields are required, empty values are not allowed). When the user submits the form and fields are not valid, validation errors should be displayed.
+
+![](images/registration_validation.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2932-257&t=2XuYekWUy7fL4Ba9-0)
+
+### Example of POST request using `fetch`:
+
+```js
+const newUser = {
+  name,
+  password,
+  email,
+};
+
+const response = await fetch("http://localhost:4000/register", {
+  method: "POST",
+  body: JSON.stringify(newUser),
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+const result = await response.json();
+```
+
+:::warning
+There is an email validation on the back end side. In case of incorrect email format you will get an error.  
+![](images/mail-error.jpg)
+:::
+
+---
+
+## Login (new component)
+
+![](images/login.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2927-216&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `Login` component.
+
+- This component should contain the following elements:
+  - `email` field;
+
+  - `password` field;
+
+  - `Login` button;
+
+  - Link to `Registration` component (use `Link` from `react-router-dom`).
+
+- `Login` should be rendered by route `/login`;
+
+- `Login` should have functionality that
+  sends request to API for getting token.  
+  See `/login` endpoint in API Swagger.
+
+- Use `form` tag.
+
+- You should use `Input` and `Button` components.
+
+- Request should be sent by `submit` event. Use `onSubmit` props for `form`.
+
+- Validation should be added (all fields are required, empty values are not allowed). When the user submits the form and fields are not valid, validation errors should be displayed.
+
+![](images/login_validation.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2932-191&t=2XuYekWUy7fL4Ba9-0)
+
+- Response contains value `result`, it's user's token. You should save it to the `localStorage`.
+
+- After successful login, user is redirected to the `Courses` page by route `/courses`.
+
+---
+
+## Course info
+
+### Implement a new feature for `CourseInfo` component:
+
+- This component should be rendered by route `/courses/:courseId`.
+
+- Find a course in courses list by an id using `courseId` path-param.
+
+- Use `react-router-dom` [hook](https://reactrouter.com/en/main/hooks/use-params) `useParams` to get courseId from url.
+
+- `Back` button should navigate to `/courses` and then the `Courses` component appears.  
+  Use [Link](https://reactrouter.com/en/main/components/link) from `react-router-dom`.
+
+---
+
+## Courses
+
+### Implement new features for `Courses` component:
+
+- Component `Courses` should be opened by route `/courses`;
+
+- If there is a token in the `localStorage`, then App navigates to the `/courses` by default.
+
+- **You don't have to get courses and authors lists from backend.** Please continue using mock data. We will use API for these data in the next module.
+
+- Use [Link](https://reactrouter.com/en/main/components/link) from `react-router-dom` for `Add New Course` button.
+
+- When user clicks the `Add New Course` button the App navigates to `/courses/add`.
+
+---
+
+## Add new course
+
+![](images/empty_create_courses_form.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2907-67422&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `Input` component.
+
+**Input component** should contain `input` and `label` tags.
+
+:::note
+Using a `label` tag for `input` is considered good practice.
+[Usage and benefits of label tag.](https://www.w3schools.com/tags/tag_label.asp)
+:::
+
+:::tip
+You will use `Input component` in several places through your app,
+so you should use `props` for this component such as `labelText`, `placeholderText` and `onChange`
+(and any props, that you want).
+:::
+
+### Create `AuthorItem` component.
+
+![](images/author_item.jpg)  
+This component should be rendered in the `CreateCourse` component.
+
+`AuthorItem` component should contain the following elements:
+
+- Author's name;
+
+- `Button` component (functionality is described below);
+
+### Create `CreateCourse` component.
+
+This component should be rendered by route `courses/add`.
+
+`CreateCourse` component should contain the following elements:
+
+- **Title** (input) - field for input course name. Text length should be at least 2 characters;
+
+- **Description** (textarea) - text length should be at least 2 characters;
+
+- **Authors** - contains a list of all authors and their corresponding `Add author` buttons  
+  (use loop and `AuthorItem` component);
+
+- **Course authors** - contains a list of authors course and their corresponding `Delete author` buttons  
+  (use loop and `AuthorItem` component);
+
+- **Delete author** - when user clicks on this button the corresponding author disappears from the
+  **Course authors** list and shows in **Authors**;
+
+- **Add author** - when user clicks on this button the corresponding author disappears from the
+  **Authors** list and shows in **Course authors**. New author should be added to the initial author's list;
+
+- **Author field** (input) - author name length should be at least 2 characters;
+
+- **Create author** (button) - when user clicks on this button:
+  - the new author appears in **Authors**;
+  - the author's id is generated automatically;
+  - clean input.
+
+- **Duration** - this part provides logic for adding course duration time.
+  - the duration of the course is entered in minutes;
+  - for the correct display of the course duration,
+    you need to format minutes into hours and minutes;
+  - duration should be more than 0 minutes;
+  - user should have an ability to enter ONLY numbers into the field.
+
+- **Create course** (button) - when user clicks on this button:
+  - User is navigated to the route`/courses`;
+  - New course is added to the courses list.
+
+:::caution
+`Create course` button should always be available.
+:::
+
+:::danger
+ALL FIELDS ARE REQUIRED. Validation should be added.
+:::
+
+In case, when the user clicks on the `Create course` button, and some
+field is not filled in, then validation error messages should be displayed.
+
+![](images/add_new_course_validation.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=6131-439&t=2XuYekWUy7fL4Ba9-0)
+
+:::tip
+Look at [One more example for controlled inputs (from Home Task)](/docs/module-1/forms#-one-more-example-for-controlled-inputs-from-home-task)
+:::
+
+### Course model
+
+```js
+// Course
+{
+  id: string;
+  title: string;
+  description: string;
+  creationDate: string;
+  duration: number;
+  authors: [authorId];
+}
+```
+
+### Author model
+
+```js
+// Author
+{
+  id: string;
+  name: string;
+}
+```
+
+- Component `CreateCourse` should be opened by router `/courses/add`.
+
+- When user clicks on `Create course` button, App navigates to `/courses`  
+  (the new course should be in the course list in `Courses` component).
+
+### To sum up
+
+Now that you have created the `CreateCourse` component you see that it is quite large
+and a new person will find it difficult to understand.
+
+**The `CreateCourse` component is an ideal place to practice [composition](/docs/module-1/components-and-props#extracting-components).**
+
+:::info
+Field **id** for course and for the author should be generated automatically.
+
+To do this, you can use the [UUID library](https://www.npmjs.com/package/uuid)
+or any way you like.
+:::
+
+:::info
+Field **creationDate** created automatically base on the current date.
+Date format: dd/mm/yyyy (see examples in mockedCoursesList).
+:::
+
+:::tip
+Study [this documentation](https://react.dev/reference/react-dom/components#common) to do **conditional rendering** for `CreateCourse` component. (Suggested syntax is (logical && operator)[https://react.dev/reference/react-dom/components#common], easy to read and use.)
+:::
+
+---
+
+## Header
+
+### Implement a new feature for `Header` component:
+
+- Show user's name if he is logged in.
+
+- When user clicks on `Logout` button, App should navigate to `/login`  
+  and you should remove `token` from the localStorage.
+
+- `Logout` button and user's name should not be on Login and Registration pages.
+
+---
+
+:::tip
+You can use hook [`useLocation`](https://reactrouter.com/en/main/hooks/use-location) to determine the current pages.
+:::
+

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

@@ -0,0 +1,35 @@
+---
+sidebar_position: 3
+sidebar_label: 'GOOD PRACTICES'
+title: GOOD PRACTICES
+---
+
+# GOOD PRACTICES THAT YOU CAN APPLY FOR THIS TASK:
+1. It's a good practice to check response status to provide default behavior for failed requests.
+
+Example:
+```jsx
+   function SignUpButton(props) {
+    const [hasError, setError] = React.useState(false);
+    const handleClick = async () => {
+        try {
+            await api.signUp();
+        } catch(error) {
+            errorService.log(error)
+            setError(true);
+        }
+    }
+    if (hasError) {
+        return <p>Sorry, Sign up failed!</p>;
+    }
+    return <button onClick={handleClick}>Sign up</button>;
+}
+```
+
+2. Show duration time in a format [hh:mm] hour(s)
+
+In this exercise, think about the helper methods you already created!
+
+3. Naming convention
+
+Check your variables, state names! Pay attention to (naming conventions)[https://dev.to/michi/tips-on-naming-boolean-variables-cleaner-code-35ig].

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

@@ -0,0 +1,210 @@
+---
+sidebar_position: 1
+sidebar_label: 'TASK'
+title: 'Module 2. Router'
+---
+This is the second part of the application.  
+In this assignment,
+you should continue to work with your project with a slight modification.  
+This module is designed to teach how to work with routing in React.
+
+
+## Prerequisite:
+
+First, clone and run repo with a server:
+
+1. Clone repo with a server [(link)](https://autocode.git.epam.com/ld-autocode-js-programs/react-fundamentals/react-fundamentals-app-api).
+
+2. Go to server project folder, install dependencies and run server:
+```http request
+npm install
+
+npm run start
+```
+3. Now you have a backend for your application.
+
+   Go to the url: [http://localhost:4000/api](http://localhost:4000/api)
+
+   You should see a page with all APIs:
+   ![](images/SWAGGER.jpg)
+
+:::caution
+These are the implemented APIs for the app, BUT **you should only use the ones that are specified in the task**.
+:::
+___
+
+Secondly, you need to install the `react-router-dom` module in your project using npm:
+
+1. Go to your project directory.
+
+2. Create a new branch for Module 2 task.
+
+3. Install `react-router-dom`.
+```http request
+npm install react-router-dom --save
+```
+
+3. Run your project
+```http request
+npm run start
+```
+
+## Project structure requirements
+
+1. Create new folders and `jsx` files for each component:
+   ```
+   src
+   |-- components
+   |   |-- CreateCourse
+   |   |   |__ components
+   |   |      |-- AuthorItem
+   |   |         |__ AuthorItem.jsx/.tsx
+   |   |   |__ CreateCourse.jsx/.tsx
+   |   |
+   |   |-- Login
+   |   |    |__ Login.jsx/.tsx
+   |   |
+   |   |-- Registration
+   |   |   |__ Registration.jsx/.tsx
+   |   |
+   |   |__ ...
+   |__ ...
+   ```
+
+
+2. For sending requests to API you should use [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) or
+   [axios](https://www.npmjs.com/package/axios).
+
+
+3. APIs from SWAGGER for Module 2:
+- `/login` [POST]
+- `/register` [POST]
+
+___
+## Criteria (35 points max)
+
+### Common
+
+* [3 points] - Use `react-router-dom` hooks: [`useParams`](https://reactrouter.com/en/main/hooks/use-params), [`useNavigate`](https://reactrouter.com/en/main/hooks/use-navigate) etc.
+
+* [5 points] - Add data type checking for props to all components using
+  [PropTypes](https://react.dev/reference/react/Component#static-proptypes) or [TypeScript](https://create-react-app.dev/docs/adding-typescript/).   
+  **If you already use TypeScript, please ignore this requirement.**
+
+### [Registration Component](/docs/module-2/home-task/components#registration-new-component)
+* [2 points] - Create component **Registration** with.
+
+* [1 point] - Registration form should appear after clicking on the *Registration* [link](https://reactrouter.com/en/main/components/link)
+  on the `Login` form.
+
+
+* [1 point] - Registration form should appear by route `/registration`.
+
+
+* [1 points] - Registration should have an auth functionality.  
+  User enters email, name and password, presses the `Registration` button then application sends request to API.  
+  See `/register` endpoint in API Swagger.  
+  After successful registration application
+  [navigates](https://reactrouter.com/en/main/components/navigate)
+  you to `Login` page.
+
+
+* [1 point] - Validation required for all fields.
+
+
+### [Login Component](/docs/module-2/home-task/components#login-new-component)
+* [2 points] - Create component **Login**.
+
+
+* [1 point] - Login should be shown after [first open application](/docs/module-2/react-router#redirect) by route `/login`.
+
+
+* [1 point] - Login form should appear after clicking on the [link](https://reactrouter.com/en/main/components/link) *Login* on the `Registration` form.
+
+
+* [1 points] - Login should have an auth functionality.  
+  When you entered an email and password application sends request to API.  
+  See `/login` endpoint in API Swagger.  
+  After successful login application navigates to `Courses` page.
+
+
+* [2 points] - Save token from API after login.  
+  Add functionality that check if token in `localStorage`.
+  If token is in the `localStorage` app automatically
+  navigates to `/courses` route.
+
+
+* [1 point] - Validation required for all fields.
+
+
+### [CourseInfo Component](/docs/module-2/home-task/components#course-info)
+
+
+*  [2 points] - Show information about the course. Use route `/courses/:courseId`
+   (`courseId` - id of the current course).
+
+   
+* [2 points] - To find out which course info you should render on `CourseInfo` page,  
+  you should use
+  id of the course from [path-parameters](https://reactrouter.com/en/main/hooks/use-params).
+
+* [2 points] - `Back` button should navigate to the route `/courses`.
+
+
+### [Courses Component](/docs/module-2/home-task/components#courses)
+
+* [2 points] - Component **Courses** should be opened by route `/courses`.
+
+* [2 points] - Show `Courses` component by default if there is token in the `localStorage`.
+
+* [2 points] - Navigate to the route `courses/add` by clicking `Add New Course` button.
+
+### [CreateCourse Component](/docs/module-2/home-task/components#add-new-course)
+
+* [1 point] - Possibility to add a title.
+
+
+* [1 point] - Possibility to add a description.
+
+
+* [1 point] - Possibility to add a duration.
+
+
+* [2 points] - Show duration time in a format «hh:mm».  
+  Example: **122 min** should be showed as **02:02 hours**.
+
+
+* [1 point] - Add logic for creating a new author.
+
+
+* [1 point] - Add logic for adding an author to **Course authors**.
+
+
+* [1 point] - Add logic for deleting an author from **Course authors**.
+
+
+* [3 points] - Add logic for saving course (new course should be presented in the courses list).
+
+
+* [1 points] - Add validation for required fields.
+
+
+* [2 point] - Open **CreateCourse** component by route `/courses/add`.
+
+
+### [Header Component](/docs/module-2/home-task/components#header)
+* [2 point] - Add logout functionality.  
+  When user clicks `Logout` button in the `Header` component, token should be
+  removed from `localStorage` and user is navigated to `Login` page.
+
+* [2 point] - Get user's name from  the `Login` response and display it in the header.
+
+* [2 point] - Remove user's name for the `Login` and `Registration` pages.
+
+* [2 point] - Remove `Logout` button for the `Login` and `Registration` pages.
+
+
+:::info
+Please find detailed description of components and functionality in the [COMPONENTS](components) section.
+:::
+

package/dist/content/content/module-2/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-2/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",
+    });
+  });
+});