Skip to content

Commit

Permalink
created-repos-lazy-loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@prime1999
prime1999 committed Jan 8, 2024
1 parent 44bb209 commit 81ae2ab
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 138 deletions.
101 changes: 64 additions & 37 deletions src/components/Activity.js
View file
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>
</>
);
}
91 changes: 50 additions & 41 deletions src/components/Stats.js
View file
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>
);
}
41 changes: 0 additions & 41 deletions src/components/componentList/ActivityList.js
View file

This file was deleted.

19 changes: 0 additions & 19 deletions src/components/componentList/StatsList.js
View file

This file was deleted.

0 comments on commit 81ae2ab

Please sign in to comment.