Moved nickname into auth and user data into db

src/components/party/ChangeNicknameButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { IconButton } from "theme-ui";
 
 import ChangeNicknameModal from "../../modals/ChangeNicknameModal";
@@ -13,7 +13,12 @@ function ChangeNicknameButton({ nickname, onChange }) {
     setIsChangeModalOpen(false);
   }
 
-  const [changedNickname, setChangedNickname] = useState(nickname);
+  const [changedNickname, setChangedNickname] = useState("");
+
+  useEffect(() => {
+    setChangedNickname(nickname);
+  }, [nickname]);
+
   function handleChangeSubmit(event) {
     event.preventDefault();
     onChange(changedNickname);

src/contexts/AuthContext.js

@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from "react";
 import shortid from "shortid";
 
+import { getRandomMonster } from "../helpers/monsters";
+
+import db from "../database";
+
 const AuthContext = React.createContext();
 
 export function AuthProvider({ children }) {
@@ -16,18 +20,46 @@ export function AuthProvider({ children }) {
 
   const [userId, setUserId] = useState();
   useEffect(() => {
-    const storedUserId = localStorage.getItem("userId");
-    if (storedUserId) {
-      setUserId(storedUserId);
-    } else {
-      const id = shortid.generate();
-      setUserId(id);
-      localStorage.setItem("userId", id);
+    async function loadUserId() {
+      const storedUserId = await db.table("user").get("userId");
+      if (storedUserId) {
+        setUserId(storedUserId.value);
+      } else {
+        const id = shortid.generate();
+        setUserId(id);
+        db.table("user").add({ key: "userId", value: id });
+      }
     }
+
+    loadUserId();
   }, []);
 
+  const [nickname, setNickname] = useState("");
+  useEffect(() => {
+    async function loadNickname() {
+      const storedNickname = await db.table("user").get("nickname");
+      if (storedNickname) {
+        setNickname(storedNickname.value);
+      } else {
+        const name = getRandomMonster();
+        setNickname(name);
+        db.table("user").add({ key: "nickname", value: name });
+      }
+    }
+
+    loadNickname();
+  }, []);
+
+  useEffect(() => {
+    if (nickname !== undefined) {
+      db.table("user").update("nickname", { value: nickname });
+    }
+  }, [nickname]);
+
   const value = {
     userId,
+    nickname,
+    setNickname,
     password,
     setPassword,
     authenticationStatus,

src/database.js

@@ -5,6 +5,7 @@ db.version(1).stores({
   maps: "id",
   states: "mapId",
   tokens: "id",
+  user: "key",
 });
 
 export default db;

src/helpers/useNickname.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-import { getRandomMonster } from "./monsters";
-
-function useNickname() {
-  const [nickname, setNickname] = useState(
-    localStorage.getItem("nickname") || getRandomMonster()
-  );
-
-  useEffect(() => {
-    localStorage.setItem("nickname", nickname);
-  }, [nickname]);
-
-  return { nickname, setNickname };
-}
-
-export default useNickname;

src/routes/Game.js

@@ -6,7 +6,6 @@ import db from "../database";
 
 import { omit, isStreamStopped } from "../helpers/shared";
 import useSession from "../helpers/useSession";
-import useNickname from "../helpers/useNickname";
 import useDebounce from "../helpers/useDebounce";
 
 import Party from "../components/party/Party";
@@ -24,7 +23,9 @@ import { tokens as defaultTokens } from "../tokens";
 
 function Game() {
   const { id: gameId } = useParams();
-  const { authenticationStatus, userId } = useContext(AuthContext);
+  const { authenticationStatus, userId, nickname, setNickname } = useContext(
+    AuthContext
+  );
 
   const { peers, socket } = useSession(
     gameId,
@@ -169,7 +170,6 @@ function Game() {
    * Party state
    */
 
-  const { nickname, setNickname } = useNickname();
   const [partyNicknames, setPartyNicknames] = useState({});
 
   function handleNicknameChange(nickname) {