From 4502c7aef0ad23dc386edd1a5ae072423ef85a15 Mon Sep 17 00:00:00 2001 From: e560248 Date: Tue, 8 Apr 2025 09:00:32 +0200 Subject: [PATCH] update folder structure --- .../{ => common}/components/Footer.test.tsx | 0 .../src/{ => common}/components/Footer.tsx | 0 .../components/Header/Navigation.tsx | 0 .../{ => common}/components/Header/index.tsx | 0 .../exercises/EffectExercises/index.tsx | 0 .../exercises/MemoCallback/Search.tsx | 0 .../exercises/MemoCallback/index.test.tsx | 42 +++++++++++++++++++ .../exercises/MemoCallback/index.tsx | 2 +- .../exercises/RefExercise/index.tsx | 0 .../components/exercises/UserEffect.tsx | 0 .../components/exercises/UserOverview.tsx | 0 .../components/globals/Heading.tsx | 0 .../src/{ => common}/hooks/useFetch.ts | 0 .../src/{ => common}/hooks/useLocalStorage.ts | 0 .../src/{ => common}/hooks/useMediaQuery.ts | 0 .../src/{ => common}/utils/shuffle.test.ts | 0 .../src/{ => common}/utils/shuffle.ts | 0 .../src/layouts/MainLayout.tsx | 4 +- .../src/routes/EffectExercisesPage.tsx | 5 ++- react-advanced-tag1/src/routes/FormsPage.tsx | 4 +- react-advanced-tag1/src/routes/HomePage.tsx | 2 +- .../src/routes/MemoCallbackPage.tsx | 4 +- react-advanced-tag1/src/routes/UsersPage.tsx | 6 +-- 23 files changed, 56 insertions(+), 13 deletions(-) rename react-advanced-tag1/src/{ => common}/components/Footer.test.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/Footer.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/Header/Navigation.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/Header/index.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/exercises/EffectExercises/index.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/exercises/MemoCallback/Search.tsx (100%) create mode 100644 react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx rename react-advanced-tag1/src/{ => common}/components/exercises/MemoCallback/index.tsx (93%) rename react-advanced-tag1/src/{ => common}/components/exercises/RefExercise/index.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/exercises/UserEffect.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/exercises/UserOverview.tsx (100%) rename react-advanced-tag1/src/{ => common}/components/globals/Heading.tsx (100%) rename react-advanced-tag1/src/{ => common}/hooks/useFetch.ts (100%) rename react-advanced-tag1/src/{ => common}/hooks/useLocalStorage.ts (100%) rename react-advanced-tag1/src/{ => common}/hooks/useMediaQuery.ts (100%) rename react-advanced-tag1/src/{ => common}/utils/shuffle.test.ts (100%) rename react-advanced-tag1/src/{ => common}/utils/shuffle.ts (100%) diff --git a/react-advanced-tag1/src/components/Footer.test.tsx b/react-advanced-tag1/src/common/components/Footer.test.tsx similarity index 100% rename from react-advanced-tag1/src/components/Footer.test.tsx rename to react-advanced-tag1/src/common/components/Footer.test.tsx diff --git a/react-advanced-tag1/src/components/Footer.tsx b/react-advanced-tag1/src/common/components/Footer.tsx similarity index 100% rename from react-advanced-tag1/src/components/Footer.tsx rename to react-advanced-tag1/src/common/components/Footer.tsx diff --git a/react-advanced-tag1/src/components/Header/Navigation.tsx b/react-advanced-tag1/src/common/components/Header/Navigation.tsx similarity index 100% rename from react-advanced-tag1/src/components/Header/Navigation.tsx rename to react-advanced-tag1/src/common/components/Header/Navigation.tsx diff --git a/react-advanced-tag1/src/components/Header/index.tsx b/react-advanced-tag1/src/common/components/Header/index.tsx similarity index 100% rename from react-advanced-tag1/src/components/Header/index.tsx rename to react-advanced-tag1/src/common/components/Header/index.tsx diff --git a/react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx b/react-advanced-tag1/src/common/components/exercises/EffectExercises/index.tsx similarity index 100% rename from react-advanced-tag1/src/components/exercises/EffectExercises/index.tsx rename to react-advanced-tag1/src/common/components/exercises/EffectExercises/index.tsx diff --git a/react-advanced-tag1/src/components/exercises/MemoCallback/Search.tsx b/react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx similarity index 100% rename from react-advanced-tag1/src/components/exercises/MemoCallback/Search.tsx rename to react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx diff --git a/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx b/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.test.tsx new file mode 100644 index 0000000..ab5c674 --- /dev/null +++ b/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(); + users.forEach((user) => { + expect(screen.getByText(user)).toBeDefined(); + }); + }); + + it("should filter users based on search input", () => { + render(); + 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(); + 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); + }); +}); \ No newline at end of file diff --git a/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx b/react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx similarity index 93% rename from react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx rename to react-advanced-tag1/src/common/components/exercises/MemoCallback/index.tsx index c30cac5..0882f8e 100644 --- a/react-advanced-tag1/src/components/exercises/MemoCallback/index.tsx +++ b/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"); diff --git a/react-advanced-tag1/src/components/exercises/RefExercise/index.tsx b/react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx similarity index 100% rename from react-advanced-tag1/src/components/exercises/RefExercise/index.tsx rename to react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx diff --git a/react-advanced-tag1/src/components/exercises/UserEffect.tsx b/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx similarity index 100% rename from react-advanced-tag1/src/components/exercises/UserEffect.tsx rename to react-advanced-tag1/src/common/components/exercises/UserEffect.tsx diff --git a/react-advanced-tag1/src/components/exercises/UserOverview.tsx b/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx similarity index 100% rename from react-advanced-tag1/src/components/exercises/UserOverview.tsx rename to react-advanced-tag1/src/common/components/exercises/UserOverview.tsx diff --git a/react-advanced-tag1/src/components/globals/Heading.tsx b/react-advanced-tag1/src/common/components/globals/Heading.tsx similarity index 100% rename from react-advanced-tag1/src/components/globals/Heading.tsx rename to react-advanced-tag1/src/common/components/globals/Heading.tsx diff --git a/react-advanced-tag1/src/hooks/useFetch.ts b/react-advanced-tag1/src/common/hooks/useFetch.ts similarity index 100% rename from react-advanced-tag1/src/hooks/useFetch.ts rename to react-advanced-tag1/src/common/hooks/useFetch.ts diff --git a/react-advanced-tag1/src/hooks/useLocalStorage.ts b/react-advanced-tag1/src/common/hooks/useLocalStorage.ts similarity index 100% rename from react-advanced-tag1/src/hooks/useLocalStorage.ts rename to react-advanced-tag1/src/common/hooks/useLocalStorage.ts diff --git a/react-advanced-tag1/src/hooks/useMediaQuery.ts b/react-advanced-tag1/src/common/hooks/useMediaQuery.ts similarity index 100% rename from react-advanced-tag1/src/hooks/useMediaQuery.ts rename to react-advanced-tag1/src/common/hooks/useMediaQuery.ts diff --git a/react-advanced-tag1/src/utils/shuffle.test.ts b/react-advanced-tag1/src/common/utils/shuffle.test.ts similarity index 100% rename from react-advanced-tag1/src/utils/shuffle.test.ts rename to react-advanced-tag1/src/common/utils/shuffle.test.ts diff --git a/react-advanced-tag1/src/utils/shuffle.ts b/react-advanced-tag1/src/common/utils/shuffle.ts similarity index 100% rename from react-advanced-tag1/src/utils/shuffle.ts rename to react-advanced-tag1/src/common/utils/shuffle.ts diff --git a/react-advanced-tag1/src/layouts/MainLayout.tsx b/react-advanced-tag1/src/layouts/MainLayout.tsx index 40a8b58..43b6dd4 100644 --- a/react-advanced-tag1/src/layouts/MainLayout.tsx +++ b/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 { diff --git a/react-advanced-tag1/src/routes/EffectExercisesPage.tsx b/react-advanced-tag1/src/routes/EffectExercisesPage.tsx index 15e7e26..998437d 100644 --- a/react-advanced-tag1/src/routes/EffectExercisesPage.tsx +++ b/react-advanced-tag1/src/routes/EffectExercisesPage.tsx @@ -1,5 +1,6 @@ -import EffectExercises from "../components/exercises/EffectExercises"; -import Heading from "../components/globals/Heading" +import EffectExercises from "../common/components/exercises/EffectExercises"; +import Heading from "../common/components/globals/Heading"; + export default function EffectExercisesPage() { return ( diff --git a/react-advanced-tag1/src/routes/FormsPage.tsx b/react-advanced-tag1/src/routes/FormsPage.tsx index d8496a0..5aec0ba 100644 --- a/react-advanced-tag1/src/routes/FormsPage.tsx +++ b/react-advanced-tag1/src/routes/FormsPage.tsx @@ -1,5 +1,5 @@ -import RefExercise from "../components/exercises/RefExercise"; -import Heading from "../components/globals/Heading"; +import RefExercise from "../common/components/exercises/RefExercise"; +import Heading from "../common/components/globals/Heading"; export default function FormsPage() { return ( diff --git a/react-advanced-tag1/src/routes/HomePage.tsx b/react-advanced-tag1/src/routes/HomePage.tsx index f362937..e052766 100644 --- a/react-advanced-tag1/src/routes/HomePage.tsx +++ b/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 ( diff --git a/react-advanced-tag1/src/routes/MemoCallbackPage.tsx b/react-advanced-tag1/src/routes/MemoCallbackPage.tsx index 7caec90..20d5b9b 100644 --- a/react-advanced-tag1/src/routes/MemoCallbackPage.tsx +++ b/react-advanced-tag1/src/routes/MemoCallbackPage.tsx @@ -1,5 +1,5 @@ -import MemoCallback from "../components/exercises/MemoCallback"; -import Heading from "../components/globals/Heading"; +import MemoCallback from "../common/components/exercises/MemoCallback"; +import Heading from "../common/components/globals/Heading"; export default function MemoCallbackPage() { return ( diff --git a/react-advanced-tag1/src/routes/UsersPage.tsx b/react-advanced-tag1/src/routes/UsersPage.tsx index 0ed3c86..74b332c 100644 --- a/react-advanced-tag1/src/routes/UsersPage.tsx +++ b/react-advanced-tag1/src/routes/UsersPage.tsx @@ -1,6 +1,6 @@ -import UserEffect from "../components/exercises/UserEffect"; -import { UserOverview } from "../components/exercises/UserOverview"; -import Heading from "../components/globals/Heading"; +import UserEffect from "../common/components/exercises/UserEffect"; +import { UserOverview } from "../common/components/exercises/UserOverview"; +import Heading from "../common/components/globals/Heading"; export default function UsersPage() { return (