From 218780a529e1c343d9f2c19e4c6819ee2daaea34 Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Fri, 3 Jan 2020 15:08:15 +0200
Subject: [PATCH] ap view finalized

---
 .../src/components/builds/BuildsBrowser.js    | 24 +++++++++++++--
 .../src/components/common/BuildCard.js        |  9 ++++--
 .../src/components/user/BuildTab.js           |  3 ++
 frontend-react/src/hooks/useLocalStorage.js   | 29 +++++++++++++++++++
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 frontend-react/src/hooks/useLocalStorage.js

diff --git a/frontend-react/src/components/builds/BuildsBrowser.js b/frontend-react/src/components/builds/BuildsBrowser.js
index 93232ab31..b3d555f26 100644
--- a/frontend-react/src/components/builds/BuildsBrowser.js
+++ b/frontend-react/src/components/builds/BuildsBrowser.js
@@ -2,10 +2,11 @@ import React, { useEffect } from "react"
 import { useQuery } from "@apollo/react-hooks"
 import { useQueryParams, StringParam, NumberParam } from "use-query-params"
 import WeaponDropdown from "../common/WeaponDropdown"
+import useLocalStorage from "../../hooks/useLocalStorage"
 import { searchForBuildsByWeapon } from "../../graphql/queries/searchForBuildsByWeapon"
 import Loading from "../common/Loading"
 import Error from "../common/Error"
-import { Card, Header, Pagination, Icon } from "semantic-ui-react"
+import { Card, Header, Pagination, Icon, Radio } from "semantic-ui-react"
 import BuildCard from "../common/BuildCard"
 import WpnImage from "../common/WpnImage"
 
@@ -18,6 +19,10 @@ const BuildsBrowser = () => {
   const { data, error, loading } = useQuery(searchForBuildsByWeapon, {
     variables: query,
   })
+  const [prefersAPView, setPrefersAPView] = useLocalStorage(
+    "prefersAPView",
+    false
+  )
 
   useEffect(() => {
     document.title = weapon
@@ -39,6 +44,16 @@ const BuildsBrowser = () => {
             <>Latest Builds</>
           )}
         </Header>
+        {!weapon && (
+          <div style={{ marginBottom: "1em" }}>
+            <Radio
+              checked={prefersAPView}
+              onChange={() => setPrefersAPView(!prefersAPView)}
+              toggle
+              label="Default to Ability Point view"
+            />
+          </div>
+        )}
         <Pagination
           activePage={page}
           onPageChange={(e, { activePage }) => setQuery({ page: activePage })}
@@ -51,7 +66,12 @@ const BuildsBrowser = () => {
         <Card.Group style={{ marginTop: "1em" }} centered>
           {data.searchForBuildsByWeapon.builds.map(build => {
             return (
-              <BuildCard key={build.id} build={build} showWeapon={!weapon} />
+              <BuildCard
+                key={build.id}
+                build={build}
+                showWeapon={!weapon}
+                prefersAPView={prefersAPView}
+              />
             )
           })}
         </Card.Group>
diff --git a/frontend-react/src/components/common/BuildCard.js b/frontend-react/src/components/common/BuildCard.js
index 850496fb3..c80c36157 100644
--- a/frontend-react/src/components/common/BuildCard.js
+++ b/frontend-react/src/components/common/BuildCard.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { Card, Image, Icon, Popup, Button } from "semantic-ui-react"
 import { useHistory } from "react-router-dom"
 import english_internal from "../../utils/english_internal.json"
@@ -21,13 +21,18 @@ const BuildCard = ({
   setHeadgear,
   setClothing,
   setShoes,
+  prefersAPView,
   showWeapon = true,
   showDescription = true,
 }) => {
   const [showEdit, setShowEdit] = useState(false)
-  const [apView, setApView] = useState(false)
+  const [apView, setApView] = useState(prefersAPView ? prefersAPView : false)
   const history = useHistory()
 
+  useEffect(() => {
+    setApView(prefersAPView)
+  }, [prefersAPView])
+
   if (showEdit) {
     return (
       <div style={{ minWidth: "100%" }}>
diff --git a/frontend-react/src/components/user/BuildTab.js b/frontend-react/src/components/user/BuildTab.js
index 78b897d35..98f058cf5 100644
--- a/frontend-react/src/components/user/BuildTab.js
+++ b/frontend-react/src/components/user/BuildTab.js
@@ -11,6 +11,7 @@ import AddBuildForm from "./AddBuildForm"
 import BuildCard from "../common/BuildCard"
 import Loading from "../common/Loading"
 import Error from "../common/Error"
+import useLocalStorage from "../../hooks/useLocalStorage"
 
 const BuildTab = ({ user, userViewed }) => {
   const { data, error, loading } = useQuery(searchForBuilds, {
@@ -19,6 +20,7 @@ const BuildTab = ({ user, userViewed }) => {
   const [errorMsg, setErrorMsg] = useState(null)
   const [successMsg, setSuccessMsg] = useState(null)
   const [showForm, setShowForm] = useState(false)
+  const [prefersAPView] = useLocalStorage("prefersAPView", false)
 
   const handleError = error => {
     setErrorMsg(error.message)
@@ -141,6 +143,7 @@ const BuildTab = ({ user, userViewed }) => {
               editBuildFunction={editBuildFunction}
               setSuccessMsg={setSuccessMsg}
               buildsArray={data.searchForBuilds}
+              prefersAPView={prefersAPView}
             />
           ))}
         {data.searchForBuilds.length === 0
diff --git a/frontend-react/src/hooks/useLocalStorage.js b/frontend-react/src/hooks/useLocalStorage.js
new file mode 100644
index 000000000..53310ec8d
--- /dev/null
+++ b/frontend-react/src/hooks/useLocalStorage.js
@@ -0,0 +1,29 @@
+import { useState } from "react"
+
+//https://usehooks.com/useLocalStorage/
+function useLocalStorage(key, initialValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key)
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      console.error(error)
+      return initialValue
+    }
+  })
+
+  const setValue = value => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      setStoredValue(valueToStore)
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return [storedValue, setValue]
+}
+
+export default useLocalStorage