Develop

app/[locale]/_components/HighlineList.tsx

@@ -0,0 +1,32 @@
+import { cookies } from "next/headers";
+
+import Highline from "@/components/Highline";
+import { useSupabaseServer } from "@/utils/supabase/server";
+
+export async function HighlineList({
+  searchValue,
+}: {
+  searchValue: string | undefined;
+}) {
+  const cookieStore = cookies();
+  const supabase = useSupabaseServer(cookieStore);
+
+  const highlines = searchValue
+    ? (
+        await supabase
+          .from("highline")
+          .select("*")
+          .ilike("name", `%${searchValue}%`)
+      ).data
+    : (await supabase.from("highline").select("*").limit(10)).data;
+
+  return (
+    <section className="flex flex-wrap justify-center gap-6">
+      {highlines && highlines?.length > 0
+        ? highlines.map((highline) => (
+            <Highline key={highline.id} highline={highline} />
+          ))
+        : null}
+    </section>
+  );
+}

app/[locale]/_components/HighlineListSkeleton.tsx

@@ -0,0 +1,23 @@
+import HighlineImage from "@/components/HighlineImage";
+
+export function HighlineListSkeleton() {
+  return (
+    <ul className="flex animate-pulse flex-wrap justify-center gap-6">
+      {Array.from(Array(8)).map((v) => (
+        <li
+          className="w-full rounded-lg border border-gray-200 bg-white shadow dark:border-gray-700 dark:bg-gray-800 md:w-96"
+          key={v}
+        >
+          <div className="relative block h-72 w-full opacity-25">
+            <HighlineImage coverImageId={null} />
+          </div>
+          <div className="p-5">
+            <div className="mt-4 h-6 w-28 rounded-lg bg-gray-200 dark:bg-gray-700" />
+            <div className="mt-2 h-3 w-full rounded-lg bg-gray-200 dark:bg-gray-700" />
+            <div className="mt-2 h-3 w-56 rounded-lg bg-gray-200 dark:bg-gray-700" />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

app/[locale]/_components/search.tsx

@@ -9,8 +9,8 @@ import { useRouter } from "@/navigation";
 import { createUrl } from "@/utils/helperFunctions";
 
 export default function Search() {
-  const router = useRouter();
   const t = useTranslations("home");
+  const router = useRouter();
   const searchParams = useSearchParams();
 
   function onSubmit(e: React.FormEvent<HTMLFormElement>) {

app/[locale]/page.tsx

@@ -1,44 +1,22 @@
-import { cookies } from "next/headers";
-
-import Highline from "@/components/Highline";
-import { useSupabaseServer } from "@/utils/supabase/server";
+import { Suspense } from "react";
 
+import { HighlineList } from "./_components/HighlineList";
+import { HighlineListSkeleton } from "./_components/HighlineListSkeleton";
 import Search from "./_components/search";
 
-export const dynamic = "force-dynamic";
-
 export default async function Home({
   params: { locale },
   searchParams,
 }: {
   params: { locale: "en" | "pt" };
-  searchParams?: { [key: string]: string | string[] | undefined };
+  searchParams: { [key: string]: string | undefined };
 }) {
-  const cookieStore = cookies();
-  const supabase = useSupabaseServer(cookieStore);
-
-  const { q: searchValue } = searchParams as {
-    [key: string]: string;
-  };
-  const highlines = searchValue
-    ? (
-        await supabase
-          .from("highline")
-          .select("*")
-          .ilike("name", `%${searchValue}%`)
-      ).data
-    : (await supabase.from("highline").select("*").limit(10)).data;
-
   return (
     <div className="mt-2 space-y-6 px-2">
       <Search />
-      <section className="flex flex-wrap justify-center gap-6">
-        {highlines && highlines?.length > 0
-          ? highlines.map((highline) => (
-              <Highline key={highline.id} highline={highline} />
-            ))
-          : null}
-      </section>
+      <Suspense fallback={<HighlineListSkeleton />}>
+        <HighlineList searchValue={searchParams["nameFilter"]} />
+      </Suspense>
     </div>
   );
 }

components/tabs/Ranking/CategoryDropdown.tsx

@@ -66,26 +66,6 @@ function CategoryDropdown({
                 </label>
               </li>
             ))}
-            {/* {categories.map((c) => (
-              <li key={c}>
-                <label
-                  htmlFor={c}
-                  className="flex items-center rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-500"
-                >
-                  <input
-                    id={c}
-                    type="radio"
-                    value={c}
-                    checked={selectedCategory === c}
-                    onChange={() => handleCategorySelect(c)}
-                    className="h-4 w-4 border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600"
-                  />
-                  <span className="ml-2 w-full rounded text-sm font-medium text-gray-500 dark:text-gray-300">
-                    {c}
-                  </span>
-                </label>
-              </li>
-            ))} */}
           </ul>
         </div>
       )}

components/tabs/Ranking/index.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import React, { useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
+import { usePathname, useRouter } from "@/navigation";
 import type { Tables } from "@/utils/supabase/database.types";
 
 import Cadenas from "./Cadenas";
@@ -20,6 +22,9 @@ export type Categories = Record<Category, { label: string }>;
 
 function Ranking({ highline }: Props) {
   const t = useTranslations("highline.tabs.ranking");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const categories = useMemo<Categories>(
     () => ({
       speedline: { label: "Speedline" },
@@ -29,13 +34,24 @@ function Ranking({ highline }: Props) {
     }),
     [t]
   );
-  const [selectedCategory, setSelectedCategory] = useState<Category>(
-    () => (localStorage.getItem("selectedCategory") as Category) || "speedline"
+
+  const selectedCategory: Category =
+    (searchParams.get("category") as Category) || "speedline";
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams]
   );
 
   function handleCategoryChange(category: Category) {
-    localStorage.setItem("selectedCategory", category);
-    setSelectedCategory(category);
+    router.push(pathname + "?" + createQueryString("category", category));
   }
 
   function renderCategory() {

components/tabs/Tabs.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { motion } from "framer-motion";
+import { useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 
+import { usePathname, useRouter } from "@/navigation";
 import type { Tables } from "@/utils/supabase/database.types";
 
 import Comments from "./Comments";
@@ -34,6 +36,24 @@ function tabMapping(tab: string, highline: Tables["highline"]["Row"]) {
 
 function Tabs({ highline }: Props) {
   const t = useTranslations("highline.tabs");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const tab = searchParams.get("tab") || "info";
+
+  // Get a new searchParams string by merging the current
+  // searchParams with a provided key/value pair
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+      params.delete("category");
+
+      return params.toString();
+    },
+    [searchParams]
+  );
 
   const tabs = useMemo<Tab[]>(
     () => [
@@ -52,7 +72,6 @@ function Tabs({ highline }: Props) {
     ],
     [t]
   );
-  const [selectedTabId, setSelectedTabId] = useState(tabs[0].id);
 
   return (
     <div className="h-full">
@@ -61,14 +80,15 @@ function Tabs({ highline }: Props) {
           <li
             key={item.id}
             className={`relative flex-auto cursor-pointer rounded-t-md text-base md:text-lg ${
-              item.id === selectedTabId
-                ? "text-blue-600 dark:text-blue-500"
-                : ""
+              item.id === tab ? "text-blue-600 dark:text-blue-500" : ""
             }`}
-            onClick={() => setSelectedTabId(item.id)}
+            onClick={(e) => {
+              e.preventDefault();
+              router.push(pathname + "?" + createQueryString("tab", item.id));
+            }}
           >
             {item.label}
-            {item.id === selectedTabId ? (
+            {item.id === tab ? (
               <motion.div
                 className="absolute -bottom-px left-0 right-0 h-px bg-blue-700"
                 layout
@@ -80,7 +100,7 @@ function Tabs({ highline }: Props) {
       </ul>
 
       <div className="overflow-y-auto overflow-x-hidden">
-        {tabMapping(selectedTabId, highline)}
+        {tabMapping(tab, highline)}
       </div>
     </div>
   );