refactor: search blurb

laurelin60 · Dec 1, 2024 · 2b90c82 · 2b90c82
1 parent cbdf70a
commit 2b90c82
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 33 deletions.
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { SearchFilterDialog } from "@/components/search/filter/search-filter-dialog";
+import { SearchBlurb } from "@/components/search/search-blurb";
 import { analyticsEnum, logAnalytics } from "@/lib/analytics";
 import { UNIVERSITY_GE } from "@/lib/constants";
 import { getDismissedRecently, getNumSearches } from "@/lib/utils/search";
@@ -12,7 +13,6 @@ import { filterData } from "../../lib/utils/filter";
 import { queryDatabase } from "../../lib/utils/query-db";
 import { ToastAction } from "../ui/toast";
 import { useToast } from "../ui/use-toast";
-import Blurb from "./Blurb";
 import { SortDropdown } from "./filter/FilterComponents";
 import { SearchFilter } from "./filter/search-filter";
 import ScrollToTop from "./ScrollToTop";
@@ -265,7 +265,7 @@ const Search = () => {
                 </div>
             </div>
 
-            <Blurb
+            <SearchBlurb
                 filterData={filterData}
                 courses={courses}
                 filterValues={filterValues}

diff --git a/src/components/search/Blurb.tsx → src/components/search/search-blurb.tsx b/src/components/search/Blurb.tsx → src/components/search/search-blurb.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { CourseObject, FilterValues } from "./Search";
 
-interface BlurbProps {
+interface SearchBlurbProps {
     filterData: (
         data: CourseObject[],
         filterValues: FilterValues
@@ -12,45 +12,48 @@ interface BlurbProps {
     filterValues: FilterValues;
 }
 
-const Blurb = (props: BlurbProps) => {
-    const { filterData, courses, lastUpdated, filterValues } = props;
-
+export const SearchBlurb = ({
+    filterData,
+    courses,
+    lastUpdated,
+    filterValues,
+}: SearchBlurbProps) => {
     const [timeAgo, setTimeAgo] = useState("");
 
-    useEffect(() => {
-        const getTimeAgo = (date: number) => {
-            const now = new Date();
-            const updatedDate = new Date(date);
-            const diff = now.getTime() - updatedDate.getTime();
+    const getTimeAgo = useCallback((date: number) => {
+        const now = new Date();
+        const updatedDate = new Date(date);
+        const diff = now.getTime() - updatedDate.getTime();
 
-            const minutes = Math.floor((diff / 1000 / 60) % 60);
-            const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
-            const days = Math.floor((diff / (1000 * 60 * 60 * 24)) % 365);
+        const minutes = Math.floor((diff / 1000 / 60) % 60);
+        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+        const days = Math.floor((diff / (1000 * 60 * 60 * 24)) % 365);
 
-            let result = "";
+        let result = "";
 
-            if (days > 0) {
-                result += `${days} ${days == 1 ? "day" : "days"}`;
-            } else if (hours > 0) {
-                result += `${hours} ${hours == 1 ? "hour" : "hours"}`;
-            } else {
-                result += `${minutes} ${minutes == 1 ? "minute" : "minutes"}`;
-            }
+        if (days > 0) {
+            result += `${days} ${days == 1 ? "day" : "days"}`;
+        } else if (hours > 0) {
+            result += `${hours} ${hours == 1 ? "hour" : "hours"}`;
+        } else {
+            result += `${minutes} ${minutes == 1 ? "minute" : "minutes"}`;
+        }
 
-            return result;
-        };
+        return result;
+    }, []);
 
-        const updateRelativeTime = () => {
-            if (lastUpdated) {
-                setTimeAgo(getTimeAgo(lastUpdated));
-            }
-        };
+    const updateRelativeTime = useCallback(() => {
+        if (lastUpdated) {
+            setTimeAgo(getTimeAgo(lastUpdated));
+        }
+    }, [getTimeAgo, lastUpdated]);
 
+    useEffect(() => {
         updateRelativeTime();
         const interval = setInterval(updateRelativeTime, 1000);
 
         return () => clearInterval(interval);
-    }, [lastUpdated]);
+    }, [lastUpdated, updateRelativeTime]);
 
     return (
         <>
@@ -79,5 +82,3 @@ const Blurb = (props: BlurbProps) => {
         </>
     );
 };
-
-export default Blurb;