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));