Skip to content

Commit

Permalink
Error boundary (#121)
Browse files Browse the repository at this point in the history
* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* init pageNotFound

* import 404 image

* complete page not found page

* import formatDistanceToNow (#100)

* refactor service section

* change param to title_slug

* filter blogs by categories

* make blog categories scrollable

* span components on the landing page

* add download attribute internship document

* fix route

* fetch related blogs on blog page

* refetch on page change

* add error img

* add condition filtering to cat

* add loader to blog page

* build error500 mobile page

* build error500 web page

* remove img border

* error 400 page build

* error 400 page build

* error 403 page build

* reinsert 404 page

* remove 403 route

* removed unbuilt routes

* Filter out recurring current blog on related blogs fetched.

* Add error500 svg img

* Dev resolve conflict (#106)

* Update Dev (#96)

* -

* remove and refactor code

* import useQuery

* make navlinks active

* delete NavLink component

* set max-width on pages

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

* Update 05-01-24 (#99)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

---------

Co-authored-by: felixNyalenda <[email protected]>

* Update 05-01-24  Beta (#101)

* init blog formatting

* format blogs page

* add line-clamp to podCard title&desc

* return categories

* add blog search functionality

* prevent blogWrapper.css styles affecting other components

* add text-primary & bg in global.css

* style code on blog body

* wrap no result in a p tag

* import formatDistanceToNow (#100)

---------

Co-authored-by: felixNyalenda <[email protected]>

---------

Co-authored-by: SpaceYaTech <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>

* remove duplicate

* create error routes

* re-route to error-pages

* Add related blogs header

* conditionally render related blogs

* conditionally render related blogs

* resize subscription form on small screens

* style: fixed styles on landing page

* refactor: added temp API statements

* refactor: added single order endpoint

* rename related blogs header to related articles

* gallery init

* add dummy photos

* reformat event dates

* format date on the events page

* remove console logs

* add Loader

* remove parse

* Add blog liking functionality

* add hover effect

* Hotfix 0.1 broken events page (#113)

* Update date attribute name

* Uncomment blocked single events page

* use grid to render images

* add overflow to events container

* add wrap on Events cities filter for mobile

* add more photos

* change id number

* data syt photos

* refactor: add gallery footer link

* add error boundary

---------

Co-authored-by: felixNyalenda <[email protected]>
Co-authored-by: Jimmy Oty <[email protected]>
Co-authored-by: Collins Kasyoki <[email protected]>
Co-authored-by: sonylomo <[email protected]>
  • Loading branch information
5 people authored Jan 25, 2024
1 parent 3d81c63 commit ef4a640
Show file tree
Hide file tree
Showing 9 changed files with 63 additions and 47 deletions.
2 changes: 2 additions & 0 deletions src/APP/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -52,6 +53,7 @@ export {
Error403,
Error404,
Error500,
ErrorBoundary,
ProductDisplay,
GalleryPage,

Expand Down
8 changes: 1 addition & 7 deletions src/APP/pages/blog/Blog.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

import React, { useEffect } from "react";
import React from "react";
import { useParams, useNavigate } from "react-router-dom";


Expand All @@ -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 (
<div className="w-screen max-w-[1440px] mx-auto">
{isError && navigate("/error-500")}
Expand Down
7 changes: 4 additions & 3 deletions src/APP/pages/blog/sections/RelatedBlogs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -24,15 +25,16 @@ function RelatedBlogs({ blogId, categoryId }) {
title_slug
);


return (
<>
{isError && <p>Error loading blogs!</p>}
{isLoading && <p>Loading blogs...</p>}


{isSuccess && filteredRelatedBlogs.length > 0 && (
<>
<h2 className="text-2xl text-black font-semibold underline decoration-green-600 underline-offset-2">
<h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">

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

)}
</>
);
Expand Down
7 changes: 0 additions & 7 deletions src/APP/pages/blogs/sections/BlogsWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,21 @@ 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,
useBlogCategories,
} from "../../../../hooks/Queries/blogs/useAllBlogsData";

import { filterBlogsByCat } from "../../../../utilities/FilterBlogs";


function SearchResults({ searchText }) {
return (
<h3 className="text-black text-xl md:text-3xl font-semibold leading-8 md:leading-loose text-center">
Showing results for

<span className="text-primary"> "{searchText}"</span>


</h3>
);
}
Expand Down Expand Up @@ -99,7 +94,6 @@ function BlogsWrapper() {
blogCategories &&
Array.isArray(blogCategories)
? blogCategories.map((blog) => (

<button
type="button"
key={blog.id}
Expand All @@ -110,7 +104,6 @@ function BlogsWrapper() {
>
{blog.name}
</button>

))
: null}
</div>
Expand Down
23 changes: 11 additions & 12 deletions src/APP/pages/errorPages/Error500.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from "react";
import { Link } from "react-router-dom";

import { bgError500, error500svg } from "../../../assets/images/errorPages";

function Error500() {
Expand Down Expand Up @@ -30,17 +28,18 @@ function Error500() {
<p className="text-xl font-normal mb-2">
We’re experiencing an internal server problem. Please try again
after a few minutes or{" "}
<Link to="/" className="text-primary hover:underline">
<a href="/" className="text-primary hover:underline">
contact us.
</Link>
</a>
</p>

<Link
to="/"
<a
href="/"
className="bg-[#00664E] rounded-lg text-white w-max py-2 px-10"
>
Go Home
</Link>
</a>

</div>
</div>

Expand All @@ -60,17 +59,17 @@ function Error500() {
<p className="text-base font-normal mb-2 max-w-lg ">
We’re experiencing an internal server problem. Please try again after
a few minutes or{" "}
<Link to="/" className="text-primary hover:underline">
<a href="/" className="text-primary hover:underline">
contact us.
</Link>
</a>
</p>

<Link
to="/"
<a
href="/"
className="bg-primary text-base rounded-lg text-white w-max py-2 px-10"
>
Go Home
</Link>
</a>
</div>
</section>
);
Expand Down
33 changes: 33 additions & 0 deletions src/APP/pages/errorPages/ErrorBoundary.jsx
Original file line number Diff line number Diff line change
@@ -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 <Error500 />;
}

return <>{children}</>;
}

export default ErrorBoundary;
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@

import React from "react"; // , { useState }


import { Link } from "react-router-dom";

function EventsUpdateSection({
Expand Down
20 changes: 11 additions & 9 deletions src/main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -19,13 +19,15 @@ const queryClient = new QueryClient({

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<AuthContextProvider>
<QueryClientProvider client={queryClient}>
<SearchBlogProvider>
<RouterProvider router={router} />
<ReactQueryDevtools position="bottom-right" />
</SearchBlogProvider>
</QueryClientProvider>
</AuthContextProvider>
<ErrorBoundary>
<AuthContextProvider>
<QueryClientProvider client={queryClient}>
<SearchBlogProvider>
<RouterProvider router={router} />
<ReactQueryDevtools position="bottom-right" />
</SearchBlogProvider>
</QueryClientProvider>
</AuthContextProvider>
</ErrorBoundary>
</React.StrictMode>
);
8 changes: 1 addition & 7 deletions src/router/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
DonatePage,
Homepage,
Resources,

ProductDisplay,
Checkout,
SingleEvent,
Expand All @@ -26,7 +25,6 @@ import {
Error400,
Error403,
GalleryPage,

} from "../APP";
// import {
// AllChaptersPage,
Expand Down Expand Up @@ -66,7 +64,6 @@ const router = createBrowserRouter([
element: <CommunityPage />,
},
{

path: "/Gallery",
element: <GalleryPage />,
},
Expand Down Expand Up @@ -108,7 +105,6 @@ const router = createBrowserRouter([
path: "/events/:id", // New route path
element: <SingleEvent />,
},

// {
// path: "/resources",
// element: <Resources />,
Expand All @@ -122,8 +118,6 @@ const router = createBrowserRouter([
// element: <SingleProductDonation />,
// },
// {


// path: "/signup",
// element: <SignUp />,
// },
Expand All @@ -141,6 +135,7 @@ const router = createBrowserRouter([
{
path: "/error-403",
element: <Error403 />,

},
{
path: "/*",
Expand All @@ -151,7 +146,6 @@ const router = createBrowserRouter([
element: <Error500 />,
},


// {
// path: "/admin",
// element: <AdminLayout />,
Expand Down

1 comment on commit ef4a640

@vercel
Copy link

@vercel vercel bot commented on ef4a640 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.