Refetching global data on window focus

This commit is contained in:
mrfry 2022-03-20 10:18:40 +01:00
parent c2f991254a
commit 63cee06451
3 changed files with 222 additions and 43 deletions

View file

@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react'
import { useQuery, QueryClientProvider, QueryClient } from 'react-query'
import Head from 'next/head'
import Layout from '../components/layout'
@ -6,46 +7,50 @@ import Layout from '../components/layout'
import '../defaultStyles.css'
import constants from '../constants.json'
function MyApp({ Component, pageProps, router }) {
const [userId, setUserId] = useState()
const [motd, setMotd] = useState()
const [unreads, setUnreads] = useState()
const [globalState, setGlobalState] = useState({})
const queryClient = new QueryClient()
const getGlobalProps = () => {
const getGlobalProps = () => {
return new Promise((resolve) => {
fetch(`${constants.apiUrl}infos?motd=true`, {
credentials: 'include',
Accept: 'application/json',
'Content-Type': 'application/json',
})
.then((resp) => {
return resp.json()
})
.then((resp) => resp.json())
.then((data) => {
fetch(`${constants.apiUrl}hasNewMsg?userid=${data.uid}`, {
credentials: 'include',
Accept: 'application/json',
'Content-Type': 'application/json',
})
.then((resp) => {
return resp.json()
})
.then((resp) => resp.json())
.then((hasNewMsg) => {
const res = { ...data, ...hasNewMsg }
setUserId(res.uid)
setMotd(res.motd)
setUnreads(res.unreads)
resolve({ ...data, ...hasNewMsg })
})
.catch((err) => {
const res = { ...data }
setUserId(res.uid)
setMotd(res.motd)
resolve({ ...data })
console.error('Error getting unreads')
console.error(err)
})
})
}
})
}
function App({ Component, pageProps, router }) {
const [userId, setUserId] = useState()
const [motd, setMotd] = useState()
const [unreads, setUnreads] = useState()
const [globalState, setGlobalState] = useState({})
const { data } = useQuery('hasNewMsgs', () => getGlobalProps(), {
refetchOnWindowFocus: true,
})
useEffect(() => {
if (!data) return
setUserId(data.uid)
setMotd(data.motd)
setUnreads(data.unreads)
}, [data])
useEffect(() => {
getGlobalProps()
@ -65,7 +70,7 @@ function MyApp({ Component, pageProps, router }) {
}
return (
<>
<QueryClientProvider client={queryClient}>
<Head>
<meta
name="viewport"
@ -88,8 +93,14 @@ function MyApp({ Component, pageProps, router }) {
globalState={globalState}
/>
</Layout>
</>
</QueryClientProvider>
)
}
export default MyApp
export default function Root(props) {
return (
<QueryClientProvider client={queryClient}>
<App {...props} />
</QueryClientProvider>
)
}