Store selected character in local storage

web/src/components/system-view/floating-mapper-controls/FloatingMapperControls.tsx

@@ -5,8 +5,8 @@ import CharacterSelect from "./character-select/CharacterSelect";
 const FloatingMapperControls = () => {
   return (
     <Box sx={{ position: "absolute", top: 0, right: 0 }}>
+      <CharacterSelect />
       <IconButton>
-        <CharacterSelect />
         <SettingsIcon sx={{ width: "auto", height: 70 }} />
       </IconButton>
     </Box>

web/src/components/system-view/floating-mapper-controls/character-select/CharacterSelect.tsx

@@ -3,19 +3,28 @@ import { Button, Menu, MenuItem } from "@mui/material";
 import { sortBy } from "lodash";
 import { useState } from "react";
 import { GetMyUserPreferencesDocument } from "../../../../generated/graphqlOperations";
+import useSelectedCharacter from "../../../../hooks/useSelectedCharacter";
 
 const CharacterSelect = () => {
   const { data } = useQuery(GetMyUserPreferencesDocument);
+  const { selectedCharacter, setSelectedCharacterEveId } =
+    useSelectedCharacter();
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClose = () => {
+  const closeMenu = () => {
     setAnchorEl(null);
   };
 
-  if (!data) {
+  const selectCharacter = (id: number) => {
+    setSelectedCharacterEveId(id);
+    closeMenu();
+  };
+
+  if (!data || !selectedCharacter) {
     return null;
   }
 
@@ -24,10 +33,13 @@ const CharacterSelect = () => {
 
   return (
     <>
-      <Button onClick={handleClick}>Selecter Character</Button>
-      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+      <Button onClick={handleClick}>{selectedCharacter.name}</Button>
+      <Menu anchorEl={anchorEl} open={open} onClose={closeMenu}>
         {characters.map((char) => (
-          <MenuItem key={char.eveId} onClick={handleClose}>
+          <MenuItem
+            key={char.eveId}
+            onClick={() => selectCharacter(char.eveId)}
+          >
             {char.name}
           </MenuItem>
         ))}

web/src/hooks/useSelectedCharacter.tsx

@@ -0,0 +1,67 @@
+import { useQuery } from "@apollo/client";
+import { useEffect } from "react";
+import { useLocalStorage } from "usehooks-ts";
+import {
+  Character,
+  GetMyUserPreferencesDocument,
+} from "../generated/graphqlOperations";
+
+const useSelectedCharacter = () => {
+  const [selectedCharacterEveId, setSelectedCharacterEveId] = useLocalStorage(
+    "holenav-selected-character",
+    0,
+  );
+
+  const { data } = useQuery(GetMyUserPreferencesDocument);
+
+  const characters: Character[] = data
+    ? [data.getMyUserPreferences.user.main].concat(
+        ...data.getMyUserPreferences.user.alts,
+      )
+    : [];
+
+  const characterEveIds = characters.map((char) => char.eveId);
+  const selectedCharacter = characters.find(
+    (char) => char.eveId === selectedCharacterEveId,
+  );
+
+  useEffect(() => {
+    // Select main if character is not selected.
+    if (selectedCharacterEveId === 0 && data) {
+      setSelectedCharacterEveId(data.getMyUserPreferences.user.main.eveId);
+    }
+
+    // Select main if selected character does not exist.
+    if (!characterEveIds.includes(selectedCharacterEveId) && data) {
+      setSelectedCharacterEveId(data.getMyUserPreferences.user.main.eveId);
+    }
+  }, [
+    selectedCharacterEveId,
+    setSelectedCharacterEveId,
+    data,
+    characterEveIds,
+  ]);
+
+  return {
+    /**
+     * Currently selected character EVE ID.
+     *
+     * While this value is always a number for typing convenience, it comes with
+     * the caveat that it may be momentarily zero. This happens if local storage
+     * does not include a value for selected character and the user preferences
+     * query is still fetching.
+     *
+     * Consider using `selectedCharacter` for better handling of loading state.
+     */
+    selectedCharacterEveId,
+    setSelectedCharacterEveId,
+    /**
+     * Full character object from backend for selected character.
+     *
+     * This is `undefined` while the user preferences query is fetching.
+     */
+    selectedCharacter,
+  };
+};
+
+export default useSelectedCharacter;