sort with database functions instead, so much easier
This commit is contained in:
parent
0b4d96402a
commit
2d2b227a2b
|
|
@ -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>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue