From e28398b8d0b7168520d8ae1f6eacdffd108f9739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Sat, 29 Apr 2023 21:25:25 +0200
Subject: [PATCH] game list and game detail view done
---
.env.sample | 5 ++++-
app/games/Game.tsx | 13 +++++++++++++
app/games/[gameid]/loading.tsx | 7 +++++++
app/games/[gameid]/page.tsx | 35 ++++++++++++++++++++++++++++++++++
app/games/loading.tsx | 7 +++++++
app/games/page.tsx | 33 ++++++++++++++++++++++++++++++++
next.config.js | 3 +++
7 files changed, 102 insertions(+), 1 deletion(-)
create mode 100644 app/games/Game.tsx
create mode 100644 app/games/[gameid]/loading.tsx
create mode 100644 app/games/[gameid]/page.tsx
create mode 100644 app/games/loading.tsx
create mode 100644 app/games/page.tsx
diff --git a/.env.sample b/.env.sample
index c498ab5..1c34c9d 100644
--- a/.env.sample
+++ b/.env.sample
@@ -4,4 +4,7 @@
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-DATABASE_URL="file:./dev.db"
\ No newline at end of file
+DATABASE_URL="file:./dev.db"
+
+IMDB_CLIENT_ID="imdb-client-id"
+IMDB_AUTH="Bearer imdb-auth-id"
\ No newline at end of file
diff --git a/app/games/Game.tsx b/app/games/Game.tsx
new file mode 100644
index 0000000..505c865
--- /dev/null
+++ b/app/games/Game.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Game({ id, name, cover }: { id: any, name: any, cover: any }) {
+ return (
+ <div>
+ <h1>{name}</h1>
+ <Link href={`/games/${id}`}>
+ <Image src={"https:" + cover.url} alt={name} width={200} height={200} />
+ </Link>
+ </div>
+ )
+}
diff --git a/app/games/[gameid]/loading.tsx b/app/games/[gameid]/loading.tsx
new file mode 100644
index 0000000..21df37b
--- /dev/null
+++ b/app/games/[gameid]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+ return (
+ <div>
+ <h1>Game Loading...</h1>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/app/games/[gameid]/page.tsx b/app/games/[gameid]/page.tsx
new file mode 100644
index 0000000..c385146
--- /dev/null
+++ b/app/games/[gameid]/page.tsx
@@ -0,0 +1,35 @@
+import Image from "next/image";
+
+type DetailView = {
+ id: number;
+ name: string;
+ cover: { url: string };
+ summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+
+
+export default async function GameDetail({ params }: { params: any }) {
+ const res = await fetch("https://api.igdb.com/v4/games", {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+ 'Authorization': `${process.env.IMDB_AUTH}`,
+ },
+ body: `fields name,cover.*,summary; where cover != null; where id = ${params.gameid};`,
+ });
+ const data: DetailViewArray = await res.json()
+
+ return (
+ <div>
+ Game Detail
+ <h1>{data[0].name}</h1>
+ <Image src={"https:" + data[0].cover.url} alt={data[0].name} width={200} height={200} priority />
+ <p>{data[0].summary}</p>
+ </div>
+ )
+}
diff --git a/app/games/loading.tsx b/app/games/loading.tsx
new file mode 100644
index 0000000..9d1c057
--- /dev/null
+++ b/app/games/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+ return (
+ <div>
+ <h1>Games Loading...</h1>
+ </div>
+ )
+}
\ No newline at end of file
diff --git a/app/games/page.tsx b/app/games/page.tsx
new file mode 100644
index 0000000..80ac725
--- /dev/null
+++ b/app/games/page.tsx
@@ -0,0 +1,33 @@
+import Game from "./Game";
+
+type DetailView = {
+ id: number;
+ name: string;
+ cover: { url: string };
+ summary: string;
+}
+
+type DetailViewArray = DetailView[];
+
+export default async function GamesList() {
+ const res = await fetch("https://api.igdb.com/v4/games", {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
+ 'Authorization': `${process.env.IMDB_AUTH}`,
+ },
+ body: `fields name,cover.*; limit 10; where cover != null;`,
+ });
+ const data: DetailViewArray = await res.json()
+
+ return (
+ <div>
+ Games List Page
+ {data.map((game: any) => (
+ <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+ ))}
+ </div>
+ )
+}
diff --git a/next.config.js b/next.config.js
index dafb0c8..0c342d7 100644
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
experimental: {
appDir: true,
},
+ images: {
+ domains: ["images.igdb.com"]
+ }
}
module.exports = nextConfig
--
GitLab