diff --git a/client/src/App.jsx b/client/src/App.jsx index d5fda6a2c..34251dd4f 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -4,6 +4,7 @@ import Editor from './features/editors/Editor'; import DefaultPresenter from './features/viewers/DefaultPresenter'; import PresenterView from './features/viewers/presenter/PresenterView'; import { QueryClient, QueryClientProvider } from 'react-query'; +import { broadcastQueryClient } from 'react-query/broadcastQueryClient-experimental'; import SocketProvider from './app/context/socketContext'; import PresenterSimple from './features/viewers/presenter/PresenterSimple'; import StageManager from './features/viewers/backstage/StageManager'; @@ -11,6 +12,10 @@ import withSocket from './features/viewers/ViewWrapper'; import Lower from './features/viewers/lower/Lower'; const queryClient = new QueryClient(); +broadcastQueryClient({ + queryClient, + broadcastChannel: 'ontime', +}); const SDefault = withSocket(DefaultPresenter); const SSpeaker = withSocket(PresenterView); diff --git a/client/src/app/hooks/useFetch.js b/client/src/app/hooks/useFetch.js new file mode 100644 index 000000000..9c3874131 --- /dev/null +++ b/client/src/app/hooks/useFetch.js @@ -0,0 +1,10 @@ +import { useQuery } from 'react-query'; +const refetchIntervalMs = 10000; + +export const useFetch = (namespace, fn) => { + const { data, status, isError, refetch } = useQuery(namespace, fn, { + refetchInterval: refetchIntervalMs, + }); + + return { data, status, isError, refetch }; +}; diff --git a/client/src/features/editors/list/EventListWrapper.jsx b/client/src/features/editors/list/EventListWrapper.jsx index 79676ad41..944163c86 100644 --- a/client/src/features/editors/list/EventListWrapper.jsx +++ b/client/src/features/editors/list/EventListWrapper.jsx @@ -1,4 +1,4 @@ -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useMutation, useQueryClient } from 'react-query'; import { useEffect } from 'react'; import { eventsNamespace, @@ -13,10 +13,11 @@ import EventListMenu from '../../menu/EventListMenu.jsx'; import { showErrorToast } from '../../../common/helpers/toastManager'; import { Skeleton } from '@chakra-ui/skeleton'; import style from './List.module.css'; +import { useFetch } from '../../../app/hooks/useFetch.js'; export default function EventListWrapper() { const queryClient = useQueryClient(); - const { data, status, isError, refetch } = useQuery( + const { data, status, isError, refetch } = useFetch( eventsNamespace, fetchAllEvents ); diff --git a/client/src/features/modals/SettingsModal.jsx b/client/src/features/modals/SettingsModal.jsx index 5ad824c2a..504192d79 100644 --- a/client/src/features/modals/SettingsModal.jsx +++ b/client/src/features/modals/SettingsModal.jsx @@ -19,11 +19,11 @@ import { postEvent, eventNamespace, } from '../../app/api/eventApi'; -import { useQuery } from 'react-query'; import { useEffect, useState } from 'react'; +import { useFetch } from '../../app/hooks/useFetch'; export default function SettingsModal(props) { - const { data, status, isError } = useQuery(eventNamespace, fetchEvent); + const { data, status, isError } = useFetch(eventNamespace, fetchEvent); const [formData, setFormData] = useState({ title: '', url: '', diff --git a/client/src/features/viewers/ViewWrapper.jsx b/client/src/features/viewers/ViewWrapper.jsx index 873642602..46f36f472 100644 --- a/client/src/features/viewers/ViewWrapper.jsx +++ b/client/src/features/viewers/ViewWrapper.jsx @@ -1,9 +1,10 @@ import { useEffect, useState } from 'react'; -import { useQuery } from 'react-query'; import { eventsNamespace, fetchAllEvents } from '../../app/api/eventsApi'; import { fetchEvent, eventNamespace } from '../../app/api/eventApi'; import { useSocket } from '../../app/context/socketContext'; import { stringFromMillis } from '../../common/dateConfig'; +import { useFetch } from '../../app/hooks/useFetch'; + const withSocket = (Component) => { const WrappedComponent = (props) => { @@ -11,12 +12,12 @@ const withSocket = (Component) => { data: eventsData, status: eventsDataStatus, isError: eventsDataIsError, - } = useQuery(eventsNamespace, fetchAllEvents); + } = useFetch(eventsNamespace, fetchAllEvents); const { data: genData, status: genDataStatus, isError: genDataIsError, - } = useQuery(eventNamespace, fetchEvent); + } = useFetch(eventNamespace, fetchEvent); const [publicEvents, setPublicEvents] = useState([]); const [backstageEvents, setBackstageEvents] = useState([]); diff --git a/client/yarn.lock b/client/yarn.lock index 03f7a22a3..8b0404e3c 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1120,14 +1120,14 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": version "7.13.17" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec" integrity sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA== dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.13.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d" integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw== @@ -3451,9 +3451,9 @@ backo2@~1.0.2: integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= balanced-match@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" - integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c= + version "1.0.2" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" + integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== base64-arraybuffer@0.1.4: version "0.1.4" @@ -10055,9 +10055,9 @@ react-qr-code@^1.1.1: qr.js "0.0.0" react-query@^3.13.5: - version "3.13.5" - resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.13.5.tgz#b59e2094014dae0461ed7aab68ae030be41eda8a" - integrity sha512-rL0NO2gVfaeMaVD0Z0yrxZT1oMGejGxGD5t+5d8eC9kpID6oa3r2bFBR3nJeuPhwdGvZtifbB1KJkKdPYaYqVg== + version "3.13.12" + resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.13.12.tgz#d8e432099445fed5b03406838291d42286236263" + integrity sha512-RZYvepBdDG4Xgz64vUHjIkUqXX6giw3xJsgdRjWx+vLkOB1vbIQE8F82CNlVbYW3JjZobl4YzmOuLx0wMhLX4Q== dependencies: "@babel/runtime" "^7.5.5" broadcast-channel "^3.4.1"