-
-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
114 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,53 +1,80 @@ | ||
"use client"; | ||
|
||
import Image from "next/image"; | ||
import Link from "next/link"; | ||
import { useEffect, useState } from "react"; | ||
import dynamic from "next/dynamic"; | ||
|
||
import { client } from "@/config/appwrite-client"; | ||
import ActivitySkeleton from "./ListSkeletons/ActivitySkeleton"; | ||
|
||
const ActivityList = dynamic(() => import("./componentList/ActivityList"), { | ||
loading: ActivitySkeleton, | ||
ssr: false, | ||
}); | ||
|
||
export default function Activity() { | ||
const [activity, setActivity] = useState([]); | ||
const [activity, setActivity] = useState([]); | ||
|
||
const getActivity = async () => { | ||
const res = await fetch("/api/activity"); | ||
const data = await res.json(); | ||
setActivity(data); | ||
}; | ||
const getActivity = async () => { | ||
const res = await fetch("/api/activity"); | ||
const data = await res.json(); | ||
setActivity(data); | ||
}; | ||
|
||
useEffect(() => { | ||
const events = [ | ||
`databases.${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID}.collections.${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_RATINGS_ID}.documents`, | ||
]; | ||
client.subscribe(events, () => getActivity()); | ||
getActivity(); | ||
}, []); | ||
useEffect(() => { | ||
const events = [ | ||
`databases.${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID}.collections.${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_RATINGS_ID}.documents`, | ||
]; | ||
client.subscribe(events, () => getActivity()); | ||
getActivity(); | ||
}, []); | ||
|
||
return ( | ||
<> | ||
<header className="flex items-center justify-between border-b border-white/5 px-4 py-4 sm:px-6 sm:py-6 lg:px-8"> | ||
<h2 className="text-base font-semibold leading-7 text-white"> | ||
Activity feed | ||
</h2> | ||
{/* <a | ||
return ( | ||
<> | ||
<header className="flex items-center justify-between border-b border-white/5 px-4 py-4 sm:px-6 sm:py-6 lg:px-8"> | ||
<h2 className="text-base font-semibold leading-7 text-white"> | ||
Activity feed | ||
</h2> | ||
{/* <a | ||
href="#" | ||
className="text-sm font-semibold leading-6 text-indigo-400" | ||
> | ||
View all | ||
</a> */} | ||
</header> | ||
<ul role="list" className="divide-y divide-white/5"> | ||
{activity.map((rating, idx) => ( | ||
<li key={idx} className="w-full px-4 py-4 sm:px-6 lg:px-8"> | ||
<ActivityList rating={rating} /> | ||
</li> | ||
))} | ||
</ul> | ||
</> | ||
); | ||
</header> | ||
<ul role="list" className="divide-y divide-white/5"> | ||
{activity.map((rating, idx) => ( | ||
<li key={idx} className="px-4 py-4 sm:px-6 lg:px-8"> | ||
<div className="flex items-center gap-x-3"> | ||
<Link | ||
href={`https://github.com/${rating.username}`} | ||
target="_blank" | ||
> | ||
<Image | ||
className="h-6 w-6 flex-none rounded-full bg-gray-800" | ||
src={`https://github.com/${rating.username}.png`} | ||
alt={`Logo for ${rating.name}`} | ||
width={20} | ||
height={20} | ||
/> | ||
</Link> | ||
<Link | ||
href={`https://github.com/${rating.username}`} | ||
target="_blank" | ||
className="flex-auto truncate text-sm font-semibold leading-6 text-white" | ||
> | ||
{rating.username} | ||
</Link> | ||
<time | ||
dateTime={rating.$updatedAt} | ||
className="flex-none text-xs text-gray-600" | ||
> | ||
{rating.timeAgo} | ||
</time> | ||
</div> | ||
<p className="mt-3 truncate text-sm text-gray-500"> | ||
Rated{" "} | ||
<Link className="text-gray-400" href={rating.url} target="_blank"> | ||
{rating.url.split("github.com/")[1]} | ||
</Link> | ||
</p> | ||
</li> | ||
))} | ||
</ul> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,61 @@ | ||
"use client"; | ||
|
||
import { useEffect, useState } from "react"; | ||
import dynamic from "next/dynamic"; | ||
|
||
import { client } from "@/config/appwrite-client"; | ||
import StatSkeleton from "./ListSkeletons/StatSkeleton"; | ||
|
||
const StatsList = dynamic(() => import("./componentList/StatsList"), { | ||
loading: StatSkeleton, | ||
ssr: false, | ||
}); | ||
import { abbreviateNumber } from "@/utils/abbreviateNumbers"; | ||
|
||
export default function Stats() { | ||
const [stats, setStats] = useState([]); | ||
const [stats, setStats] = useState([]); | ||
|
||
const getStats = async () => { | ||
const res = await fetch("/api/stats"); | ||
const data = await res.json(); | ||
const stats = [ | ||
{ name: "Total Ratings", value: data.ratings, unit: "⭐️" }, | ||
{ name: "Total Repos", value: data.repos, unit: "GitHub" }, | ||
{ name: "Total Stars", value: data.stars, unit: "⭐️" }, | ||
{ | ||
name: "Recommended Repos", | ||
value: ((data.stars / data.ratings / 5) * 100).toFixed(1), | ||
unit: "%", | ||
}, | ||
]; | ||
setStats(stats); | ||
}; | ||
const getStats = async () => { | ||
const res = await fetch("/api/stats"); | ||
const data = await res.json(); | ||
const stats = [ | ||
{ name: "Total Ratings", value: data.ratings, unit: "⭐️" }, | ||
{ name: "Total Repos", value: data.repos, unit: "GitHub" }, | ||
{ name: "Total Stars", value: data.stars, unit: "⭐️" }, | ||
{ | ||
name: "Recommended Repos", | ||
value: ((data.stars / data.ratings / 5) * 100).toFixed(1), | ||
unit: "%", | ||
}, | ||
]; | ||
setStats(stats); | ||
}; | ||
|
||
useEffect(() => { | ||
const events = [ | ||
`databases.${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID}.collections.${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_APP_ID}.documents`, | ||
]; | ||
client.subscribe(events, () => getStats()); | ||
getStats(); | ||
}, []); | ||
useEffect(() => { | ||
const events = [ | ||
`databases.${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID}.collections.${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_APP_ID}.documents`, | ||
]; | ||
client.subscribe(events, () => getStats()); | ||
getStats(); | ||
}, []); | ||
|
||
return ( | ||
<div className="bg-gray-900 flex grow"> | ||
<div className="mx-auto max-w-7xl"> | ||
<div className="grid grid-cols-1 gap-px bg-white/5 sm:grid-cols-2 lg:grid-cols-4"> | ||
{stats.map((stat) => ( | ||
<StatsList key={stat.name} stat={stat} /> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
return ( | ||
<div className="bg-gray-900 flex grow"> | ||
<div className="mx-auto max-w-7xl"> | ||
<div className="grid grid-cols-1 gap-px bg-white/5 sm:grid-cols-2 lg:grid-cols-4"> | ||
{stats.map((stat) => ( | ||
<div | ||
key={stat.name} | ||
className="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8" | ||
> | ||
<p className="text-sm font-medium leading-6 text-gray-400"> | ||
{stat.name} | ||
</p> | ||
<p className="mt-2 flex items-baseline gap-x-2"> | ||
<span className="text-4xl font-semibold tracking-tight text-white"> | ||
{abbreviateNumber(stat.value)} | ||
</span> | ||
{stat.unit ? ( | ||
<span className="text-sm text-gray-400">{stat.unit}</span> | ||
) : null} | ||
</p> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.