From 6afccb19d88cd350f3034843e7db7bdd8d15a6b7 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Tue, 19 Mar 2024 16:39:00 +0300
Subject: [PATCH] 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 <div>Что-то пошло не так =( {error}</div>;
+      return <Fallback />;
     }
     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 (
+    <div className="fallback">
+      <img src={logo} alt="logo" className="logo" />
+      <h1>Произошла непредвиденная ошибка</h1>
+      <a href='/profile'>
+        Вернуться назад
+        <img src={rightArrow} alt="arrow" />
+      </a>
+    </div>
+  );
+};
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(
-  <Provider store={store}>
-    <App />
-  </Provider>
+  <ErrorBoundary>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </ErrorBoundary>
 );
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}
                 />
+                <div className="table__pagination">
+                  <span>Total Pages: {pagination.state.getTotalPages(data.nodes)}</span>
+
+                  <span className="table__pages">
+                    Page:{" "}
+                    {pagination.state.getPages(data.nodes).map((_, index) => (
+                      <button
+                        key={index}
+                        type="button"
+                        style={{
+                          fontWeight: pagination.state.page === index ? "bold" : "normal",
+                        }}
+                        onClick={() => pagination.fns.onSetPage(index)}
+                      >
+                        {index + 1}
+                      </button>
+                    ))}
+                  </span>
+                </div>
               </>
             ) : (
               <div className="partner-categories__empty">
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;
+    }
   }
 }