From 2d248c236493c8e69b549aa85cd1eac470bcce2d Mon Sep 17 00:00:00 2001 From: Martin Berg Alstad <600878@stud.hvl.no> Date: Sat, 22 Jul 2023 16:52:57 +0200 Subject: [PATCH] Merged getter and setter atom --- .../ClientApp/src/components/dice.tsx | 4 ++-- .../ClientApp/src/components/gameButton.tsx | 4 ++-- pac-man-board-game/ClientApp/src/pages/game.tsx | 4 ++-- pac-man-board-game/ClientApp/src/pages/home.tsx | 4 ++-- pac-man-board-game/ClientApp/src/pages/lobby.tsx | 6 +++--- pac-man-board-game/ClientApp/src/pages/login.tsx | 4 ++-- pac-man-board-game/ClientApp/src/utils/state.ts | 14 ++++---------- 7 files changed, 17 insertions(+), 23 deletions(-) diff --git a/pac-man-board-game/ClientApp/src/components/dice.tsx b/pac-man-board-game/ClientApp/src/components/dice.tsx index 42b6ec8..6e2e530 100644 --- a/pac-man-board-game/ClientApp/src/components/dice.tsx +++ b/pac-man-board-game/ClientApp/src/components/dice.tsx @@ -1,6 +1,6 @@ import React, {FC} from "react"; import {useAtom, useAtomValue} from "jotai"; -import {getPlayerAtom, selectedDiceAtom,} from "../utils/state"; +import {selectedDiceAtom, thisPlayerAtom,} from "../utils/state"; import {Button} from "./button"; export const AllDice: FC<{ values?: number[] } & ComponentProps> = ( @@ -38,7 +38,7 @@ export const Dice: FC = ( onClick, }) => { - const thisPlayer = useAtomValue(getPlayerAtom); + const thisPlayer = useAtomValue(thisPlayerAtom); function handleClick() { if (onClick && value) { diff --git a/pac-man-board-game/ClientApp/src/components/gameButton.tsx b/pac-man-board-game/ClientApp/src/components/gameButton.tsx index 9cc8bd3..dc78636 100644 --- a/pac-man-board-game/ClientApp/src/components/gameButton.tsx +++ b/pac-man-board-game/ClientApp/src/components/gameButton.tsx @@ -1,6 +1,6 @@ import React, {FC, MouseEventHandler} from "react"; import {State} from "../game/player"; -import {currentPlayerAtom, getPlayerAtom, playersAtom, rollDiceButtonAtom} from "../utils/state"; +import {currentPlayerAtom, playersAtom, rollDiceButtonAtom, thisPlayerAtom} from "../utils/state"; import {useAtomValue} from "jotai"; import {Button} from "./button"; import rules from "../game/rules"; @@ -17,7 +17,7 @@ const GameButton: FC = ( }) => { const currentPlayer = useAtomValue(currentPlayerAtom); - const thisPlayer = useAtomValue(getPlayerAtom); + const thisPlayer = useAtomValue(thisPlayerAtom); const players = useAtomValue(playersAtom); const activeRollDiceButton = useAtomValue(rollDiceButtonAtom); diff --git a/pac-man-board-game/ClientApp/src/pages/game.tsx b/pac-man-board-game/ClientApp/src/pages/game.tsx index f1489ef..4c13119 100644 --- a/pac-man-board-game/ClientApp/src/pages/game.tsx +++ b/pac-man-board-game/ClientApp/src/pages/game.tsx @@ -1,10 +1,10 @@ import React, {FC, useEffect} from "react"; import {GameComponent} from "../components/gameComponent"; import {useAtomValue} from "jotai"; -import {getPlayerAtom, selectedMapAtom} from "../utils/state"; +import {selectedMapAtom, thisPlayerAtom} from "../utils/state"; const Game: FC = () => { - const player = useAtomValue(getPlayerAtom); + const player = useAtomValue(thisPlayerAtom); const map = useAtomValue(selectedMapAtom); useEffect(() => { diff --git a/pac-man-board-game/ClientApp/src/pages/home.tsx b/pac-man-board-game/ClientApp/src/pages/home.tsx index 4c40b6b..fcb5de7 100644 --- a/pac-man-board-game/ClientApp/src/pages/home.tsx +++ b/pac-man-board-game/ClientApp/src/pages/home.tsx @@ -5,13 +5,13 @@ import Dropdown from "../components/dropdown"; import {Colour, getColours} from "../game/colour"; import {useNavigate} from "react-router-dom"; import {useSetAtom} from "jotai"; -import {setPlayerAtom} from "../utils/state"; +import {thisPlayerAtom} from "../utils/state"; const Home: FC = () => { const input = useRef(null); const dropdown = useRef(null); - const setPlayer = useSetAtom(setPlayerAtom); + const setPlayer = useSetAtom(thisPlayerAtom); const navigate = useNavigate(); function formHandler(): void { diff --git a/pac-man-board-game/ClientApp/src/pages/lobby.tsx b/pac-man-board-game/ClientApp/src/pages/lobby.tsx index 3dd6e41..a2377e5 100644 --- a/pac-man-board-game/ClientApp/src/pages/lobby.tsx +++ b/pac-man-board-game/ClientApp/src/pages/lobby.tsx @@ -1,7 +1,7 @@ import React, {FC, Suspense, useEffect} from "react"; import {atom, useAtomValue} from "jotai"; import {Button} from "../components/button"; -import {getPlayerAtom, selectedMapAtom} from "../utils/state"; +import {selectedMapAtom, thisPlayerAtom} from "../utils/state"; import {getData, postData} from "../utils/api"; import {getPacManSpawns} from "../game/map"; import {useNavigate} from "react-router-dom"; @@ -13,7 +13,7 @@ const fetchAtom = atom(async () => { const LobbyPage: FC = () => { // TODO check if player is defined in storage, if not redirect to login - const thisPlayer = useAtomValue(getPlayerAtom); + const thisPlayer = useAtomValue(thisPlayerAtom); const navigate = useNavigate(); const map = useAtomValue(selectedMapAtom); @@ -54,7 +54,7 @@ export default LobbyPage; const GameTable: FC = ({className}) => { const data = useAtomValue(fetchAtom); - const thisPlayer = useAtomValue(getPlayerAtom); + const thisPlayer = useAtomValue(thisPlayerAtom); const navigate = useNavigate(); async function joinGame(gameId: string): Promise { diff --git a/pac-man-board-game/ClientApp/src/pages/login.tsx b/pac-man-board-game/ClientApp/src/pages/login.tsx index d3450e7..874680a 100644 --- a/pac-man-board-game/ClientApp/src/pages/login.tsx +++ b/pac-man-board-game/ClientApp/src/pages/login.tsx @@ -2,14 +2,14 @@ import React, {FC, FormEvent} from "react"; import {Button} from "../components/button"; import Input from "../components/input"; import {useSetAtom} from "jotai"; -import {setPlayerAtom} from "../utils/state"; +import {thisPlayerAtom} from "../utils/state"; import Player from "../game/player"; import {useNavigate} from "react-router-dom"; import {postData} from "../utils/api"; const Login: FC = () => { - const setThisPlayer = useSetAtom(setPlayerAtom); + const setThisPlayer = useSetAtom(thisPlayerAtom); const navigate = useNavigate(); async function handleLogin(e: FormEvent): Promise { diff --git a/pac-man-board-game/ClientApp/src/utils/state.ts b/pac-man-board-game/ClientApp/src/utils/state.ts index 626e5c5..8759547 100644 --- a/pac-man-board-game/ClientApp/src/utils/state.ts +++ b/pac-man-board-game/ClientApp/src/utils/state.ts @@ -25,10 +25,10 @@ export const allCharactersAtom = atom(get => [...get(playerCharactersAtom), ...g */ const playerAtom = atom(undefined); /** - * Gets the player that is currently logged in. If playerAtom is undefined, then it will try to get the player from session storage. - * @returns An atom representing the player that is currently logged in, or undefined if there is no player logged in. + * Gets a getter and setter to get or set the player that is currently logged in. + * @returns A tuple containing a getter and setter to get or set the player that is currently logged in. */ -export const getPlayerAtom = atom(get => { +export const thisPlayerAtom = atom(get => { const atomValue = get(playerAtom); if (!atomValue) { const item = sessionStorage.getItem(playerStorage); @@ -38,13 +38,7 @@ export const getPlayerAtom = atom(get => { } } return atomValue; -}); -/** - * Sets the player that is currently logged in. If player is undefined, then it will remove the player from session storage. - * @param player The player that is currently logged in, or undefined if there is no player logged in. - * @return An atom used to set the player that is currently logged in. - */ -export const setPlayerAtom = atom(null, (get, set, player: Player | undefined) => { +}, (get, set, player: Player | undefined) => { set(playerAtom, player); if (player) sessionStorage.setItem(playerStorage, JSON.stringify(player));