pages: create Error Component

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} />;
+}

Elements/Result.js

@@ -0,0 +1,3 @@
+/* eslint-disable unicorn/filename-case */
+/* eslint-disable no-restricted-exports */
+export { Result as default } from 'antd';

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} />;
 }

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="Ой! Что-то сломалось." />;
 }

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);