update folder structure

react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import MemoCallback from "./index";
+import { describe, it, expect } from "vitest";
+import { users } from "../../../utils/shuffle";
+
+
+
+describe("MemoCallback Component", () => {
+    it("should render the component with initial users", () => {
+        render(<MemoCallback />);
+        users.forEach((user) => {
+            expect(screen.getByText(user)).toBeDefined();
+        });
+    });
+
+    it("should filter users based on search input", () => {
+        render(<MemoCallback />);
+        const searchInput = screen.getByPlaceholderText(/search/i);
+
+        fireEvent.change(searchInput, { target: { value: "a" } });
+        const filteredUsers = users.filter((user) => user.toLowerCase().includes("a"));
+        filteredUsers.forEach((user) => {
+            expect(screen.getByText(user)).toBeDefined();
+        });
+
+        const nonMatchingUsers = users.filter((user) => !user.toLowerCase().includes("a"));
+        nonMatchingUsers.forEach((user) => {
+            expect(screen.queryByText(user)).not.toBeDefined();
+        });
+    });
+
+    it("should shuffle users when the shuffle button is clicked", () => {
+        render(<MemoCallback />);
+        const shuffleButton = screen.getByText(/shuffle/i);
+
+        const initialOrder = screen.getAllByText(/./).map((el) => el.textContent);
+        fireEvent.click(shuffleButton);
+        const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent);
+
+        expect(initialOrder).not.toEqual(shuffledOrder);
+    });
+});

react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
-import { shuffleArray, users } from "../../../utils/shuffle";
 import Search from "./Search";
+import { users, shuffleArray } from "../../../utils/shuffle";
 
 export default function MemoCallback() {
     console.log("MemoCallback rendered");

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import Footer from "../components/Footer";
-import Header from "../components/Header";
 import './MainLayout.css'
+import Footer from "../common/components/Footer";
+import Header from "../common/components/Header";
 
 export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
   

react-advanced-tag1/src/routes/EffectExercisesPage.tsx

@@ -1,5 +1,6 @@
-import EffectExercises from "../components/exercises/EffectExercises";
+import EffectExercises from "../common/components/exercises/EffectExercises";
-import Heading from "../components/globals/Heading"
+import Heading from "../common/components/globals/Heading";
+
 
 export default function EffectExercisesPage() {
     return (

react-advanced-tag1/src/routes/FormsPage.tsx

@@ -1,5 +1,5 @@
-import RefExercise from "../components/exercises/RefExercise";
+import RefExercise from "../common/components/exercises/RefExercise";
-import Heading from "../components/globals/Heading";
+import Heading from "../common/components/globals/Heading";
 
 export default function FormsPage() {
     return (

react-advanced-tag1/src/routes/HomePage.tsx

@@ -1,4 +1,4 @@
-import Heading from "../components/globals/Heading"
+import Heading from "../common/components/globals/Heading";
 
 export default function HomePage() {
     return (

react-advanced-tag1/src/routes/MemoCallbackPage.tsx

@@ -1,5 +1,5 @@
-import MemoCallback from "../components/exercises/MemoCallback";
+import MemoCallback from "../common/components/exercises/MemoCallback";
-import Heading from "../components/globals/Heading";
+import Heading from "../common/components/globals/Heading";
 
 export default function MemoCallbackPage() {
     return (

react-advanced-tag1/src/routes/UsersPage.tsx

@@ -1,6 +1,6 @@
-import UserEffect from "../components/exercises/UserEffect";
+import UserEffect from "../common/components/exercises/UserEffect";
-import { UserOverview } from "../components/exercises/UserOverview";
+import { UserOverview } from "../common/components/exercises/UserOverview";
-import Heading from "../components/globals/Heading";
+import Heading from "../common/components/globals/Heading";
 
 export default function UsersPage() {
     return (