From a2d92a34cb3416e4315cefc368b7e801f7de5c54 Mon Sep 17 00:00:00 2001 From: Aurora Lahtela <24460436+AuroraLS3@users.noreply.github.com> Date: Mon, 6 Feb 2023 19:01:33 +0200 Subject: [PATCH] Update to React 18 and react-bootstrap 2 --- Plan/react/dashboard/package.json | 6 +- .../components/accordion/ServerAccordion.js | 2 +- .../components/accordion/SessionAccordion.js | 2 +- .../src/components/cards/CardHeader.js | 2 +- .../cards/common/GeolocationsCard.js | 17 +- .../cards/common/InsightsFor30DaysCard.js | 2 +- .../components/cards/common/PingTableCard.js | 2 +- .../components/cards/common/PlayerListCard.js | 2 +- .../cards/common/PvpKillsTableCard.js | 2 +- .../cards/common/RecentSessionsCard.js | 2 +- .../components/cards/common/ServerPieCard.js | 2 +- .../src/components/cards/common/TrendCard.js | 2 +- .../components/cards/common/WorldPieCard.js | 2 +- .../cards/network/PerformanceGraphsCard.js | 2 +- .../cards/network/QuickViewDataCard.js | 2 +- .../cards/network/QuickViewGraphCard.js | 2 +- .../cards/network/ServersTableCard.js | 17 +- .../components/cards/player/NicknamesCard.js | 2 +- .../cards/player/PvpPveAsNumbersCard.js | 2 +- .../components/cards/query/FilterDropdown.js | 17 +- .../src/components/cards/query/FilterList.js | 4 +- .../cards/query/QueryOptionsCard.js | 6 +- .../cards/query/SessionsWithinViewCard.js | 2 +- .../cards/query/filter/BetweenDatesFilter.js | 2 +- .../query/filter/MultipleChoiceFilter.js | 2 +- .../server/graphs/CurrentPlayerbaseCard.js | 2 +- .../server/graphs/JoinAddressGraphCard.js | 2 +- .../server/graphs/JoinAddressGroupCard.js | 2 +- .../graphs/NetworkOnlineActivityGraphsCard.js | 2 +- .../cards/server/graphs/OnlineActivityCard.js | 2 +- .../server/graphs/OnlineActivityGraphsCard.js | 2 +- .../server/graphs/PerformanceGraphsCard.js | 2 +- .../graphs/PlayerbaseDevelopmentCard.js | 2 +- .../tables/OnlineActivityAsNumbersCard.js | 2 +- .../server/tables/PerformanceAsNumbersCard.js | 2 +- .../server/tables/PlayerbaseTrendsCard.js | 2 +- .../server/tables/PvpPveAsNumbersCard.js | 2 +- .../server/tables/ServerWeekComparisonCard.js | 2 +- .../server/values/ServerAsNumbersCard.js | 2 +- .../components/extensions/ExtensionCard.js | 2 +- .../src/components/graphs/GroupVisualizer.js | 2 +- .../src/components/input/BasicDropdown.js | 8 +- .../src/components/input/DateInputField.js | 2 +- .../src/components/input/TimeInputField.js | 2 +- .../components/modal/ColorSelectorModal.js | 2 +- .../modal/FinalizeRegistrationModal.js | 2 +- .../components/modal/ForgotPasswordModal.js | 2 +- .../modal/PluginInformationModal.js | 2 +- .../modal/VersionInformationModal.js | 2 +- .../src/components/navigation/Header.js | 21 +- .../src/components/navigation/Loader.js | 2 +- .../navigation/PageNavigationItem.js | 4 +- .../src/components/navigation/Sidebar.js | 6 +- Plan/react/dashboard/src/index.js | 17 +- Plan/react/dashboard/src/views/ErrorView.js | 2 +- .../src/views/common/Geolocations.js | 2 +- .../dashboard/src/views/layout/ErrorsPage.js | 2 +- .../dashboard/src/views/layout/LoginPage.js | 2 +- .../src/views/layout/RegisterPage.js | 2 +- .../src/views/network/NetworkJoinAddresses.js | 2 +- .../src/views/network/NetworkOverview.js | 2 +- .../src/views/network/NetworkPerformance.js | 2 +- .../network/NetworkPlayerbaseOverview.js | 2 +- .../src/views/network/NetworkServers.js | 2 +- .../src/views/network/NetworkSessions.js | 2 +- .../src/views/player/PlayerOverview.js | 2 +- .../src/views/player/PlayerPluginData.js | 2 +- .../src/views/player/PlayerPvpPve.js | 2 +- .../src/views/player/PlayerServers.js | 2 +- .../src/views/player/PlayerSessions.js | 2 +- .../dashboard/src/views/players/AllPlayers.js | 2 +- .../dashboard/src/views/query/NewQueryView.js | 2 +- .../src/views/query/QueryResultView.js | 2 +- .../src/views/server/OnlineActivity.js | 2 +- .../src/views/server/PlayerbaseOverview.js | 2 +- .../src/views/server/ServerJoinAddresses.js | 2 +- .../src/views/server/ServerOverview.js | 2 +- .../src/views/server/ServerPerformance.js | 2 +- .../src/views/server/ServerPlayers.js | 2 +- .../src/views/server/ServerPluginData.js | 2 +- .../src/views/server/ServerPvpPve.js | 2 +- .../src/views/server/ServerSessions.js | 2 +- .../src/views/server/ServerWidePluginData.js | 2 +- Plan/react/dashboard/yarn.lock | 186 ++++++++++-------- 84 files changed, 234 insertions(+), 219 deletions(-) diff --git a/Plan/react/dashboard/package.json b/Plan/react/dashboard/package.json index 76fc46dd9..620181596 100644 --- a/Plan/react/dashboard/package.json +++ b/Plan/react/dashboard/package.json @@ -29,9 +29,9 @@ "i18next-http-backend": "^2.1.1", "i18next-localstorage-backend": "^4.1.0", "masonry-layout": "^4.2.2", - "react": "^17.0.2", - "react-bootstrap-v5": "^1.4.0", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-bootstrap": "^2.7.0", + "react-dom": "^18.2.0", "react-i18next": "^12.1.5", "react-mcjsonchat": "^1.0.0", "react-router-dom": "6", diff --git a/Plan/react/dashboard/src/components/accordion/ServerAccordion.js b/Plan/react/dashboard/src/components/accordion/ServerAccordion.js index 05fd89d57..b19a86558 100644 --- a/Plan/react/dashboard/src/components/accordion/ServerAccordion.js +++ b/Plan/react/dashboard/src/components/accordion/ServerAccordion.js @@ -3,7 +3,7 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCrosshairs, faGavel, faLocationArrow, faServer, faSkull} from "@fortawesome/free-solid-svg-icons"; import {faCalendarCheck, faCalendarPlus, faClock} from "@fortawesome/free-regular-svg-icons"; import Datapoint from "../Datapoint"; -import {Col, Row} from "react-bootstrap-v5"; +import {Col, Row} from "react-bootstrap"; import WorldPie from "../graphs/WorldPie"; import Accordion from "./Accordion"; import {faSuperpowers} from "@fortawesome/free-brands-svg-icons"; diff --git a/Plan/react/dashboard/src/components/accordion/SessionAccordion.js b/Plan/react/dashboard/src/components/accordion/SessionAccordion.js index a17ecf39d..81f76b9d1 100644 --- a/Plan/react/dashboard/src/components/accordion/SessionAccordion.js +++ b/Plan/react/dashboard/src/components/accordion/SessionAccordion.js @@ -3,7 +3,7 @@ import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCrosshairs, faServer, faSignal, faSkull, faUser} from "@fortawesome/free-solid-svg-icons"; import {faCalendarPlus, faClock, faMap} from "@fortawesome/free-regular-svg-icons"; import Datapoint from "../Datapoint"; -import {Col, Row} from "react-bootstrap-v5"; +import {Col, Row} from "react-bootstrap"; import WorldPie from "../graphs/WorldPie"; import KillsTable from "../table/KillsTable"; import Accordion from "./Accordion"; diff --git a/Plan/react/dashboard/src/components/cards/CardHeader.js b/Plan/react/dashboard/src/components/cards/CardHeader.js index 3eeedaefb..2454173aa 100644 --- a/Plan/react/dashboard/src/components/cards/CardHeader.js +++ b/Plan/react/dashboard/src/components/cards/CardHeader.js @@ -1,6 +1,6 @@ import React from 'react'; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {useTranslation} from "react-i18next"; const CardHeader = ({icon, color, label}) => { diff --git a/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js b/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js index ebca1fecb..a8d4ca020 100644 --- a/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js +++ b/Plan/react/dashboard/src/components/cards/common/GeolocationsCard.js @@ -1,14 +1,11 @@ import {useTranslation} from "react-i18next"; -import {Card, Col, Dropdown, Row} from "react-bootstrap-v5"; +import {Card, Col, Dropdown, Row} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import React, {useState} from "react"; import {faExclamationTriangle, faGlobe, faLayerGroup} from "@fortawesome/free-solid-svg-icons"; import GeolocationBarGraph from "../../graphs/GeolocationBarGraph"; import GeolocationWorldMap, {ProjectionOptions} from "../../graphs/GeolocationWorldMap"; import {CardLoader} from "../../navigation/Loader"; -import DropdownToggle from "react-bootstrap-v5/lib/esm/DropdownToggle"; -import DropdownMenu from "react-bootstrap-v5/lib/esm/DropdownMenu"; -import DropdownItem from "react-bootstrap-v5/lib/esm/DropdownItem"; const ProjectionDropDown = ({projection, setProjection}) => { const {t} = useTranslation(); @@ -18,18 +15,18 @@ const ProjectionDropDown = ({projection, setProjection}) => { return ( - + {t(projection)} - + - +
{t('html.label.geoProjection.dropdown')}
{projectionOptions.map((option, i) => ( - setProjection(option)}> + setProjection(option)}> {t(option)} - + ))} -
+
) } diff --git a/Plan/react/dashboard/src/components/cards/common/InsightsFor30DaysCard.js b/Plan/react/dashboard/src/components/cards/common/InsightsFor30DaysCard.js index 5df2778c8..7a0418143 100644 --- a/Plan/react/dashboard/src/components/cards/common/InsightsFor30DaysCard.js +++ b/Plan/react/dashboard/src/components/cards/common/InsightsFor30DaysCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import React from "react"; import {faLifeRing} from "@fortawesome/free-regular-svg-icons"; diff --git a/Plan/react/dashboard/src/components/cards/common/PingTableCard.js b/Plan/react/dashboard/src/components/cards/common/PingTableCard.js index e9b3c2552..29305e39d 100644 --- a/Plan/react/dashboard/src/components/cards/common/PingTableCard.js +++ b/Plan/react/dashboard/src/components/cards/common/PingTableCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import CardHeader from "../CardHeader"; import {faWifi} from "@fortawesome/free-solid-svg-icons"; import PingTable from "../../table/PingTable"; diff --git a/Plan/react/dashboard/src/components/cards/common/PlayerListCard.js b/Plan/react/dashboard/src/components/cards/common/PlayerListCard.js index 9fc9b671e..c850ea8e8 100644 --- a/Plan/react/dashboard/src/components/cards/common/PlayerListCard.js +++ b/Plan/react/dashboard/src/components/cards/common/PlayerListCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import React, {useEffect, useState} from "react"; import {faUsers} from "@fortawesome/free-solid-svg-icons"; diff --git a/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js b/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js index 62af23328..1dd2eb2f7 100644 --- a/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js +++ b/Plan/react/dashboard/src/components/cards/common/PvpKillsTableCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCrosshairs} from "@fortawesome/free-solid-svg-icons"; import KillsTable from "../../table/KillsTable"; diff --git a/Plan/react/dashboard/src/components/cards/common/RecentSessionsCard.js b/Plan/react/dashboard/src/components/cards/common/RecentSessionsCard.js index 4c6042cd2..eced43025 100644 --- a/Plan/react/dashboard/src/components/cards/common/RecentSessionsCard.js +++ b/Plan/react/dashboard/src/components/cards/common/RecentSessionsCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCalendar, faHandPointer} from "@fortawesome/free-regular-svg-icons"; import Scrollable from "../../Scrollable"; diff --git a/Plan/react/dashboard/src/components/cards/common/ServerPieCard.js b/Plan/react/dashboard/src/components/cards/common/ServerPieCard.js index 250fcc9a8..8a5138c2d 100644 --- a/Plan/react/dashboard/src/components/cards/common/ServerPieCard.js +++ b/Plan/react/dashboard/src/components/cards/common/ServerPieCard.js @@ -1,4 +1,4 @@ -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import React from "react"; import {CardLoader} from "../../navigation/Loader"; import ServerPie from "../../graphs/ServerPie"; diff --git a/Plan/react/dashboard/src/components/cards/common/TrendCard.js b/Plan/react/dashboard/src/components/cards/common/TrendCard.js index a39916ea3..a54c16f58 100644 --- a/Plan/react/dashboard/src/components/cards/common/TrendCard.js +++ b/Plan/react/dashboard/src/components/cards/common/TrendCard.js @@ -1,4 +1,4 @@ -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import Datapoint from "../../Datapoint"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faLongArrowAltRight} from "@fortawesome/free-solid-svg-icons"; diff --git a/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js b/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js index 006e8e860..65246fdd3 100644 --- a/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js +++ b/Plan/react/dashboard/src/components/cards/common/WorldPieCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faClock} from "@fortawesome/free-regular-svg-icons"; import WorldPie from "../../graphs/WorldPie"; diff --git a/Plan/react/dashboard/src/components/cards/network/PerformanceGraphsCard.js b/Plan/react/dashboard/src/components/cards/network/PerformanceGraphsCard.js index e28774a0b..aae71ce8e 100644 --- a/Plan/react/dashboard/src/components/cards/network/PerformanceGraphsCard.js +++ b/Plan/react/dashboard/src/components/cards/network/PerformanceGraphsCard.js @@ -9,7 +9,7 @@ import { faTachometerAlt, faUser } from "@fortawesome/free-solid-svg-icons"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {useDataRequest} from "../../../hooks/dataFetchHook"; import {fetchPingGraph} from "../../../service/serverService"; import {tooltip, yAxisConfigurations} from "../../../util/graphs"; diff --git a/Plan/react/dashboard/src/components/cards/network/QuickViewDataCard.js b/Plan/react/dashboard/src/components/cards/network/QuickViewDataCard.js index 3aad6395f..a25e023d0 100644 --- a/Plan/react/dashboard/src/components/cards/network/QuickViewDataCard.js +++ b/Plan/react/dashboard/src/components/cards/network/QuickViewDataCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import CardHeader from "../CardHeader"; import { faBookOpen, diff --git a/Plan/react/dashboard/src/components/cards/network/QuickViewGraphCard.js b/Plan/react/dashboard/src/components/cards/network/QuickViewGraphCard.js index 7706c5cda..e1c2c3bd2 100644 --- a/Plan/react/dashboard/src/components/cards/network/QuickViewGraphCard.js +++ b/Plan/react/dashboard/src/components/cards/network/QuickViewGraphCard.js @@ -1,6 +1,6 @@ import React from 'react'; import CardHeader from "../CardHeader"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import PlayersOnlineGraph from "../../graphs/PlayersOnlineGraph"; import {faChartArea} from "@fortawesome/free-solid-svg-icons"; import {useTranslation} from "react-i18next"; diff --git a/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js b/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js index 1f0807827..19be26ba8 100644 --- a/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js +++ b/Plan/react/dashboard/src/components/cards/network/ServersTableCard.js @@ -1,12 +1,9 @@ import React, {useCallback, useState} from 'react'; -import {Card, Dropdown} from "react-bootstrap-v5"; +import {Card, Dropdown} from "react-bootstrap"; import ServersTable, {ServerSortOption} from "../../table/ServersTable"; import {faNetworkWired} from "@fortawesome/free-solid-svg-icons"; import {useTranslation} from "react-i18next"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; -import DropdownToggle from "react-bootstrap-v5/lib/esm/DropdownToggle"; -import DropdownMenu from "react-bootstrap-v5/lib/esm/DropdownMenu"; -import DropdownItem from "react-bootstrap-v5/lib/esm/DropdownItem"; import {CardLoader} from "../../navigation/Loader"; const SortDropDown = ({sortBy, sortReversed, setSortBy}) => { @@ -20,18 +17,18 @@ const SortDropDown = ({sortBy, sortReversed, setSortBy}) => { return ( - + {t(sortBy.label)} - + - +
{t('html.label.sortBy')}
{sortOptions.map((option, i) => ( - setSortBy(option)}> + setSortBy(option)}> {t(option.label)} - + ))} -
+
) } diff --git a/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js b/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js index e5c4fe0f0..c53be82f6 100644 --- a/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js +++ b/Plan/react/dashboard/src/components/cards/player/NicknamesCard.js @@ -1,6 +1,6 @@ import {useTranslation} from "react-i18next"; import {useTheme} from "../../../hooks/themeHook"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faServer, faSignature} from "@fortawesome/free-solid-svg-icons"; import Scrollable from "../../Scrollable"; diff --git a/Plan/react/dashboard/src/components/cards/player/PvpPveAsNumbersCard.js b/Plan/react/dashboard/src/components/cards/player/PvpPveAsNumbersCard.js index d6916bd06..7ef8a2bbe 100644 --- a/Plan/react/dashboard/src/components/cards/player/PvpPveAsNumbersCard.js +++ b/Plan/react/dashboard/src/components/cards/player/PvpPveAsNumbersCard.js @@ -1,5 +1,5 @@ import {useTranslation} from "react-i18next"; -import {Card} from "react-bootstrap-v5"; +import {Card} from "react-bootstrap"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; import {faCampground} from "@fortawesome/free-solid-svg-icons"; import React from "react"; diff --git a/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js b/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js index e15fb2006..4fc99c205 100644 --- a/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js +++ b/Plan/react/dashboard/src/components/cards/query/FilterDropdown.js @@ -1,9 +1,6 @@ import React from 'react'; -import DropdownToggle from "react-bootstrap-v5/lib/esm/DropdownToggle"; import {FontAwesomeIcon as Fa} from "@fortawesome/react-fontawesome"; -import DropdownMenu from "react-bootstrap-v5/lib/esm/DropdownMenu"; -import DropdownItem from "react-bootstrap-v5/lib/esm/DropdownItem"; -import {Dropdown} from "react-bootstrap-v5"; +import {Dropdown} from "react-bootstrap"; import {faPlus} from "@fortawesome/free-solid-svg-icons"; import {useTranslation} from "react-i18next"; import Scrollable from "../../Scrollable"; @@ -47,20 +44,20 @@ const FilterDropdown = ({filterOptions, filters, setFilters}) => { return ( - + {t('html.query.filters.add')} - + - +
{t('html.query.filters.add')}
{filterOptions.map((option, i) => ( - addFilter(option)}> + addFilter(option)}> {getReadableFilterName(option)} - + ))} -
+
) }; diff --git a/Plan/react/dashboard/src/components/cards/query/FilterList.js b/Plan/react/dashboard/src/components/cards/query/FilterList.js index 6314276e4..bc06bb197 100644 --- a/Plan/react/dashboard/src/components/cards/query/FilterList.js +++ b/Plan/react/dashboard/src/components/cards/query/FilterList.js @@ -29,8 +29,8 @@ const FilterList = ({filters, setFilters, setAsInvalid, setAsValid}) => { return (