feat: tick & scrollTo improvements

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 <StyledText className='mx-5 text-center my-10'>{t('home.empty')}</StyledText>;
   }

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<FlatList>(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 <StyledText className='mx-5 text-center my-10'>{t('presentations.empty')}</StyledText>;
   }

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 };
+}