Updated details page, implemented booking

front/src/components/AnnouncementDetails.jsx

@@ -1,19 +1,18 @@
-import Modal from 'react-bootstrap/Modal'
+import { Modal, Button } from 'react-bootstrap'
+import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
 
 import { categoryNames } from '../assets/category'
-import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
-import { Button } from 'react-bootstrap'
-import useBook from '../utils/useBook'
+import { useBook } from '../hooks/api'
 
 function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }) {
-    const handleBook = useBook(id)
-    
+    const {handleBook, status: bookStatus} = useBook(id)
+
     return (
         <div
             className="modal show"
             style={{ display: 'flex', position: 'initial', alignItems: "center" }}
         >
-            <Modal.Dialog>
+            <Modal.Dialog style={{minWidth: "50vw"}}>
                 <Modal.Header closeButton onHide={close}>
                     <Modal.Title>
                         Подробнее
@@ -24,10 +23,10 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
                     <h1>{name}</h1>
 
                     <span>{categoryNames.get(category)}</span>
-                    <span className='m-2'>&#x2022;</span> {/* dot */}
+                    <span className='m-2'>&#x2022;</span>{/* dot */}
                     <span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>
-                    
-                    <p className='mb-2'>{description}</p>
+
+                    <p className='mb-3'>{description}</p>
 
                     <MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
                         <TileLayer
@@ -43,7 +42,7 @@ function AnnouncementDetails({ close, announcement: { id, name, category, bestBy
 
                 <Modal.Footer>
                     <Button variant='success' onClick={handleBook}>
-                        Забронировать
+                        {bookStatus || "Забронировать"} 
                     </Button>
                 </Modal.Footer>
             </Modal.Dialog>

front/src/hooks/api/useBook.js

@@ -0,0 +1,42 @@
+import { useState } from "react"
+import { useNavigate } from "react-router-dom"
+
+import { getToken } from "../../utils/auth"
+import { API_URL } from "../../config"
+
+function useBook(id) {
+    const navigate = useNavigate()
+
+    const [status, setStatus] = useState('')
+
+    const handleBook = () => {
+        const token = getToken() || "Test"
+
+        if (token) {
+            setStatus("Загрузка")
+
+            fetch(API_URL + '/book', {
+                method: 'POST',
+                body: JSON.stringify({
+                    id: id
+                }),
+                headers: {
+                    'Authorization': 'Bearer ' + token,
+                    'Content-Type': 'application/json'
+                }
+            }).then(res => res.json()).then(data => {
+                if (data.Success === true) {
+                    setStatus('Забронировано')
+                } else {
+                    setStatus("Ошибка бронирования")
+                }
+            })
+        } else {
+            return navigate("/login")
+        }
+    }
+
+    return { handleBook, status }
+}
+
+export default useBook

front/src/utils/auth.js

@@ -6,4 +6,8 @@ const getToken = () => {
     return token 
 }
 
-export { getToken }
+const setToken = (token) => {
+    localStorage.setItem("Token", token)
+}
+
+export { getToken, setToken }

front/src/utils/useBook.js

@@ -1,18 +0,0 @@
-import { useNavigate } from "react-router-dom"
-import { getToken } from "./auth"
-
-function useBook(id) {
-    const navigate = useNavigate()
-
-    const handleBook = () => {
-        /* TODO */
-
-        if (!getToken()) {
-            return navigate("/login")
-        }
-    }
-
-    return handleBook
-}
-
-export default useBook