tsivinsky/games-wishlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

idk even know anymore

Browse Source 
i think i added games
This commit is contained in:
Dan Tsivinsky
2026-02-15 21:48:01 +03:00
parent 7ced62517a
commit c357e78003
18 changed files with 568 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@base-ui/react": "^1.2.0",
"@tailwindcss/vite": "^4.1.18",
"@tanstack/react-query": "^5.90.21",
"react": "^19.2.0",

105
web/pnpm-lock.yaml generated
View File

@@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@base-ui/react':
specifier: ^1.2.0
version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@tailwindcss/vite':
specifier: ^4.1.18
version: 4.1.18(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(lightningcss@1.30.2))
@@ -140,6 +143,10 @@ packages:
peerDependencies:
'@babel/core': ^7.0.0-0
'@babel/runtime@7.28.6':
resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
engines: {node: '>=6.9.0'}
'@babel/template@7.28.6':
resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
engines: {node: '>=6.9.0'}
@@ -152,6 +159,27 @@ packages:
resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
engines: {node: '>=6.9.0'}
'@base-ui/react@1.2.0':
resolution: {integrity: sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@types/react': ^17 || ^18 || ^19
react: ^17 || ^18 || ^19
react-dom: ^17 || ^18 || ^19
peerDependenciesMeta:
'@types/react':
optional: true
'@base-ui/utils@0.2.5':
resolution: {integrity: sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==}
peerDependencies:
'@types/react': ^17 || ^18 || ^19
react: ^17 || ^18 || ^19
react-dom: ^17 || ^18 || ^19
peerDependenciesMeta:
'@types/react':
optional: true
'@esbuild/aix-ppc64@0.27.3':
resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
engines: {node: '>=18'}
@@ -346,6 +374,21 @@ packages:
resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@floating-ui/core@1.7.4':
resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
'@floating-ui/dom@1.7.5':
resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
'@floating-ui/react-dom@2.1.7':
resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/utils@0.2.10':
resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
'@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'}
@@ -1156,6 +1199,9 @@ packages:
resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
engines: {node: '>=0.10.0'}
reselect@5.1.1:
resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -1197,6 +1243,9 @@ packages:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}
tabbable@6.4.0:
resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
tailwindcss@4.1.18:
resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
@@ -1242,6 +1291,11 @@ packages:
uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
use-sync-external-store@1.6.0:
resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
vite@7.3.1:
resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -1398,6 +1452,8 @@ snapshots:
'@babel/core': 7.29.0
'@babel/helper-plugin-utils': 7.28.6
'@babel/runtime@7.28.6': {}
'@babel/template@7.28.6':
dependencies:
'@babel/code-frame': 7.29.0
@@ -1421,6 +1477,30 @@ snapshots:
'@babel/helper-string-parser': 7.27.1
'@babel/helper-validator-identifier': 7.28.5
'@base-ui/react@1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@babel/runtime': 7.28.6
'@base-ui/utils': 0.2.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@floating-ui/react-dom': 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@floating-ui/utils': 0.2.10
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
tabbable: 6.4.0
use-sync-external-store: 1.6.0(react@19.2.4)
optionalDependencies:
'@types/react': 19.2.14
'@base-ui/utils@0.2.5(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@babel/runtime': 7.28.6
'@floating-ui/utils': 0.2.10
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
reselect: 5.1.1
use-sync-external-store: 1.6.0(react@19.2.4)
optionalDependencies:
'@types/react': 19.2.14
'@esbuild/aix-ppc64@0.27.3':
optional: true
@@ -1545,6 +1625,23 @@ snapshots:
'@eslint/core': 0.17.0
levn: 0.4.1
'@floating-ui/core@1.7.4':
dependencies:
'@floating-ui/utils': 0.2.10
'@floating-ui/dom@1.7.5':
dependencies:
'@floating-ui/core': 1.7.4
'@floating-ui/utils': 0.2.10
'@floating-ui/react-dom@2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
dependencies:
'@floating-ui/dom': 1.7.5
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
'@floating-ui/utils@0.2.10': {}
'@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.7':
@@ -2295,6 +2392,8 @@ snapshots:
react@19.2.4: {}
reselect@5.1.1: {}
resolve-from@4.0.0: {}
rollup@4.57.1:
@@ -2348,6 +2447,8 @@ snapshots:
dependencies:
has-flag: 4.0.0
tabbable@6.4.0: {}
tailwindcss@4.1.18: {}
tapable@2.3.0: {}
@@ -2390,6 +2491,10 @@ snapshots:
dependencies:
punycode: 2.3.1
use-sync-external-store@1.6.0(react@19.2.4):
dependencies:
react: 19.2.4
vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(lightningcss@1.30.2):
dependencies:
esbuild: 0.27.3

11
web/src/App.tsx
View File

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { AuthModal } from "./components/AuthModal";
import { useUserQuery } from "./api/user";
import { Header } from "./components/Header";
import { AddGameForm } from "./components/AddGameForm";
export default function App() {
const { data: user, isFetched } = useUserQuery();
@@ -34,6 +35,16 @@ export default function App() {
)}
<Header />
<AddGameForm />
<div className="mt-5 border-t pt-2 flex flex-col gap-2">
{user?.games.map((game) => (
<div key={game.id}>
<img src={game.image} alt="" className="w-32 aspect-video" />
<span>{game.name}</span>
</div>
))}
</div>
</div>
);
}

33
web/src/api/games.ts Normal file
View File

@@ -0,0 +1,33 @@
import { useMutation, useQuery } from "@tanstack/react-query";
export type SearchGame = {
name: string;
steamAppId: number;
image: string;
releaseDate: string;
};
export const useSearchGamesQuery = (params: { search: string }) => {
return useQuery({
queryKey: ["search-games", params],
queryFn: async () => {
const q = new URLSearchParams();
q.set("q", params.search);
const resp = await fetch(`/api/search/games?${q.toString()}`);
return (await resp.json()) as SearchGame[];
},
});
};
export const useAddGameMutation = () => {
return useMutation({
mutationFn: async (data: { steamAppId: number }) => {
const resp = await fetch("/api/user/games", {
method: "POST",
body: JSON.stringify(data),
});
return await resp.json();
},
});
};

12
web/src/api/user.ts
View File

@@ -1,8 +1,20 @@
import { useQuery } from "@tanstack/react-query";
export type Game = {
id: number;
name: string;
steamAppId: number;
releaseDate: string;
image: string;
createdAt: string;
updatedAt: string;
deletedAt: string | null;
};
export type User = {
id: number;
login: string;
games: Game[];
createdAt: string;
updatedAt: string;
deletedAt: string | null;

81
web/src/components/AddGameForm.tsx Normal file
View File

@@ -0,0 +1,81 @@
import { Autocomplete } from "@base-ui/react";
import { Controller, useForm } from "react-hook-form";
import {
useAddGameMutation,
useSearchGamesQuery,
type SearchGame,
} from "../api/games";
import { useQueryClient } from "@tanstack/react-query";
export const AddGameForm = () => {
const queryClient = useQueryClient();
const mutation = useAddGameMutation();
const form = useForm<{ appId: string; query: string }>({
defaultValues: {
appId: "",
query: "",
},
});
const query = form.watch("query");
const { data: games } = useSearchGamesQuery({ search: query });
const onSubmit = form.handleSubmit((data) => {
if (!data.appId) return;
mutation.mutate(
{
steamAppId: parseInt(data.appId),
},
{
onSuccess() {
form.reset();
queryClient.invalidateQueries({ queryKey: ["user"] });
},
},
);
});
return (
<form className="w-full flex gap-3 mt-5" onSubmit={onSubmit}>
<Controller
control={form.control}
name="appId"
render={({ field }) => (
<Autocomplete.Root
items={games || []}
{...field}
value={field.value || ""}
onValueChange={field.onChange}
>
<Autocomplete.Input
type="text"
placeholder="game name"
className="w-full"
value={query}
onChange={(e) => form.setValue("query", e.target.value)}
/>
<Autocomplete.Portal>
<Autocomplete.Positioner>
<Autocomplete.Popup>
<Autocomplete.Empty>No games found</Autocomplete.Empty>
<Autocomplete.List>
{(game: SearchGame, i) => (
<Autocomplete.Item key={i} value={game.steamAppId}>
{game.name}
</Autocomplete.Item>
)}
</Autocomplete.List>
</Autocomplete.Popup>
</Autocomplete.Positioner>
</Autocomplete.Portal>
</Autocomplete.Root>
)}
/>
<button type="submit" className="whitespace-nowrap">
Add game
</button>
</form>
);
};