epam-ai-conductor 0.1.0

package/dist/content/content/module-2/tests/Registration.test.tsx

@@ -0,0 +1,70 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { Registration } from "../components/Registration";
+import * as services from "../../../services";
+
+const mockedUsedNavigate = jest.fn();
+
+beforeEach(() => {
+  jest
+    .spyOn(services, "createUser")
+    .mockImplementation(jest.fn(() => Promise.resolve()) as jest.Mock);
+
+  jest.spyOn(global, "fetch").mockImplementation(
+    jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(),
+      })
+    ) as jest.Mock
+  );
+
+  jest.mock("react-router-dom", () => ({
+    ...jest.requireActual("react-router-dom"),
+    useNavigate: () => mockedUsedNavigate,
+  }));
+});
+
+describe("Registration", () => {
+  test("renders the registration form", () => {
+    render(
+      <MemoryRouter>
+        <Registration />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByLabelText("name")).toBeInTheDocument();
+    expect(screen.getByLabelText("email")).toBeInTheDocument();
+    expect(screen.getByLabelText("password")).toBeInTheDocument();
+    expect(screen.getByRole("button")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toBeInTheDocument();
+  });
+
+  test("submits the form", async () => {
+    render(
+      <MemoryRouter>
+        <Registration />
+      </MemoryRouter>
+    );
+
+    fireEvent.change(screen.getByLabelText("name"), {
+      target: { value: "John Doe" },
+    });
+    fireEvent.change(screen.getByLabelText("email"), {
+      target: { value: "john.doe@example.com" },
+    });
+    fireEvent.change(screen.getByLabelText("password"), {
+      target: { value: "password123" },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "registration" }));
+
+    expect(services.createUser).toHaveBeenCalledTimes(1);
+    await expect(services.createUser).toHaveBeenCalledWith({
+      name: "John Doe",
+      email: "john.doe@example.com",
+      password: "password123",
+    });
+  });
+});

package/dist/content/content/module-2/tests/SearchBar.test.tsx

@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { SearchBar } from "../components/Courses/components/SearchBar/SearchBar";
+
+test("SearchBar renders correctly", () => {
+  const onAddClick = jest.fn();
+  render(<SearchBar onAddClick={onAddClick} />);
+
+  const inputElement = screen.getByRole("textbox");
+  const searchButtonElement = screen.getByText("Search");
+  const addButtonElement = screen.getByText("Add new courses");
+
+  expect(inputElement).toBeInTheDocument();
+  expect(searchButtonElement).toBeInTheDocument();
+  expect(addButtonElement).toBeInTheDocument();
+});
+
+test("SearchBar handles input change correctly", () => {
+  const onAddClick = jest.fn();
+  render(<SearchBar onAddClick={onAddClick} />);
+
+  const inputElement = screen.getByRole("textbox") as HTMLInputElement;
+
+  fireEvent.change(inputElement, {
+    target: { value: "test" },
+  });
+
+  expect(inputElement.value).toBe("test");
+});
+
+test("SearchBar calls onAddClick correctly", () => {
+  const onAddClick = jest.fn();
+  render(<SearchBar onAddClick={onAddClick} />);
+
+  const addButtonElement = screen.getByText("Add new courses");
+  fireEvent.click(addButtonElement);
+
+  expect(onAddClick).toHaveBeenCalledTimes(1);
+});

package/dist/content/content/module-2/theory/module-2_custom-hooks.md

@@ -0,0 +1,201 @@
+---
+sidebar_position: 4
+sidebar_label: 'Custom Hooks'
+title: 'Extracting a Custom Hook'
+---
+
+## What is a Custom Hook?
+
+In order not to duplicate code in JavaScript we create functions, which give us an opportunity to 
+make our code reusable. 
+
+Sometimes we may want to use the same logic (for instance, use some set of 
+`Hooks`) in different components in React. Usually we don't want to repeat the logic for each component, 
+because there may be quite a lot of components in the application. As `Hooks` are also functions we can
+extract repeated logic to a `Custom Hook`.  
+
+## Usage of Custom Hook
+
+Let's create two similar components to understand better what `Custom Hook` is and how it works.
+
+```jsx
+// src/App.jsx
+
+import FirstComponent from "./FirstComponent";
+import SecondComponent from "./SecondComponent";
+
+function App() {
+  return (
+    <>
+      <FirstComponent />
+      <SecondComponent />
+    </>
+  );
+}
+
+export default App;
+```
+
+```jsx
+// src/FirstComponent.jsx
+
+import { useEffect, useState } from "react";
+
+const url = 'https://api.github.com/users';
+
+function FirstComponent() {
+  const [data, setData] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch(url);
+    const data = await response.json();
+    setData(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <>
+      <div>First Component</div>
+      // rendering data after checking if array is not empty
+      {data.length > 0 && data.map(element => {
+        return <div key={element.id}>{element.login}</div>;
+      })}
+    </>
+  );
+}
+
+export default FirstComponent;
+```
+
+```jsx
+// src/SecondComponent.jsx
+
+import { useEffect, useState } from "react";
+
+const url = 'https://api.github.com/events';
+
+function SecondComponent() {
+  const [data, setData] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch(url);
+    const data = await response.json();
+    setData(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <>
+      <div>Second Component</div>
+      // rendering data after checking if array is not empty
+      {data.length > 0 && data.map(element => {
+        return <div key={element.id}>{element.type}</div>;
+      })}
+    </>
+  );
+}
+
+export default SecondComponent;
+```
+
+As you can see, these components are almost the same: both have local state with data and both make 
+request to API. The only difference is URL. So now when similarity is obvious let's create a
+`Custom Hook` `useFetch` with common logic.  
+
+:::warning
+Custom Hook's name should start with `use`.
+:::
+
+```jsx
+// src/useFetch.jsx
+
+import { useEffect, useState } from "react";
+
+function useFetch(url) {
+  const [data, setData] = useState([]);
+
+  const getData = async () => {
+    const response = await fetch(url);
+    const data = await response.json();
+    setData(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, [url]);
+
+  return data;
+}
+
+export default useFetch;
+```
+
+As you can see inside the `Custom Hook` we moved our `useState` and `useEffect hooks`. 
+It works the same as this code worked inside components, but the difference is: 
+* it takes `url` as a parameter
+* `useEffect` will execute every time when URL changes (dependency array is the second parameter of `useEffect`)
+* returns `data` that we need.
+
+Now we can use it inside our components.
+
+```jsx
+// src/FirstComponent.jsx
+
+import useFetch from "./useFetch";
+
+const url = 'https://api.github.com/users';
+
+function FirstComponent() {
+  const data = useFetch(url);
+
+  return (
+    <>
+      <div>First Component</div>
+      {data.length > 0 && data.map(element => {
+        return <div key={element.id}>{element.login}</div>;
+      })}
+    </>
+  );
+}
+
+export default FirstComponent;
+```
+
+```jsx
+// src/SecondComponent.jsx
+
+import useFetch from "./useFetch";
+
+const url = 'https://api.github.com/events';
+
+function SecondComponent() {
+  const data = useFetch(url);
+
+  return (
+    <>
+      <div>Second Component</div>
+      {data.map(element => {
+        return <div key={element.id}>{element.type}</div>;
+      })}
+    </>
+  );
+}
+
+export default SecondComponent;
+```
+As you can see we use `Custom Hook` as a simple JS function that starts with 'use' and returns data.
+So now there is no need to duplicate our code for every component.
+
+## Conclusion
+
+Congratulations! Now you've learned how `Custom Hooks` work.
+
+---
+## Materials
+1. [React documentation. Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)

package/dist/content/content/module-2/theory/module-2_hooks.md

@@ -0,0 +1,117 @@
+---
+sidebar_position: 3
+sidebar_label: 'React Router Hooks'
+title: 'React Router Hooks'
+---
+
+## useLocation()
+This hook returns the current location object. This can be useful if you'd like to perform some side effect whenever the current location changes.
+
+```jsx
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function App() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // this block will run once location is changed
+  }, [location]);
+
+  return (
+    // ...
+  );
+}
+
+```
+
+## useNavigate()
+The `useNavigate` hook returns a function that lets you navigate programmatically, for example after a form is submitted.
+
+```jsx
+import { useNavigate } from "react-router-dom";
+
+function SignupForm() {
+  const navigate = useNavigate();
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    
+    await submitForm(event.target);
+    
+    navigate("../success", { replace: true });
+  }
+
+  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
+}
+
+```
+The navigate function has two signatures:
+
+* Either pass a `to` value (same type as `<Link to>`) with an optional second `{ replace, state }` arg or
+
+* Pass the delta you want to go in the history stack. For example, `navigate(-1)` is equivalent to hitting the back button.
+
+## useParams()
+The `useParams` hook returns an object of key/value pairs of the dynamic params from the current
+URL that were matched by the `<Route path >`.  
+Child routes inherit all params from their parent routes.
+
+```jsx
+import * as React from 'react';
+import { Routes, Route, useParams } from 'react-router-dom';
+
+function ProfilePage() {
+  // Get the userId param from the URL.
+  const { userId } = useParams();
+  // ...
+}
+
+function App() {
+  return (
+    <Routes>
+      <Route path="users">
+        <Route path=":userId" element={<ProfilePage />} />
+        <Route path="me" element={...} />
+      </Route>
+    </Routes>
+  );
+}
+
+```
+
+## useRoutes()
+
+The useRoutes hook is the functional equivalent of `<Routes>`, but it uses JavaScript objects instead of `<Route>` elements to define your routes. These objects have the same properties as normal `<Route>` elements, but they don't require JSX.
+
+The return value of `useRoutes` is either a valid React element you can use to render the route tree, or null if nothing matched.
+
+```jsx
+import * as React from "react";
+import { useRoutes } from "react-router-dom";
+
+function App() {
+  let element = useRoutes([
+    {
+      path: "/",
+      element: <App />,
+      children: [
+        {
+          path: "first-page",
+          element: <FirstPage />,
+        },
+        {
+          path: "second-page",
+          element: <SecondPage />,
+        },
+      ],
+    },
+  ]);
+
+  return element;
+}
+```
+
+:::info
+You can find more React Router hooks in the official [documentation](https://reactrouter.com/en/6.6.2)
+:::