add reserve unreserve endpoints

frontend/src/components/Hosting.tsx

@@ -6,38 +6,52 @@ import CenteredContainer from "./ChildrenContainer";
 
 interface ReserveButtonProps {
     update: (name: string, id: number) => void,
+    unreserve: (token: string, id: number) => void,
     reservedBy: string,
     id: number,
 }
 
 const ReserveButton: React.FC<ReserveButtonProps> = (props) => {
-    const { reservedBy, update, id } = props;
+    const { reservedBy, update, id, unreserve } = props;
     const [cookie] = useCookies<string>(['userName'])
+    const [tokenCookie] = useCookies<string>(['apiToken'])
     const userName = cookie.userName;
     const isReserved = reservedBy !== '';
     const notify = useNotification();
 
-    const handleReserve = async () => {
+    const handleReserve = async (name: string) => {
         try {
-            await update(userName, id);
-            notify(`Успешно забронировано для ${userName}`, 'success');
+            await update(name, id);
+            notify(`Успешно забронировано для ${name}`, 'success');
         } catch (error) {
             notify(`Не удалось забронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
         }
     };
 
+    const handleUnreserve = async () => {
+        try {
+            await unreserve(tokenCookie.apiToken, id);
+            notify(`Удалось разбронировать ${name}`, 'success');
+        } catch (error) {
+            notify(`Не удалось разбронировать: ${error instanceof Error ? error.message : 'Unknown error'}`, 'error');
+        }
+    }
+
     return (
         <>
-            <button onClick={handleReserve} disabled={isReserved}>
+            <button onClick={() => handleReserve(userName)} disabled={isReserved}>
                 {isReserved ? `${reservedBy}` : 'Занять'}
             </button>
+            {(reservedBy == userName) && (
+                <button onClick={() => handleUnreserve()} disabled={false}>❌</button>
+            )}
         </>
     );
 };
 
 function Hosting() {
 
-    const { data, error, loading, update } = useFetchHosting();
+    const { data, error, loading, update, unreserveHosting } = useFetchHosting();
     return (
         <>
             <CenteredContainer>
@@ -50,31 +64,33 @@ function Hosting() {
                     (Лучше бронировать заранее если есть надобность. Оба в 1-1,5км от нашего дома).
                     Спальные места:
                 </p>
-            {loading && <div>Loading...</div>}
-            {error && <div>Error</div>}
-            {data && (
-                <div className="table-wrapper scroll-indicator">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Размещение</th>
-                                <th>Спальных мест</th>
-                                <th>Бронирование</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {Object.entries(data).map(([id, item]) => (
-                                <tr key={id}>
-                                    <td>{item.name}</td>
-                                    <td>{item.capacity}</td>
-                                    <td>{<ReserveButton update={update} reservedBy={item.reservedBy} id={Number(id)} />}</td>
+                {loading && <div>Loading...</div>}
+                {error && <div>Error</div>}
+                {data && (
+                    <div className="table-wrapper scroll-indicator">
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Размещение</th>
+                                    <th>Спальных мест</th>
+                                    <th>Бронирование</th>
                                 </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                    <p className="scroll-instruction">Таблицу можно скроллить</p>
-                </div>
-            )}
+                            </thead>
+                            <tbody>
+                                {data.furniture && data.furniture.map((item) => (
+                                    <tr key={item.id}>
+                                        <td>{item.name}</td>
+                                        <td>{item.capacity}</td>
+                                        <td>
+                                            <ReserveButton update={update} reservedBy={item.reservedBy} id={item.id} unreserve={unreserveHosting} />
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                        <p className="scroll-instruction">Таблицу можно скроллить</p>
+                    </div>
+                )}
             </CenteredContainer>
             <br />
         </>