Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
first pass removing votes feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdougie
bdougie committed Apr 1, 2024
1 parent 247841d commit 811b5fb
Show file tree
Hide file tree
Showing 11 changed files with 89 additions and 319 deletions.
23 changes: 4 additions & 19 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import Hero from "./components/Hero";
import apiFetcher from "./hooks/useSWR";

import getAppVersion from "./lib/appVersion";
import VotedRepoListWrap from "./components/VotedRepoListWrap";
import RecentRepoListWrap from "./components/RecentRepoListWrap";
import SecondaryNav from "./components/SecondaryNav";
import HotRepositories from "./components/HotRepositories";
Expand All @@ -24,7 +23,7 @@ console.log(
╚██████╔╝██║ ███████╗██║ ╚████║ ███████║██║ ██║╚██████╔╝╚██████╗███████╗██████╔╝
╚═════╝ ╚═╝ ╚══════╝╚═╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝╚══════╝╚═════╝%c v${getAppVersion()}`,
"color:#f6d82b",
"color:green;font-weight:bold",
"color:green;font-weight:bold"
);

const App = (): JSX.Element => {
Expand Down Expand Up @@ -53,25 +52,11 @@ const App = (): JSX.Element => {
<HotRepositories />

<Routes>
<Route
element={<VotedRepoListWrap />}
path="myVotes"
/>
<Route element={<RecentRepoListWrap />} path="/" />

<Route
element={<RecentRepoListWrap />}
path="/"
/>
<Route element={<RecentRepoListWrap />} path="recent" />

<Route
element={<RecentRepoListWrap />}
path="recent"
/>

<Route
element={<RepoListWrap />}
path="*"
/>
<Route element={<RepoListWrap />} path="*" />
</Routes>
</div>

Expand Down
77 changes: 15 additions & 62 deletions src/components/HotRepoCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import humanizeNumber from "../lib/humanizeNumber";

import StackedAvatar from "./StackedAvatar";
import useRepo from "../hooks/useRepo";
import useVotedRepos from "../hooks/useVotedRepos";
import useContributions from "../hooks/useContributions";

const bugReportLink = "https://github.com/open-sauced/hot/issues/new?assignees=&title=fix:";
Expand All @@ -20,15 +19,9 @@ export declare interface HotRepoCardProps {
}

const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
const { votedReposIds, checkVoted, voteHandler } = useVotedRepos();
const { repo, isLoading, isError } = useRepo(repoName);
const [isVoted, setIsVoted] = useState(false);
const { data: contributions } = useContributions(repoName);

useEffect(() => {
repo && setIsVoted(checkVoted(repo.id));
}, [votedReposIds, repo]);

if (isError) {
return (
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative flex flex-col justify-between">
Expand All @@ -37,7 +30,9 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
<div className="flex justify-center">
<a
className="bg-cheesyYellow text-grey rounded-xl font-bold hover:text-saucyRed transition-all duration-300 mr-3 p-2 flex w-5/6 h-fit justify-center"
href={`${String(`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`)}`}
href={`${String(
`${bugReportLink} repo not found [${repoName}]&body=Please take a look why this ${repoName} not founded`
)}`}
rel="noreferrer"
target="_blank"
>
Expand All @@ -51,10 +46,7 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
if (isLoading) {
return (
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
<Skeleton
enableAnimation
count={5}
/>
<Skeleton enableAnimation count={5} />
</div>
);
}
Expand All @@ -67,34 +59,10 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
<div className="p-4 border rounded-2xl bg-white w-full space-y-1 relative">
<div className="flex justify-between w-full">
<div className="flex space-x-1 items-center">
<img
alt="Hot Repo Icon"
className="h-4 w-4 rounded-md overflow-hidden"
src={getAvatarLink(owner)}
/>

<span className="text-sm font-medium text-lightSlate11">
{owner}
</span>
</div>
<img alt="Hot Repo Icon" className="h-4 w-4 rounded-md overflow-hidden" src={getAvatarLink(owner)} />

<button
className={`px-2 py-0.5 border rounded-lg flex justify-center items-center space-x-1 text-xs transition-all duration-200 ${
isVoted ? "bg-lightOrange01" : "bg-lightSlate01"
} ${isVoted ? "text-saucyRed border-saucyRed " : "text-lightSlate11 border-lightSlate06 "}`}
onClick={async () => voteHandler(0, repo_id)}
>
<span>
{isVoted ? "voted" : "upvote"}
</span>

{isVoted
? (
<RiCheckboxCircleFill className="" />)
: (
<FaArrowAltCircleUp className="fill-lightSlate09" />
)}
</button>
<span className="text-sm font-medium text-lightSlate11">{owner}</span>
</div>
</div>

<div className="flex flex-col pb-10">
Expand All @@ -107,40 +75,25 @@ const HotRepoCard = ({ repoName }: HotRepoCardProps): JSX.Element => {
{name}
</a>

<p className="text-gray-500 font-medium text-xs w-5/6">
{description}
</p>
<p className="text-gray-500 font-medium text-xs w-5/6">{description}</p>
</div>

<div className="flex items-center justify-between absolute bottom-3 inset-x-0 px-4">
<div className="flex space-x-3 text-xs">
<div className="flex text-sm space-x-1 justify-center items-center">
<VscIssues
className="fill-lightSlate10"
size={16}
/>

<span className="text-lightSlate11">
{humanizeNumber(issues)}
</span>
<VscIssues className="fill-lightSlate10" size={16} />

<span className="text-lightSlate11">{humanizeNumber(issues)}</span>
</div>

<div className="flex text-sm space-x-1 justify-center items-center">
<AiOutlineStar
className="fill-lightSlate10"
size={16}
/>

<span className="text-lightSlate11">
{humanizeNumber(stars)}
</span>
<AiOutlineStar className="fill-lightSlate10" size={16} />

<span className="text-lightSlate11">{humanizeNumber(stars)}</span>
</div>

<div className="flex text-sm space-x-1 justify-center items-center">
<BiGitPullRequest
className="fill-lightSlate10"
size={16}
/>
<BiGitPullRequest className="fill-lightSlate10" size={16} />

<span className="text-lightSlate11">0</span>
</div>
Expand Down
25 changes: 6 additions & 19 deletions src/components/ListRepositories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,9 @@ const ListRepositories = ({
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(25).keys()).map(item => (
<div
key={item}
className="p-4 border rounded-2xl bg-white w-full space-y-1 relative"
>
<Skeleton
enableAnimation
count={4}
/>
{Array.from(Array(25).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>
Expand All @@ -43,22 +37,15 @@ const ListRepositories = ({
<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>

{fetchedData.length > 0 && activeLink !== "myVotes" && hasNextPage && (
{fetchedData.length > 0 && hasNextPage && (
<div className="flex justify-center">
<button
className="bg-white text-gray-700 mt-4 mb-4 text-base border-gray-400 border font-normal py-1 px-4 rounded"
Expand Down
107 changes: 48 additions & 59 deletions src/components/RecentRepoListWrap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Skeleton from "react-loading-skeleton";
export enum RepoOrderByEnum {
popular = "stars",
recent = "created_at",
upvoted = "votesCount",
discussed = "issues",
myVotes = "myVotes",
}
Expand Down Expand Up @@ -42,32 +41,31 @@ const RecentRepoListWrap = (): JSX.Element => {
const [older, setOlder] = useState<DbRepo[] | null>(null);

useEffect(() => {
const lastSunday = (new Date);
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));
setThisWeek(thisWeekData);

const lastWeekData = data.filter(
repo =>
(repo) =>
repo.created_at &&
new Date(repo.created_at) < lastSunday &&
new Date(repo.created_at) > new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000),
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));
setLastWeek(lastWeekData);

const olderData = data.filter(
repo =>
repo.created_at && new Date(repo.created_at) < new Date(lastSunday.getTime() - 7 * 24 * 60 * 60 * 1000),
(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));
Expand All @@ -82,58 +80,49 @@ const RecentRepoListWrap = (): JSX.Element => {

return (
<>
{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(25).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>
{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(25).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>
)
: (
<>

{thisWeek && thisWeek.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={thisWeek}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="This Week"
/>
)}

{lastWeek && lastWeek.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={lastWeek}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="Last Week"
/>
)}

{older && older.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={older}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="Older"
/>
)}
</>
)}
</div>
) : (
<>
{thisWeek && thisWeek.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={thisWeek}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="This Week"
/>
)}

{lastWeek && lastWeek.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={lastWeek}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="Last Week"
/>
)}

{older && older.length > 0 && (
<ListRepositories
activeLink={activeLink}
fetchedData={older}
handleLoadingMore={handleLoadingMore}
hasNextPage={meta.hasNextPage}
title="Older"
/>
)}
</>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 811b5fb

Please sign in to comment.