Bug Fix: #9 - realtimePosts는 SWR의 revalidateOnFocus가 적용되지 않으므로fromNow…

… 값을 1분마다 다시 계산
yeoularu · Apr 12, 2024 · 5d77488 · 5d77488
1 parent cd7e920
commit 5d77488
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 35 deletions.
diff --git a/src/hooks/usePostById.ts b/src/hooks/usePostById.ts
@@ -1,6 +1,6 @@
 import likeCountAtom from '@/atoms/likeCount';
 import { Post } from '@/types/post';
-import { fromNow } from '@/utils/dayjs';
+import { getFromNow } from '@/utils/dayjs';
 import { supabase } from '@/utils/supabaseClient';
 import { useAtomValue } from 'jotai';
 import useSWR from 'swr';
@@ -27,7 +27,9 @@ export default function usePostById(id?: string | number) {
     );
 
     const likeCountMap = useAtomValue(likeCountAtom);
-    const post = data ? { ...data, fromNow: fromNow(data.inserted_at) } : null;
+    const post = data
+        ? { ...data, fromNow: getFromNow(data.inserted_at) }
+        : null;
 
     if (post) {
         const likeCount = likeCountMap.get(post.id);

diff --git a/src/hooks/usePosts.ts b/src/hooks/usePosts.ts
@@ -1,6 +1,6 @@
 import likeCountAtom from '@/atoms/likeCount';
 import { Post } from '@/types/post';
-import { fromNow } from '@/utils/dayjs';
+import { getFromNow } from '@/utils/dayjs';
 import { supabase } from '@/utils/supabaseClient';
 import { useAtomValue } from 'jotai';
 import useSWRInfinite from 'swr/infinite';
@@ -39,7 +39,7 @@ export default function usePosts() {
         ? data.flatMap((page) =>
               page.map((post) => ({
                   ...post,
-                  fromNow: fromNow(post.inserted_at),
+                  fromNow: getFromNow(post.inserted_at),
               })),
           )
         : [];

diff --git a/src/hooks/usePostsByIds.ts b/src/hooks/usePostsByIds.ts
@@ -1,6 +1,6 @@
 import likeCountAtom from '@/atoms/likeCount';
 import { Post } from '@/types/post';
-import { fromNow } from '@/utils/dayjs';
+import { getFromNow } from '@/utils/dayjs';
 import { supabase } from '@/utils/supabaseClient';
 import { useAtomValue } from 'jotai';
 import useSWR from 'swr';
@@ -22,7 +22,7 @@ export default function usePostsByIds(ids: number[]) {
     const posts = data
         ? data.map((post) => ({
               ...post,
-              fromNow: fromNow(post.inserted_at),
+              fromNow: getFromNow(post.inserted_at),
           }))
         : [];
 

diff --git a/src/hooks/usePostsBySourceName.ts b/src/hooks/usePostsBySourceName.ts
@@ -1,6 +1,6 @@
 import likeCountAtom from '@/atoms/likeCount';
 import { Post } from '@/types/post';
-import { fromNow } from '@/utils/dayjs';
+import { getFromNow } from '@/utils/dayjs';
 import { supabase } from '@/utils/supabaseClient';
 import { useAtomValue } from 'jotai';
 import useSWRInfinite from 'swr/infinite';
@@ -52,7 +52,7 @@ export default function usePostsBySourceName(og_source: string) {
         ? data.flatMap((page) =>
               page.map((post) => ({
                   ...post,
-                  fromNow: fromNow(post.inserted_at),
+                  fromNow: getFromNow(post.inserted_at),
               })),
           )
         : [];

diff --git a/src/hooks/useRealtimePosts.ts b/src/hooks/useRealtimePosts.ts
@@ -1,7 +1,7 @@
 import likeCountAtom from '@/atoms/likeCount';
 import realtimePostsAtom from '@/atoms/realtimePosts';
 import { Post } from '@/types/post';
-import { fromNow } from '@/utils/dayjs';
+import { getFromNow } from '@/utils/dayjs';
 import { supabase } from '@/utils/supabaseClient';
 import { useAtom, useAtomValue } from 'jotai';
 import { useEffect } from 'react';
@@ -23,7 +23,7 @@ export default function useRealtimePosts() {
                 (payload) => {
                     const post = {
                         ...payload.new,
-                        fromNow: fromNow(payload.new.inserted_at),
+                        fromNow: getFromNow(payload.new.inserted_at),
                     } as Post;
 
                     setPosts((prev) => [post, ...prev]);
@@ -56,4 +56,18 @@ export default function useRealtimePosts() {
         // setPosts가 수행되므로 posts를 의존성 배열에서 제외.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [likeCountMap]);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setPosts(
+                posts.map((post) => {
+                    const newFromNow = getFromNow(post.inserted_at);
+                    if (post.fromNow !== newFromNow) {
+                        return { ...post, fromNow: newFromNow };
+                    } else return post;
+                }),
+            );
+        }, 60000);
+        return () => clearInterval(interval);
+    });
 }
diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts
@@ -1,37 +1,37 @@
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import updateLocale from "dayjs/plugin/updateLocale";
-import "dayjs/locale/ko";
+import dayjs from 'dayjs';
+import 'dayjs/locale/ko';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
 
 dayjs.extend(relativeTime);
 dayjs.extend(updateLocale);
 
-dayjs.updateLocale("ko", {
-  relativeTime: {
-    future: "%s 후",
-    past: "%s 전",
-    s: "몇 초",
-    m: "1분",
-    mm: "%d분",
-    h: "한 시간",
-    hh: "%d시간",
-    d: "하루",
-    dd: "%d일",
-    M: "한 달",
-    MM: "%d개월",
-    y: "일 년",
-    yy: "%d년",
-  },
+dayjs.updateLocale('ko', {
+    relativeTime: {
+        future: '%s 후',
+        past: '%s 전',
+        s: '몇 초',
+        m: '1분',
+        mm: '%d분',
+        h: '한 시간',
+        hh: '%d시간',
+        d: '하루',
+        dd: '%d일',
+        M: '한 달',
+        MM: '%d개월',
+        y: '일 년',
+        yy: '%d년',
+    },
 });
 
-dayjs.locale("ko");
+dayjs.locale('ko');
 
-const fromNow = (date: string): string => {
-  return dayjs(date).fromNow();
+const getFromNow = (date: string): string => {
+    return dayjs(date).fromNow();
 };
 
 const getKoreanFormat = (date: string): string => {
-  return dayjs(date).format("YYYY년 M월 D일 HH:mm");
+    return dayjs(date).format('YYYY년 M월 D일 HH:mm');
 };
 
-export { fromNow, getKoreanFormat };
+export { getFromNow, getKoreanFormat };