auction api

src/pages/AuctionPage/AuctionPage.tsx

@@ -1,7 +1,8 @@
-import React, {useState} from "react";
+import React, { useState, useEffect } from "react";
 
 import { BreadCrumbsUi } from "../../shared/UI/BreadCrumbsUi";
 import {ButtonUi, ButtonUiType} from "../../shared/UI/ButtonUi";
+import { LoaderUi } from "../../shared/UI/LoaderUi/LoaderUi";
 import { DefaultDropDown } from "../../entities/DefaultDropDown";
 import { DefaultPagination } from "../../entities/DefaultPagination";
 import { AddAuctionModal } from "../../widgets/AddAuctionModal";
@@ -10,6 +11,8 @@ import Form from 'react-bootstrap/Form';
 import { AuctionItem } from "../../types";
 import { filterItems } from "../../constants/data";
 
+import { api } from "../../query/query";
+
 import loupe from "../../shared/images/loupe.png"
 import filterImg from "../../shared/images/filter.png"
 import close from "../../shared/images/close.png"
@@ -19,63 +22,42 @@ import styles from "./auctionPage.module.scss"
 
 export const AuctionPage = () => {
 
-    const [auctionItems, setAuctionItems] = useState<AuctionItem[]>([
+    const [auctionItems, setAuctionItems] = useState<AuctionItem[]>([])
-        {
-            number: 1,
-            name: 'Аукцион на закупку в интересах компании ООО "Фабрика"',
-            receptionDate: '17.04.23-18.04.23',
-            startDate: '18.04.23',
-            status: 'Черновик'
-        },
-        {
-            number: 2,
-            name: 'Аукцион на закупку в интересах компании ООО "Пресс"',
-            receptionDate: '17.04.23-18.04.23',
-            startDate: '18.04.23',
-            status: 'Сбор заявок'
-        },
-        {
-            number: 3,
-            name: 'Аукцион на закупку в интересах компании ООО "Компания"',
-            receptionDate: '17.04.23-18.04.23',
-            startDate: '18.04.23',
-            status: 'Идут торги'
-        },
-        {
-            number: 4,
-            name: 'Аукцион на закупку в интересах компании ООО "Кот"',
-            receptionDate: '17.04.23-18.04.23',
-            startDate: '18.04.23',
-            status: 'В архиве'
-        },
-    ])
 
     const [openAddModal, setOpenAddModal] = useState(false)
 
+    const [loader, setLoader] = useState(false)
+
     const [openEditModal, setOpenEditModal] = useState(false)
 
     const [currentEditAuction, setCurrentEditAuction] = useState({
-        number: 0,
+        uuid: '018c448e-c7d7-7092-b151-08f8d8bc410e',
+        dateCreate: "2023-12-07 16:54:17",
         name: '',
-        receptionDate: '',
+        auctionStartDate: "2023-12-22 16:03:00",
-        startDate: '',
+        description: "",
-        status: ''
+        requestsEndDate: "2023-12-21 16:03:00",
+        requestsStartDate: "2023-12-18 16:06:00",
+        status: 'Сбор заявок'
     })
 
     const addNewAuction = (newAction: string) => {
         setAuctionItems((prevValue) => [...prevValue, {
-            number: prevValue.length + 1,
+            uuid: '018c448e-c7d7-7092-b151-08f8d8bc480e',
+            dateCreate: "2023-12-07 16:54:17",
             name: newAction,
-            receptionDate: '17.04.23-18.04.23',
+            auctionStartDate: "2023-12-22 16:03:00",
-            startDate: '18.04.23',
+            description: "",
+            requestsEndDate: "2023-12-21 16:03:00",
+            requestsStartDate: "2023-12-18 16:06:00",
             status: 'Сбор заявок'
         }])
     }
 
-    const editAuctionItem = (newAuctionName: string, currentEditAuctionId: number) => {
+    const editAuctionItem = (newAuctionName: string, currentEditAuctionId: string) => {
         setAuctionItems((prevValue) => {
             return prevValue.map((item) => {
-                if (item.number === currentEditAuctionId) {
+                if (item.uuid === currentEditAuctionId) {
                     return {...item, name: newAuctionName}
                 }
                 return item
@@ -83,6 +65,34 @@ export const AuctionPage = () => {
         })
     }
 
+    const getCorrectDate = (day:string) => {
+        const months = [
+            "января",
+            "февраля",
+            "марта",
+            "апреля",
+            "мая",
+            "июня",
+            "июля",
+            "августа",
+            "сентября",
+            "октября",
+            "ноября",
+            "декабря",
+        ];
+        return `${new Date(day).getDate()} ${
+            months[new Date(day).getMonth()]
+        } ${new Date(day).getFullYear()} года`;
+    }
+
+    useEffect(() => {
+        setLoader(true)
+        api.get('/auctions').then((res) => {
+            setAuctionItems(res.data)
+            setLoader(false)
+        })
+    }, [])
+
     return (
         <div className={styles.home}>
             <BreadCrumbsUi links={[
@@ -114,35 +124,41 @@ export const AuctionPage = () => {
                     <ButtonUi title={'Применить'} variant={ButtonUiType.INFO} />
                 </div>
                 <div className={styles.info__tableWrapper}>
-                    <table>
+                    {loader ?
-                        <thead>
+                        <LoaderUi animation={'border'} variant={'primary'} />
-                        <tr className={styles.tableItem}>
+                        :
-                            <td>№</td>
+                        <>
-                            <td>Название аукциона</td>
+                            <table>
-                            <td>Прием заявок</td>
+                                <thead>
-                            <td>Проведение</td>
+                                <tr className={styles.tableItem}>
-                            <td>Статус</td>
+                                    <td>№</td>
-                        </tr>
+                                    <td>Название аукциона</td>
-                        </thead>
+                                    <td>Прием заявок</td>
-                        <tbody>
+                                    <td>Проведение</td>
-                        {auctionItems.map((item) => {
+                                    <td>Статус</td>
-                            return <tr className={styles.tableItem} key={item.number}>
+                                </tr>
-                                <td>{item.number}</td>
+                                </thead>
-                                <td className={styles.tableItem__name}>{item.name}</td>
+                                <tbody>
-                                <td>{item.receptionDate}</td>
+                                {auctionItems.map((item) => {
-                                <td>{item.startDate}</td>
+                                    return <tr className={styles.tableItem} key={item.uuid}>
-                                <td>{item.status}</td>
+                                        <td>{item.uuid}</td>
-                                <td className={styles.tableItem__edit}>
+                                        <td className={styles.tableItem__name}>{item.name}</td>
-                                    <img src={edit} alt="edit" onClick={() => {
+                                        <td>{getCorrectDate((item.requestsStartDate))}</td>
-                                        setCurrentEditAuction(item)
+                                        <td>{item.dateCreate}</td>
-                                        setOpenEditModal(true)
+                                        <td>{item.status}</td>
-                                    }}/>
+                                        <td className={styles.tableItem__edit}>
-                                </td>
+                                            <img src={edit} alt="edit" onClick={() => {
-                            </tr>
+                                                setCurrentEditAuction(item)
-                        })}
+                                                setOpenEditModal(true)
-                        </tbody>
+                                            }}/>
-                    </table>
+                                        </td>
-                    <DefaultPagination pageCount={10} currentPage={2} />
+                                    </tr>
+                                })}
+                                </tbody>
+                            </table>
+                            <DefaultPagination pageCount={10} currentPage={2} />
+                        </>
+                    }
                 </div>
             </div>
             <AddAuctionModal

src/pages/AuctionPage/auctionPage.module.scss

@@ -10,6 +10,7 @@
   &__info {
     width: 100%;
     margin: 35px 0;
+    min-height: 168px;
     display: flex;
     flex-direction: column;
     row-gap: 15px;
@@ -105,6 +106,9 @@
       }
       &__tableWrapper {
         min-width: 1243px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
         .tableItem {
           padding: 10px;
@@ -143,7 +147,7 @@
 
             tr {
               display: grid;
-              grid-template-columns: 7% 50% 16% 12% 10% 5%;
+              grid-template-columns: 30% 20% 16% 12% 14% 8%;
             }
           }
 
@@ -153,7 +157,7 @@
 
             tr {
               display: grid;
-              grid-template-columns: 7% 50% 16% 12% 10% 5%;
+              grid-template-columns: 30% 20% 16% 12% 14% 8%;
             }
           }
         }

src/query/query.ts

@@ -1,18 +1,19 @@
 import axios from 'axios'
-import { removeCookie } from 'typescript-cookie'
+import { removeCookie, getCookie } from 'typescript-cookie'
 
 export const api = axios.create({
     baseURL: 'https://tender.prof-press.ru/api/v1/',
     headers: {
         accept: 'application/json',
         'Content-Type': 'application/json',
+        'Authorization': getCookie('authToken') ? `Bearer ${getCookie('authToken')}` : ''
     },
 })
 
 api.interceptors.response.use(undefined, async function (error) {
     if (error?.response?.status === 401) {
-        removeCookie('access-token')
+        removeCookie('authToken')
-        removeCookie('refresh-token')
+        removeCookie('refreshToken')
     }
     return Promise.reject(error)
 })

src/shared/UI/LoaderUi/LoaderUi.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Spinner from 'react-bootstrap/Spinner';
+
+interface LoaderUi {
+    animation: 'border' | 'grow',
+    variant: string
+}
+
+export const LoaderUi:React.FC<LoaderUi> = ({animation, variant}) => {
+    return (
+        <Spinner animation={animation} variant={variant} />
+    )
+}

src/types.ts

@@ -1,8 +1,11 @@
 export interface AuctionItem {
-    number: number,
+    uuid: string,
     name: string,
-    receptionDate: string,
+    description: string,
-    startDate: string,
+    requestsStartDate: string,
+    requestsEndDate: string,
+    auctionStartDate: string,
+    dateCreate: string
     status: string
 }
 

src/widgets/EditAuctionModal/EditAuctionModal.tsx

@@ -3,20 +3,13 @@ import React, {useState, useEffect} from "react";
 import { ButtonUi, ButtonUiType } from "../../shared/UI/ButtonUi";
 import Modal from 'react-bootstrap/Modal';
 import Form from 'react-bootstrap/Form';
-
+import { AuctionItem } from "../../types";
-type auctionItem = {
-    number: number,
-    name: string,
-    receptionDate: string,
-    startDate: string,
-    status: string
-}
 
 interface AddAuctionModalProps {
     showModal: boolean,
     onHide: () => void,
-    currentAuction: auctionItem,
+    currentAuction: AuctionItem,
-    editAuctionItem: (newAuctionName:string, currentEditAuctionId:number) => void
+    editAuctionItem: (newAuctionName:string, currentEditAuctionId:string) => void
 }
 
 export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHide, currentAuction, editAuctionItem}) => {
@@ -27,7 +20,7 @@ export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHi
     }, [currentAuction])
 
     const editAuction = () => {
-        editAuctionItem(newAuctionName, currentAuction.number)
+        editAuctionItem(newAuctionName, currentAuction.uuid)
         onHide()
     }
     return (
@@ -40,7 +33,7 @@ export const EditAuctionModal:React.FC<AddAuctionModalProps> = ({showModal, onHi
         >
             <Modal.Header closeButton>
                 <Modal.Title id="contained-modal-title-vcenter">
-                    Редактировать аукцион №{currentAuction.number}
+                    Редактировать аукцион №{currentAuction.uuid}
                 </Modal.Title>
             </Modal.Header>
             <Modal.Body>