From 8f7e790c70661a380f4f099caac5b482e0476bdc Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Sun, 23 Feb 2020 00:15:02 +0100
Subject: [PATCH] error handling after get request & redirect to error page

---
 client/src/controllers/ErrorController.tsx   | 11 +++++++++++
 client/src/controllers/ProjectController.tsx | 15 +++++++++------
 client/src/pages/ErrorPage.tsx               | 12 ------------
 client/src/pages/NotFoundPage.tsx            | 10 ++++++++++
 client/src/types/HttpResponse.ts             |  3 +++
 client/src/utils/http.ts                     |  8 ++------
 client/src/utils/router.tsx                  | 16 ++++++++--------
 7 files changed, 43 insertions(+), 32 deletions(-)
 create mode 100644 client/src/controllers/ErrorController.tsx
 delete mode 100644 client/src/pages/ErrorPage.tsx
 create mode 100644 client/src/pages/NotFoundPage.tsx
 create mode 100644 client/src/types/HttpResponse.ts

diff --git a/client/src/controllers/ErrorController.tsx b/client/src/controllers/ErrorController.tsx
new file mode 100644
index 0000000..e36007a
--- /dev/null
+++ b/client/src/controllers/ErrorController.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+import { Redirect } from "react-router-dom";
+
+interface IProps {
+  error: any;
+}
+
+export const ErrorController: FC<IProps> = ({ error }) => {
+  if (error === "Not Found") return <Redirect to="/404" />;
+  return <></>;
+};
diff --git a/client/src/controllers/ProjectController.tsx b/client/src/controllers/ProjectController.tsx
index 472a15a..d9c368e 100644
--- a/client/src/controllers/ProjectController.tsx
+++ b/client/src/controllers/ProjectController.tsx
@@ -1,16 +1,19 @@
 import React, { FC, useState, useEffect } from "react";
-import { useParams, Redirect } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { ErrorController } from "./ErrorController";
 import { ProjectPage } from "../pages/ProjectPage";
 import ProjectVM from "../VM/ProjectVM";
 import { Project } from "../types/Project";
+import { HttpResponse } from "../types/HttpResponse";
 import { Preloader } from "../components/Preloader";
 import { Constants } from "../utils/Constants";
-import { HttpResponse, get } from "../utils/http";
+import { get } from "../utils/http";
 
 export const ProjectController: FC = () => {
-  const [project, setProject] = useState({} as Project);
+  const [project, setProject] = useState<Project>({} as Project);
   const [isLoading, setIsLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
+  const [error, setError] = useState();
   const { id } = useParams();
 
   async function httpGet(id: string): Promise<void> {
@@ -24,6 +27,7 @@ export const ProjectController: FC = () => {
       }
     } catch (ex) {
       setHasError(true);
+      setError(ex);
     }
   }
 
@@ -33,10 +37,9 @@ export const ProjectController: FC = () => {
     }
   }, [id]);
 
-  const viewModel = new ProjectVM(project);
-
   if (hasError) {
-    return <Redirect to="/error" />;
+    return <ErrorController error={error} />;
   }
+  const viewModel = new ProjectVM(project);
   return isLoading ? <Preloader /> : <ProjectPage viewModel={viewModel} />;
 };
diff --git a/client/src/pages/ErrorPage.tsx b/client/src/pages/ErrorPage.tsx
deleted file mode 100644
index 01326e2..0000000
--- a/client/src/pages/ErrorPage.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { FC } from "react";
-
-interface IProps {
-  error: any;
-}
-export const ErrorPage: FC<IProps> = ({ error }) => {
-  return (
-    <div className="section">
-      <p>{error}</p>
-    </div>
-  );
-};
diff --git a/client/src/pages/NotFoundPage.tsx b/client/src/pages/NotFoundPage.tsx
new file mode 100644
index 0000000..a13397c
--- /dev/null
+++ b/client/src/pages/NotFoundPage.tsx
@@ -0,0 +1,10 @@
+import React, { FC } from "react";
+
+interface IProps {}
+export const NotFoundPage: FC<IProps> = () => {
+  return (
+    <div className="section">
+      <p>error</p>
+    </div>
+  );
+};
diff --git a/client/src/types/HttpResponse.ts b/client/src/types/HttpResponse.ts
new file mode 100644
index 0000000..a5825c0
--- /dev/null
+++ b/client/src/types/HttpResponse.ts
@@ -0,0 +1,3 @@
+export interface HttpResponse<T> extends Response {
+  parsedBody?: T;
+}
diff --git a/client/src/utils/http.ts b/client/src/utils/http.ts
index ceb53bc..2ba9a2d 100644
--- a/client/src/utils/http.ts
+++ b/client/src/utils/http.ts
@@ -1,8 +1,4 @@
-import { Redirect } from "react-router-dom";
-
-export interface HttpResponse<T> extends Response {
-  parsedBody?: T;
-}
+import { HttpResponse } from "../types/HttpResponse";
 
 export async function http<T>(request: RequestInfo): Promise<HttpResponse<T>> {
   const response: HttpResponse<T> = await fetch(request);
@@ -10,7 +6,7 @@ export async function http<T>(request: RequestInfo): Promise<HttpResponse<T>> {
     response.parsedBody = await response.json();
   } catch (ex) {}
   if (!response.ok) {
-    throw new Error(response.statusText);
+    throw response.statusText;
   }
   return response;
 }
diff --git a/client/src/utils/router.tsx b/client/src/utils/router.tsx
index 0031748..5d5f15a 100644
--- a/client/src/utils/router.tsx
+++ b/client/src/utils/router.tsx
@@ -2,15 +2,15 @@ import React from "react";
 import {
   Router,
   Route,
-  Switch,
-  Redirect
+  Switch
+  // Redirect
   //Link, NavLink
 } from "react-router-dom";
 import * as creacteHistory from "history";
 // import { TicketPage } from "../pages/TicketPage";
 // import { HomeController } from "../controllers/HomeController";
 import { ProjectController } from "../controllers/ProjectController";
-import { ErrorPage } from "../pages/ErrorPage";
+import { NotFoundPage } from "../pages/NotFoundPage";
 // import { UserController } from "../controllers/UserController";
 // import { TicketController } from "../controllers/TicketController";
 
@@ -34,13 +34,13 @@ export const AppRouter = () => {
             <TicketController />
           </Route> */}
 
-          <Route path="/error">
-            <ErrorPage error="" />
+          <Route path="/404">
+            <NotFoundPage />
           </Route>
 
-          <Route path="*">
-            <Redirect to="/error" />
-          </Route>
+          {/* <Route path="*">
+              <Redirect to="/error" />
+            </Route> */}
         </Switch>
       </div>
     </Router>