Implement preferences storage

Plan/react/dashboard/src/components/cards/common/AddressListCard.jsx

@@ -13,6 +13,12 @@ const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
     const [editingName, setEditingName] = useState(false);
     const [name, setName] = useState(group.name);
 
+    useEffect(() => {
+        if (!selectedIndexes.length && allAddresses?.length && group?.addresses?.length) {
+            setSelectedIndexes(group.addresses.map(address => allAddresses.indexOf(address)))
+        }
+    }, [selectedIndexes, group, allAddresses])
+
     const isUpToDate = group.addresses === allAddresses.filter((a, i) => selectedIndexes.includes(i));
     const applySelected = useCallback(() => {
         editGroup({...group, addresses: allAddresses.filter((a, i) => selectedIndexes.includes(i))})
@@ -28,10 +34,14 @@ const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
         <Card>
             <CardHeader icon={faList} color={"amber"} label={
                 editingName ?
-                    <Form.Control style={{maxWidth: "75%", marginTop: "-1rem", marginBottom: "-1rem"}} value={name}
-                                  onChange={e => setName(e.target.value)}/> : group.name
+                    <Form.Control
+                        style={{position: "absolute", top: "0.5rem", left: "2.5rem", width: "calc(100% - 3rem)"}}
+                        value={name}
+                        onChange={e => setName(e.target.value)}/> : group.name
             }>
-                <button style={{marginLeft: "0.5rem"}} onClick={() => setEditingName(!editingName)}>
+                <button
+                    style={editingName ? {position: "absolute", right: "1rem", top: "1.2rem"} : {marginLeft: "0.5rem"}}
+                    onClick={() => setEditingName(!editingName)}>
                     <FontAwesomeIcon icon={editingName ? faCheck : faPencil}/>
                 </button>
             </CardHeader>

Plan/react/dashboard/src/hooks/context/joinAddressListContextHook.jsx

@@ -2,24 +2,42 @@ import {createContext, useCallback, useContext, useEffect, useMemo, useState} fr
 import {randomUuid} from "../../util/uuid.js";
 import {fetchPlayerJoinAddresses} from "../../service/serverService.js";
 import {useNavigation} from "../navigationHook.jsx";
+import {usePreferences} from "../preferencesHook.jsx";
 
 const JoinAddressListContext = createContext({});
 
 export const JoinAddressListContextProvider = ({identifier, children}) => {
     const {updateRequested} = useNavigation();
+    const {preferencesLoaded, getKeyedPreference, setSomePreferences} = usePreferences();
     const [list, setList] = useState([]);
 
+    const updateList = useCallback(newValue => {
+        setList(newValue);
+        const userPreferences = {}
+        userPreferences["join-addresses-" + identifier] = newValue;
+        setSomePreferences(userPreferences);
+    }, [setList])
+
+    useEffect(() => {
+        if (preferencesLoaded && !list.length) {
+            const value = getKeyedPreference("join-addresses-" + identifier);
+            if (value?.length) {
+                setList(value)
+            }
+        }
+    }, [list, setList, preferencesLoaded, getKeyedPreference]);
+
     const add = useCallback(() => {
-        setList([...list, {name: "Address group " + (list.length + 1), addresses: [], uuid: randomUuid()}])
-    }, [list, setList]);
+        updateList([...list, {name: "Address group " + (list.length + 1), addresses: [], uuid: randomUuid()}])
+    }, [updateList, list]);
     const remove = useCallback(index => {
-        setList(list.filter((f, i) => i !== index));
-    }, [setList, list]);
+        updateList(list.filter((f, i) => i !== index));
+    }, [updateList, list]);
     const replace = useCallback((replacement, index) => {
         const newList = [...list];
         newList[index] = replacement;
-        setList(newList)
-    }, [setList, list]);
+        updateList(newList)
+    }, [updateList, list]);
 
     const [allAddresses, setAllAddresses] = useState([]);
     const loadAddresses = useCallback(async () => {
@@ -32,7 +50,7 @@ export const JoinAddressListContextProvider = ({identifier, children}) => {
 
     const sharedState = useMemo(() => {
         return {list, add, remove, replace, allAddresses};
-    }, [list, add, remove, replace]);
+    }, [list, add, remove, replace, allAddresses]);
     return (<JoinAddressListContext.Provider value={sharedState}>
             {children}
         </JoinAddressListContext.Provider>

Plan/react/dashboard/src/hooks/preferencesHook.jsx

@@ -33,7 +33,15 @@ export const PreferencesContextProvider = ({children}) => {
         } else {
             localStorage.setItem("preferences", JSON.stringify(withDefaultsRemoved));
         }
-    }, [defaultPreferences, authRequired, authLoaded, loggedIn]);
+        setPreferences({...defaultPreferences, ...(withDefaultsRemoved || {})});
+    }, [defaultPreferences, authRequired, authLoaded, loggedIn, setPreferences]);
+
+    const setSomePreferences = useCallback(userPref => {
+        storePreferences({...preferences, ...userPref});
+    }, [storePreferences, preferences]);
+    const getKeyedPreference = useCallback(key => {
+        return preferences[key];
+    }, [preferences]);
 
     useEffect(() => {
         updatePreferences();
@@ -42,12 +50,13 @@ export const PreferencesContextProvider = ({children}) => {
     const sharedState = useMemo(() => {
             return {
                 ...preferences,
-                storePreferences,
+                getKeyedPreference,
+                setSomePreferences,
                 defaultPreferences,
                 preferencesLoaded: Object.keys(defaultPreferences || {}).length > 0
             }
         },
-        [preferences, defaultPreferences, storePreferences]);
+        [preferences, defaultPreferences, storePreferences, getKeyedPreference, setSomePreferences]);
     return (<PreferencesContext.Provider value={sharedState}>
             {children}
         </PreferencesContext.Provider>