From 64f284ebb7cc0ae2641944900b4a55139fc9b990 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 15 Apr 2020 20:18:59 +1000
Subject: [PATCH] Added nickname to local storage

---
 src/helpers/useNickname.js | 16 ++++++++++++++++
 src/routes/Game.js         |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/helpers/useNickname.js

diff --git a/src/helpers/useNickname.js b/src/helpers/useNickname.js
new file mode 100644
index 0000000..04475da
--- /dev/null
+++ b/src/helpers/useNickname.js
@@ -0,0 +1,16 @@
+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;
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 4823e47..2830635 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -10,7 +10,7 @@ import { useParams } from "react-router-dom";
 
 import { omit, isStreamStopped } from "../helpers/shared";
 import useSession from "../helpers/useSession";
-import { getRandomMonster } from "../helpers/monsters";
+import useNickname from "../helpers/useNickname";
 
 import Party from "../components/Party";
 import Tokens from "../components/Tokens";
@@ -74,7 +74,7 @@ function Game() {
     }
   }
 
-  const [nickname, setNickname] = useState(getRandomMonster());
+  const { nickname, setNickname } = useNickname();
   const [partyNicknames, setPartyNicknames] = useState({});
 
   function handleNicknameChange(nickname) {