Merge pull request #155 from niyazm524/feature/auth-errors

Обработка ошибок авторизации

Author: niyazm524

src/app/error-handling/error-catcher.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, ReactNode } from "react";
-import { useApolloClient } from "@apollo/client";
+import { ServerError, useApolloClient } from "@apollo/client";
 import { onError } from "@apollo/client/link/error";
 import { GraphQLError } from "graphql";
 import { useLocation } from "react-router";
@@ -10,14 +10,21 @@ const isGithubError = (error: any): error is { type: string } => {
     return typeof error.type === "string";
 };
 
-function mapError(error: GraphQLError | Error | undefined): AppError | null {
+const isServerError = (error: any): error is ServerError => {
+    return typeof error.statusCode === "number";
+};
+
+function mapError(error: GraphQLError | Error | ServerError | undefined): AppError | null {
     if (!error) return null;
     if (isGithubError(error)) {
         // FIXME: handle 403 and 500 errors as well w/o side effects
         if (error.type === "NOT_FOUND") {
             return ErrorDefinitions[error.type];
         }
     }
+    if (isServerError(error)) {
+        if (error.statusCode === 401) return ErrorDefinitions.UNAUTHORIZED;
+    }
     // TODO: handle network errors and whatever can be broken
     return null;
 }

src/app/error-handling/error-definitions.ts

@@ -1,6 +1,11 @@
 import { AppError } from "models";
 
 export const ErrorDefinitions: Record<string, AppError> = {
+    UNAUTHORIZED: {
+        code: 401,
+        message: "You shall not pass!",
+        description: "Occurred problems with your credential. Re-sign in, please",
+    },
     FORBIDDEN: {
         code: 403,
         message: "Yo, access Forbidden\nYou shouldn’t be here",

src/app/error-handling/index.ts

@@ -1 +1,2 @@
 export { default as ErrorCatcher } from "./error-catcher";
+export { ErrorDefinitions } from "./error-definitions";

src/features/auth/page/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Alert, Card } from "antd";
 import { GithubFilled } from "@ant-design/icons";
+import { Alert, Card, notification } from "antd";
 // !!! FIXME: loop imports
 import { useTitle } from "pages/helpers";
 import { authorizeGithub } from "../firebase";
@@ -21,9 +21,14 @@ import "./index.scss";
 const AuthPage = () => {
     useTitle("Sign in to Github Client");
     const { login } = useAuth();
+    const showError = (message: string) =>
+        notification.error({ message: "Authorization error", description: message, top: 72 });
+
+    // TODO: add ability to specify redirect url
     const authorize = () => {
-        authorizeGithub().then(login);
-        // TODO: add catch handling!
+        authorizeGithub()
+            .then(login)
+            .catch((err: Error) => showError(err.message));
     };
 
     return (

src/features/home-hero/index.tsx

@@ -1,25 +1,32 @@
 import { Col, Row } from "antd";
 import React from "react";
+import { useHistory } from "react-router-dom";
 import { ReactComponent as Icon } from "./assets/github-icon.svg";
 import { ReactComponent as SadIcon } from "./assets/github-icon-sad.svg";
 import "./index.scss";
 
 type Props = {
     title: string;
     description: string;
-    action: { text: string; to: () => void };
+    action?: { text: string; to: () => void };
     useSadHero?: boolean;
 };
 
 const HomeHero = ({ title, description, action, useSadHero = false }: Props) => {
+    const history = useHistory();
+    const preferredAction = action ?? {
+        text: "Back",
+        to: () => (history.length > 1 ? history.goBack() : history.push("/")),
+    };
+
     return (
         <div className="page page-background">
             <Row className="home-hero">
                 <Col span={16}>
                     <h1 className="home-hero__title">{title}</h1>
                     <p className="home-hero__description">{description}</p>
-                    <button className="home-hero__button" onClick={() => action.to()}>
-                        {action.text}
+                    <button className="home-hero__button" onClick={() => preferredAction.to()}>
+                        {preferredAction.text}
                     </button>
                 </Col>
                 <Col span={8}>

src/pages/error/index.tsx

@@ -1,22 +1,31 @@
 import React from "react";
-import { useHistory } from "react-router";
-import HomeHero from "../../features/home-hero";
-import { AppError } from "../../models";
+import { ErrorDefinitions } from "app/error-handling";
+import { Auth } from "features";
+import HomeHero from "features/home-hero";
+import { AppError } from "models";
 
 type Props = { error: AppError };
 
 export default function ErrorPage({ error }: Props) {
-    const history = useHistory();
+    const { logout } = Auth.useAuth();
+
+    const action =
+        error.code === ErrorDefinitions.UNAUTHORIZED.code
+            ? {
+                  text: "Authorize",
+                  to: () => {
+                      logout();
+                      window.location.href = "/auth";
+                  },
+              }
+            : undefined;
 
     return (
         <HomeHero
             title={error.message}
             description={error.description}
             useSadHero
-            action={{
-                text: "Back",
-                to: () => (history.length > 1 ? history.goBack() : history.push("/")),
-            }}
+            action={action}
         />
     );
 }

src/pages/index.tsx

@@ -18,7 +18,7 @@ const Routing = () => {
             <Switch>
                 <Route exact path={Auth.routes.main} component={HomePage} />
                 <Route exact path={Auth.routes.login} component={Auth.Page} />
-                <Redirect to={Auth.routes.main} />
+                <Redirect to={Auth.routes.login} />
             </Switch>
         );
     }