Vitest performance

PTG/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

PTG/eslint.config.js

@@ -4,6 +4,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
+import eslintConfigPrettier from "eslint-config-prettier/flat";
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -19,4 +20,5 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  eslintConfigPrettier,
 ])

PTG/package.json

@@ -32,10 +32,12 @@
     "@vitejs/plugin-react": "^6.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.9.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.4",
     "globals": "^17.11.0",
     "jsdom": "^30.0.1",
+    "prettier": "3.9.8",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.2",

PTG/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 minimumReleaseAgeExclude:
   - '@tanstack/query-core@5.103.0'
   - '@tanstack/react-query@5.103.0'
+  - prettier@3.9.8

PTG/src/About.css

@@ -1,18 +1,18 @@
-.container{
+.container {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 0 15vw;
     min-height: calc(89.5vh - 60px);
 }
 
-.footer-pin{
+.footer-pin {
     position: relative;
     bottom: 0;
     left: 0;
 }
 
-p{
+p {
     text-align: justify;
     margin-bottom: 1rem;
-}
+}

PTG/src/About.tsx

@@ -2,26 +2,28 @@ import Header from "./Header.tsx";
 import Footer from "./Footer.tsx";
 import "./About.css";
 
-export default function About(){
-    return(
+export default function About() {
+    return (
         <>
             <Header />
             <div className="container">
                 <h1>About</h1>
                 <p>
-                    This is the result of a group project in IT2810 at the Norwegian 
-                    University of Science and Technology (NTNU) by Team-33. 
-                    Yes, we are aware that each Pokédex takes in National Dex as well, so
-                    it is possible getting, e.g. Charizard when picking HG/SS.
-                    This results in end game Pokémon showing up in the Team Generator. 
-                    Please be aware of this when generating a team.
+                    This is the result of a group project in IT2810 at the
+                    Norwegian University of Science and Technology (NTNU) by
+                    Team-33. Yes, we are aware that each Pokédex takes in
+                    National Dex as well, so it is possible getting, e.g.
+                    Charizard when picking HG/SS. This results in end game
+                    Pokémon showing up in the Team Generator. Please be aware of
+                    this when generating a team.
                 </p>
                 <p>
-                    This website is made by students, and is made for training reasons,
-                    also for lazy people not wanting to pick a team themselves. Contact information
-                    can be found at the footer of the home page and this page. Any feedback will be deeply appreciated,
-                    as it will be used as a tool to sharpen our skills and improve our work in the
-                    second project.
+                    This website is made by students, and is made for training
+                    reasons, also for lazy people not wanting to pick a team
+                    themselves. Contact information can be found at the footer
+                    of the home page and this page. Any feedback will be deeply
+                    appreciated, as it will be used as a tool to sharpen our
+                    skills and improve our work in the second project.
                 </p>
             </div>
             <div className="footer-pin">

PTG/src/App.css

@@ -1,9 +1,9 @@
-.content{
+.content {
     min-height: calc(100vh - 60px);
 }
 
-.footer-pin{
+.footer-pin {
     position: relative;
     bottom: 0;
     left: 0;
-}
+}

PTG/src/App.tsx

@@ -1,50 +1,66 @@
 import { useEffect, useState } from "react";
-import Header from "./Header.tsx"
-import Footer from "./Footer.tsx"
-import "./App.css"
+import Header from "./Header.tsx";
+import Footer from "./Footer.tsx";
+import "./App.css";
 import ChoosePokemon from "./ChoosePokemon.tsx";
 import Team from "./Team.tsx";
 import PokemonGrid from "./PokemonGrid.tsx";
 import { loadStoredFilters, saveStoredFilters } from "./pokemonFilters.ts";
 import { usePokemonTeam } from "./usePokemonTeam.ts";
 
-export default function App(){
-	const [selectedGame, setSelectedGame] = useState(() => loadStoredFilters().selectedGame);
-	const [selectedType, setSelectedType] = useState(() => loadStoredFilters().selectedType);
-	const [selectedName, setSelectedName] = useState(() => loadStoredFilters().selectedName);
+export default function App() {
+    const [selectedGame, setSelectedGame] = useState(
+        () => loadStoredFilters().selectedGame,
+    );
+    const [selectedType, setSelectedType] = useState(
+        () => loadStoredFilters().selectedType,
+    );
+    const [selectedName, setSelectedName] = useState(
+        () => loadStoredFilters().selectedName,
+    );
 
-	useEffect(() => {
-		saveStoredFilters({ selectedGame, selectedType, selectedName });
-	}, [selectedGame, selectedType, selectedName]);
+    useEffect(() => {
+        saveStoredFilters({ selectedGame, selectedType, selectedName });
+    }, [selectedGame, selectedType, selectedName]);
 
-	const { team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite } = usePokemonTeam(selectedGame, selectedType, selectedName);
+    const {
+        team,
+        pokemonById,
+        typeMap,
+        allFavourited,
+        generateTeam,
+        toggleFavourite,
+    } = usePokemonTeam(selectedGame, selectedType, selectedName);
 
-	return(
-		<div>
-			<div className="content">
-				<Header />
-				<ChoosePokemon
-					selectedGame={selectedGame}
-					selectedType={selectedType}
-					selectedName={selectedName}
-					onGameChange={setSelectedGame}
-					onTypeChange={setSelectedType}
-					onNameChange={setSelectedName}
-				/>
-				<Team
-					team={team}
-					pokemonById={pokemonById}
-					typeMap={typeMap}
-					allFavourited={allFavourited}
-					generateTeam={generateTeam}
-					toggleFavourite={toggleFavourite}
-				/>
-				<PokemonGrid selectedGame={selectedGame} selectedType={selectedType} selectedName={selectedName} />
-			</div>
-			<div className="footer-pin">
-				<Footer/>
-			</div>
-		</div>
-
-	);
+    return (
+        <div>
+            <div className="content">
+                <Header />
+                <ChoosePokemon
+                    selectedGame={selectedGame}
+                    selectedType={selectedType}
+                    selectedName={selectedName}
+                    onGameChange={setSelectedGame}
+                    onTypeChange={setSelectedType}
+                    onNameChange={setSelectedName}
+                />
+                <Team
+                    team={team}
+                    pokemonById={pokemonById}
+                    typeMap={typeMap}
+                    allFavourited={allFavourited}
+                    generateTeam={generateTeam}
+                    toggleFavourite={toggleFavourite}
+                />
+                <PokemonGrid
+                    selectedGame={selectedGame}
+                    selectedType={selectedType}
+                    selectedName={selectedName}
+                />
+            </div>
+            <div className="footer-pin">
+                <Footer />
+            </div>
+        </div>
+    );
 }

PTG/src/ChoosePokemon.css

@@ -1,18 +1,18 @@
 .chooseType {
-	field-sizing: content;
-	width: fit-content;
-	max-width: 100%;
-	margin-left: 1%;
-	min-height: 1.5rem;
-	border-radius: 0;
-	height: 20px;
+    field-sizing: content;
+    width: fit-content;
+    max-width: 100%;
+    margin-left: 1%;
+    min-height: 1.5rem;
+    border-radius: 0;
+    height: 20px;
 }
 
 .chooseName {
-	field-sizing: content;
-	width: fit-content;
-	max-width: 100%;
-	min-width: 50px;
-	margin-left: 1rem;
-	height: 20px;
-}
+    field-sizing: content;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 50px;
+    margin-left: 1rem;
+    height: 20px;
+}