From 4161a0c0cad7f3c151097166196fa49382ab7cae Mon Sep 17 00:00:00 2001 From: catjoha04-byte Date: Fri, 16 Oct 2026 13:01:28 +0200 Subject: [PATCH 01/11] style: fix cases to camelCase --- README.md | 2 +- src/api/fill_db.ts | 14 +-- src/api/gameClient.ts | 12 +- src/api/logicconnection.ts | 4 +- src/api/userlogic_frontend.ts | 6 +- src/backend/server.ts | 6 +- src/backend/steam.ts | 28 ++--- src/components/SignIn&UpCard.tsx | 5 +- src/components/WishlistCard.tsx | 2 +- src/components/activegamecard.tsx | 8 +- src/components/header.tsx | 8 +- src/components/passivegamecard.tsx | 61 ++-------- src/components/wishlistgamecard.tsx | 8 +- src/css/footer.css | 1 - src/css/gamepage.css | 6 +- src/css/header.css | 23 ++-- src/css/mainpage.css | 171 ++++++++++++--------------- src/css/passivegamecard.css | 16 +-- src/css/profilepage.css | 30 ++--- src/css/searchpage.css | 43 +++---- src/css/wishlistgamecard.css | 4 +- src/css/wishlistpage.css | 10 +- src/pages/gamepage.tsx | 4 +- src/pages/mainpage.tsx | 91 +++++++------- src/pages/profilepage.tsx | 23 ++-- src/pages/searchpage.tsx | 47 +++++--- src/pages/signin.tsx | 2 +- src/pages/signup.tsx | 16 +-- src/pages/wishlistpage.tsx | 20 ++-- src/tests/mainpage.test.tsx | 80 +++++++------ src/tests/passivegamecard.test.tsx | 10 +- src/tests/userlogic_frontend.test.ts | 28 ++--- src/types/game.ts | 2 +- 33 files changed, 363 insertions(+), 428 deletions(-) diff --git a/README.md b/README.md index 457f829..ff44e14 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ The GraphQL backend runs as a user-level systemd service on the VM on port 3001, ├── header.tsx ├── passivegamecard.tsx ├── SignIn&UpCard.tsx - ├── WishlistCard.tsx + ├── wishlistCard.tsx ├── wishlistgamecard.tsx └── 📁css ├── activegamecard.css diff --git a/src/api/fill_db.ts b/src/api/fill_db.ts index a1db2d3..292850d 100644 --- a/src/api/fill_db.ts +++ b/src/api/fill_db.ts @@ -2,14 +2,14 @@ import "dotenv/config" import { pool } from "../backend/db_connection" import { fetchGames } from "../backend/steam" -const BATCH = 200 -const TARGET = 2000 -const START = 200 //changed based on wether it crashes or not +const batch = 200 +const target = 2000 +const start = 200 //changed based on wether it crashes or not -async function fill_db() { +async function fillDb() { try { - for (let offset = START; offset < TARGET; offset += BATCH) { - const games = await fetchGames(BATCH, offset) + for (let offset = start; offset < target; offset += batch) { + const games = await fetchGames(batch, offset) for(const g of games) { await pool.query( `INSERT INTO games (game_id, game_name, current_price, initial_price, discount_percent, image_url, genre, description) @@ -35,4 +35,4 @@ async function fill_db() { } } -fill_db() \ No newline at end of file +fillDb() \ No newline at end of file diff --git a/src/api/gameClient.ts b/src/api/gameClient.ts index fec47f9..55f33dd 100644 --- a/src/api/gameClient.ts +++ b/src/api/gameClient.ts @@ -5,8 +5,8 @@ interface GraphQLResponse { errors?: { message: string }[] } -const CACHE_TTL_MS = 12 * 60 * 60 * 1000 -const GAME_PAGE_SIZE = 500 +const cacheTtlMs = 12 * 60 * 60 * 1000 +const gamePageSize = 500 interface CachedGames { fetchedAt: number @@ -55,7 +55,7 @@ function readCachedGames(key: string): Game[] | null { const cache: unknown = JSON.parse(rawCache) const age = Date.now() - (isCachedGames(cache) ? cache.fetchedAt : 0) - if (isCachedGames(cache) && age >= 0 && age < CACHE_TTL_MS) { + if (isCachedGames(cache) && age >= 0 && age < cacheTtlMs) { return cache.games } @@ -194,11 +194,11 @@ export function getGames(): Promise { async function fetchAllGames(): Promise { const games: Game[] = [] - for (let offset = 0; ; offset += GAME_PAGE_SIZE) { - const page = await fetchGamesFromDB(GAME_PAGE_SIZE, offset) + for (let offset = 0; ; offset += gamePageSize) { + const page = await fetchGamesFromDB(gamePageSize, offset) games.push(...page) - if (page.length < GAME_PAGE_SIZE) return games + if (page.length < gamePageSize) return games } } diff --git a/src/api/logicconnection.ts b/src/api/logicconnection.ts index 154894a..38f1e37 100644 --- a/src/api/logicconnection.ts +++ b/src/api/logicconnection.ts @@ -1,8 +1,8 @@ -const BACKEND_URL = 'http://it2810-10.idi.ntnu.no:3001/' +const backendUrl = 'http://it2810-10.idi.ntnu.no:3001/' export async function gql(query: string, variables: Record): Promise { - const res = await fetch(BACKEND_URL, { + const res = await fetch(backendUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query, variables }), diff --git a/src/api/userlogic_frontend.ts b/src/api/userlogic_frontend.ts index 734fcf8..9def1c9 100644 --- a/src/api/userlogic_frontend.ts +++ b/src/api/userlogic_frontend.ts @@ -6,13 +6,13 @@ export interface User { username: string } -const USER_FIELDS = 'id email username' +const userFields = 'id email username' // Calls upon the backend function to sign in a user. export async function signinUser(email: string, password: string): Promise { const data = await gql<{ signin: User }>( `mutation($email: String!, $password: String!) { - signin(email: $email, password: $password) { ${USER_FIELDS} } + signin(email: $email, password: $password) { ${userFields} } }`, { email, password } ) @@ -23,7 +23,7 @@ export async function signinUser(email: string, password: string): Promise export async function signupUser(username: string, email: string, password: string): Promise { const data = await gql<{ signup: User }>( `mutation($username: String!, $email: String!, $password: String!) { - signup(username: $username, email: $email password: $password) { ${USER_FIELDS} } + signup(username: $username, email: $email password: $password) { ${userFields} } }`, { username, email, password } ) diff --git a/src/backend/server.ts b/src/backend/server.ts index 2ecb143..2e4636f 100644 --- a/src/backend/server.ts +++ b/src/backend/server.ts @@ -9,7 +9,7 @@ import { addToWishlist, removeFromWishlist } from './wishlistLogic.ts' // Documentation on apollo: https://www.apollographql.com/docs/deploy-preview/5dc6222f824f9e089e2a5735/apollo-server/api/apollo-server // Shared column list so `games` and `wishlist` return the same Game shape -const GAME_COLUMNS = ` +const gameColumns = ` g.game_id AS appid, g.game_name AS name, g.current_price::text AS price, @@ -63,7 +63,7 @@ const resolvers = { const safeLimit = Math.min(Math.max(limit, 0), 500) const safeOffset = Math.max(offset, 0) const { rows } = await pool.query( - `SELECT ${GAME_COLUMNS} + `SELECT ${gameColumns} FROM games g ORDER BY g.game_id LIMIT $1 OFFSET $2`, @@ -73,7 +73,7 @@ const resolvers = { }, wishlist: async (_: unknown, { userId }: { userId: number }): Promise => { const { rows } = await pool.query( - `SELECT ${GAME_COLUMNS} + `SELECT ${gameColumns} FROM wishlist w JOIN games g ON g.game_id = w.game_id WHERE w.user_id = $1 diff --git a/src/backend/steam.ts b/src/backend/steam.ts index 67acfff..aa90b5d 100644 --- a/src/backend/steam.ts +++ b/src/backend/steam.ts @@ -32,14 +32,14 @@ interface SteamAppDetails { } } -const HIDDEN_APP_ID = 999999 -const PAGE_SIZE = 1000 +const hiddenAppId = 999999 +const pageSize = 1000 const pageCache = new Map() //Because the bulk fetch happens page wise, we have to know which page to continue fetching from. This function will return the correct page. async function fetchPage(page: number): Promise { - const cached_page = pageCache.get(page) - if(cached_page) return cached_page + const cachedPage = pageCache.get(page) + if(cachedPage) return cachedPage const response = await fetch(`https://steamspy.com/api.php?request=all&page=${page}`) @@ -47,9 +47,9 @@ async function fetchPage(page: number): Promise { throw new Error(`SteamSpy request failed: ${response.status}`) } - const json_res = (await response.json()) as SteamSpyGame - pageCache.set(page, json_res) - return json_res + const jsonResponse = (await response.json()) as SteamSpyGame + pageCache.set(page, jsonResponse) + return jsonResponse } // Run this to start the Api fetch. Will run all the other functions. @@ -61,18 +61,18 @@ export async function fetchGames(limit: number, offset = 0, delayMs = 300): Prom //This contains all the api calls we can do: https://www.steamspy.com/api.php // This fetches "limit" amount of games as a bulk from point "offset" and removes all apps that are hidden (app id = 99999) export async function fetchBulkGames(limit: number, offset: number): Promise { - const firstPage = Math.floor(offset / PAGE_SIZE) - const lastPage = Math.floor((offset + limit - 1) / PAGE_SIZE) + const firstPage = Math.floor(offset / pageSize) + const lastPage = Math.floor((offset + limit - 1) / pageSize) const all = [] for(let page = firstPage; page <= lastPage; page++) { all.push(...Object.values(await fetchPage(page))) } - const start = offset - firstPage * PAGE_SIZE + const start = offset - firstPage * pageSize const games = all .slice(start, start + limit) - .filter((g) => g.appid !== HIDDEN_APP_ID) + .filter((g) => g.appid !== hiddenAppId) return games.map((g) => ({ appid: g.appid, @@ -89,14 +89,14 @@ export async function fetchBulkGames(limit: number, offset: number): Promise { - const filled_games: Game[] = [] + const filledGames: Game[] = [] for (const game of games) { - filled_games.push(await fillGame(game)) + filledGames.push(await fillGame(game)) if (delayMs > 0) { await new Promise((resolve) => setTimeout(resolve, delayMs)) } } - return filled_games + return filledGames } // The "enrichment chamber" diff --git a/src/components/SignIn&UpCard.tsx b/src/components/SignIn&UpCard.tsx index 843970b..7249edd 100644 --- a/src/components/SignIn&UpCard.tsx +++ b/src/components/SignIn&UpCard.tsx @@ -1,6 +1,5 @@ -import { styled } from '@mui/material/styles' -import { createTheme } from '@mui/material/styles' -import MuiCard from '@mui/material/Card' +import { createTheme, styled } from '@mui/material/styles' +import { Card as MuiCard } from '@mui/material' export const authTheme = createTheme({ palette: { diff --git a/src/components/WishlistCard.tsx b/src/components/WishlistCard.tsx index a3c6480..ee397c4 100644 --- a/src/components/WishlistCard.tsx +++ b/src/components/WishlistCard.tsx @@ -1,5 +1,5 @@ import { styled } from '@mui/material/styles' -import MuiCard from '@mui/material/Card' +import { Card as MuiCard } from '@mui/material' export const WishlistCard = styled(MuiCard)(({ theme }) => ({ display: 'flex', diff --git a/src/components/activegamecard.tsx b/src/components/activegamecard.tsx index ea02a6b..5fe31d1 100644 --- a/src/components/activegamecard.tsx +++ b/src/components/activegamecard.tsx @@ -8,13 +8,13 @@ import { removeFromWishlistFrontend, fetchWishlistFrontend } from '../api/wishlistLogicFrontend' -type ActiveGameCardProps = { +type activeGameCardProps = { game: GameData onRemoveFromWishlist?: (gameId: number) => void onAddToWishlist?: (gameId: number) => void } -export default function ActiveGameCard({ game, onAddToWishlist, onRemoveFromWishlist }: ActiveGameCardProps) { +export default function activeGameCard({ game, onAddToWishlist, onRemoveFromWishlist }: activeGameCardProps) { const [isWishlisted, setIsWishlisted] = useState(false) const [isChecking, setIsChecking] = useState(true) const [isBusy, setIsBusy] = useState(false) @@ -161,7 +161,7 @@ export default function ActiveGameCard({ game, onAddToWishlist, onRemoveFromWish /* How to use this: /* The below may be inserted under the imports section of a page. -import ActiveGameCard from '../components/activegamecard' +import activeGameCard from '../components/activegamecard' import games from '../api/mockdata.json' import bigWalk from '../assets/bigwalk.png' */ @@ -173,7 +173,7 @@ import bigWalk from '../assets/bigwalk.png' /* The below may be inserted within the "return (" part of a page. {game && ( - -