MemoCallback

react-advanced-tag1/src/components/exercises/MemoCallback/Search.tsx

@@ -0,0 +1,12 @@
+import React, { memo } from "react";
+
+interface SearchProps {
+    onChange: (text: string) => void;
+}
+
+function Search({ onChange }: SearchProps): React.ReactElement {
+    console.log("Search rendered");
+    return <input type="text" onChange={(e) => onChange(e.target.value)} placeholder="Search user..." />;
+}
+
+export default memo(Search);

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

@@ -0,0 +1,34 @@
+import { useCallback, useState } from "react";
+import { shuffleArray, users } from "../../../utils/shuffle";
+import Search from "./Search";
+
+export default function MemoCallback() {
+    console.log("MemoCallback rendered");
+
+    const [allUsers, setAllUsers] = useState(users);
+
+    const handleSearch = useCallback((text: string) => {
+        const filteredUsers = users.filter((user) => {
+            return user.toLowerCase().includes(text.toLowerCase());
+        });
+        setAllUsers(filteredUsers);
+    }, []);
+
+    const handleShuffle = () => {
+        setAllUsers(shuffleArray(users));
+    };
+
+    const ListOfUsers = allUsers.map((user) => {
+        return <p key={user}>{user}</p>;
+    });
+    return (
+        <div>
+            <h1>Memo Callback Übung</h1>
+            <button onClick={handleShuffle}>Shuffle</button>
+            <Search onChange={handleSearch} />
+            <div>
+                {ListOfUsers}
+            </div>
+        </div>
+    );
+}

react-advanced-tag1/src/utils/shuffle.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import { shuffleArray, users } from './shuffle';
+
+describe('shuffleArray', () => {
+    it('should shuffle the array and return a new order', () => {
+        const originalArray = [...users];
+        const shuffledArray = shuffleArray([...users]);
+
+        expect(shuffledArray).not.toEqual(originalArray); // Ensure the order is different
+        expect(shuffledArray.sort()).toEqual(originalArray.sort()); // Ensure all elements are still present
+    });
+
+    it('should return an empty array when input is empty', () => {
+        const result = shuffleArray([]);
+        expect(result).toEqual([]);
+    });
+
+    it('should handle arrays with one element', () => {
+        const result = shuffleArray(['onlyElement']);
+        expect(result).toEqual(['onlyElement']);
+    });
+});

react-advanced-tag1/src/utils/shuffle.ts

@@ -0,0 +1,11 @@
+export function shuffleArray(array: string[]){
+    for(let i = array.length -1; i>0; i--){
+ 
+        const j = Math.floor(Math.random()* (i +1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+ 
+    return [...array]
+}
+
+export const users =['John', 'Peter', 'Stefanie', 'Marta', 'Klaus', 'Anna']