From 5bf648001b8678c6ef9e821cdea16acdb65ebd96 Mon Sep 17 00:00:00 2001 From: Roland Date: Tue, 25 Oct 2022 15:57:44 -0600 Subject: [PATCH] Adding useTitle to every function page. --- app/src/components/Apps.js | 4 +++- app/src/components/Archive.js | 13 ++++++++++++- app/src/components/Channels.js | 9 +++++++++ app/src/components/Common.js | 6 ++++-- app/src/components/Files.js | 3 +++ app/src/components/Inventory.js | 4 +++- app/src/components/Map.js | 4 +++- app/src/components/Nav.js | 5 +++-- app/src/components/Videos.js | 10 ++++++++-- app/src/components/admin/Admin.js | 2 +- app/src/components/admin/Downloads.js | 3 +++ app/src/components/admin/Status.js | 4 +++- 12 files changed, 55 insertions(+), 12 deletions(-) diff --git a/app/src/components/Apps.js b/app/src/components/Apps.js index 7d9b4824..04ce221f 100644 --- a/app/src/components/Apps.js +++ b/app/src/components/Apps.js @@ -3,7 +3,7 @@ import {Divider, SegmentGroup} from "semantic-ui-react"; import {Route, Routes} from "react-router-dom"; import "../static/wrolpi.css"; import {decryptOTP, encryptOTP} from "../api"; -import {PageContainer} from "./Common"; +import {PageContainer, useTitle} from "./Common"; import {ThemeContext} from "../contexts/contexts"; import {Button, Header, Segment, TextArea} from "./Theme"; @@ -122,6 +122,8 @@ class Decrypt extends React.Component { } function OTP() { + useTitle('One Time Pad'); + const {t} = useContext(ThemeContext); let newPadURL = `http://${window.location.host}/api/otp/html`; diff --git a/app/src/components/Archive.js b/app/src/components/Archive.js index 3ece98f4..f87b8859 100644 --- a/app/src/components/Archive.js +++ b/app/src/components/Archive.js @@ -24,7 +24,8 @@ import { SearchInput, TabLinks, textEllipsis, - uploadDate + uploadDate, + useTitle } from "./Common"; import {deleteArchives, postDownload} from "../api"; import {Link, Route, Routes, useNavigate, useParams} from "react-router-dom"; @@ -44,6 +45,12 @@ function ArchivePage() { const {archiveId} = useParams(); const {archiveFile, alternatives} = useArchive(archiveId); + let title; + if (archiveFile && archiveFile.archive) { + title = archiveFile.archive.title; + } + useTitle(title); + if (archiveFile === null) { return ; } @@ -195,6 +202,8 @@ export function ArchiveCard({file}) { } export function Domains() { + useTitle('Archive Domains'); + const [domains] = useDomains(); const [searchStr, setSearchStr] = useState(''); @@ -258,6 +267,8 @@ function Archives() { const [selectedArchives, setSelectedArchives] = useState([]); const [deleteOpen, setDeleteOpen] = useState(false); + useTitle('Archives'); + let filterOptions = []; if (domains && domains.length > 0) { domains.forEach(i => { diff --git a/app/src/components/Channels.js b/app/src/components/Channels.js index 4d0dbb16..91d61820 100644 --- a/app/src/components/Channels.js +++ b/app/src/components/Channels.js @@ -22,6 +22,7 @@ import { secondsToDate, secondsToFrequency, Toggle, + useTitle, WROLModeMessage } from "./Common"; import {Link, useNavigate, useParams} from "react-router-dom"; @@ -124,6 +125,12 @@ function ChannelPage({create, header}) { const {channelId} = useParams(); const {channel, changeValue, fetchChannel} = useChannel(channelId); + let title; + if (channel && channel.name) { + title = channel.name; + } + useTitle(title); + if (!channel) { return ; } @@ -455,6 +462,7 @@ export function EditChannel(props) { } export function NewChannel(props) { + useTitle('New Channel'); return } @@ -507,6 +515,7 @@ function MobileChannelRow({channel}) { export function Channels() { + useTitle('Channels'); const {channels} = useChannels(); const [searchStr, setSearchStr] = useState(''); diff --git a/app/src/components/Common.js b/app/src/components/Common.js index 4153c7f5..e59542fd 100644 --- a/app/src/components/Common.js +++ b/app/src/components/Common.js @@ -11,6 +11,7 @@ export const VIDEOS_API = `${API_URI}/videos`; export const ARCHIVES_API = `${API_URI}/archive`; export const OTP_API = `${API_URI}/otp`; export const DEFAULT_LIMIT = 20; +export const NAME = process.env && process.env.REACT_APP_NAME ? process.env.REACT_APP_NAME : null; export function Paginator({activePage, onPageChange, totalPages, showFirstAndLast, size = 'mini'}) { const handlePageChange = (e, {activePage}) => { @@ -777,18 +778,19 @@ export function HotspotStatusIcon() { export function useTitle(title) { const documentDefined = typeof document !== 'undefined'; const originalTitle = React.useRef(documentDefined ? document.title : null); + const name = NAME ? `${NAME} WROLPi` : `WROLPi`; useEffect(() => { if (!documentDefined) { return; } - const newTitle = `${title} - WROLPi` + const newTitle = `${title} - ${name}` if (title && document.title !== newTitle) { document.title = newTitle; } return () => { document.title = originalTitle.current; } - }, []); + }, [title]); } diff --git a/app/src/components/Files.js b/app/src/components/Files.js index 96e7c7b0..cecf7cf1 100644 --- a/app/src/components/Files.js +++ b/app/src/components/Files.js @@ -14,6 +14,7 @@ import { Paginator, textEllipsis, uploadDate, + useTitle, VideoCard, VideoRowCells } from "./Common"; @@ -35,6 +36,8 @@ const icons = { }; export function Files() { + useTitle('Files'); + const {t} = useContext(ThemeContext); const {browseFiles, setOpenFolders, fetchFiles} = useBrowseFiles(); diff --git a/app/src/components/Inventory.js b/app/src/components/Inventory.js index 4240c97a..55c5bfc3 100644 --- a/app/src/components/Inventory.js +++ b/app/src/components/Inventory.js @@ -26,7 +26,7 @@ import { } from "semantic-ui-react"; import {Route, Routes} from "react-router-dom"; import {toast} from 'react-semantic-toasts'; -import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks} from './Common'; +import {arraysEqual, enumerate, PageContainer, replaceNullValues, TabLinks, useTitle} from './Common'; import _ from 'lodash'; import {ThemeContext} from "../contexts/contexts"; import {useInventory} from "../hooks/customHooks"; @@ -1096,6 +1096,8 @@ class InventoryAddList extends React.Component { } export function InventoryRoute(props) { + useTitle('Inventory'); + const links = [ {text: 'List', to: '/inventory', key: 'inventory', end: true}, {text: 'Summary', to: '/inventory/summary', key: 'summary'}, diff --git a/app/src/components/Map.js b/app/src/components/Map.js index b34f39f5..7276fc82 100644 --- a/app/src/components/Map.js +++ b/app/src/components/Map.js @@ -1,5 +1,5 @@ import React from "react"; -import {HelpPopup, humanFileSize, PageContainer, TabLinks, WROLModeMessage} from "./Common"; +import {HelpPopup, humanFileSize, PageContainer, TabLinks, useTitle, WROLModeMessage} from "./Common"; import {Route, Routes} from "react-router-dom"; import {getMapImportStatus, importMapFiles} from "../api"; import { @@ -248,6 +248,8 @@ function MapApp() { } export function MapRoute() { + useTitle('Map'); + const links = [ {text: 'Map', to: '/map', key: 'map', end: true}, {text: 'Manage', to: '/map/manage', key: 'manage'}, diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js index f981827f..fc89509c 100644 --- a/app/src/components/Nav.js +++ b/app/src/components/Nav.js @@ -3,7 +3,7 @@ import {NavLink} from "react-router-dom"; import {Dropdown, Menu, Responsive} from "semantic-ui-react"; import {StatusContext, ThemeContext} from "../contexts/contexts"; import Icon from "semantic-ui-react/dist/commonjs/elements/Icon"; -import {DarkModeToggle, HotspotStatusIcon} from "./Common"; +import {DarkModeToggle, HotspotStatusIcon, NAME} from "./Common"; const responsiveWidth = 500; @@ -70,7 +70,8 @@ function NavIcon(props) { export function NavBar() { const {status} = useContext(StatusContext); const wrol_mode = status ? status['wrol_mode'] : null; - const topNavText = wrol_mode ? <>WROLPi  : 'WROLPi'; + const name = NAME || 'WROLPi'; + const topNavText = wrol_mode ? <>{name}  : name; const {i} = useContext(ThemeContext); return ( diff --git a/app/src/components/Videos.js b/app/src/components/Videos.js index 114f6943..92c9d21b 100644 --- a/app/src/components/Videos.js +++ b/app/src/components/Videos.js @@ -29,6 +29,12 @@ export function VideoWrapper() { } function Videos({filter}) { + let title = 'Videos'; + if (filter && filter.indexOf('favorite') >= 0) { + title = 'Favorite Videos'; + } + useTitle(title); + const {channelId} = useParams(); const {searchParams, updateQuery} = useQuery(); const [selectedVideos, setSelectedVideos] = useState([]); @@ -196,6 +202,8 @@ function Videos({filter}) { } function Statistics() { + useTitle('Video Statistics'); + const {statistics} = useVideoStatistics(); const {videos, historical, channels} = statistics; @@ -246,8 +254,6 @@ function Statistics() { } export function VideosRoute(props) { - useTitle('Videos'); - const links = [ {text: 'Videos', to: '/videos', key: 'videos', end: true}, {text: 'Favorites', to: '/videos/favorites', key: 'favorites'}, diff --git a/app/src/components/admin/Admin.js b/app/src/components/admin/Admin.js index c7655e69..adac4ff0 100644 --- a/app/src/components/admin/Admin.js +++ b/app/src/components/admin/Admin.js @@ -1,7 +1,7 @@ import React from 'react'; import {Container} from "semantic-ui-react"; import {getStatus, saveSettings} from "../../api"; -import {PageContainer, TabLinks, Toggle} from "../Common"; +import {PageContainer, TabLinks, Toggle, useTitle} from "../Common"; import {Route, Routes} from "react-router-dom"; import {ThemeContext} from "../../contexts/contexts"; import {Header, Loader} from "../Theme"; diff --git a/app/src/components/admin/Downloads.js b/app/src/components/admin/Downloads.js index d2ea978f..3272d644 100644 --- a/app/src/components/admin/Downloads.js +++ b/app/src/components/admin/Downloads.js @@ -6,6 +6,7 @@ import { secondsToElapsedPopup, secondsToFrequency, textEllipsis, + useTitle, WROLModeMessage } from "../Common"; import { @@ -266,6 +267,8 @@ class StoppableRow extends React.Component { } export function Downloads() { + useTitle('Downloads'); + const {t} = useContext(ThemeContext); const {onceDownloads, recurringDownloads, fetchDownloads} = useDownloads(); diff --git a/app/src/components/admin/Status.js b/app/src/components/admin/Status.js index df82e54c..30fae4cc 100644 --- a/app/src/components/admin/Status.js +++ b/app/src/components/admin/Status.js @@ -1,6 +1,6 @@ import {Header, Progress, Statistic, StatisticGroup} from "../Theme"; import React, {useContext} from "react"; -import {humanBandwidth, humanFileSize, LoadStatistic} from "../Common"; +import {humanBandwidth, humanFileSize, LoadStatistic, useTitle} from "../Common"; import {Divider, Responsive} from "semantic-ui-react"; import {ProgressPlaceholder} from "../Placeholder"; import Grid from "semantic-ui-react/dist/commonjs/collections/Grid"; @@ -141,6 +141,8 @@ export function CPUUsageProgress({value, label}) { } export function Status() { + useTitle('Status'); + const {status} = useContext(StatusContext); let percent;