fix: hydration issue (#135)

app/features/components/ErrorBoundary/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+
+type FallbackRenderProps = {
+  error: Error
+  resetErrorBoundary: () => void
+}
+
+const FallbackRender = ({ error }: FallbackRenderProps) => {
+  // eslint-disable-next-line no-console
+  console.error('Error description: ', error.message)
+
+  return (
+    <div role="alert">
+      <p className="text-center text-red-500">
+        We encountered an internal error. Please try again.
+      </p>
+    </div>
+  )
+}
+
+type CatchErrorBoundaryProps = {
+  children: React.ReactNode
+}
+
+export const CatchErrorBoundary = ({ children }: CatchErrorBoundaryProps) => {
+  return (
+    <ErrorBoundary fallbackRender={FallbackRender}>{children}</ErrorBoundary>
+  )
+}

app/features/components/index.tsx

@@ -8,3 +8,4 @@ export * from './Breadcrumbs'
 export * from './Page'
 export * from './Show'
 export * from './Spinner'
+export * from './ErrorBoundary'

app/pages/Events/index.tsx

@@ -8,12 +8,13 @@ import {
   Page,
   Spinner
 } from '~/features/components'
-import { PastEvents } from './components/PastEvents'
-import { UpcomingEvents } from './components/UpcomingEvents'
 import { Suspense } from 'react'
+import { Section, H2 } from '~/features/components'
+import { EventList } from './components/EventList'
+import { CatchErrorBoundary } from '~/features/components'
 
 const Events = () => {
-  const { pastEventsPromise, upcomingEventsPromise } =
+  const { upcomingEventsPromise, pastEventsPromise } =
     useLoaderData() as LoaderData
 
   return (
@@ -28,14 +29,36 @@ const Events = () => {
       </Breadcrumbs>
       <H1>Events</H1>
       <div className="grid gap-12 lg:gap-24">
-        <Suspense fallback={<Spinner className="m-auto" />}>
-          <Await resolve={upcomingEventsPromise}>
-            <UpcomingEvents />
-          </Await>
-          <Await resolve={pastEventsPromise}>
-            <PastEvents />
-          </Await>
-        </Suspense>
+        <Section data-test-e2e="upcoming-events-section">
+          <H2>Upcoming events</H2>
+          <Suspense fallback={<Spinner className="mx-auto" />}>
+            <CatchErrorBoundary>
+              <Await resolve={upcomingEventsPromise}>
+                {(res) => {
+                  if (res.success === false) {
+                    throw new Error(res.message)
+                  }
+                  return <EventList events={res.data} />
+                }}
+              </Await>
+            </CatchErrorBoundary>
+          </Suspense>
+        </Section>
+        <Section data-test-e2e="past-events-section">
+          <H2>Past events</H2>
+          <Suspense fallback={<Spinner className="mx-auto" />}>
+            <CatchErrorBoundary>
+              <Await resolve={pastEventsPromise}>
+                {(res) => {
+                  if (res.success === false) {
+                    throw new Error(res.message)
+                  }
+                  return <EventList events={res.data} />
+                }}
+              </Await>
+            </CatchErrorBoundary>
+          </Suspense>
+        </Section>
       </div>
     </Page>
   )

package.json

@@ -65,6 +65,7 @@
     "marked": "^4.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-schemaorg": "^2.0.0",
     "remix-image": "^1.4.0",
     "schema-dts": "^1.1.2"