Merge pull request #5 from mishaganin/dev

Add error boundary

src/components/ErrorBoundary/ErrorBoundary.scss

@@ -0,0 +1,18 @@
+.error-boundary {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+
+  .error-boundary__title {
+    font-family: 'Bebas Neue', sans-serif;
+    color: #c652e8;
+  }
+
+  .error-boundary__link {
+    font-family: 'Bebas Neue', sans-serif;
+    color: #5266e8;
+  }
+}

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link, isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import './ErrorBoundary.scss';
+import { HttpStatusCode } from '../../types/types.ts';
+
+const ErrorBoundary = () => {
+  const error = useRouteError();
+
+  console.log(error);
+
+  const renderErrorMessage = (): JSX.Element => {
+    let errorMessage = 'Sorry.. there was an error';
+    if (isRouteErrorResponse(error)) {
+      if (error.status === HttpStatusCode.NOT_FOUND) {
+        errorMessage = 'This page doesn\'t exist!';
+      }
+
+      if (error.status === HttpStatusCode.UNAUTHORIZED) {
+        errorMessage = 'You aren\'t authorized to see this';
+      }
+
+      if (error.status === HttpStatusCode.SERVICE_UNAVAILABLE) {
+        errorMessage = 'Looks like our API is down';
+      }
+
+      if (error.status === HttpStatusCode.I_AM_A_TEAPOT) {
+        errorMessage = '🫖';
+      }
+    }
+
+    return <h1 className="error-boundary__title">{errorMessage}</h1>;
+  };
+
+  return (
+    <div className="error-boundary">
+      {renderErrorMessage()}
+      <Link className="error-boundary__link" to="/">
+        <span>Go back to home page</span>
+      </Link>
+    </div>
+  );
+};
+
+export default ErrorBoundary;

src/routes/Routes.tsx

@@ -3,11 +3,13 @@ import React from 'react';
 import HomePage from '../pages/HomePage/HomePage.tsx';
 import PostsPage from '../pages/PostsPage/PostsPage.tsx';
 import App from '../App.tsx';
+import ErrorBoundary from '../components/ErrorBoundary/ErrorBoundary.tsx';
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
+    errorElement: <ErrorBoundary />,
     children: [
       {
         path: '',

src/types/types.ts

@@ -5,3 +5,67 @@ export interface IPost {
   image: string,
   date: Date,
 }
+
+export enum HttpStatusCode {
+  CONTINUE = 100,
+  SWITCHING_PROTOCOLS = 101,
+  PROCESSING = 102,
+  OK = 200,
+  CREATED = 201,
+  ACCEPTED = 202,
+  NON_AUTHORITATIVE_INFORMATION = 203,
+  NO_CONTENT = 204,
+  RESET_CONTENT = 205,
+  PARTIAL_CONTENT = 206,
+  MULTI_STATUS = 207,
+  ALREADY_REPORTED = 208,
+  IM_USED = 226,
+  MULTIPLE_CHOICES = 300,
+  MOVED_PERMANENTLY = 301,
+  FOUND = 302,
+  SEE_OTHER = 303,
+  NOT_MODIFIED = 304,
+  USE_PROXY = 305,
+  SWITCH_PROXY = 306,
+  TEMPORARY_REDIRECT = 307,
+  PERMANENT_REDIRECT = 308,
+  BAD_REQUEST = 400,
+  UNAUTHORIZED = 401,
+  PAYMENT_REQUIRED = 402,
+  FORBIDDEN = 403,
+  NOT_FOUND = 404,
+  METHOD_NOT_ALLOWED = 405,
+  NOT_ACCEPTABLE = 406,
+  PROXY_AUTHENTICATION_REQUIRED = 407,
+  REQUEST_TIMEOUT = 408,
+  CONFLICT = 409,
+  GONE = 410,
+  LENGTH_REQUIRED = 411,
+  PRECONDITION_FAILED = 412,
+  PAYLOAD_TOO_LARGE = 413,
+  URI_TOO_LONG = 414,
+  UNSUPPORTED_MEDIA_TYPE = 415,
+  RANGE_NOT_SATISFIABLE = 416,
+  EXPECTATION_FAILED = 417,
+  I_AM_A_TEAPOT = 418,
+  MISDIRECTED_REQUEST = 421,
+  UNPROCESSABLE_ENTITY = 422,
+  LOCKED = 423,
+  FAILED_DEPENDENCY = 424,
+  UPGRADE_REQUIRED = 426,
+  PRECONDITION_REQUIRED = 428,
+  TOO_MANY_REQUESTS = 429,
+  REQUEST_HEADER_FIELDS_TOO_LARGE = 431,
+  UNAVAILABLE_FOR_LEGAL_REASONS = 451,
+  INTERNAL_SERVER_ERROR = 500,
+  NOT_IMPLEMENTED = 501,
+  BAD_GATEWAY = 502,
+  SERVICE_UNAVAILABLE = 503,
+  GATEWAY_TIMEOUT = 504,
+  HTTP_VERSION_NOT_SUPPORTED = 505,
+  VARIANT_ALSO_NEGOTIATES = 506,
+  INSUFFICIENT_STORAGE = 507,
+  LOOP_DETECTED = 508,
+  NOT_EXTENDED = 510,
+  NETWORK_AUTHENTICATION_REQUIRED = 511,
+}