Merged getter and setter atom

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<DiceProps> = (
     onClick,
   }) => {
 
-  const thisPlayer = useAtomValue(getPlayerAtom);
+  const thisPlayer = useAtomValue(thisPlayerAtom);
 
   function handleClick() {
     if (onClick && value) {

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<GameButtonProps> = (
   }) => {
 
   const currentPlayer = useAtomValue(currentPlayerAtom);
-  const thisPlayer = useAtomValue(getPlayerAtom);
+  const thisPlayer = useAtomValue(thisPlayerAtom);
   const players = useAtomValue(playersAtom);
   const activeRollDiceButton = useAtomValue(rollDiceButtonAtom);
 

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(() => {

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<HTMLInputElement>(null);
   const dropdown = useRef<HTMLSelectElement>(null);
-  const setPlayer = useSetAtom(setPlayerAtom);
+  const setPlayer = useSetAtom(thisPlayerAtom);
   const navigate = useNavigate();
 
   function formHandler(): void {

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<ComponentProps> = ({className}) => {
 
   const data = useAtomValue(fetchAtom);
-  const thisPlayer = useAtomValue(getPlayerAtom);
+  const thisPlayer = useAtomValue(thisPlayerAtom);
   const navigate = useNavigate();
 
   async function joinGame(gameId: string): Promise<void> {

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<HTMLFormElement>): Promise<void> {

pac-man-board-game/ClientApp/src/utils/state.ts

@@ -25,10 +25,10 @@ export const allCharactersAtom = atom(get => [...get(playerCharactersAtom), ...g
  */
 const playerAtom = atom<Player | undefined>(undefined);
 /**
- * Gets the player that is currently logged in. If playerAtom is undefined, then it will try to get the player from session storage.
+ * Gets a getter and setter to get or set the player that is currently logged in.
- * @returns An atom representing the player that is currently logged in, or undefined if there is no player 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;
-});
+}, (get, set, player: Player | undefined) => {
-/**
- * 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) => {
   set(playerAtom, player);
   if (player)
     sessionStorage.setItem(playerStorage, JSON.stringify(player));