- {!sending &&
Rate! }
- {sending &&
}
+
+
+
+
+
+ Rating the same repo more than once will overwrite your previous
+ rating
+
-
+
);
}
diff --git a/src/app/rate/page.js b/src/app/rate/page.js
index 453fcbb..9949a37 100644
--- a/src/app/rate/page.js
+++ b/src/app/rate/page.js
@@ -5,8 +5,8 @@ import { useEffect } from "react";
import { account } from "@/config/appwrite-client";
import Form from "./Form";
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
+import SideNav from "@/components/SideNav";
+import Activity from "@/components/Activity";
export default function Rate() {
const router = useRouter();
@@ -19,7 +19,7 @@ export default function Rate() {
try {
user = await account.getSession("current");
} catch (e) {
- router.push("/auth/login");
+ router.push("/");
}
};
@@ -28,24 +28,84 @@ export default function Rate() {
}, []);
return (
- <>
-
-
-
-
-
Rate an Open Source Repo!
-
- Open Source is about collaboration and sharing knowledge. But some
- repos have a better DX (Developer Experience), share your
- experience with the community!
-
-
-
-
-
-
-
-
+
+ <>
+
+
+
+ Rate a Repository
+
+
+ {/* Sort dropdown */}
+ {/*
+
+ Sort by
+
+
+
+
+ {({ active }) => (
+
+ Name
+
+ )}
+
+
+ {({ active }) => (
+
+ Date updated
+
+ )}
+
+
+ {({ active }) => (
+
+ Environment
+
+ )}
+
+
+
+ */}
+
+
+
+
+
+
+
+
);
}
diff --git a/src/assets/github-mark.svg b/src/assets/github-mark.svg
new file mode 100644
index 0000000..62abd10
--- /dev/null
+++ b/src/assets/github-mark.svg
@@ -0,0 +1 @@
+
diff --git a/src/components/Activity.js b/src/components/Activity.js
new file mode 100644
index 0000000..86956db
--- /dev/null
+++ b/src/components/Activity.js
@@ -0,0 +1,80 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { client } from "@/config/appwrite-client";
+
+export default function Activity() {
+ const [activity, setActivity] = useState([]);
+
+ 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();
+ }, []);
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/components/Alert.js b/src/components/Alert.js
deleted file mode 100644
index 8a37001..0000000
--- a/src/components/Alert.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { classNames } from "@/utils/classNames";
-
-export default function Alert({ type = "success", message }) {
- const labels = {
- success: "Success",
- error: "Error",
- };
-
- return (
-
-
-
-
-
{labels[type]}
-
{message}
-
- {/*
onClick(false)}>
- Close
- */}
-
- );
-}
diff --git a/src/components/Footer.js b/src/components/Footer.js
deleted file mode 100644
index cb1b6b3..0000000
--- a/src/components/Footer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Link from "next/link";
-
-export default function Footer() {
- return (
-
- );
-}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
deleted file mode 100644
index 70fc032..0000000
--- a/src/components/Navbar.js
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-
-import { account } from "@/config/appwrite-client";
-import Alert from "./Alert";
-import Logo from "@/assets/repo-rater-logo.svg";
-import Image from "next/image";
-
-export default function Navbar() {
- const params = useSearchParams();
- const alert = params.get("alert");
- const message = params.get("message");
- const [user, setUser] = useState(null);
- const logout = async () => {
- await account.deleteSession("current");
- setUser(null);
- };
-
- const getUser = async () => {
- try {
- const user = await account.getSession("current");
- setUser(user);
- } catch (e) {
- console.log(e);
- }
- };
-
- useEffect(() => {
- getUser();
- }, []);
-
- return (
- <>
-
-
-
-
-
-
-
-
-
- RepoRater{" "}
-
- ... community ratings for GitHub Repositories
-
-
-
-
-
-
-
-
-
-
-
-
- {user && (
-
-
- )}
- {!user && (
-
-
- )}
- {user && (
-
-
- )}
-
-
-
- {alert &&
}
-
- );
-}
diff --git a/src/components/Repo.js b/src/components/Repo.js
deleted file mode 100644
index 17fc6a9..0000000
--- a/src/components/Repo.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-import { LinkIcon, ShareIcon } from "@heroicons/react/24/solid";
-
-import { abbreviateNumber } from "@/utils/abbreviateNumbers";
-import { classNames } from "@/utils/classNames";
-
-export default function Repo({ url, owner, name, logo, stars, votes }) {
- const percentage = Math.round((stars / 5) * 100);
- const groups = {
- recommend: 70,
- research: 40,
- };
-
- return (
-
-
-
-
-
-
{abbreviateNumber(stars)}
-
Average rating
-
-
-
-
-
Total Votes
-
{votes}
-
{owner}
-
-
-
-
-
-
groups.recommend && "badge-success",
- percentage < groups.recommend &&
- percentage > groups.research &&
- "badge-warning",
- percentage < groups.research && "badge-error",
- ])}
- >
-
- {logo && (
-
-
-
-
{percentage}%
- {percentage > groups.recommend && (
-
Recommended
- )}
- {percentage < groups.recommend && percentage > groups.research && (
-
Research
- )}
- {percentage < groups.research && (
-
Not recommended
- )}
-
-
-
-
- );
-}
diff --git a/src/components/Repos.js b/src/components/Repos.js
index ff0bc8a..fc0a6a3 100644
--- a/src/components/Repos.js
+++ b/src/components/Repos.js
@@ -1,35 +1,135 @@
-"use server";
-
-import { Query, Databases } from "node-appwrite";
-
-import { clientAdmin } from "@/config/appwrite-server";
-import Repo from "./Repo";
-
-export default async function Repos({ minimumVotes = 5 }) {
- const repos = await new Databases(clientAdmin()).listDocuments(
- process.env.APPWRITE_DATABASE_ID,
- process.env.APPWRITE_COLLECTION_REPOS_ID,
- [
- Query.orderDesc("rating"),
- Query.orderDesc("votes"),
- Query.greaterThanEqual("votes", minimumVotes),
- Query.limit(100),
- ]
- );
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+
+import { client } from "@/config/appwrite-client";
+import { classNames } from "@/utils/classNames";
+
+const statuses = {
+ research: "text-orange-500 bg-orange-100/10",
+ recommend: "text-green-400 bg-green-400/10",
+ caution: "text-rose-400 bg-rose-400/10",
+};
+const badges = {
+ research: "text-orange-500 bg-orange-100/10 ring-orange-400/20",
+ recommend: "text-green-400 bg-green-400/10 ring-green-400/20",
+ caution: "text-rose-400 bg-rose-400/10 ring-rose-400/20",
+};
+const groups = {
+ recommend: 70,
+ research: 40,
+};
+
+const calStatus = (percentage) => {
+ if (percentage >= groups.recommend) {
+ return "recommend";
+ }
+ if (percentage >= groups.research && percentage < groups.recommend) {
+ return "research";
+ }
+ return "caution";
+};
+
+export default function Repos({ minimumVotes = 5, keyword }) {
+ const [repos, setRepos] = useState([]);
+ const getRepos = async () => {
+ const params = [];
+ if (minimumVotes) {
+ params.push(`minimumVotes=${minimumVotes}`);
+ }
+ if (keyword) {
+ params.push(`keyword=${keyword}`);
+ }
+ const res = await fetch(
+ `/api/repos${params.length ? `?${params.join("&")}` : ""}`
+ );
+
+ const data = await res.json();
+
+ const repos = data.map((repo) => {
+ const percentage = Math.round((repo.rating / 5) * 100);
+ return {
+ ...repo,
+ percentage,
+ status: calStatus(percentage),
+ };
+ });
+
+ setRepos(repos);
+ };
+
+ useEffect(() => {
+ const events = [
+ `databases.${process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID}.collections.${process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_REPOS_ID}.documents`,
+ ];
+ client.subscribe(events, () => getRepos());
+ getRepos();
+ }, [keyword]);
return (
-
- {repos.documents.map((repo) => (
-
+
+
);
}
diff --git a/src/components/SideNav.js b/src/components/SideNav.js
new file mode 100644
index 0000000..023610a
--- /dev/null
+++ b/src/components/SideNav.js
@@ -0,0 +1,380 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useState, Fragment, useEffect } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+import {
+ ChartBarSquareIcon,
+ FolderIcon,
+ ServerIcon,
+ StarIcon,
+ XMarkIcon,
+} from "@heroicons/react/24/outline";
+
+import { classNames } from "@/utils/classNames";
+import Logo from "@/assets/repo-rater-logo.svg";
+import GitHub from "@/assets/github-mark.svg";
+import { account } from "@/config/appwrite-client";
+import getUser from "@/utils/github/getUser";
+
+const navigation = [
+ { name: "GitHub Repos", href: "/", icon: FolderIcon, current: false },
+ {
+ name: "Popular Repos",
+ href: "/popular",
+ icon: ServerIcon,
+ current: false,
+ },
+ {
+ name: "User Rankings",
+ href: "/rankings",
+ icon: ChartBarSquareIcon,
+ current: false,
+ },
+ {
+ name: "Star on GitHub",
+ href: "https://github.com/EddieHubCommunity/RepoRater",
+ icon: StarIcon,
+ current: false,
+ external: true,
+ css: "text-yellow-400",
+ },
+];
+
+export default function SideNav({ children }) {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+ const [user, setUser] = useState(null);
+
+ const login = async () => {
+ account.createOAuth2Session(
+ "github",
+ `${process.env.NEXT_PUBLIC_BASE_URL}/`,
+ `${process.env.NEXT_PUBLIC_BASE_URL}/`
+ );
+ };
+
+ const logout = async () => {
+ await account.deleteSession("current");
+ setUser(null);
+ };
+
+ const getAppwriteUser = async () => {
+ try {
+ const user = await account.getSession("current");
+ let githubUser = {};
+ if (user) {
+ githubUser = await getUser(user.providerAccessToken);
+ }
+ setUser(githubUser);
+ } catch (e) {
+ console.log(e);
+ }
+ };
+
+ useEffect(() => {
+ getAppwriteUser();
+ }, []);
+
+ const secure = [
+ {
+ id: 1,
+ name: "Add Rating",
+ href: "/rate",
+ initial: "+",
+ current: false,
+ },
+ // {
+ // id: 2,
+ // name: "Your Ratings",
+ // href: "/account/ratings",
+ // initial: "S",
+ // current: false,
+ // },
+ // {
+ // id: 3,
+ // name: "Your Repos",
+ // href: "/account/repos",
+ // initial: "R",
+ // current: false,
+ // },
+ {
+ id: 4,
+ name: "Logout",
+ href: "/",
+ onClick: logout,
+ initial: "L",
+ current: false,
+ },
+ ];
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ setSidebarOpen(false)}
+ >
+ Close sidebar
+
+
+
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+
+
+
+
+
+
+
+ {navigation.map((item) => (
+
+
+ ))}
+
+
+ {user && (
+
+
+ Secure
+
+
+ {secure.map((team) => (
+
+
+ {team.initial}
+
+ {team.name}
+
+
+ ))}
+
+
+ )}
+ {!user && (
+
+ Login
+
+
+ )}
+ {user && (
+
+
+ {user.name}
+
+
+ )}
+
+
+
+
+
+
+
+ {/* Static sidebar for desktop */}
+
+ {/* Sidebar component, swap this element with another sidebar if you like */}
+
+
+
+
+
+
+
+ {navigation.map((item) => (
+
+
+ ))}
+
+
+ {user && (
+
+
+ Secure
+
+
+ {secure.map((team) => (
+
+
+ {team.initial}
+
+ {team.name}
+
+
+ ))}
+
+
+ )}
+ {!user && (
+
+ Login
+
+
+ )}
+ {user && (
+
+
+ {user.name}
+
+
+ )}
+
+
+
+
+
+
{children}
+
+ );
+}
diff --git a/src/components/Stats.js b/src/components/Stats.js
index 9e92dbf..00050ed 100644
--- a/src/components/Stats.js
+++ b/src/components/Stats.js
@@ -1,83 +1,59 @@
-"use server";
+"use client";
-import { Query, Databases } from "node-appwrite";
+import { useEffect, useState } from "react";
-import { clientAdmin } from "@/config/appwrite-server";
+import { client } from "@/config/appwrite-client";
import { abbreviateNumber } from "@/utils/abbreviateNumbers";
-export default async function Stats() {
- const stats = (
- await new Databases(clientAdmin()).listDocuments(
- process.env.APPWRITE_DATABASE_ID,
- process.env.APPWRITE_COLLECTION_APP_ID,
- [Query.limit(1)]
- )
- ).documents[0];
+export default function Stats() {
+ const [stats, setStats] = useState([]);
- return (
-
-
-
-
-
Ratings
-
{abbreviateNumber(stats.ratings)}
-
Total Ratings Given
-
+ 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);
+ };
-
-
-
GitHub Repos
-
{abbreviateNumber(stats.repos)}
-
Rated Repositories
-
+ 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();
+ }, []);
-
-
-
+
+
+ {stats.map((stat) => (
+
-
Stars
-
{abbreviateNumber(stats.stars)}
-
Total Star Ratings
+
+ {stat.name}
+
+
+
+ {abbreviateNumber(stat.value)}
+
+ {stat.unit ? (
+ {stat.unit}
+ ) : null}
+
+
+ ))}
diff --git a/src/components/Toast.js b/src/components/Toast.js
index 9559c32..8887ccf 100644
--- a/src/components/Toast.js
+++ b/src/components/Toast.js
@@ -1,7 +1,15 @@
-export default function Toast({ message }) {
+import { classNames } from "@/utils/classNames";
+
+export default function Toast({ type = "info", message }) {
return (
-
-
+
diff --git a/src/components/User.js b/src/components/User.js
deleted file mode 100644
index cfabdf7..0000000
--- a/src/components/User.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import { abbreviateNumber } from "@/utils/abbreviateNumbers";
-import Image from "next/image";
-import Link from "next/link";
-
-export default function User({ username, votes, stars }) {
- const average = (stars / 5 / votes) * 100;
- return (
-
-
-
-
Total Ratings
-
{votes}
-
How many projects voted for
-
-
-
-
-
Total Stars
-
{stars}
-
How many stars were given
-
-
-
-
-
{abbreviateNumber(average)}%
-
Average
-
Rating given
-
-
- );
-}
diff --git a/src/components/Users.js b/src/components/Users.js
index 15db1f1..3ebb89e 100644
--- a/src/components/Users.js
+++ b/src/components/Users.js
@@ -1,14 +1,28 @@
"use server";
+import Image from "next/image";
import { Query, Databases } from "node-appwrite";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
import { clientAdmin } from "@/config/appwrite-server";
-import User from "./User";
+import { classNames } from "@/utils/classNames";
+import Link from "next/link";
-export default async function Repos() {
+const statuses = {
+ research: "text-orange-500 bg-orange-100/10",
+ recommend: "text-green-400 bg-green-400/10",
+ caution: "text-rose-400 bg-rose-400/10",
+};
+const badges = {
+ research: "text-orange-500 bg-orange-100/10 ring-orange-400/20",
+ recommend: "text-green-400 bg-green-400/10 ring-green-400/20",
+ caution: "text-rose-400 bg-rose-400/10 ring-rose-400/20",
+};
+
+export default async function Users() {
const ratings = await new Databases(clientAdmin()).listDocuments(
- process.env.APPWRITE_DATABASE_ID,
- process.env.APPWRITE_COLLECTION_RATINGS_ID,
+ process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID,
+ process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_RATINGS_ID,
[Query.limit(1000)]
);
const users = ratings.documents.reduce((acc, rating) => {
@@ -24,18 +38,76 @@ export default async function Repos() {
}, {});
return (
-
+
);
}
diff --git a/tailwind.config.js b/tailwind.config.js
index b17e4bc..f195917 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,5 +14,5 @@ module.exports = {
},
},
},
- plugins: [require("daisyui")],
+ plugins: [require("daisyui"), require("@tailwindcss/forms")],
};