Refactor GlobalError component and add error handling to ProjectPage …

…and VortexUi components
hasanshahriar32 · Oct 13, 2024 · 19e7e5d · 19e7e5d
1 parent 4801c53
commit 19e7e5d
Show file tree

Hide file tree

Showing 7 changed files with 334 additions and 22 deletions.
diff --git a/app/globalError.tsx → app/error.tsx b/app/globalError.tsx → app/error.tsx
diff --git a/app/global-error.tsx b/app/global-error.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  )
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
diff --git a/components/pages/home/HomePage.tsx b/components/pages/home/HomePage.tsx
@@ -1,5 +1,6 @@
 import type { EncodeDataAttributeCallback } from '@sanity/react-loader'
 import Link from 'next/link'
+import { Suspense } from 'react'
 
 import { ProjectListItem } from '@/components/pages/home/ProjectListItem'
 import AllProjects from '@/components/shared/allProjects'
@@ -52,7 +53,8 @@ export function HomePage({ data, data2, encodeDataAttribute }: HomePageProps) {
       <TimelineShowcase />
       <AllProjects data2={data2} />
       <Gemini />
-      <GlobeView />
+      <Suspense><GlobeView /></Suspense>
+
     </div>
   )
 }

diff --git a/components/pages/project/ProjectPage.tsx b/components/pages/project/ProjectPage.tsx
@@ -115,7 +115,7 @@ export function ProjectPage({ data, encodeDataAttribute }: ProjectPageProps) {
         )}
       </div>
       <SocialShare />
-      <VortexUi />
+      <VortexUi url={data?.slug} />
       <div className="absolute left-0 w-screen my-6 border-t" />
       <DisqusLoader data={data} />
     </div>

diff --git a/components/pages/project/VortexUi.tsx b/components/pages/project/VortexUi.tsx
@@ -4,11 +4,11 @@ import React from 'react'
 
 import { Vortex } from '@/components/ui/vortex'
 
-export function VortexUi() {
+export function VortexUi({url}: any) {
     const router = useRouter()
     const handleClick = () => {
-        const currentWindow = window.location.href
-        router.push(`${currentWindow}/gallery`)
+        // const currentWindow = window.location.href
+        router.push(`${url}/gallery`)
     }
   return (
     <div className="w-[calc(100%-4rem)] mx-auto rounded-md  h-[30rem] overflow-hidden">

diff --git a/components/ui/card-hover-effect.tsx b/components/ui/card-hover-effect.tsx
@@ -4,7 +4,7 @@ import { CommentIcon } from '@sanity/icons'
 import { CommentCount } from 'disqus-react'
 import { AnimatePresence, motion } from 'framer-motion'
 import Link from 'next/link'
-import { useEffect,useState } from 'react'
+import { Suspense, useEffect,useState } from 'react'
 
 import ImageBox from '@/components/shared/ImageBox'
 import {
@@ -75,7 +75,7 @@ export const HoverEffect = ({
       >
         {visibleItems?.map((item: any, idx: any) => (
           <Link
-            href={`/blog/post/${item?.slug}`}
+            href={`/projects/${item?.slug}`}
             key={item?._id}
             className="group relative  block h-full w-full p-2"
             onMouseEnter={() => setHoveredIndex(idx)}
@@ -109,28 +109,34 @@ export const HoverEffect = ({
               <CardTitle>{item?.title}</CardTitle>
               <div className="-mt-5 flex items-center justify-end gap-2 font-mono text-xs text-slate-500">
                 <CommentIcon />
-                <CommentCount
-                  shortname="hstu"
+                <Suspense fallback={<p>err..</p>}>
+                {isClient ?  (
+                  <CommentCount
+                  shortname="ece21"
                   config={{
                     url: pageURL,
                     identifier: item?.slug,
                     title: item?.title,
                   }}
-                />
+                />): "loading"}
+                </Suspense>
               </div>
 
-              <CardDescription>
-                {isClient ? (
-                  <CustomPortableText
-                    value={item?.overview as PortableTextBlock[]}
-                  />
-                ) : (
-                  <div className="space-y-2">
-                    <Skeleton className="h-4 w-full" />
-                    <Skeleton className="h-4 w-3/4" />
-                  </div>
-                )}
-              </CardDescription>
+              <Suspense fallback={<Skeleton className="h-4 w-full" />}>
+                {isClient ?  (
+                <CardDescription>
+                  {isClient ? (
+                    <CustomPortableText
+                      value={item?.overview as PortableTextBlock[]}
+                    />
+                  ) : (
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-3/4" />
+                    </div>
+                  )}
+                </CardDescription>): <Skeleton className="h-4 w-full" />}
+              </Suspense>
             </Card>
           </Link>
         ))}