diff --git a/components/schedule/layouts/home-presentation-list.tsx b/components/schedule/layouts/home-presentation-list.tsx
index a492834..5a9cb44 100644
--- a/components/schedule/layouts/home-presentation-list.tsx
+++ b/components/schedule/layouts/home-presentation-list.tsx
@@ -1,7 +1,7 @@
-import { useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
+import { useTick } from '../../../hooks/use-tick';
import { PresentationDto } from '../../../types/conference-api.type';
import { isPresentationCurrent, isPresentationUpcoming } from '../../../utils/presentation.utils';
import { StyledText } from '../../base/text';
@@ -12,26 +12,13 @@ interface HomePresentationListProps {
}
export function HomePresentationList({ presentations }: HomePresentationListProps) {
- const [date, setDate] = useState(new Date());
+ const tick = useTick();
const filteredPresentations = useMemo(
() => presentations.filter((event) => isPresentationUpcoming(event) || isPresentationCurrent(event)),
- [presentations, date]
+ [presentations, tick.date]
);
const { t } = useTranslation();
- useEffect(() => {
- const interval = setInterval(() => {
- setDate(new Date());
- }, 1000 * 15);
- return () => clearInterval(interval);
- }, []);
-
- useFocusEffect(
- useCallback(() => {
- setDate(new Date());
- }, [])
- );
-
if (filteredPresentations.length === 0) {
return {t('home.empty')};
}
diff --git a/components/schedule/layouts/presentation-list.tsx b/components/schedule/layouts/presentation-list.tsx
index 22cb980..b2039d8 100644
--- a/components/schedule/layouts/presentation-list.tsx
+++ b/components/schedule/layouts/presentation-list.tsx
@@ -1,8 +1,8 @@
-import { useFocusEffect } from 'expo-router';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList } from 'react-native';
+import { useTick } from '../../../hooks/use-tick';
import { PresentationDto } from '../../../types/conference-api.type';
import { isPresentationPast } from '../../../utils/presentation.utils';
import { StyledText } from '../../base/text';
@@ -13,7 +13,7 @@ interface PresentationListProps {
}
export function PresentationList({ presentations }: PresentationListProps) {
- const [date, setDate] = useState(new Date());
+ useTick();
const ref = useRef(null);
const { t } = useTranslation();
@@ -22,21 +22,8 @@ export function PresentationList({ presentations }: PresentationListProps) {
const firstUpcomingIndex = presentations.findIndex((presentation) => !isPresentationPast(presentation));
if (firstUpcomingIndex !== -1) ref.current.scrollToIndex({ index: firstUpcomingIndex, animated: true });
}
- }, [ref.current, presentations, date]);
-
- useEffect(() => {
- const interval = setInterval(() => {
- setDate(new Date());
- }, 1000 * 15);
- return () => clearInterval(interval);
}, []);
- useFocusEffect(
- useCallback(() => {
- setDate(new Date());
- }, [])
- );
-
if (presentations.length === 0) {
return {t('presentations.empty')};
}
diff --git a/hooks/use-tick.ts b/hooks/use-tick.ts
new file mode 100644
index 0000000..8d25a54
--- /dev/null
+++ b/hooks/use-tick.ts
@@ -0,0 +1,21 @@
+import { useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+
+export function useTick(initialDate = new Date()) {
+ const [date, setDate] = useState(initialDate);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setDate(new Date());
+ }, 1000 * 15);
+ return () => clearInterval(interval);
+ }, []);
+
+ useFocusEffect(
+ useCallback(() => {
+ setDate(new Date());
+ }, [])
+ );
+
+ return { date, setDate };
+}