From 6d79ad23a5f50c4853f8e305bb123295177b0ed5 Mon Sep 17 00:00:00 2001 From: Charles Morgan Date: Sun, 26 Jul 2020 23:32:24 -0400 Subject: [PATCH] Attempt 2? 80% sure this isn't how to use react-helmet.... but it works.... --- package.json | 2 ++ .../scripts/components/server/ServerConsole.tsx | 4 ++++ .../server/backups/BackupContainer.tsx | 5 +++++ .../server/databases/DatabasesContainer.tsx | 5 +++++ .../server/files/FileManagerContainer.tsx | 6 ++++++ .../server/network/NetworkContainer.tsx | 7 +++++++ .../server/schedules/ScheduleContainer.tsx | 5 +++++ .../server/settings/SettingsContainer.tsx | 4 ++++ .../components/server/users/UsersContainer.tsx | 5 +++++ yarn.lock | 17 ++++++++++++++++- 10 files changed, 59 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 99bcf0d37..52d866a06 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-dom": "npm:@hot-loader/react-dom", "react-fast-compare": "^3.2.0", "react-google-recaptcha": "^2.0.1", + "react-helmet": "^6.1.0", "react-hot-loader": "^4.12.21", "react-i18next": "^11.2.1", "react-redux": "^7.1.0", @@ -61,6 +62,7 @@ "@types/query-string": "^6.3.0", "@types/react": "^16.9.41", "@types/react-dom": "^16.9.8", + "@types/react-helmet": "^6.0.0", "@types/react-redux": "^7.1.1", "@types/react-router": "^5.1.3", "@types/react-router-dom": "^5.1.3", diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx index e90c86035..74ba4d750 100644 --- a/resources/scripts/components/server/ServerConsole.tsx +++ b/resources/scripts/components/server/ServerConsole.tsx @@ -1,4 +1,5 @@ import React, { lazy, useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import { ServerContext } from '@/state/server'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons'; @@ -61,6 +62,9 @@ export default () => { return ( + + {server.name} | Console +

diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx index 669f04e84..d75fb2a7d 100644 --- a/resources/scripts/components/server/backups/BackupContainer.tsx +++ b/resources/scripts/components/server/backups/BackupContainer.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import Spinner from '@/components/elements/Spinner'; import getServerBackups from '@/api/server/backups/getServerBackups'; import useServer from '@/plugins/useServer'; @@ -18,6 +19,7 @@ export default () => { const [ loading, setLoading ] = useState(true); const backups = ServerContext.useStoreState(state => state.backups.data); + const server = ServerContext.useStoreState(state => state.server.data!); const setBackups = ServerContext.useStoreActions(actions => actions.backups.setBackups); useEffect(() => { @@ -37,6 +39,9 @@ export default () => { return ( + + {server.name} | Backups + {!backups.length ?

diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx index 486072598..462d90fb1 100644 --- a/resources/scripts/components/server/databases/DatabasesContainer.tsx +++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import getServerDatabases from '@/api/server/getServerDatabases'; import { ServerContext } from '@/state/server'; import { httpErrorToHuman } from '@/api/http'; @@ -19,6 +20,7 @@ export default () => { const [ loading, setLoading ] = useState(true); const databases = ServerContext.useStoreState(state => state.databases.data); + const servername = ServerContext.useStoreState(state => state.server.data.name); const setDatabases = ServerContext.useStoreActions(state => state.databases.setDatabases); useEffect(() => { @@ -36,6 +38,9 @@ export default () => { return ( + + {servername} | Databases + {(!databases.length && loading) ? diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx index def0944c2..9a1b68912 100644 --- a/resources/scripts/components/server/files/FileManagerContainer.tsx +++ b/resources/scripts/components/server/files/FileManagerContainer.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from 'react'; +import { Helmet } from 'react-helmet'; import { httpErrorToHuman } from '@/api/http'; import { CSSTransition } from 'react-transition-group'; import Spinner from '@/components/elements/Spinner'; @@ -26,6 +27,8 @@ export default () => { const { id } = useServer(); const { hash } = useLocation(); const { data: files, error, mutate } = useFileManagerSwr(); + + const servername = ServerContext.useStoreState(state => state.server.data.name); const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory); const setSelectedFiles = ServerContext.useStoreActions(actions => actions.files.setSelectedFiles); @@ -42,6 +45,9 @@ export default () => { return ( + + {servername} | File Manager + { !files ? diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx index 1723f9352..4470f681e 100644 --- a/resources/scripts/components/server/network/NetworkContainer.tsx +++ b/resources/scripts/components/server/network/NetworkContainer.tsx @@ -1,4 +1,6 @@ import React, { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; +import { ServerContext } from '@/state/server'; import tw from 'twin.macro'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faNetworkWired } from '@fortawesome/free-solid-svg-icons'; @@ -28,6 +30,8 @@ const NetworkContainer = () => { const [ loading, setLoading ] = useState(false); const { data, error, mutate } = useSWR(uuid, key => getServerAllocations(key), { initialData: allocations }); + const servername = ServerContext.useStoreState(state => state.server.data.name); + const setPrimaryAllocation = (id: number) => { clearFlashes('server:network'); @@ -61,6 +65,9 @@ const NetworkContainer = () => { return ( + + {servername} | Network + {!data ? : diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx index 0e4ff6bd2..2ee4038cc 100644 --- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx +++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import getServerSchedules from '@/api/server/schedules/getServerSchedules'; import { ServerContext } from '@/state/server'; import Spinner from '@/components/elements/Spinner'; @@ -22,6 +23,7 @@ export default ({ match, history }: RouteComponentProps) => { const [ visible, setVisible ] = useState(false); const schedules = ServerContext.useStoreState(state => state.schedules.data); + const servername = ServerContext.useStoreState(state => state.server.data.name); const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules); useEffect(() => { @@ -37,6 +39,9 @@ export default ({ match, history }: RouteComponentProps) => { return ( + + {servername} | Schedules + {(!schedules.length && loading) ? diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx index e060fedf8..edaa3503f 100644 --- a/resources/scripts/components/server/settings/SettingsContainer.tsx +++ b/resources/scripts/components/server/settings/SettingsContainer.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import { ServerContext } from '@/state/server'; import { useStoreState } from 'easy-peasy'; @@ -20,6 +21,9 @@ export default () => { return ( + + {server.name} | Settings +

diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx index 55f60b449..0925e87df 100644 --- a/resources/scripts/components/server/users/UsersContainer.tsx +++ b/resources/scripts/components/server/users/UsersContainer.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { Helmet } from 'react-helmet'; import { ServerContext } from '@/state/server'; import { Actions, useStoreActions, useStoreState } from 'easy-peasy'; import { ApplicationStore } from '@/state'; @@ -17,6 +18,7 @@ export default () => { const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const subusers = ServerContext.useStoreState(state => state.subusers.data); + const servername = ServerContext.useStoreState(state => state.server.data.name); const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers); const permissions = useStoreState((state: ApplicationStore) => state.permissions.data); @@ -49,6 +51,9 @@ export default () => { return ( + + {servername} | Subusers + {!subusers.length ?

diff --git a/yarn.lock b/yarn.lock index 62c1da6fb..253b6cd86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5564,7 +5564,7 @@ react-fast-compare@^2.0.1: version "2.0.4" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" -react-fast-compare@^3.2.0: +react-fast-compare@^3.1.1, react-fast-compare@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== @@ -5576,6 +5576,16 @@ react-google-recaptcha@^2.0.1: prop-types "^15.5.0" react-async-script "^1.1.1" +react-helmet@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" + integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.1.1" + react-side-effect "^2.1.0" + react-hot-loader@^4.12.21: version "4.12.21" resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975" @@ -5643,6 +5653,11 @@ react-router@5.1.2: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-side-effect@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3" + integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg== + react-transition-group@^4.4.1: version "4.4.1" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"