From cf195c969a44f882474ffa64a951a48ceccb48a1 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Tue, 25 Oct 2022 00:01:52 +0800
Subject: [PATCH] Add error handler

Specify error handler when no thumbnail is found.
---
 pages/games/[id]/play.tsx |  1 +
 pages/games/index.tsx     | 61 ++++++++++++++++++++++++++++++++++-----
 utils/games.ts            |  2 +-
 3 files changed, 55 insertions(+), 9 deletions(-)
diff --git a/pages/games/[id]/play.tsx b/pages/games/[id]/play.tsx
index 5a195a7..473fc70 100644
--- a/pages/games/[id]/play.tsx
+++ b/pages/games/[id]/play.tsx
@@ -98,6 +98,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
       notFound: true,
     }
   }
+
   const game = await response.json();
   return {
     props: {
diff --git a/pages/games/index.tsx b/pages/games/index.tsx
index 993122f..1582bc6 100644
--- a/pages/games/index.tsx
+++ b/pages/games/index.tsx
@@ -4,6 +4,7 @@ import {Game} from '../../utils/games';
 import Link from 'next/link';
 import Head from 'next/head';
 import Image from 'next/image';
+import {useState} from 'react';
 
 type HomeProps = {
   games: Game[],
@@ -12,6 +13,15 @@ type HomeProps = {
 const GamesPage: NextPage<HomeProps> = ({
   games,
 }) => {
+  const [displayGames, setDisplayGames] = useState(games);
+
+  const handleImageError = (game: Game) => () => {
+    setDisplayGames((games) => games.map(g => ({
+      ...g,
+      thumbnail: g.id === game.id ? undefined : g.thumbnail,
+    })))
+  }
+
   return (
     <>
       <Head>
@@ -53,7 +63,7 @@ const GamesPage: NextPage<HomeProps> = ({
           }}
         >
           {
-            games.map((g) => (
+            displayGames.map((g) => (
               <li
                 key={g.id}
                 style={{
@@ -81,12 +91,46 @@ const GamesPage: NextPage<HomeProps> = ({
                       boxShadow: '0.125rem 0.25rem 0.25rem rgba(0,0,0,0.0625)'
                     }}
                   >
-                    <Image
-                      alt={g.name}
-                      src={`/games/${g.id}/${g.thumbnail}`}
-                      layout="fill"
-                      className="foo"
-                    />
+                    <div
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: '#ddd',
+                      }}
+                    >
+                      {
+                        g.thumbnail
+                        && (
+                          <Image
+                            alt={g.name}
+                            src={`/games/${g.id}/${g.thumbnail}`}
+                            layout="fill"
+                            className="foo"
+                            onError={handleImageError(g)}
+                          />
+                        )
+                      }
+                      {
+                        !g.thumbnail
+                        && (
+                          <div
+                            style={{
+                              fontSize: '10rem',
+                              display: 'grid',
+                              placeContent: 'center',
+                              width: '100%',
+                              height: '100%',
+                              opacity: 0.125,
+                              filter: 'grayscale(1)',
+                              overflow: 'hidden',
+                              lineHeight: 1,
+                            }}
+                          >
+                            🎮
+                          </div>
+                        )
+                      }
+                    </div>
                     <div
                       style={{
                         position: 'absolute',
@@ -113,12 +157,13 @@ const GamesPage: NextPage<HomeProps> = ({
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const response = await fetch(`http://localhost:3000/api/games`);
+  const response = await fetch('http://localhost:3000/api/games');
   if (response.status !== 200) {
     return {
       notFound: true,
     }
   }
+
   const games = await response.json();
   return {
     props: {
diff --git a/utils/games.ts b/utils/games.ts
index aecd1ad..45ca923 100644
--- a/utils/games.ts
+++ b/utils/games.ts
@@ -7,7 +7,7 @@ export type Game = {
   id: string,
   name: string,
   main: string,
-  thumbnail: string,
+  thumbnail?: string,
   data: {
     aspectRatio: number,
   },
