diff --git a/src/APP/index.js b/src/APP/index.js index 4a755f70..15910b9d 100644 --- a/src/APP/index.js +++ b/src/APP/index.js @@ -25,6 +25,7 @@ import Error403 from "./pages/errorPages/Error403"; import Error404 from "./pages/errorPages/Error404"; import Error500 from "./pages/errorPages/Error500"; +import ErrorBoundary from "./pages/errorPages/ErrorBoundary"; import ProductDisplay from "./pages/shop/pages/ProductDisplay"; import GalleryPage from "./pages/gallery/GalleryPage"; @@ -52,6 +53,7 @@ export { Error403, Error404, Error500, + ErrorBoundary, ProductDisplay, GalleryPage, diff --git a/src/APP/pages/blog/Blog.jsx b/src/APP/pages/blog/Blog.jsx index 4e949891..889d3e82 100644 --- a/src/APP/pages/blog/Blog.jsx +++ b/src/APP/pages/blog/Blog.jsx @@ -1,5 +1,5 @@ -import React, { useEffect } from "react"; +import React from "react"; import { useParams, useNavigate } from "react-router-dom"; @@ -14,18 +14,12 @@ function Blog() { const navigate = useNavigate(); const { data: blogData, - refetch: refetchBlogData, isLoading, isError, isSuccess, } = useBlogData(title_slug); - - useEffect(() => { - refetchBlogData(); - }, [title_slug]); - return (
{isError && navigate("/error-500")} diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx index 04819087..65f87bb0 100644 --- a/src/APP/pages/blog/sections/RelatedBlogs.jsx +++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx @@ -4,6 +4,7 @@ import { useRelatedBlogsData } from "../../../../hooks/Queries/blog/useBlogData" import BlogCard from "../../blogs/sections/BlogCard"; import { filterRelatedBlogs } from "../../../../utilities/FilterBlogs"; + function RelatedBlogs({ blogId, categoryId }) { const { title_slug } = useParams(); @@ -24,15 +25,16 @@ function RelatedBlogs({ blogId, categoryId }) { title_slug ); + return ( <> {isError &&

Error loading blogs!

} {isLoading &&

Loading blogs...

} - {isSuccess && filteredRelatedBlogs.length > 0 && ( <> -

+

+ {filteredRelatedBlogs.length > 1 ? "Related Articles" : "Related Article"} @@ -53,7 +55,6 @@ function RelatedBlogs({ blogId, categoryId }) { )}

- )} ); diff --git a/src/APP/pages/blogs/sections/BlogsWrapper.jsx b/src/APP/pages/blogs/sections/BlogsWrapper.jsx index 3964c83f..13a181a9 100644 --- a/src/APP/pages/blogs/sections/BlogsWrapper.jsx +++ b/src/APP/pages/blogs/sections/BlogsWrapper.jsx @@ -5,9 +5,7 @@ import { useNavigate } from "react-router-dom"; import BlogCard from "./BlogCard"; import BlogPagination from "./BlogPagination"; - import { Loader } from "../../../components"; - import { SearchBlogContext } from "../../../../context/searchBlog"; import { useBlogsData, @@ -15,8 +13,6 @@ import { } from "../../../../hooks/Queries/blogs/useAllBlogsData"; import { filterBlogsByCat } from "../../../../utilities/FilterBlogs"; - - function SearchResults({ searchText }) { return (

@@ -24,7 +20,6 @@ function SearchResults({ searchText }) { "{searchText}" -

); } @@ -99,7 +94,6 @@ function BlogsWrapper() { blogCategories && Array.isArray(blogCategories) ? blogCategories.map((blog) => ( - - )) : null} diff --git a/src/APP/pages/errorPages/Error500.jsx b/src/APP/pages/errorPages/Error500.jsx index 2c879d4e..bfeb1a75 100644 --- a/src/APP/pages/errorPages/Error500.jsx +++ b/src/APP/pages/errorPages/Error500.jsx @@ -1,6 +1,4 @@ import React from "react"; -import { Link } from "react-router-dom"; - import { bgError500, error500svg } from "../../../assets/images/errorPages"; function Error500() { @@ -30,17 +28,18 @@ function Error500() {

We’re experiencing an internal server problem. Please try again after a few minutes or{" "} - + contact us. - +

- Go Home - + + @@ -60,17 +59,17 @@ function Error500() {

We’re experiencing an internal server problem. Please try again after a few minutes or{" "} - + contact us. - +

- Go Home - + ); diff --git a/src/APP/pages/errorPages/ErrorBoundary.jsx b/src/APP/pages/errorPages/ErrorBoundary.jsx new file mode 100644 index 00000000..34e1d5bf --- /dev/null +++ b/src/APP/pages/errorPages/ErrorBoundary.jsx @@ -0,0 +1,33 @@ +import React, { useState, useEffect } from "react"; + +import Error500 from "./Error500"; + +function ErrorBoundary({ children }) { + const [hasError, setHasError] = useState(false); + + useEffect(() => { + const errorHandler = (error) => { + console.error( + "Error: ", + error.message, + "ErrorFileName: ", + error.filename + ); + setHasError(true); + }; + + window.addEventListener("error", errorHandler); + + return () => { + window.removeEventListener("error", errorHandler); + }; + }, []); + + if (hasError) { + return ; + } + + return <>{children}; +} + +export default ErrorBoundary; diff --git a/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx b/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx index aa63d953..4d161cd3 100644 --- a/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx +++ b/src/APP/pages/events/sections/eventsSection/EventsUpdateSection.jsx @@ -1,7 +1,5 @@ import React from "react"; // , { useState } - - import { Link } from "react-router-dom"; function EventsUpdateSection({ diff --git a/src/main.jsx b/src/main.jsx index 01e98260..0590c09c 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -8,7 +8,7 @@ import "./index.css"; import router from "./router"; import { SearchBlogProvider } from "./context/searchBlog"; import { AuthContextProvider } from "./utils/AuthContext"; - +import { ErrorBoundary } from "./APP"; const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -19,13 +19,15 @@ const queryClient = new QueryClient({ ReactDOM.createRoot(document.getElementById("root")).render( - - - - - - - - + + + + + + + + + + ); diff --git a/src/router/index.jsx b/src/router/index.jsx index de09d2df..6a7cbdf1 100644 --- a/src/router/index.jsx +++ b/src/router/index.jsx @@ -16,7 +16,6 @@ import { DonatePage, Homepage, Resources, - ProductDisplay, Checkout, SingleEvent, @@ -26,7 +25,6 @@ import { Error400, Error403, GalleryPage, - } from "../APP"; // import { // AllChaptersPage, @@ -66,7 +64,6 @@ const router = createBrowserRouter([ element: , }, { - path: "/Gallery", element: , }, @@ -108,7 +105,6 @@ const router = createBrowserRouter([ path: "/events/:id", // New route path element: , }, - // { // path: "/resources", // element: , @@ -122,8 +118,6 @@ const router = createBrowserRouter([ // element: , // }, // { - - // path: "/signup", // element: , // }, @@ -141,6 +135,7 @@ const router = createBrowserRouter([ { path: "/error-403", element: , + }, { path: "/*", @@ -151,7 +146,6 @@ const router = createBrowserRouter([ element: , }, - // { // path: "/admin", // element: ,