ap view finalized

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>

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%" }}>

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

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