From f6c351d39ea0df05cb761b2880334b24423117d4 Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Sun, 6 Nov 2022 13:59:13 +0300
Subject: [PATCH] pages: create Error Component

---
 Components/Common/Error.jsx | 12 ++++++++++++
 Elements/Result.js          |  3 +++
 pages/404.jsx               |  4 ++--
 pages/500.jsx               |  6 +++---
 pages/index.jsx             | 18 +++++++++++-------
 5 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 Components/Common/Error.jsx
 create mode 100644 Elements/Result.js

diff --git a/Components/Common/Error.jsx b/Components/Common/Error.jsx
new file mode 100644
index 0000000..d9594fe
--- /dev/null
+++ b/Components/Common/Error.jsx
@@ -0,0 +1,12 @@
+import Button from 'Elements/Button';
+import Result from 'Elements/Result';
+
+function handleRetry() {
+  window.location.reload();
+}
+
+const retryButton = <Button action={handleRetry} text="Попробовать еще раз" />;
+
+export default function Error(props) {
+  return <Result extra={retryButton} {...props} />;
+}
diff --git a/Elements/Result.js b/Elements/Result.js
new file mode 100644
index 0000000..6e22250
--- /dev/null
+++ b/Elements/Result.js
@@ -0,0 +1,3 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable no-restricted-exports */
+export { Result as default } from 'antd';
diff --git a/pages/404.jsx b/pages/404.jsx
index 848c19c..c1b0ccc 100644
--- a/pages/404.jsx
+++ b/pages/404.jsx
@@ -1,5 +1,5 @@
-import { Result } from 'antd';
+import Error from 'Components/Common/Error';
 
 export default function NotFound() {
-  return <Result status="404" title="404" subTitle="Ой! Тут ничего нет." />;
+  return <Error status="404" title="404" subTitle="Тут ничего нет." extra={null} />;
 }
diff --git a/pages/500.jsx b/pages/500.jsx
index 33b2de3..1eca38a 100644
--- a/pages/500.jsx
+++ b/pages/500.jsx
@@ -1,5 +1,5 @@
-import { Result } from 'antd';
+import Error from 'Components/Common/Error';
 
-export default function NotFound(props) {
-  return <Result status="500" title="" subTitle="Ой! Что-то сломалось." {...props} />;
+export default function ServerError() {
+  return <Error status="500" title="" subTitle="Ой! Что-то сломалось." />;
 }
diff --git a/pages/index.jsx b/pages/index.jsx
index 837a4af..e4fb924 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable object-curly-newline */
 import { useApolloClient } from '@apollo/client';
 import { dehydrate, QueryClient, useQueryClient } from '@tanstack/react-query';
 import { getUser } from 'api/user/query';
@@ -46,7 +45,12 @@ function Home() {
 
   useEffect(() => {
     getData(apolloClient, store);
-    injectDefaultReactions({ store, apolloClient, queryClient, trpcClient: trpcPureClient });
+    injectDefaultReactions({
+      store,
+      apolloClient,
+      queryClient,
+      trpcClient: trpcPureClient,
+    });
   }, []);
 
   return (
@@ -60,15 +64,15 @@ function Home() {
     </Grid>
   );
 }
-
+/** @type {import('next').GetServerSideProps} */
 export const getServerSideProps = async ({ req }) => {
   const { cookie = '' } = req.headers;
   // prettier-ignore
   const queryGetUser = () => getUser({
-    headers: {
-      cookie,
-    },
-  });
+      headers: {
+        cookie,
+      },
+    });
 
   const queryClient = new QueryClient();
   const user = await queryClient.fetchQuery(['user'], queryGetUser);