fix: using ErrorPage component

frontend/src/components/BrowseDirectors.tsx

@@ -2,6 +2,7 @@ import { Space, Spin, Table } from "antd";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 import { DirectorIO } from "./Preview"
 
 export const BrowseDirectors = () => {
@@ -79,7 +80,7 @@ export const BrowseDirectors = () => {
   ];
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />
   }
 
   return (

frontend/src/components/BrowseMovies.tsx

@@ -15,6 +15,7 @@ import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import {CategoryIO, DirectorIO, MovieIO} from "./Preview";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 
 const { Panel } = Collapse;
 const { Paragraph } = Typography;
@@ -45,7 +46,7 @@ export const BrowseMovies = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />
   }
 
   var panelNum = 0;

frontend/src/components/DirectorPage.tsx

@@ -3,6 +3,7 @@ import axiosConfig from '../axios-config';
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { DirectorIO } from "./Preview";
+import { ErrorPage } from "./ErrorPage";
 
 export const DirectorPage = () => {
   const { id: directorId } = useParams();
@@ -23,7 +24,7 @@ export const DirectorPage = () => {
   }, []);
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }
 
   return (

frontend/src/components/MoviePage.tsx

@@ -3,6 +3,7 @@ import React, {useEffect, useState} from "react";
 import { Link, useParams } from "react-router-dom";
 import {DirectorIO, MovieIO} from "./Preview";
 import axiosConfig from '../axios-config';
+import { ErrorPage } from "./ErrorPage";
 
 export const MoviePage = () => {
   const { id, name } = useParams();
@@ -29,7 +30,7 @@ export const MoviePage = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }
 
   return (

frontend/src/components/Preview.tsx

@@ -14,6 +14,7 @@ import Title from "antd/lib/skeleton/Title";
 import React, {useEffect, useState} from "react";
 import { Link } from "react-router-dom";
 import axiosConfig from "../axios-config";
+import { ErrorPage } from "./ErrorPage";
 
 const contentStyle: React.CSSProperties = {
   height: "320px",
@@ -166,7 +167,7 @@ export const Preview: React.FC = () => {
   }, [])
 
   if (isError) {
-    return <h3>Something went wrong…</h3>;
+    return <ErrorPage />;
   }