some initial setup for client

Timtam · Mar 9, 2024 · 6b8c9b7 · 6b8c9b7
1 parent 527b9aa
commit 6b8c9b7
Show file tree

Hide file tree

Showing 12 changed files with 692 additions and 83 deletions.
diff --git a/client/index.html b/client/index.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + React + TS</title>
+        <title>Hitster</title>
     </head>
     <body>
         <div id="root"></div>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -17,7 +17,8 @@
         "react-dom": "^18.2.0",
         "react-helmet-async": "^2.0.4",
         "react-router": "^6.22.3",
-        "react-router-dom": "^6.22.3"
+        "react-router-dom": "^6.22.3",
+        "zod": "^3.22.4"
     },
     "devDependencies": {
         "@types/react": "^18.2.56",
@@ -31,6 +32,8 @@
         "prettier": "^3.2.5",
         "prettier-plugin-organize-imports": "^3.2.4",
         "typescript": "^5.2.2",
-        "vite": "^5.1.4"
+        "vite": "^5.1.4",
+        "vite-plugin-checker": "^0.6.4",
+        "vite-tsconfig-paths": "^4.3.1"
     }
 }
diff --git a/client/src/App.css b/client/src/App.css
diff --git a/client/src/App.tsx b/client/src/App.tsx
diff --git a/client/src/entities.ts b/client/src/entities.ts
@@ -0,0 +1,21 @@
+import { z } from "zod"
+
+export const User = z.object({
+    username: z.string(),
+    id: z.number(),
+})
+
+export type User = z.infer<typeof User>
+
+export const Game = z.object({
+    id: z.number(),
+    players: z.array(User),
+})
+
+export type Game = z.infer<typeof Game>
+
+export const GamesResponse = z.object({
+    games: z.array(Game),
+})
+
+export type GamesResponse = z.infer<typeof GamesResponse>
diff --git a/client/src/error-page.tsx b/client/src/error-page.tsx
@@ -0,0 +1,20 @@
+import { useRouteError, isRouteErrorResponse } from "react-router-dom"
+
+export default function ErrorPage() {
+    const error = useRouteError()
+    console.error(error)
+
+    if (isRouteErrorResponse(error)) {
+        return (
+            <div>
+                <h1>Oops!</h1>
+                <p>Sorry, an unexpected error has occurred.</p>
+                <p>
+                    <i>{error.statusText || error.data?.message}</i>
+                </p>
+            </div>
+        )
+    } else {
+        return <div>Oops</div>
+    }
+}
diff --git a/client/src/layout.tsx b/client/src/layout.tsx
@@ -0,0 +1,13 @@
+import "primereact/resources/themes/lara-light-indigo/theme.css" //theme
+import "primereact/resources/primereact.min.css" //core css
+import "primeicons/primeicons.css" //icons
+import "primeflex/primeflex.css" // flex
+import { Outlet } from "react-router-dom"
+
+export default function Layout() {
+    return (
+        <>
+            <Outlet />
+        </>
+    )
+}
diff --git a/client/src/lobby.tsx b/client/src/lobby.tsx
@@ -0,0 +1,24 @@
+import { Helmet } from "react-helmet-async"
+import { Game } from "./entities"
+import GameService from "./services/games.service"
+import { useLoaderData } from "react-router-dom"
+
+export async function loader(): Promise<Game[]> {
+    let gs = new GameService()
+    return await gs.getAll()
+}
+
+export function Lobby() {
+    let games = useLoaderData() as Game[]
+
+    return (
+        <>
+            <Helmet>
+                <title>Game Lobby - Hitster</title>
+            </Helmet>
+            {games.length
+                ? "Voilla, we found some games!"
+                : "Nope, no games..."}
+        </>
+    )
+}
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,15 +1,32 @@
 import { HelmetProvider } from "react-helmet-async"
+import ErrorPage from "./error-page"
+import Layout from "./layout"
 import React from "react"
 import ReactDOM from "react-dom/client"
-import App from "./App.tsx"
+import { Lobby, loader as LobbyLoader } from "./lobby"
 import { PrimeReactProvider } from "primereact/api"
 import "./index.css"
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+
+const router = createBrowserRouter([
+    {
+        element: <Layout />,
+        children: [
+            {
+                element: <Lobby />,
+                path: "/",
+                loader: LobbyLoader,
+            },
+        ],
+        errorElement: <ErrorPage />,
+    },
+])
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
         <HelmetProvider>
             <PrimeReactProvider>
-                <App />
+                <RouterProvider router={router} />
             </PrimeReactProvider>
         </HelmetProvider>
     </React.StrictMode>,

diff --git a/client/src/services/games.service.tsx b/client/src/services/games.service.tsx
@@ -0,0 +1,10 @@
+import { GamesResponse, Game } from "../entities"
+
+export default class GameService {
+    async getAll(): Promise<Game[]> {
+        let res = await fetch("/api/games/", {
+            method: "GET",
+        })
+        return GamesResponse.parse(await res.json()).games
+    }
+}
diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -1,7 +1,15 @@
 import { defineConfig } from "vite"
+import checker from "vite-plugin-checker"
+import viteTsconfigPaths from "vite-tsconfig-paths"
 import react from "@vitejs/plugin-react-swc"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [
+        react(),
+        viteTsconfigPaths(),
+        checker({
+            typescript: true,
+        }),
+    ],
 })