epam-ai-conductor 0.1.0

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

@@ -0,0 +1,253 @@
+---
+sidebar_position: 1
+sidebar_label: 'TASK'
+title: 'Module 1. React Components'
+---
+
+Hello friend!   
+Let me say a few words what we are going to do with you.
+We will write a small React application that allows users to manage a list of courses 
+with features like creating, deleting, and viewing course information. 
+Additionally, the application will have authorization functionality to ensure
+secure access to the application's features.
+
+The main goal of this task is to create app skeleton - set of
+some simple components for the app.
+
+Please, follow next steps:
+
+## Steps:
+
+1. Generate a new project:
+
+```http request
+npx create-react-app courses-app
+```
+
+:::note
+You can use `git bash` to run the command.
+
+
+`courses-app` is a name of the project. You can give any name you want.
+:::
+
+2. Open you new project via code editor.
+
+
+3. Configure `eslint` and `prettier`.  
+   See instruction in the [ESLINT instruction](eslint).
+
+
+4. Configure `pre-commit hook`.  
+   See instruction in the [PRE COMMIT instruction](pre_commit).
+
+
+5. Run your project.
+```http request
+npm run start
+```
+
+Result in the browser:  
+![](images/initial_react_view.jpg)  
+
+:::tip
+Now it's good time to push your INITIAL COMMIT to the repo and create a new branch for the first module.
+:::
+
+
+## Project structure requirements
+
+1. You should use **function** components for your app.
+
+
+2. Rename `App.js` to `App.jsx` / `App.tsx`. `App` - main app file.
+
+
+3. Delete unnecessary files:
+- `src/App.test.js`
+- `src/logo.svg`
+- `src/reportWebVitals.js`
+- all files in the `public` folder EXCEPT `public/index.html` and `manifest.json`
+
+4. Delete default code in files:
+
+- `scr/App`
+- `src/App.css`
+
+You can do like this:
+```js
+function App() {
+	return <div>React</div>;
+}
+
+export default App;
+```
+
+Delete unnecessary import and function call in the `index.js` file 
+```js
+import reportWebVitals from './reportWebVitals';
+...
+reportWebVitals();
+```
+
+Result in the browser:
+![](images/initial_view_localhost.jpg)
+
+:::tip
+If you use `App.tsx` you need to fix its import in the `index.js` file
+```js
+import App from './App.tsx';
+```
+:::
+
+5. Create folders and files for each component. Follow the architecture below:
+
+```
+src
+  |-- common
+  |   |--Button
+  |   |  |__ Button.jsx/.tsx
+  |   |  
+  |   |__Input
+  |   |   |__ Input.jsx/.tsx   
+  |   |   |
+  |   |__ //any common components you want to add
+  |
+  |-- components
+  |   |-- CourseInfo
+  |   |   |__ CourseInfo.jsx/.tsx
+  |   |   
+  |   |-- Courses
+  |   |   |__ components
+  |   |      |__ CourseCard
+  |   |         |__ CourseCard.jsx/.tsx
+  |   |      |__ SearchBar (extra task)
+  |   |      |  |__ SearchBar.jsx/.tsx
+  |   |   |__ Courses.jsx/.tsx
+  |   |
+  |   |__ // any components you want to add 
+  |   |
+  |   |-- EmptyCourseList
+  |   |    |__ EmptyCourseList.jsx/.tsx
+  |   |
+  |   |-- Header
+  |   |    |__ Header.jsx/.tsx
+  |   |    |__ components
+  |   |        |__ Logo
+  |   |            |__ Logo.jsx/.tsx
+  |
+  |-- helpers
+  |    |
+  |    |--getCourseDuration.js/.ts // a helper to format course duration   
+  |    |
+  |    |--formatCreationDate.js/.ts // to format date that we will receive from server  
+  |    |
+  |    |__ // any helpers you want to add
+  |
+  |-- constants.js/.ts // file with mocked data
+  |
+  |-- App.jsx/.tsx
+  |-- App.css
+  |-- index.js
+  |_ ...
+                  
+```
+
+:::caution
+The presented architecture is required for use, BUT you can add files and folders at your discretion.
+::: 
+
+7. You can use any way to add styles to components (styled components, Bootstrap, CSS modules etc). Also, you can use preprocessors like SASS [instruction.](https://create-react-app.dev/docs/adding-a-sass-stylesheet/) 
+
+:::tip
+It's recommended to keep each component's style file in their appropriate folders.
+:::
+
+8. You can choose the design at your discretion.  
+   **It is important to keep the layout** (the arrangement of elements on the page).
+
+
+![](images/initial_view.jpg)  
+**App initial view**  
+
+## Final preparations:
+1. Support browsers: Google Chrome.
+2. Type checking: you can use TypeScript (it's not required but recommended).
+
+Please, read requirements for the first task. To find the full description of each criteria please go to 
+the [COMPONENTS page.](components)
+
+## Criteria (30 points max)
+
+### Common
+
+* [1 point] - The architecture of the application **should be** the same as presented above.
+
+
+* [1 point] - Components are presented as [**function components**](https://react.dev/reference/react/Component) (not class components).
+
+
+* [1 point] - Use `.jsx` extensions for files with [`jsx` syntax](https://react.dev/learn/writing-markup-with-jsx).
+
+
+* [1 point] - All inputs and buttons should be reusable components.
+
+
+* [2 points] - `eslint`, `prettier` and `pre-commit hook` work correctly.
+
+### [Header component](/docs/module-1/home-task/components#header)
+* [3 points] - Should display `Header` component with:
+  * `Logo` (any appropriate image)
+  * `Logout` button (without functionality)
+
+### [CourseCard component](/docs/module-1/home-task/components#create-coursecard-component)
+* [5 points] - Should display `CourseCard` component with:
+  * course title;
+  * course description;
+  * authors list;
+  * course duration;
+  * creation date;
+  * `Show course` button.
+
+* [2 point] Show `CourseInfo` component with current course information by clicking `Show course` button.
+
+### [EmptyCourseList component](/docs/module-1/home-task/components#emptycourselist-component)
+
+* [2 points] - Show `EmptyCourseList` component when no courses.
+
+* [2 point] - Component Should contain:
+  * title 'Your List Is Empty';
+  * subtitle 'Please use "Add New Course" button to add your first course'.
+  * `Add New Course` button (without functionality for current task).
+
+### [Courses component](/docs/module-1/home-task/components#courses)
+* [2 points] - Show list of courses (use [mocked course list](/docs/module-1/home-task/components#mocked-courses-and-authors-data) for this task).
+
+* [1 point] - Show `Add new course` button (without functionality for current task).
+
+
+### [CourseInfo Component](/docs/module-1/home-task/components#course-info)
+
+* [5 points] - Create component that contains: 
+  * course title
+  * course description
+  * course ID
+  * course duration
+  * creation date
+  * course authors
+  * `Back` button
+
+* [2 point] - By clicking `Back` button `CourseInfo` component should be replaced by `Courses` component.
+
+## Extra Task
+### [Searching](/docs/module-1/home-task/components#search-extra-task)
+* Implement searching functionality by title. Reset search result when searchbar is empty.
+
+
+* Implement searching functionality by id. Reset search result when searchbar is empty.
+
+[Full description](/docs/module-1/home-task/components#search-extra-task)
+
+:::info
+Please find a detailed description of components and functionality in the [COMPONENTS](components) section.
+:::

package/dist/content/content/module-1/tests/Button.test.tsx

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent, screen } from "@testing-library/react";
+import { Button } from "../common/Button/Button";
+
+describe('Button component', () => {
+  test("Should render button with provided label", () => {
+    const handleClickMock = jest.fn();
+    render(<Button buttonText='Hello' handleClick={handleClickMock}/>);
+    const buttonElement = screen.getByText("Hello");
+
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  test("Should call provided callback", () => {
+    const handleClickMock = jest.fn();
+    render(<Button handleClick={handleClickMock} buttonText='Click me'/>);
+    const buttonElement = screen.getByText("Click me");
+
+    fireEvent.click(buttonElement);
+    expect(handleClickMock).toHaveBeenCalledTimes(1);
+  });
+})

package/dist/content/content/module-1/tests/CourseCard.test.tsx

@@ -0,0 +1,64 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { CourseCard } from "../components/Courses/components/CourseCard/CourseCard";
+
+describe('CourseCard component', () => {
+  const course = {
+    id: "1",
+    title: "Course Title",
+    description: "Course Description",
+    creationDate: "08/03/2021",
+    duration: 60,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  };
+
+  test("Should contain title", () => {
+    render(<CourseCard course={course} />);
+
+    const titleElement = screen.getByText("Course Title");
+
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  test("Should contain description", () => {
+    render(<CourseCard course={course} />);
+    const descriptionElement = screen.getByText("Course Description");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  test("Should contain duration", () => {
+    render(<CourseCard course={course} />);
+
+    const durationElement = screen.getByText(/01:00 hour/);
+
+    expect(durationElement).toBeInTheDocument();
+  });
+
+  test("Should contain date", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/08.03.2021/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Vasiliy Dobkin, Nicolas Kim/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+
+  test("Should contain authors list", () => {
+    render(<CourseCard course={course} />);
+
+    const creationDateElement = screen.getByText(/Show course/);
+
+    expect(creationDateElement).toBeInTheDocument();
+  });
+})
+

package/dist/content/content/module-1/tests/CourseInfo.test.tsx

@@ -0,0 +1,73 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { CourseInfo } from "../components/CourseInfo/CourseInfo";
+import { formatCreationDate, getCourseDuration } from "../helpers";
+
+const authorsList = [
+  { id: "1", name: "Author 1" },
+  { id: "2", name: "Author 2" },
+  { id: "3", name: "Author 3" },
+  { id: "4", name: "Author 4" },
+];
+
+const course = {
+  id: "1",
+  title: "Course Title",
+  description: "Course Description",
+  authors: ["1", "3"],
+  creationDate: "08/03/2021",
+  duration: 120,
+};
+
+describe("CourseInfo", () => {
+  test("renders title correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const courseTitle = screen.getByRole("heading", { level: 1 });
+
+    expect(courseTitle.textContent).toBe("Course Title");
+  });
+
+  test("renders description correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const courseDescription = screen.getByText("Course Description");
+
+    expect(courseDescription).toBeInTheDocument();
+  });
+
+  test("renders course duration correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const courseDuration = screen.getByText(getCourseDuration(120));
+
+    expect(courseDuration).toBeInTheDocument();
+  });
+
+  test("renders course date correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const courseCreationDate = screen.getByText(
+      formatCreationDate(course.creationDate)
+    );
+    expect(courseCreationDate).toBeInTheDocument();
+  });
+
+  test("renders course authors' names correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const authorNames = screen
+      .getAllByRole("listitem")
+      .map((li) => li.textContent);
+
+    expect(authorNames).toEqual(["Author 1", "Author 3"]);
+  });
+
+  test("renders Back button correctly", () => {
+    render(<CourseInfo course={course} authorsList={authorsList} />);
+
+    const backButton = screen.getByRole("button", { name: "Back" });
+
+    expect(backButton).toBeInTheDocument();
+  });
+});

package/dist/content/content/module-1/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-1/tests/Header.test.tsx

@@ -0,0 +1,23 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { Header } from "../components/Header/Header";
+
+describe('Header component', () => {
+  test("Should render logo", () => {
+    render(<Header />);
+
+    const imageElement = screen.getByRole("img");
+
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  test("Should render logout button", () => {
+    render(<Header />);
+
+    const logoutButtonElement = screen.getByRole("button");
+
+    expect(logoutButtonElement).toBeInTheDocument();
+  });
+})
+
+

package/dist/content/content/module-1/tests/Input.test.tsx

@@ -0,0 +1,36 @@
+import "@testing-library/jest-dom";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { Input } from "../common/Input/Input";
+
+describe('Input component', () => {
+  const placeholderTextMock = 'Enter a value';
+
+  test("should render input with provided label text", () => {
+    render(<Input labelText="Test Input" placeholderText={placeholderTextMock} />);
+
+    const inputElement = screen.getByLabelText("Test Input");
+    expect(inputElement).toBeInTheDocument();
+  });
+
+  test("should render input with provided placeholder text", () => {
+    const { getByPlaceholderText } = render(
+      <Input labelText='Test Input' placeholderText={placeholderTextMock} />
+    );
+
+    expect(getByPlaceholderText(placeholderTextMock)).toBeInTheDocument();
+  });
+
+  test("Should call provided callback for onChange event", () => {
+    const handleChange = jest.fn();
+
+    render(<Input labelText="Test Input" onChange={handleChange} placeholderText={placeholderTextMock}/>);
+
+    const inputElement = screen.getByLabelText("Test Input") as HTMLInputElement;
+    fireEvent.change(inputElement, { target: { value: "Hello" } });
+
+    expect(handleChange).toHaveBeenCalledTimes(1);
+    expect(inputElement.value).toBe("Hello");
+  });
+})
+
+

package/dist/content/content/module-1/tests/helpers.test.ts

@@ -0,0 +1,13 @@
+import { formatCreationDate, getCourseDuration } from '../helpers';
+
+test('formatCreationDate function returns formatted date', () => {
+  const date = '2022/01/01';
+  const formattedDate = formatCreationDate(date);
+  expect(formattedDate).toBe('2022.01.01');
+});
+
+test('getCourseDuration function returns formatted duration', () => {
+  expect(getCourseDuration(60)).toBe('01:00 hour');
+  expect(getCourseDuration(90)).toBe('01:30 hour');
+  expect(getCourseDuration(120)).toBe('02:00 hours');
+});

package/dist/content/content/module-1/theory/module-1_elements-render.md

@@ -0,0 +1,66 @@
+---
+sidebar_position: 4
+sidebar_label: 'Element Render'
+title: 'Element Render'
+---
+
+## What is Element?
+
+**Elements are the smallest building blocks of React apps.**
+
+An element describes what you want to see on the screen:
+
+```jsx
+const element = <h1>Hello, world</h1>;
+```
+
+Unlike browser DOM elements, React elements are plain objects, and are cheap to create.
+React DOM takes care of updating the DOM to match the React elements.
+:::note
+One might confuse elements with a more widely known concept of "components".
+We will introduce components in the [next topic](components-and-props.mdx).
+Elements are what components are "made of".
+:::
+
+## Rendering an Element into the DOM
+Let's say there is a `<div>` somewhere in your HTML file:
+
+```js
+<div id="root"></div>
+```
+
+It's called a **"root" DOM node** because everything inside it will be managed by React DOM.
+
+Applications built with just React usually have a single root DOM node.
+If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
+
+To render a React element into a root DOM node, you need to create a React root and then pass the element to `root.render()`:
+
+```js
+const element = <h1>Hello, world</h1>;
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(element);
+```
+
+It displays "Hello, world" on the page.
+
+## React Only Updates What's Necessary
+React DOM compares the element and its children to the previous one,
+and only applies the DOM updates necessary to bring the DOM to the desired state.
+
+It is possible because React uses [Virtual Dom](https://legacy.reactjs.org/docs/faq-internals.html).
+
+## Virtual DOM
+
+**The virtual DOM (VDOM)** is a way of doing things in programming. It means having an ideal or "virtual" version of a user interface (UI) stored in the computer's memory. This virtual version is then matched up with the "real" DOM using a library like ReactDOM, and this matching process is called reconciliation.
+
+This method makes it possible for React to work in a declarative way: *you tell React how you want the UI to look, and it makes sure the actual DOM matches that look*. This saves you from having to mess with attributes, handle events, or manually update the DOM, which you would have to do if you were building your app differently.
+
+Because "virtual DOM" is more like a way of doing things than a specific technology, people might have different ideas about what it means. In the world of React, we often link the term "virtual DOM" with React elements because they are the objects that show the UI. However, React also uses internal objects called ["fibers"](https://github.com/acdlite/react-fiber-architecture) to keep extra information about the component tree. So, you could think of them as part of how React does its "virtual DOM" work.
+
+
+
+## Materials
+1. [Rendering Elements. Documentation](https://react.dev/learn/writing-markup-with-jsx)