diff --git a/src/components/ListRepositories.tsx b/src/components/ListRepositories.tsx
index 4d253fcb..d9bcebb2 100644
--- 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 (
-
- {activeLink && (
-
- {title}
-
- )}
+ {activeLink && {title}
}
{fetchedData.map((item, i) => (
-
+
))}
diff --git a/src/components/RecentRepoListWrap.tsx b/src/components/RecentRepoListWrap.tsx
index 62ac3d77..7830c382 100644
--- 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
(null);
const [older, setOlder] = useState(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 ? (
+
+
+ {Array.from(Array(10).keys()).map((item) => (
+
+
+
+ ))}
+
+
+ ) : (
+ <>
+ {/* 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 &&
- }
-
- {lastWeek && lastWeek.length > 0 &&
- }
-
- {older && older.length > 0 &&
- }
- >
- )}
+ {thisWeek && thisWeek.length > 0 && (
+
+ )}
+
+ {lastWeek && lastWeek.length > 0 && (
+
+ )}
+
+ {older && older.length > 0 && (
+
+ )}
+ >
+ )}
>
);
};