epam-ai-conductor 0.1.0

package/dist/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/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/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/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/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/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)

package/dist/content/module-1/theory/module-1_hooks_useEffect.md

@@ -0,0 +1,178 @@
+---
+sidebar_position: 2
+sidebar_label: 'useEffect'
+title: 'useEffect'
+---
+
+## Why using useEffect hook?
+The Effect Hook lets you perform side effects in function components:
+```jsx
+import { useState, useEffect } from 'react';
+
+const Button = () => {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    // Update the document title using the browser API
+    document.title = `Button was clicked ${count} times`;
+  });
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+`useEffect` accepts two parameters:  
+**The first one** is a callback which runs after render,
+much like in [`componentDidMount`](/docs/module-1/state-and-life-cycle#mounting).  
+**The second** parameter is the effect dependency array. 
+If you want to run it on mount only, pass an empty array `[]`. 
+
+:::note
+In the example above callback in the `useEffect` will be called with each render because the second argument was not passed.
+:::
+
+There are two common kinds of side effects in React components: 
+those that don’t require cleanup, and those that do. 
+Let’s look at this distinction in more detail.
+
+## Effects Without Cleanup
+
+Sometimes, we need to do extra things after React updates the DOM. Things like:
+* network requests, 
+* changing the DOM manually,
+* keeping logs are 
+
+These are examples of effects that **don't need cleaning up**.
+
+### What does useEffect actually do?
+
+When we use this Hook, we're telling React that our component needs to do 
+something after it's been shown. 
+React remembers the function we gave it (let's call it our "effect") 
+and runs it later, right after taking care of the DOM changes.
+
+### Why is useEffect put inside a component?
+
+When we put useEffect inside the component, 
+it allows us to use any props right in the effect. 
+We don't need a special tool to read it; it's already available in the function. 
+Hooks work well with JavaScript closures, avoiding the need for special React-only 
+tools when JavaScript already provides a solution.
+
+### Does useEffect run every time the component shows?
+
+Absolutely! By default, it runs both after the first show and after every update. 
+Instead of thinking about "when it's first shown" or "when it's updated," 
+it might be simpler to see that effects happen "after each show."
+
+## Handling Effects that Need Cleanup
+
+Earlier, we saw how to deal with effects that don't need cleaning up. 
+But some effects do, like setting up a subscription to an external data source. 
+In these cases, cleaning up is essential to avoid causing memory leaks. Let's explore an example:
+
+You might be thinking that we’d need a separate effect to perform the cleanup. 
+But code for adding and removing a subscription is so tightly related that `useEffect` is designed to keep it together.
+If your effect returns a function, React will run it when it is time to clean up:  
+```jsx
+import { useState, useEffect } from 'react';
+
+const StatusComponent = ({user}) => {
+  const [isOnline, setIsOnline] = useState(null);
+
+  const updateStatus = (status) => {
+    setIsOnline(status.isOnline);
+  }
+
+  useEffect(() => {
+    // start to watch status
+    subscribeToStatus(user.id, updateStatus);
+    
+    // stop to watch the status once the FriendStatus component is removed from DOM
+    // highlight-next-line
+    return () => {
+      unsubscribeFromStatus(user.id, updateStatus);
+    };
+  },[]);
+  
+  return isOnline ? 'Online' : 'Offline';
+}
+```
+
+**Why did we add a function in our effect?**
+
+This is the extra part that helps clean up effects if needed. 
+Each effect can include a function that takes care of cleaning up. 
+This way, we can manage the logic for both setting up and removing subscriptions in one place.
+
+## Tips
+### Use Multiple Effects to Separate Concerns
+Just like you can use the State Hook more than once, you can also use several effects. 
+This lets us separate unrelated logic into different effects:
+```jsx
+const StatusWithCounter = ({user}) => {
+  const [count, setCount] = useState(0);
+  const [isOnline, setIsOnline] = useState(null);
+
+  const updateStatus = (status) => {
+    setIsOnline(status.isOnline);
+  }
+
+  useEffect(() => {
+    document.title = `Button was clicked ${count} times`;
+  });
+  
+  useEffect(() => {
+    subscribeToStatus(user.id, updateStatus);
+    
+    return () => {
+      unsubscribeFromStatus(user.id, updateStatus);
+    };
+  });
+  // ...
+}
+```
+
+### Making Code Clearer with Hooks
+
+Hooks allow us to organize our code based on its purpose rather than a specific 
+lifecycle method name. React will handle each effect in the sequence they are listed.
+
+### Boosting Performance by Avoiding Unnecessary Effects
+
+Sometimes, applying or cleaning up effects after every render 
+can slow things down. In such situations, you can instruct 
+React to skip certain effects if certain values haven't changed between renders. 
+To achieve this, provide an array as an extra option when using `useEffect`:
+
+```jsx
+useEffect(() => {
+  document.title = `Button was clicked ${count} times`;
+}, [count]); // Only re-run the effect if count changes
+```
+
+In the example mentioned, we use `[count]` as the second part. What does this mean?
+
+If `count` is 1, and the component re-renders with `count` still being 1, 
+React compares [1] from the last render with [1] from the next render. 
+Since all items in the array are the same (1 === 1), React skips the effect.
+
+When we re-render with `count` changed to 2, React checks the items in the [1] 
+array from the previous render against the items in the [2] array from the next render.
+This time, React reapplies the effect because 1 !== 2.   
+**If there are several items in the array, React will redo the effect even if only one 
+of them is different.**
+
+This principle also applies to effects with a cleanup phase.
+
+
+## Materials
+1. [Effect Hook, React Documentation](https://react.dev/reference/react/useEffect)
+2. [React component lifecycle: React lifecycle methods & hooks](https://tsh.io/blog/react-component-lifecycle-methods-vs-hooks/#:~:text=React%20lifecycle%20method%20explained&text=As%20you%20probably%20know%2C%20each,a%20component%20from%20the%20DOM)

package/dist/content/module-1/theory/module-1_hooks_useState.md

@@ -0,0 +1,131 @@
+---
+sidebar_position: 1
+sidebar_label: 'useState'
+title: 'useState'
+---
+
+## Why you need hooks?
+Hooks let you use state and other React features without writing a class.
+
+## What's a Hook?
+
+A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components.
+
+## When would I use a Hook?
+If you write a function component and realize you need to add some state to it, 
+you do not need to convert it to a class. Now you can use a Hook inside the existing function component.
+
+## Using the State Hook
+
+Let's look at this example:
+```jsx
+import React, { useState } from 'react';
+
+const Button = () => {
+  // Declare a new state variable, which we'll call "count"
+  // highlight-next-line
+  const [count, setCount] = useState(0);
+}
+```
+Understanding Hooks in Function Components
+
+In a function component, the absence of `this` prevents the direct use of `this.state` (common in class components). Instead, the `useState` Hook is employed directly within the component.
+
+## What happens when we call useState?
+
+It makes a "state variable." 
+We named ours `count`, but it could be named anything, even something funny like `banana`. 
+This helps us keep some values between function calls.  
+Usually, variables disappear when the function finishes, but React keeps state variables.
+
+## What is passed to useState as an argument?
+
+The only argument passed to the `useState()` Hook is the initial state, 
+it can be a simple number or string if that suffices. 
+In the provided example, where we want to track the number of clicks, we pass `0` as the 
+initial state for our variable.
+
+:::tip
+If we wanted to store two different values in state, we would call `useState()` twice.
+:::
+
+**What does useState return?**  
+It returns a pair of values: the current state and a function that updates it.  
+This is why we write `const [count, setCount] = useState()`. 
+This is similar to `this.state.count` and `this.setState` in a class, 
+except you get them in a pair. 
+If you're not familiar with the syntax we used, we'll come back to it at the bottom of this page.  
+
+Let's come back to our example. Now that we know what the useState Hook does, our example should make more sense:  
+```jsx
+import React, { useState } from 'react';
+
+const Button = () => {
+  // Declare a new state variable, which we'll call "count"
+  // highlight-next-line
+  const [count, setCount] = useState(0);
+}
+```
+
+We declare a state variable called `count`, and set it to `0`.  
+**React will remember its current value between re-renders**,
+and provide the most recent one to our function. 
+If we want to update the current `count`, we can call `setCount`.
+
+### Reading State
+In a function component, we can use `count` directly:
+```jsx
+<p>You clicked {count} times</p>
+ ```
+
+### Updating State
+
+We have `setCount` and `count` as variables so we can pass new count value to the function:  
+
+```jsx
+<button onClick={() => setCount(count + 1)}>
+  Click me
+</button>
+```
+
+Let's now recap what we learned line by line and check our understanding.
+
+```jsx
+1:  import { useState } from 'react';
+2:
+3:  const Button = () => {
+4:    const [count, setCount] = useState(0);
+5:
+6:    return (
+7:      <div>
+8:        <p>You clicked {count} times</p>
+9:        <button onClick={() => setCount(count + 1)}>
+10:         Click me
+11:        </button>
+12:      </div>
+13:    );
+14:  }
+```
+**Line 1:**   
+We import the `useState` Hook from React. 
+It lets us keep local state in a function component.
+
+
+**Line 4:**  
+Inside the `Example` component, we declare a new state variable by calling the `useState` Hook.
+It returns a pair of values, to which we give names. 
+We're calling our variable `count` because it holds the number of button clicks. 
+We initialize it to zero by passing `0` as the only `useState` argument. 
+The second returned item is itself a function. It lets us update the `count` so we'll
+name it `setCount`.
+
+
+**Line 9:**  
+When the user clicks, we call `setCount` with a new value. 
+React will then re-render the `Button` component, passing the new count value to it.
+
+
+## Materials
+1. [React Documentation. useState Hook](https://react.dev/reference/react/useState)  
+2. [Rules of Hooks. React Documentation](https://react.dev/reference/rules/rules-of-hooks)  
+

package/dist/content/module-1/theory/module-1_react.md

@@ -0,0 +1,64 @@
+---
+sidebar_position: 2
+sidebar_label: 'What is React?'
+title: 'What is React?'
+---
+Now let's get acquainted with the [React library](https://react.dev/) and start with the one who created and is engaged in further support of it.
+
+## A Quick History Snippet
+
+React JS, a really famous technology, started at Facebook. The company wanted React JS to be a JavaScript library for making user interfaces (UI). Jordan Walke made it, and at first, he called it "FaxJS." Later on, Facebook decided to use it to make their mobile app better. Now, React has a large community, and it keeps updating it all the time.
+
+## What is React?
+
+**React is an open-source JavaScript library** that is used for building user interfaces specifically
+for single-page applications.  
+It’s used for handling the view layer for **web** and **mobile** apps.
+
+## Why React?
+
+React properties include the following:  
+⭐ React is **declarative**  
+⭐ React is **simple**  
+⭐ React is **component based**  
+⭐ React supports **server side rendering**  
+⭐ React is **extensive**  
+⭐ React is **fast**  
+⭐ React is **easy to learn**
+
+## React has several impressive features:
+
+1. [**JSX**](jsx.mdx) (we will learn more about this later)
+
+
+2. **React Native.**  
+  React has native libraries that Facebook announced in 2015, which allow the React architecture to be used in native applications such as iOS and Android.
+   
+
+3. **Single-Way data flow.**  
+   In React, a set of immutable values are passed to the component's renderer as properties in its HTML tags. The component cannot directly modify any properties, but it can pass a callback function that enables modifications to be made.
+   This entire process is commonly referred to as **“properties flow down; actions flow up”**.
+   
+
+4. **Virtual DOM.**  
+   React creates an in-memory data structure cache that computes the changes made and updates the browser accordingly. This unique feature allows programmers to code as if the entire page is rendered on each change, while the React library only renders the components that have actually changed.
+   
+
+## A few more pros of the React
+
+1. **Easy to learn.**  
+   React is relatively easy to understand for anyone with basic knowledge of HTML, CSS, and JavaScript. It has a lower entry threshold compared to other libraries/frameworks, allowing you to start creating a web application quickly.
+   
+
+2. **Performance.**  
+   Many developers faced performance issues when the DOM was updated, which slowed down the application. React addressed this problem by introducing the virtual DOM. The React Virtual DOM exists entirely in memory and is a representation of the web browser's DOM. You no longer need to manually create and remove DOM elements, as React will handle it for you.
+   
+
+3. **Testability.**  
+   React applications are straightforward to test. React views can be treated as functions of the state, allowing us to manipulate the state passed to the React view and examine the output and triggered actions, events, functions, and so on.
+
+
+
+
+
+