From c54545eb84b3968b9e59c87590785627414dca59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Berente?=
 <30603208+berenteb@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:16:51 +0100
Subject: [PATCH] feat: tick & scrollTo improvements

---
 .../layouts/home-presentation-list.tsx        | 21 ++++---------------
 .../schedule/layouts/presentation-list.tsx    | 19 +++--------------
 hooks/use-tick.ts                             | 21 +++++++++++++++++++
 3 files changed, 28 insertions(+), 33 deletions(-)
 create mode 100644 hooks/use-tick.ts

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