error handling after get request & redirect to error page

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

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

client/src/pages/ErrorPage.tsx

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

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

client/src/types/HttpResponse.ts

@@ -0,0 +1,3 @@
+export interface HttpResponse<T> extends Response {
+  parsedBody?: T;
+}

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

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>