Fix revalidation logic

Michigan-Tech-Courses · Oct 15, 2021 · 231b7f5 · 231b7f5
1 parent 84e80f1
commit 231b7f5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/src/lib/hooks/use-revalidation.ts b/src/lib/hooks/use-revalidation.ts
@@ -1,22 +1,25 @@
-import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 import pThrottle from 'p-throttle';
-import {useInterval} from '@chakra-ui/react';
-import useWindowFocus from './use-window-focus';
+import {useCallbackRef, useInterval} from '@chakra-ui/react';
+import useWindowFocus, {UseWindowFocusParameters} from './use-window-focus';
 
 const useRevalidation = (doRevalidation: boolean, revalidate: () => Promise<void>, interval = 3000) => {
+	const revalidateRef = useCallbackRef(revalidate);
 	const [shouldRefetchAtInterval, setShouldRefetchAtInterval] = useState(doRevalidation);
 
-	const throttledRevalidation = useMemo(() => pThrottle({limit: 1, interval: 1000})(revalidate), [revalidate]);
+	const throttledRevalidation = useMemo(() => pThrottle({limit: 1, interval})(revalidateRef), [revalidateRef, interval]);
 
-	useWindowFocus({
-		onFocus: useCallback(() => {
+	const focusParameters: UseWindowFocusParameters = useMemo(() => ({
+		onFocus: () => {
 			setShouldRefetchAtInterval(true);
 			void throttledRevalidation();
-		}, [throttledRevalidation]),
-		onBlur: useCallback(() => {
+		},
+		onBlur: () => {
 			setShouldRefetchAtInterval(false);
-		}, []),
-	});
+		},
+	}), [throttledRevalidation]);
+
+	useWindowFocus(focusParameters);
 
 	useEffect(() => {
 		if (doRevalidation) {

diff --git a/src/lib/hooks/use-window-focus.ts b/src/lib/hooks/use-window-focus.ts
@@ -1,6 +1,11 @@
 import {useEffect} from 'react';
 
-const useWindowFocus = ({onFocus, onBlur}: {onFocus: () => void; onBlur: () => void}) => {
+export type UseWindowFocusParameters = {
+	onFocus: () => void;
+	onBlur: () => void;
+};
+
+const useWindowFocus = ({onFocus, onBlur}: UseWindowFocusParameters) => {
 	useEffect(() => {
 		window.addEventListener('focus', onFocus);
 		window.addEventListener('blur', onBlur);

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import type {AppProps} from 'next/app';
 import Head from 'next/head';
 import {Box, BoxProps, ChakraProvider, extendTheme} from '@chakra-ui/react';
@@ -50,17 +50,23 @@ const theme = extendTheme({
 const MyApp = ({Component, pageProps}: AppProps & {Component: CustomNextPage<any>}) => {
 	const state = useStore();
 
-	useRevalidation(true, async () => state.apiState.revalidate());
+	useRevalidation(true, async () => {
+		await state.apiState.revalidate();
+	});
 
-	const wrapperProps: BoxProps = {};
+	const wrapperProps: BoxProps = useMemo(() => {
+		if (Component.useStaticHeight) {
+			return {
+				h: '100vh',
+				display: 'flex',
+				flexDir: 'column',
+				pos: 'relative',
+				overflow: 'hidden',
+			};
+		}
 
-	if (Component.useStaticHeight) {
-		wrapperProps.h = '100vh';
-		wrapperProps.display = 'flex';
-		wrapperProps.flexDir = 'column';
-		wrapperProps.pos = 'relative';
-		wrapperProps.overflow = 'hidden';
-	}
+		return {};
+	}, [Component.useStaticHeight]);
 
 	return (
 		<ChakraProvider theme={theme}>