From 1dcf284b1e70ecf3c6775777c30ae97335d1074c Mon Sep 17 00:00:00 2001
From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com>
Date: Sat, 6 Apr 2024 09:55:57 +0300
Subject: [PATCH] Future proofing
---
.../plan/settings/locale/lang/HtmlLang.java | 2 ++
...dressListCard.jsx => AddressGroupCard.jsx} | 8 +++--
.../cards/common/AddressGroupSelectorRow.jsx | 32 +++++++++++++++++++
.../components/cards/common/JoinAddresses.jsx | 27 ++--------------
.../context/joinAddressListContextHook.jsx | 8 ++++-
5 files changed, 49 insertions(+), 28 deletions(-)
rename Plan/react/dashboard/src/components/cards/common/{AddressListCard.jsx => AddressGroupCard.jsx} (90%)
create mode 100644 Plan/react/dashboard/src/components/cards/common/AddressGroupSelectorRow.jsx
diff --git a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java b/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java
index 00b46125f..92c82c317 100644
--- a/Plan/common/src/main/java/com/djrapitops/plan/settings/locale/lang/HtmlLang.java
+++ b/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"),
diff --git a/Plan/react/dashboard/src/components/cards/common/AddressListCard.jsx b/Plan/react/dashboard/src/components/cards/common/AddressGroupCard.jsx
similarity index 90%
rename from Plan/react/dashboard/src/components/cards/common/AddressListCard.jsx
rename to Plan/react/dashboard/src/components/cards/common/AddressGroupCard.jsx
index 85fda0db8..623d89649 100644
--- a/Plan/react/dashboard/src/components/cards/common/AddressListCard.jsx
+++ b/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}) => {
)
}
-export default AddressListCard;
\ No newline at end of file
+export default AddressGroupCard;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/cards/common/AddressGroupSelectorRow.jsx b/Plan/react/dashboard/src/components/cards/common/AddressGroupSelectorRow.jsx
new file mode 100644
index 000000000..218a1d1c8
--- /dev/null
+++ b/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 (
+
+ {list.map((group, i) =>
+
+ replace(replacement, i)}
+ allAddresses={allAddresses}
+ remove={() => remove(i)}/>
+ )}
+
+
+
+
+ )
+}
+
+export default AddressGroupSelectorRow;
\ No newline at end of file
diff --git a/Plan/react/dashboard/src/components/cards/common/JoinAddresses.jsx b/Plan/react/dashboard/src/components/cards/common/JoinAddresses.jsx
index 8e90a1396..69c98b194 100644
--- a/Plan/react/dashboard/src/components/cards/common/JoinAddresses.jsx
+++ b/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 && }
-
- {list.map((group, i) =>
-
- replace(replacement, i)}
- allAddresses={allAddresses}
- remove={() => remove(i)}/>
- )}
-
-
-
-
+
)
diff --git a/Plan/react/dashboard/src/hooks/context/joinAddressListContextHook.jsx b/Plan/react/dashboard/src/hooks/context/joinAddressListContextHook.jsx
index 98c5cb2dd..42fa3d26d 100644
--- a/Plan/react/dashboard/src/hooks/context/joinAddressListContextHook.jsx
+++ b/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));