Fetching tags globally every 30 seconds, rather than for each usage of Tags.

app/src/App.js

@@ -19,7 +19,7 @@ import {Donate} from "./components/Donate";
 import {useEventsInterval} from "./Events";
 import {SemanticToastContainer} from "react-semantic-toasts-2";
 import {FilePreviewWrapper} from "./components/FilePreview";
-import {TagsContext, useTags} from "./Tags";
+import {TagsContext, useTags, useTagsInterval} from "./Tags";
 
 function PageNotFound() {
     const {t} = useContext(ThemeContext);
@@ -77,19 +77,23 @@ const router = createBrowserRouter(createRoutesFromElements(<Route
 
 export default function App() {
     const statusValue = useStatusInterval();
+    const tagsValue = useTagsInterval();
+
     useEventsInterval();
 
     return <ThemeWrapper>
-        <FilePreviewWrapper>
-            {/* Context and style to handle switching between mobile/computer. */}
-            <style>{mediaStyles}</style>
-            {/* Toasts can be on any page. */}
-            <SemanticToastContainer position='top-right'/>
-            <MediaContextProvider>
-                <StatusContext.Provider value={statusValue}>
-                    <RouterProvider router={router}/>
-                </StatusContext.Provider>
-            </MediaContextProvider>
-        </FilePreviewWrapper>
+        <TagsContext.Provider value={tagsValue}>
+            <FilePreviewWrapper>
+                {/* Context and style to handle switching between mobile/computer. */}
+                <style>{mediaStyles}</style>
+                {/* Toasts can be on any page. */}
+                <SemanticToastContainer position='top-right'/>
+                <MediaContextProvider>
+                    <StatusContext.Provider value={statusValue}>
+                        <RouterProvider router={router}/>
+                    </StatusContext.Provider>
+                </MediaContextProvider>
+            </FilePreviewWrapper>
+        </TagsContext.Provider>
     </ThemeWrapper>
 }

app/src/Dashboard.js

@@ -12,7 +12,7 @@ import {Divider, Icon, Message} from "semantic-ui-react";
 import Grid from "semantic-ui-react/dist/commonjs/collections/Grid";
 import {refreshFiles} from "./api";
 import _ from "lodash";
-import {TagsDashboard, TagsProvider} from "./Tags";
+import {TagsDashboard} from "./Tags";
 
 function FlagsMessages({flags}) {
     if (!flags) {

app/src/Tags.js

@@ -122,7 +122,7 @@ export const useTagsInterval = () => {
     const tagsValue = useTags();
     const {fetchTags} = tagsValue;
 
-    useRecurringTimeout(fetchTags, 10_000);
+    useRecurringTimeout(fetchTags, 30_000);
 
     return tagsValue
 }
@@ -338,7 +338,7 @@ export const TagsSelector = ({selectedTagNames = [], onToggle = _.noop, onAdd =
     </Grid>
 }
 
-const Dashboard = () => {
+export const TagsDashboard = () => {
     const {tagNames, TagsLinkGroup} = React.useContext(TagsContext);
 
     let availableTagsGroup = <SLoader active inline/>;
@@ -390,12 +390,6 @@ export const TagsDropdown = ({value = [], onChange, ...props}) => {
     />
 }
 
-export const TagsDashboard = () => {
-    return <TagsProvider>
-        <Dashboard/>
-    </TagsProvider>
-}
-
 export const TagsProvider = ({children}) => {
     const value = useTagsInterval();
 

app/src/components/Archive.js

@@ -43,7 +43,7 @@ import _ from "lodash";
 import {ThemeContext} from "../contexts/contexts";
 import {Button, Card, CardIcon, Header, Loader, Placeholder, Segment} from "./Theme";
 import {SortableTable} from "./SortableTable";
-import {taggedImageLabel, TagsProvider, TagsSelector} from "../Tags";
+import {taggedImageLabel, TagsSelector} from "../Tags";
 
 function ArchivePage() {
     const [deleteOpen, setDeleteOpen] = useState(false);
@@ -173,9 +173,7 @@ function ArchivePage() {
         </Segment>
 
         <Segment>
-            <TagsProvider>
-                <TagsSelector selectedTagNames={archiveFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
-            </TagsProvider>
+            <TagsSelector selectedTagNames={archiveFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
         </Segment>
 
         <Segment>

app/src/components/Download.js

@@ -7,7 +7,7 @@ import {ThemeContext} from "../contexts/contexts";
 import {Accordion, Button, Form, FormField, FormGroup, FormInput, Header, Loader, Segment, TextArea} from "./Theme";
 import {AccordionContent, AccordionTitle, FormDropdown} from "semantic-ui-react";
 import {Link} from "react-router-dom";
-import {TagsProvider, TagsSelector} from "../Tags";
+import {TagsSelector} from "../Tags";
 
 const validUrl = /^(http|https):\/\/[^ "]+$/;
 
@@ -105,9 +105,7 @@ class Downloader extends React.Component {
 
         let tagsSelector;
         if (withTags) {
-            tagsSelector = <TagsProvider>
-                <TagsSelector selectedTagNames={tagNames} onToggle={this.handleSelectedTags}/>
-            </TagsProvider>;
+            tagsSelector = <TagsSelector selectedTagNames={tagNames} onToggle={this.handleSelectedTags}/>;
         }
 
         const advancedAccordion = <Accordion>

app/src/components/FilePreview.js

@@ -10,7 +10,7 @@ import {
     ModalContent,
     ModalHeader
 } from "semantic-ui-react";
-import {TagsProvider, TagsSelector} from "../Tags";
+import {TagsSelector} from "../Tags";
 import {Media} from "../contexts/contexts";
 import {encodeMediaPath} from "./Common";
 import {addTag, fetchFile, removeTag} from "../api";
@@ -201,9 +201,8 @@ export function FilePreviewWrapper({children}) {
             openButton = <SButton color='blue' as='a' href={url}>Open</SButton>;
         }
         const closeButton = <SButton onClick={handleClose}>Close</SButton>;
-        const tagsDisplay = <TagsProvider>
-            <TagsSelector selectedTagNames={previewFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
-        </TagsProvider>;
+        const tagsDisplay = <TagsSelector selectedTagNames={previewFile['tags']} onAdd={localAddTag}
+                                          onRemove={localRemoveTag}/>;
         let downloadButton;
         if (downloadURL) {
             downloadButton = <SButton color='yellow' as='a' href={downloadURL} floated='left'>

app/src/components/Files.js

@@ -42,7 +42,7 @@ import _ from 'lodash';
 import {FileBrowser} from "./FileBrowser";
 import {refreshDirectoryFiles, refreshFiles} from "../api";
 import {useSubscribeEventName} from "../Events";
-import {TagsContext, TagsDropdown, TagsProvider} from "../Tags";
+import {TagsDropdown} from "../Tags";
 
 function EbookCard({file}) {
     const {s} = useContext(ThemeContext);
@@ -347,9 +347,7 @@ export function FilesView({
                 {selectButton}
                 {viewButton}
                 {limitDropdown}
-                <TagsProvider>
-                    <TagsFilesGroupDropdown/>
-                </TagsProvider>
+                <TagsFilesGroupDropdown/>
                 {filterOptions && filtersDropdown}
             </Grid.Column>
             {menuColumns}

app/src/components/VideoPlayer.js

@@ -20,7 +20,7 @@ import {useChannel} from "../hooks/customHooks";
 import {ThemeContext} from "../contexts/contexts";
 import {Button, darkTheme, Header, Icon, Segment, Tab, TabPane} from "./Theme";
 import {VideoCard} from "./Videos";
-import {TagsProvider, TagsSelector} from "../Tags";
+import {TagsSelector} from "../Tags";
 
 const MEDIA_PATH = '/media';
 
@@ -221,9 +221,7 @@ function VideoPage({videoFile, prevFile, nextFile, fetchVideo, ...props}) {
             </Segment>
 
             <Segment>
-                <TagsProvider>
-                    <TagsSelector selectedTagNames={videoFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
-                </TagsProvider>
+                <TagsSelector selectedTagNames={videoFile['tags']} onAdd={localAddTag} onRemove={localRemoveTag}/>
             </Segment>
 
             <Tab menu={tabMenu} panes={tabPanes}/>