Sticky footer's bug fixed

open-sauced · Jul 10, 2023 · 5e8307f · 5e8307f
1 parent 528880f
commit 5e8307f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 73 deletions.
diff --git a/src/components/ListRepositories.tsx b/src/components/ListRepositories.tsx
@@ -17,44 +17,17 @@ const ListRepositories = ({
   fetchedData,
   title,
 }: ListRepositoriesProps): JSX.Element => {
-  if (!fetchedData.length) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 mt-10">
-        <div className="flex flex-col gap-y-5 overflow-hidden mb-12">
-          {Array.from(Array(10).keys()).map(item => (
-            <div
-              key={item}
-              className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
-            >
-              <Skeleton
-                enableAnimation
-                count={4}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="mx-auto max-w-7xl px-4 pb-1 mt-10">
       <div className="flex flex-col gap-y-5 mb-12">
         <div className="flex items-center gap-x-2.5">
           <BsFillCalendar2Fill className="w-8 h-8 text-white" />
 
-          {activeLink && (
-            <h1 className="text-2xl text-white font-semibold">
-              {title}
-            </h1>
-          )}
+          {activeLink && <h1 className="text-2xl text-white font-semibold">{title}</h1>}
         </div>
 
         {fetchedData.map((item, i) => (
-          <RepoList
-            key={`${item.full_name}_${i}`}
-            data={item}
-          />
+          <RepoList key={`${item.full_name}_${i}`} data={item} />
         ))}
       </div>
 

diff --git a/src/components/RecentRepoListWrap.tsx b/src/components/RecentRepoListWrap.tsx
@@ -3,13 +3,14 @@ import locationsHash from "../lib/locationsHash";
 import ListRepositories from "./ListRepositories";
 import { useEffect, useState } from "react";
 import { useRepositoriesList } from "../hooks/useRepositoriesList";
+import Skeleton from "react-loading-skeleton";
 
 export enum RepoOrderByEnum {
   popular = "stars",
   recent = "created_at",
   upvoted = "votesCount",
   discussed = "issues",
-  myVotes = "myVotes"
+  myVotes = "myVotes",
 }
 
 const parseLimitValue = (limit: string | null): number => {
@@ -39,29 +40,37 @@ const RecentRepoListWrap = (): JSX.Element => {
   const [lastWeek, setLastWeek] = useState<DbRepo[] | null>(null);
   const [older, setOlder] = useState<DbRepo[] | null>(null);
 
-  useEffect( () => {
-    const lastSunday = (new Date);
+  useEffect(() => {
+    const lastSunday = new Date();
 
     lastSunday.setDate(lastSunday.getDate() - lastSunday.getDay());
     lastSunday.setHours(0, 0, 0, 0);
 
     if (!isLoading) {
-      const thisWeekData = data.filter( repo => repo.created_at && new Date(repo.created_at) > lastSunday);
+      const thisWeekData = data.filter((repo) => repo.created_at && new Date(repo.created_at) > lastSunday);
 
-      thisWeekData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      thisWeekData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      thisWeekData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      thisWeekData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setThisWeek(thisWeekData);
 
-      const lastWeekData = data.filter( repo => repo.created_at && new Date(repo.created_at) < lastSunday && new Date(repo.created_at) > new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000));
+      const lastWeekData = data.filter(
+        (repo) =>
+          repo.created_at &&
+          new Date(repo.created_at) < lastSunday &&
+          new Date(repo.created_at) > new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000)
+      );
 
-      lastWeekData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      lastWeekData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      lastWeekData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      lastWeekData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setLastWeek(lastWeekData);
 
-      const olderData = data.filter( repo => repo.created_at && new Date(repo.created_at) < new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000));
+      const olderData = data.filter(
+        (repo) =>
+          repo.created_at && new Date(repo.created_at) < new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000)
+      );
 
-      olderData.sort( (a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
-      olderData.sort( (a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
+      olderData.sort((a, b) => (new Date(a.created_at!) > new Date(b.created_at!) ? 1 : -1));
+      olderData.sort((a, b) => (a.votesCount! > b.votesCount! ? -1 : 1));
       setOlder(olderData);
     }
   }, [data]);
@@ -72,40 +81,52 @@ const RecentRepoListWrap = (): JSX.Element => {
 
   return (
     <>
-      {!isLoading &&
-        (
-          <>
-            {/* limit set to 101, a temporary fix to hide "Load More" from "This Week" & "Last Week".
+      {isLoading ? (
+        <div className="mx-auto max-w-7xl px-4 mt-10">
+          <div className="flex flex-col gap-y-5 overflow-hidden mb-12">
+            {Array.from(Array(10).keys()).map((item) => (
+              <div key={item} className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
+                <Skeleton enableAnimation count={4} />
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* limit set to 101, a temporary fix to hide "Load More" from "This Week" & "Last Week".
               TODO: Make a real solution for this. */}
 
-            {thisWeek && thisWeek.length > 0 &&
-              <ListRepositories
-                activeLink={activeLink}
-                fetchedData={thisWeek}
-                handleLoadingMore={handleLoadingMore}
-                limit={101}
-                title="This Week"
-              />}
-
-            {lastWeek && lastWeek.length > 0 &&
-              <ListRepositories
-                activeLink={activeLink}
-                fetchedData={lastWeek}
-                handleLoadingMore={handleLoadingMore}
-                limit={101}
-                title="Last Week"
-              />}
-
-            {older && older.length > 0 &&
-              <ListRepositories
-                activeLink={activeLink}
-                fetchedData={older}
-                handleLoadingMore={handleLoadingMore}
-                limit={limit}
-                title="Older"
-              />}
-          </>
-        )}
+          {thisWeek && thisWeek.length > 0 && (
+            <ListRepositories
+              activeLink={activeLink}
+              fetchedData={thisWeek}
+              handleLoadingMore={handleLoadingMore}
+              limit={101}
+              title="This Week"
+            />
+          )}
+
+          {lastWeek && lastWeek.length > 0 && (
+            <ListRepositories
+              activeLink={activeLink}
+              fetchedData={lastWeek}
+              handleLoadingMore={handleLoadingMore}
+              limit={101}
+              title="Last Week"
+            />
+          )}
+
+          {older && older.length > 0 && (
+            <ListRepositories
+              activeLink={activeLink}
+              fetchedData={older}
+              handleLoadingMore={handleLoadingMore}
+              limit={limit}
+              title="Older"
+            />
+          )}
+        </>
+      )}
     </>
   );
 };