sort with database functions instead, so much easier

app/components/County.jsx

@@ -1,11 +1,4 @@
-import { useState } from "react";
-
 export function County({ county }) {
-  const [sort, setSort] = useState({
-    field: "rank",
-    type: "desc",
-  });
-
   return (
     <li
       className="mx-0 my-4 flex w-full max-w-3xl flex-shrink-0 flex-col space-y-4 overflow-auto 
@@ -23,168 +16,58 @@ export function County({ county }) {
               <th className="p-2">Place</th>
               <th className="p-2">Player</th>
               <th className="p-2">
-                <button
-                  onClick={() =>
-                    setSort({
-                      field: "rank",
-                      type:
-                        sort.field !== "rank"
-                          ? "desc"
-                          : sort.type === "desc"
-                          ? "asc"
-                          : "desc",
-                    })
-                  }
-                >
-                  Rank{" "}
-                  {sort.field === "rank"
-                    ? sort.type === "desc"
-                      ? "↓"
-                      : "↑"
-                    : ""}
-                </button>
+                <a href="?toSort=rank&type=asc">Rank</a>
               </th>
               <th className="p-2">
-                <button
-                  onClick={() =>
-                    setSort({
-                      field: "score",
-                      type:
-                        sort.field !== "score"
-                          ? "desc"
-                          : sort.type === "desc"
-                          ? "asc"
-                          : "desc",
-                    })
-                  }
-                >
-                  Score{" "}
-                  {sort.field === "score"
-                    ? sort.type === "desc"
-                      ? "↓"
-                      : "↑"
-                    : ""}
-                </button>
+                <a href="?toSort=score&type=desc">Score</a>
               </th>
               <th className="p-2">
-                <button
-                  onClick={() =>
-                    setSort({
-                      field: "SS",
-                      type:
-                        sort.field !== "SS"
-                          ? "desc"
-                          : sort.type === "desc"
-                          ? "asc"
-                          : "desc",
-                    })
-                  }
-                >
-                  SS ranks{" "}
-                  {sort.field === "SS"
-                    ? sort.type === "desc"
-                      ? "↓"
-                      : "↑"
-                    : ""}
-                </button>
+                <a href="?toSort=SSranks&type=desc">SS ranks</a>
               </th>
               <th className="p-2">
-                <button
-                  onClick={() =>
-                    setSort({
-                      field: "S",
-                      type:
-                        sort.field !== "S"
-                          ? "desc"
-                          : sort.type === "desc"
-                          ? "asc"
-                          : "desc",
-                    })
-                  }
-                >
-                  S ranks{" "}
-                  {sort.field === "S" ? (sort.type === "desc" ? "↓" : "↑") : ""}
-                </button>
+                <a href="?toSort=Sranks&type=desc">S ranks</a>
               </th>
               <th className="p-2">
-                <button
-                  onClick={() =>
-                    setSort({
-                      field: "A",
-                      type:
-                        sort.field !== "A"
-                          ? "desc"
-                          : sort.type === "desc"
-                          ? "asc"
-                          : "desc",
-                    })
-                  }
-                >
-                  A ranks{" "}
-                  {sort.field === "A" ? (sort.type === "desc" ? "↓" : "↑") : ""}
-                </button>
+                <a href="?toSort=Aranks&type=desc">A ranks</a>
               </th>
             </tr>
           </thead>
           <tbody>
-            {county.players
-              .sort((a, b) => {
-                if (sort.field === "rank")
-                  return sort.type === "desc"
-                    ? parseInt(a.rank) - parseInt(b.rank)
-                    : parseInt(b.rank) - parseInt(a.rank);
-                if (sort.field === "score")
-                  return sort.type === "desc"
-                    ? a.score - b.score
-                    : b.score - a.score;
-                if (sort.field === "SS")
-                  return sort.type === "desc"
-                    ? a.SSranks - b.SSranks
-                    : b.SSranks - a.SSranks;
-                if (sort.field === "S")
-                  return sort.type === "desc"
-                    ? a.Sranks - b.Sranks
-                    : b.Sranks - a.Sranks;
-                if (sort.field === "A")
-                  return sort.type === "desc"
-                    ? a.Aranks - b.Aranks
-                    : b.Aranks - a.Aranks;
-              })
-              .map((player, index) => (
-                <tr
-                  key={player.id}
-                  className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
-                >
-                  <td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
-                    {index + 1}.
-                  </td>
-                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
-                    <a
-                      className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
-                      href={`https://osu.ppy.sh/u/${player.playerName}`}
-                      referrerPolicy="no-referrer"
-                      target="_blank"
-                    >
-                      {player.playerName}
-                    </a>
-                  </td>
-                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
-                    {player.rank ? `#${player.rank}` : "-"}
-                  </td>
-                  <td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
-                    {new Intl.NumberFormat().format(player.score)}
-                  </td>
-                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
-                    {player.SSranks}
-                  </td>
-                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
-                    {player.Sranks}
-                  </td>
-                  <td className="whitespace-nowrap p-2 text-ctp-subtext1">
-                    {player.Aranks}
-                  </td>
-                </tr>
-              ))}
+            {county.players.map((player, index) => (
+              <tr
+                key={player.id}
+                className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
+              >
+                <td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
+                  {index + 1}.
+                </td>
+                <td className="whitespace-nowrap p-2 text-ctp-subtext1">
+                  <a
+                    className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
+                    href={`https://osu.ppy.sh/u/${player.playerName}`}
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    {player.playerName}
+                  </a>
+                </td>
+                <td className="whitespace-nowrap p-2 text-ctp-subtext1">
+                  {player.rank ? `#${player.rank}` : "-"}
+                </td>
+                <td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
+                  {new Intl.NumberFormat().format(player.score)}
+                </td>
+                <td className="whitespace-nowrap p-2 text-ctp-subtext1">
+                  {player.SSranks}
+                </td>
+                <td className="whitespace-nowrap p-2 text-ctp-subtext1">
+                  {player.Sranks}
+                </td>
+                <td className="whitespace-nowrap p-2 text-ctp-subtext1">
+                  {player.Aranks}
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       ) : (

app/routes/index.jsx

@@ -110,11 +110,15 @@ export async function action({ request }) {
 }
 
 export async function loader({ request }) {
+  const url = new URL(request.url);
+  const toSort = url.searchParams.get("toSort");
+  const type = url.searchParams.get("type");
+
   const countyData = await prisma.county.findMany({
     include: {
       players: {
         orderBy: {
-          rank: "asc",
+          [toSort ? toSort : "rank"]: type ? type : "asc",
         },
       },
     },