refactor: improve AppHome

Author: AlexStack

public/images/app-page-tsx.png

@@ -24,6 +24,7 @@ export default function Error({
           <WarningIcon />
           <h1>Oops, something went wrong!</h1>
           <h5>change this in app/error.tsx</h5>
+          <h4>{error.message}</h4>
           <Box sx={{ m: 5 }}>
             <Button onClick={reset}>Try again</Button>
           </Box>

src/app/error.tsx

@@ -2,38 +2,39 @@ import Homepage from '@/components/Homepage';
 
 import { getApiResponse } from '@/utils/shared/get-api-response';
 
-import { PageParams } from '@/types';
+import { NpmData, PageParams } from '@/types';
 
 const loadDataFromApi = async (slug?: string) => {
   if (slug === 'testError500') {
-    throw new Error('This is a ssr 500 test error');
+    throw new Error('This is mock a ssr 500 test error');
   }
 
   // Fetch & cache data from 2 remote APIs test
   const [reactNpmData, nextJsNpmData] = await Promise.all([
-    getApiResponse<{ version: string }>({
+    getApiResponse<NpmData>({
       apiEndpoint: 'https://registry.npmjs.org/react/latest',
       revalidate: 60 * 60 * 24, // 24 hours cache
     }),
-    getApiResponse<{ version: string }>({
+    getApiResponse<NpmData>({
       apiEndpoint: 'https://registry.npmjs.org/next/latest',
       revalidate: 0, // no cache
     }),
   ]);
 
   return {
-    reactVersion: reactNpmData?.version,
-    nextJsVersion: nextJsNpmData?.version,
+    reactNpmData,
+    nextJsNpmData,
   };
 };
 
 const AppHome = async ({ searchParams }: PageParams) => {
-  const apiResult = await loadDataFromApi(searchParams?.['slug']);
+  const slug = searchParams?.slug;
+  const { reactNpmData, nextJsNpmData } = await loadDataFromApi(slug);
 
   return (
     <Homepage
-      reactVersion={apiResult?.reactVersion}
-      nextJsVersion={apiResult?.nextJsVersion}
+      reactVersion={reactNpmData?.version}
+      nextJsVersion={nextJsNpmData?.version}
     />
   );
 };

src/app/page.tsx

@@ -2,3 +2,7 @@ export interface PageParams {
   params?: { id?: string };
   searchParams?: { [key: string]: string | undefined };
 }
+
+export interface NpmData {
+  version: string;
+}