diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx index 93fd23315..f1684f230 100644 --- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx @@ -4,9 +4,10 @@ import { FilterKey } from 'Types/filter/filterType'; import SessionItem from 'Shared/SessionItem'; import { NoContent, Loader, Pagination, Button } from 'UI'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; -import NoContentMessage from '../NoContentMessage'; import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage, setScrollPosition } from 'Duck/search'; +import useTimeout from 'App/hooks/useTimeout'; +const AUTOREFRESH_INTERVAL = 5 * 60 * 1000; interface Props { loading: boolean; list: any; @@ -47,13 +48,19 @@ function SessionList(props: Props) { }; }, [isBookmark, isVault, activeTab]); + useTimeout(() => { + props.fetchSessions(null, true); + }, AUTOREFRESH_INTERVAL); + + useEffect(() => { + // handle scroll position const { scrollY } = props; window.scrollTo(0, scrollY); if (total === 0) { - props.fetchSessions(); + props.fetchSessions(null, true); } - + return () => { props.setScrollPosition(window.scrollY); }; @@ -75,7 +82,6 @@ function SessionList(props: Props) {
{NO_CONTENT.message}
- {/* */}
} subtext={ diff --git a/frontend/app/hooks/useTimeout.ts b/frontend/app/hooks/useTimeout.ts new file mode 100644 index 000000000..ea6dd2ba3 --- /dev/null +++ b/frontend/app/hooks/useTimeout.ts @@ -0,0 +1,21 @@ +import { useRef, useEffect } from 'react'; + +const useTimeout = (callback: () => void, delay: number) => { + const savedCallback = useRef<() => void>(); + + useEffect(() => { + savedCallback.current = callback; + }, [callback]); + + useEffect(() => { + function tick() { + savedCallback.current && savedCallback.current(); + } + if (delay !== null) { + const id = setInterval(tick, delay); + return () => clearInterval(id); + } + }, [delay]); +}; + +export default useTimeout;