add attendnace table

frontend/src/components/AttendnaceTable.tsx

@@ -1,16 +1,60 @@
+import { useEffect, useState } from "react";
+import useFetchUser from "../utils/fetchUser";
 import CenteredContainer from "./ChildrenContainer";
+import type { User } from "../types";
+
+const processAttendance = (attendance: boolean | null): string => {
+    if (attendance == null) {
+        return "Пока не ответил"
+    }
+    return (attendance == true) ? "Да!" : "Не в этот раз"
+}
 
 function AttendanceTable() {
 
+    const {getAttendanceAll} = useFetchUser()
+    const [userAttendanceData, setUserAttendnaceData] = useState<User[]>([])
+
+    const fetchUserData = async () => {
+        const userData = await getAttendanceAll()
+        setUserAttendnaceData(userData)
+    }
+
+    const handleRefresh = () => {
+        fetchUserData()
+    }
+
+    useEffect(() => {
+        fetchUserData()
+    }, [])
+
     return (
         <>
             <CenteredContainer>
                 <h2>Кто празднует?</h2>
-                <p className="mainText">
-                    Вскоре, вы сможете видеть всех, кто приедет и будет праздновать с нами. Данная фича по полной в разработке!
-                    <br/><br/>
-                    Таблица в производстве... Ожидайте к <b>началу-середние ноября</b>
-                </p>
+                {userAttendanceData && (
+                    <div className="table-wrapper">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Пятка</th>
+                                    <th>Празднует с нами?</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {userAttendanceData && userAttendanceData.map((item) => (
+                                    <tr>
+                                        <td>{item.name}</td>
+                                        <td>{processAttendance(item.attendance)}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                        <p className="scroll-instruction">Таблицу можно скроллить</p>
+                    </div>
+                )}
+                <br/>
+                <button onClick={handleRefresh}>Обновить</button>
             </CenteredContainer>
         </>
     )

frontend/src/types/index.d.ts

@@ -10,3 +10,8 @@ export interface Furniture {
 export interface Hosting {
     furniture: Furniture[]; // Array of furniture items
 }
+
+export interface User {
+    attendance: boolean | null
+    name: string
+}

frontend/src/utils/fetchUser.tsx

@@ -2,6 +2,7 @@ import { useCookies } from 'react-cookie';
 import { API_URL } from '../constants/constants';
 import { hashPassword } from './hashPassword';
 import { useState } from 'react';
+import type { User } from '../types';
 
 const useFetchUser = () => {
     const [isLoading, setIsLoading] = useState(false)
@@ -162,7 +163,30 @@ const useFetchUser = () => {
         }
     }
 
-    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading };
+    const getAttendanceAll = async (): Promise<User[]> => {
+        const token = apiCookie.apiToken
+        try {
+            const response = await fetch(`${API_URL}/users/attendance/all?token=${encodeURIComponent(token)}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const data = await response.json();
+
+            if (!data.success) throw new Error(data.message);
+
+            return data.attendance_list
+        } catch (error) {
+            console.error('Error retrieving attendance:', error);
+            return []
+        }
+    }
+
+
+    return { userSet, passwordCreate, signUser, validToken, updateAttendance, getAttendance, isLoading, getAttendanceAll };
 };
 
 export default useFetchUser;