diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index ed947e10..0ccc2649 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -286,15 +286,15 @@ export const ProfileCalendarComponent = React.memo( ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : activePeriod - ? "Выберите диапазон на календаре" - : "Выбрать диапазон"} + ? "Выберите диапазон на календаре" + : "Выбрать диапазон"} {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : endDate - ? "0 часов" - : ""} + ? "0 часов" + : ""} {endDate && ( Что-то пошло не так =( {error}; + return ; } return this.props.children; } diff --git a/src/hoc/Fallback.jsx b/src/hoc/Fallback.jsx new file mode 100644 index 00000000..6c473380 --- /dev/null +++ b/src/hoc/Fallback.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +import rightArrow from "assets/icons/arrows/arrowRight.svg"; +import logo from "assets/images/logo/ITguild.svg"; + +import "./fallback.scss"; + +export const Fallback = () => { + return ( +
+ logo +

Произошла непредвиденная ошибка

+ + Вернуться назад + arrow + +
+ ); +}; diff --git a/src/hoc/fallback.scss b/src/hoc/fallback.scss new file mode 100644 index 00000000..3702fb8f --- /dev/null +++ b/src/hoc/fallback.scss @@ -0,0 +1,24 @@ +.fallback { + display: flex; + flex-direction: column; + align-items: center; + padding: 100px; + gap: 15px; + + img { + max-width: 250px; + } + + a { + display: flex; + column-gap: 10px; + align-items: center; + font-size: 20px; + color: black; + transition: all 0.3s ease; + + &:hover { + scale: 1.1; + } + } +} diff --git a/src/index.js b/src/index.js index d03a525d..ee6aaa8c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,14 @@ import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; import App from "./App"; +import ErrorBoundary from "./hoc/ErrorBoundary"; import "./index.css"; import { store } from "./store/store"; ReactDOM.createRoot(document.getElementById("root")).render( - - - + + + + + ); diff --git a/src/pages/PartnerСategories/PartnerСategories.jsx b/src/pages/PartnerСategories/PartnerСategories.jsx index 8266df93..8799a793 100644 --- a/src/pages/PartnerСategories/PartnerСategories.jsx +++ b/src/pages/PartnerСategories/PartnerСategories.jsx @@ -1,5 +1,6 @@ import { getTheme } from "@table-library/react-table-library/baseline"; import { CompactTable } from "@table-library/react-table-library/compact"; +import { usePagination } from "@table-library/react-table-library/pagination"; import { useSort } from "@table-library/react-table-library/sort"; import { useTheme } from "@table-library/react-table-library/theme"; import React, { useEffect, useState } from "react"; @@ -101,6 +102,13 @@ export const PartnerCategories = () => { } ); + const pagination = usePagination(data, { + state: { + page: 0, + size: 5 + } + }); + useEffect(() => { setLoader(true); apiRequest("/project/my-employee").then((el) => { @@ -259,7 +267,30 @@ export const PartnerCategories = () => { data={data} theme={theme} sort={sort} + pagination={pagination} /> +
+ + Total Pages: {pagination.state.getTotalPages(data.nodes)} + + + + Page:{" "} + {pagination.state.getPages(data.nodes).map((_, index) => ( + + ))} + +
) : (
diff --git a/src/pages/PartnerСategories/partnerСategories.scss b/src/pages/PartnerСategories/partnerСategories.scss index 6f2b840c..e7d2dd26 100644 --- a/src/pages/PartnerСategories/partnerСategories.scss +++ b/src/pages/PartnerСategories/partnerСategories.scss @@ -176,5 +176,19 @@ font-size: 16px; align-items: center; } + + &__pagination { + width: 100%; + display: flex; + justify-content: space-between; + font-size: 16px; + align-items: center; + } + + &__pages { + display: flex; + column-gap: 5px; + align-items: center; + } } }