redirect to error page if project get unsuccessful

client/src/controllers/ProjectController.tsx

@@ -1,31 +1,42 @@
 import React, { FC, useState, useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, Redirect } from "react-router-dom";
 import { ProjectPage } from "../pages/ProjectPage";
 import ProjectVM from "../VM/ProjectVM";
-import { Constants } from "../utils/Constants";
 import { Project } from "../types/Project";
 import { Preloader } from "../components/Preloader";
+import { Constants } from "../utils/Constants";
+import { HttpResponse, get } from "../utils/http";
 
 export const ProjectController: FC = () => {
   const [project, setProject] = useState({} as Project);
   const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
   const { id } = useParams();
 
-  const getProject: (id: string) => void = async (id: string) => {
-    await fetch(`${Constants.getProjectURI}/${id}`)
-      .then((res: Response) => res.json())
-      .catch(err => console.log(err))
-      .then(data => setProject(data))
-      .finally(() => setIsLoading(false));
-  };
+  async function httpGet(id: string): Promise<void> {
+    try {
+      const response: HttpResponse<Project> = await get<Project>(
+        `${Constants.getProjectURI}/${id}`
+      );
+      if (response.parsedBody !== undefined) {
+        setProject(response.parsedBody);
+        setIsLoading(false);
+      }
+    } catch (ex) {
+      setHasError(true);
+    }
+  }
 
   useEffect(() => {
     if (id !== undefined) {
-      getProject(id);
+      httpGet(id);
     }
   }, [id]);
 
   const viewModel = new ProjectVM(project);
 
+  if (hasError) {
+    return <Redirect to="/error" />;
+  }
   return isLoading ? <Preloader /> : <ProjectPage viewModel={viewModel} />;
 };

client/src/utils/http.ts

@@ -1,3 +1,5 @@
+import { Redirect } from "react-router-dom";
+
 export interface HttpResponse<T> extends Response {
   parsedBody?: T;
 }

client/src/utils/router.tsx

@@ -10,6 +10,7 @@ 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 { UserController } from "../controllers/UserController";
 // import { TicketController } from "../controllers/TicketController";
 
@@ -33,8 +34,12 @@ export const AppRouter = () => {
             <TicketController />
           </Route> */}
 
+          <Route path="/error">
+            <ErrorPage error="" />
+          </Route>
+
           <Route path="*">
-            <Redirect to="/404" />
+            <Redirect to="/error" />
           </Route>
         </Switch>
       </div>