From 6afccb19d88cd350f3034843e7db7bdd8d15a6b7 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 19 Mar 2024 16:39:00 +0300 Subject: [PATCH 1/2] error boundary and table pagination --- .../{ErrorBoundary.js => ErrorBoundary.jsx} | 3 +- src/hoc/Fallback.jsx | 20 +++++++++++++ src/hoc/fallback.scss | 19 +++++++++++++ src/index.js | 9 ++++-- .../PartnerСategories/PartnerСategories.jsx | 28 +++++++++++++++++++ .../partnerСategories.scss | 14 ++++++++++ 6 files changed, 89 insertions(+), 4 deletions(-) rename src/hoc/{ErrorBoundary.js => ErrorBoundary.jsx} (82%) create mode 100644 src/hoc/Fallback.jsx create mode 100644 src/hoc/fallback.scss diff --git a/src/hoc/ErrorBoundary.js b/src/hoc/ErrorBoundary.jsx similarity index 82% rename from src/hoc/ErrorBoundary.js rename to src/hoc/ErrorBoundary.jsx index c031a11e..d5d0daeb 100644 --- a/src/hoc/ErrorBoundary.js +++ b/src/hoc/ErrorBoundary.jsx @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import { Fallback } from "./Fallback"; class ErrorBoundary extends Component { state = { @@ -13,7 +14,7 @@ class ErrorBoundary extends Component { const { error } = this.state; if (error) { - return
Что-то пошло не так =( {error}
; + return ; } return this.props.children; } diff --git a/src/hoc/Fallback.jsx b/src/hoc/Fallback.jsx new file mode 100644 index 00000000..12ba6863 --- /dev/null +++ b/src/hoc/Fallback.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import logo from "assets/images/logo/ITguild.svg"; + +import rightArrow from "assets/icons/arrows/arrowRight.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..62580ac2 --- /dev/null +++ b/src/hoc/fallback.scss @@ -0,0 +1,19 @@ +.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: 16px; + color: black; + } +} diff --git a/src/index.js b/src/index.js index d03a525d..f7ad3428 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,16 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; +import ErrorBoundary from "./hoc/ErrorBoundary"; import App from "./App"; 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..9ab29312 100644 --- a/src/pages/PartnerСategories/PartnerСategories.jsx +++ b/src/pages/PartnerСategories/PartnerСategories.jsx @@ -14,6 +14,7 @@ import { Loader } from "@components/Common/Loader/Loader"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; +import { usePagination } from "@table-library/react-table-library/pagination"; import rightArrow from "assets/icons/arrows/arrowRight.svg"; @@ -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,27 @@ 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; + } } } From 2a5991da1f5458a3725ce5ce9d42fee77cf21088 Mon Sep 17 00:00:00 2001 From: Mikola Date: Tue, 19 Mar 2024 16:39:36 +0300 Subject: [PATCH 2/2] error boundary and table pagination --- .../ProfileCalendar/ProfileCalendarComponent.jsx | 8 ++++---- src/hoc/ErrorBoundary.jsx | 1 + src/hoc/Fallback.jsx | 7 +++---- src/index.js | 2 +- src/pages/PartnerСategories/PartnerСategories.jsx | 11 +++++++---- 5 files changed, 16 insertions(+), 13 deletions(-) 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 && ( { - return (
logo

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

- + Вернуться назад arrow diff --git a/src/index.js b/src/index.js index f7ad3428..ee6aaa8c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,9 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { Provider } from "react-redux"; -import ErrorBoundary from "./hoc/ErrorBoundary"; import App from "./App"; +import ErrorBoundary from "./hoc/ErrorBoundary"; import "./index.css"; import { store } from "./store/store"; diff --git a/src/pages/PartnerСategories/PartnerСategories.jsx b/src/pages/PartnerСategories/PartnerСategories.jsx index 9ab29312..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"; @@ -14,7 +15,6 @@ import { Loader } from "@components/Common/Loader/Loader"; import { Navigation } from "@components/Navigation/Navigation"; import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs"; import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader"; -import { usePagination } from "@table-library/react-table-library/pagination"; import rightArrow from "assets/icons/arrows/arrowRight.svg"; @@ -105,7 +105,7 @@ export const PartnerCategories = () => { const pagination = usePagination(data, { state: { page: 0, - size: 5, + size: 5 } }); @@ -270,7 +270,9 @@ export const PartnerCategories = () => { pagination={pagination} />
- Total Pages: {pagination.state.getTotalPages(data.nodes)} + + Total Pages: {pagination.state.getTotalPages(data.nodes)} + Page:{" "} @@ -279,7 +281,8 @@ export const PartnerCategories = () => { key={index} type="button" style={{ - fontWeight: pagination.state.page === index ? "bold" : "normal", + fontWeight: + pagination.state.page === index ? "bold" : "normal" }} onClick={() => pagination.fns.onSetPage(index)} >