Prototype

README.md

@@ -61,7 +61,8 @@ Want to see any other features? [Open an issue](https://github.com/EddieHubCommu
 8. Create an OAuth app on GitHub and connect it with Appwrite Authentication
 9. On collections `ratings` and `repos` enable read permissions for `all` users
 10. Create index on collection `repos`, named `url_search` with the attribute `url` and type `fulltext`
-11. Run the development server with:
+11. Create index on collection `ratings`, named `username_search`with the attribute `username`and type`fulltext`
+12. Run the development server with:
 
 ```bash
 npm ci

package.json

@@ -19,7 +19,8 @@
     "next": "14.0.4",
     "node-appwrite": "^11.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-use": "^17.5.0"
   },
   "devDependencies": {
     "@types/node": "20.10.4",

src/app/rankings/page.js

@@ -8,7 +8,7 @@ export const metadata = {
   title: "User Rankings - RepoRater" 
 };
 
-export default function Page() {
+export default function Page({ searchParams }) {
   return (
     <SideNav>
       <>
@@ -81,7 +81,7 @@ export default function Page() {
             </Menu> */}
           </header>
 
-          <Users />
+          <Users keyword={searchParams.keyword} />
         </main>
 
         <aside className="bg-black/10 lg:fixed lg:bottom-0 lg:right-0 lg:top-16 lg:w-96 lg:overflow-y-auto lg:border-l lg:border-white/5">

src/app/rate/Form.js

@@ -83,6 +83,7 @@ export default function Form({ name = "", owner = "" }) {
                 value={owner && name && `https://github.com/${owner}/${name}`}
                 placeholder="URL"
                 className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-sm sm:leading-6"
+                autoFocus
                 required
               />
             </div>

src/app/rate/page.js

@@ -28,7 +28,7 @@ export default function Rate() {
   }, []);
 
   return (
-    <SideNav>
+    <SideNav showSearch={false}>
       <>
         <main className="lg:pr-96">
           <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">

src/components/SideNav.js

@@ -18,12 +18,20 @@ 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";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { useDebounce } from "react-use";
 
-export default function SideNav({ setKeyword, children }) {
+export default function SideNav({
+  setKeyword = () => {},
+  showSearch = true,
+  children,
+}) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState("");
+  const [debouncedSearchKeyword, setDebouncedSearchKeyword] = useState("");
   const [user, setUser] = useState(null);
   const pathName = usePathname();
+  const router = useRouter();
 
   const login = async () => {
     account.createOAuth2Session(
@@ -55,6 +63,23 @@ export default function SideNav({ setKeyword, children }) {
     getAppwriteUser();
   }, []);
 
+  useDebounce(
+    () => {
+      setDebouncedSearchKeyword(searchKeyword);
+      setKeyword(searchKeyword);
+    },
+    200,
+    [searchKeyword],
+  );
+
+  useEffect(() => {
+    if (!debouncedSearchKeyword) {
+      router.push(pathName);
+    } else {
+      router.push(`?keyword=${debouncedSearchKeyword}`);
+    }
+  }, [debouncedSearchKeyword, router, pathName]);
+
   const navigation = [
     {
       name: "GitHub Repos",
@@ -392,31 +417,36 @@ export default function SideNav({ setKeyword, children }) {
             <span className="sr-only">Open sidebar</span>
             <Bars3Icon className="h-5 w-5" aria-hidden="true" />
           </button>
-
-          <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-            <form className="flex flex-1" onSubmit={(e) => e.preventDefault()}>
-              <label htmlFor="search-field" className="sr-only">
-                Search
-              </label>
-              <div className="relative w-full">
-                <MagnifyingGlassIcon
-                  className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-500"
-                  aria-hidden="true"
-                />
-                <input
-                  id="search-field"
-                  className="block h-full w-full border-0 bg-transparent py-0 pl-8 pr-0 text-white focus:ring-0 sm:text-sm"
-                  placeholder="Search..."
-                  type="search"
-                  name="search"
-                  onChange={(e) => {
-                    e.preventDefault();
-                    setKeyword(e.target.value);
-                  }}
-                />
-              </div>
-            </form>
-          </div>
+          {showSearch ? (
+            <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+              <form
+                className="flex flex-1"
+                onSubmit={(e) => e.preventDefault()}
+              >
+                <label htmlFor="search-field" className="sr-only">
+                  Search
+                </label>
+                <div className="relative w-full">
+                  <MagnifyingGlassIcon
+                    className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-500"
+                    aria-hidden="true"
+                  />
+                  <input
+                    id="search-field"
+                    className="block h-full w-full border-0 bg-transparent py-0 pl-8 pr-0 text-white focus:ring-0 sm:text-sm"
+                    placeholder="Search..."
+                    type="search"
+                    name="search"
+                    value={searchKeyword}
+                    onChange={(e) => {
+                      e.preventDefault();
+                      setSearchKeyword(e.target.value);
+                    }}
+                  />
+                </div>
+              </form>
+            </div>
+          ) : null}
         </div>
         {children}
       </div>

src/components/Users.js

@@ -19,11 +19,14 @@ const badges = {
   caution: "text-rose-400 bg-rose-400/10 ring-rose-400/20",
 };
 
-export default async function Users() {
+export default async function Users({ keyword = "" }) {
+  const query = keyword
+    ? [Query.limit(1000), Query.search("username", keyword)]
+    : [Query.limit(1000)];
   const ratings = await new Databases(clientAdmin()).listDocuments(
     process.env.NEXT_PUBLIC_APPWRITE_DATABASE_ID,
     process.env.NEXT_PUBLIC_APPWRITE_COLLECTION_RATINGS_ID,
-    [Query.limit(1000)]
+    query,
   );
   const users = ratings.documents.reduce((acc, rating) => {
     if (!acc[rating.username]) {