sort by last created

app/page.tsx

@@ -1,22 +1,29 @@
 import { fetchAllPages } from "@/utils";
 import { SpaceProps } from "@/utils/type";
 import { Spaces } from "@/components/spaces";
+import { Suspense } from "react";
 
-async function getSpaces() {
+async function getSpaces(sort: string) {
   try {
-    const response = await fetchAllPages();
+    const response = await fetchAllPages(sort);
     return response as SpaceProps[];
   } catch {
     return [];
   }
 }
 
-export default async function Home() {
-  const spaces = await getSpaces();
+export default async function Home({
+  searchParams: { sort },
+}: {
+  searchParams: { sort: string };
+}) {
+  const spaces = await getSpaces(sort);
   return (
     <section className="flex h-screen overflow-auto">
       <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
-        <Spaces spaces={spaces} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Spaces spaces={spaces} />
+        </Suspense>
       </div>
     </section>
   );

components/spaces/index.tsx

@@ -3,22 +3,20 @@ import { useMemo, useState } from "react";
 
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
-import { sortByCreatedAt, sortByLikes } from "@/utils";
+import { fetchAllPages, sortByCreatedAt, sortByLikes } from "@/utils";
 
 import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
+import { useUpdateEffect } from "react-use";
+import { useRouter } from "next/navigation";
 
-export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({
-  spaces: initialSpaces,
-}) => {
-  const [sort, setSort] = useState<"likes" | "createdAt">("createdAt");
+export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
+  const router = useRouter();
+  const [sort, setSort] = useState<"likes" | "createdAt">("likes");
 
-  const spaces = useMemo(() => {
-    if (sort === "likes") {
-      return sortByLikes(initialSpaces);
-    }
-    return sortByCreatedAt(initialSpaces);
-  }, [initialSpaces, sort]);
+  useUpdateEffect(() => {
+    router.push("/?sort=" + sort);
+  }, [sort]);
 
   return (
     <>

utils/index.ts

@@ -1,18 +1,18 @@
 import { SpaceProps } from "./type";
 
-export const fetchAllPages = async () => {
+export const fetchAllPages = async (sort = "trending") => {
   const filter_key = "zero-a10g";
   
-  const pageNumbers = Array.from({ length: 200 }, (_, i) => i);
+  const pageNumbers = Array.from({ length: 250 }, (_, i) => i);
   const urls = pageNumbers.map(async (pageNumber) => {
-    const url = `https://huggingface.co/spaces-json?p=${pageNumber}&sort=trending`;
+    const url = `https://huggingface.co/spaces-json?p=${pageNumber}&sort=${sort}`;
     const response = await fetch(url);
     const json = await response.json();
     return json?.spaces ?? [];
   });
   const jsonResponses = await Promise.all(urls);
   const spaces = jsonResponses.flat()?.filter((space) => space?.runtime?.hardware?.current === filter_key && !space?.private);
-  return sortByCreatedAt(spaces);
+  return spaces;
 };
 
 export const sortByCreatedAt = (spaces: SpaceProps[]) => {