Future proofing

Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java

@@ -219,6 +219,8 @@ public enum HtmlLang implements Lang {
     LABEL_TITLE_SERVER_CALENDAR("html.label.serverCalendar", "Server Calendar"),
     LABEL_TITLE_NETWORK_CALENDAR("html.label.networkCalendar", "Network Calendar"),
     LABEL_LABEL_JOIN_ADDRESS("html.label.joinAddress", "Join Address"),
+    LABEL_ADD_JOIN_ADDRESS_GROUP("html.label.addJoinAddressGroup", "Add address group"),
+    LABEL_ADDRESS_GROUP("html.label.addressGroup", "Address group {{n}}"),
     LABEL_LABEL_SESSION_MEDIAN("html.label.medianSessionLength", "Median Session Length"),
     LABEL_LABEL_KDR("html.label.kdr", "KDR"),
     LABEL_TITLE_INSIGHTS("html.label.insights", "Insights"),

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

@@ -7,7 +7,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import MultiSelect from "../../input/MultiSelect.jsx";
 import {faTrashAlt} from "@fortawesome/free-regular-svg-icons";
 
-const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
+const AddressGroupCard = ({n, group, editGroup, allAddresses, remove}) => {
     const {t} = useTranslation();
     const [selectedIndexes, setSelectedIndexes] = useState([]);
     const [editingName, setEditingName] = useState(false);
@@ -15,7 +15,9 @@ const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
 
     useEffect(() => {
         if (!selectedIndexes.length && allAddresses?.length && group?.addresses?.length) {
-            setSelectedIndexes(group.addresses.map(address => allAddresses.indexOf(address)))
+            setSelectedIndexes(group.addresses
+                .map(address => allAddresses.indexOf(address))
+                .filter(index => index !== -1)) // Make sure addresses are not selected that no longer exist
         }
     }, [selectedIndexes, group, allAddresses])
 
@@ -61,4 +63,4 @@ const AddressListCard = ({n, group, editGroup, allAddresses, remove}) => {
         </Card>
     )
 }
-export default AddressListCard;
+export default AddressGroupCard;

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

@@ -0,0 +1,32 @@
+import {Col, Row} from "react-bootstrap";
+import AddressGroupCard from "./AddressGroupCard.jsx";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+import {useTranslation} from "react-i18next";
+import {useJoinAddressListContext} from "../../../hooks/context/joinAddressListContextHook.jsx";
+
+const AddressGroupSelectorRow = () => {
+    const {t} = useTranslation();
+    const {list, add, remove, replace, allAddresses} = useJoinAddressListContext();
+
+    return (
+        <Row>
+            {list.map((group, i) =>
+                <Col lg={2} key={group.uuid}>
+                    <AddressGroupCard n={i + 1}
+                                      group={group}
+                                      editGroup={replacement => replace(replacement, i)}
+                                      allAddresses={allAddresses}
+                                      remove={() => remove(i)}/>
+                </Col>)}
+            <Col lg={2}>
+                <button className={"btn bg-theme mb-4"} onClick={add}>
+                    <FontAwesomeIcon icon={faPlus}/> {t('html.label.addJoinAddressGroup')}
+                </button>
+            </Col>
+        </Row>
+    )
+}
+
+export default AddressGroupSelectorRow;

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

@@ -1,20 +1,13 @@
 import LoadIn from "../../animation/LoadIn.jsx";
 import ExtendableRow from "../../layout/extension/ExtendableRow.jsx";
 import JoinAddressGraphCard from "../server/graphs/JoinAddressGraphCard.jsx";
-import {Col, Row} from "react-bootstrap";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {Col} from "react-bootstrap";
 import React from "react";
 import {useAuth} from "../../../hooks/authenticationHook.jsx";
-import {useTranslation} from "react-i18next";
-import {useJoinAddressListContext} from "../../../hooks/context/joinAddressListContextHook.jsx";
-import AddressListCard from "./AddressListCard.jsx";
+import AddressGroupSelectorRow from "./AddressGroupSelectorRow.jsx";
 
 const JoinAddresses = ({id, permission, identifier}) => {
-    const {t} = useTranslation();
     const {hasPermission} = useAuth();
-    const {list, add, remove, replace, allAddresses} = useJoinAddressListContext();
-
     const seeTime = hasPermission(permission);
 
     return (
@@ -25,21 +18,7 @@ const JoinAddresses = ({id, permission, identifier}) => {
                         {seeTime && <JoinAddressGraphCard identifier={identifier}/>}
                     </Col>
                 </ExtendableRow>
-                <Row>
-                    {list.map((group, i) =>
-                        <Col lg={2} key={group.uuid}>
-                            <AddressListCard n={i + 1}
-                                             group={group}
-                                             editGroup={replacement => replace(replacement, i)}
-                                             allAddresses={allAddresses}
-                                             remove={() => remove(i)}/>
-                        </Col>)}
-                    <Col lg={2}>
-                        <button className={"btn bg-theme mb-4"} onClick={add}>
-                            <FontAwesomeIcon icon={faPlus}/> Add address group
-                        </button>
-                    </Col>
-                </Row>
+                <AddressGroupSelectorRow/>
             </section>
         </LoadIn>
     )

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

@@ -3,10 +3,12 @@ import {randomUuid} from "../../util/uuid.js";
 import {fetchPlayerJoinAddresses} from "../../service/serverService.js";
 import {useNavigation} from "../navigationHook.jsx";
 import {usePreferences} from "../preferencesHook.jsx";
+import {useTranslation} from "react-i18next";
 
 const JoinAddressListContext = createContext({});
 
 export const JoinAddressListContextProvider = ({identifier, children}) => {
+    const {t} = useTranslation();
     const {updateRequested} = useNavigation();
     const {preferencesLoaded, getKeyedPreference, setSomePreferences} = usePreferences();
     const [list, setList] = useState([]);
@@ -28,7 +30,11 @@ export const JoinAddressListContextProvider = ({identifier, children}) => {
     }, [list, setList, preferencesLoaded, getKeyedPreference]);
 
     const add = useCallback(() => {
-        updateList([...list, {name: "Address group " + (list.length + 1), addresses: [], uuid: randomUuid()}])
+        updateList([...list, {
+            name: t('html.label.addressGroup').replace("{{n}}", list.length + 1),
+            addresses: [],
+            uuid: randomUuid()
+        }])
     }, [updateList, list]);
     const remove = useCallback(index => {
         updateList(list.filter((f, i) => i !== index));