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 }) {
|
export function County({ county }) {
|
||||||
const [sort, setSort] = useState({
|
|
||||||
field: "rank",
|
|
||||||
type: "desc",
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<li
|
<li
|
||||||
className="mx-0 my-4 flex w-full max-w-3xl flex-shrink-0 flex-col space-y-4 overflow-auto
|
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">Place</th>
|
||||||
<th className="p-2">Player</th>
|
<th className="p-2">Player</th>
|
||||||
<th className="p-2">
|
<th className="p-2">
|
||||||
<button
|
<a href="?toSort=rank&type=asc">Rank</a>
|
||||||
onClick={() =>
|
|
||||||
setSort({
|
|
||||||
field: "rank",
|
|
||||||
type:
|
|
||||||
sort.field !== "rank"
|
|
||||||
? "desc"
|
|
||||||
: sort.type === "desc"
|
|
||||||
? "asc"
|
|
||||||
: "desc",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Rank{" "}
|
|
||||||
{sort.field === "rank"
|
|
||||||
? sort.type === "desc"
|
|
||||||
? "↓"
|
|
||||||
: "↑"
|
|
||||||
: ""}
|
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
<th className="p-2">
|
<th className="p-2">
|
||||||
<button
|
<a href="?toSort=score&type=desc">Score</a>
|
||||||
onClick={() =>
|
|
||||||
setSort({
|
|
||||||
field: "score",
|
|
||||||
type:
|
|
||||||
sort.field !== "score"
|
|
||||||
? "desc"
|
|
||||||
: sort.type === "desc"
|
|
||||||
? "asc"
|
|
||||||
: "desc",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Score{" "}
|
|
||||||
{sort.field === "score"
|
|
||||||
? sort.type === "desc"
|
|
||||||
? "↓"
|
|
||||||
: "↑"
|
|
||||||
: ""}
|
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
<th className="p-2">
|
<th className="p-2">
|
||||||
<button
|
<a href="?toSort=SSranks&type=desc">SS ranks</a>
|
||||||
onClick={() =>
|
|
||||||
setSort({
|
|
||||||
field: "SS",
|
|
||||||
type:
|
|
||||||
sort.field !== "SS"
|
|
||||||
? "desc"
|
|
||||||
: sort.type === "desc"
|
|
||||||
? "asc"
|
|
||||||
: "desc",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
SS ranks{" "}
|
|
||||||
{sort.field === "SS"
|
|
||||||
? sort.type === "desc"
|
|
||||||
? "↓"
|
|
||||||
: "↑"
|
|
||||||
: ""}
|
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
<th className="p-2">
|
<th className="p-2">
|
||||||
<button
|
<a href="?toSort=Sranks&type=desc">S ranks</a>
|
||||||
onClick={() =>
|
|
||||||
setSort({
|
|
||||||
field: "S",
|
|
||||||
type:
|
|
||||||
sort.field !== "S"
|
|
||||||
? "desc"
|
|
||||||
: sort.type === "desc"
|
|
||||||
? "asc"
|
|
||||||
: "desc",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
S ranks{" "}
|
|
||||||
{sort.field === "S" ? (sort.type === "desc" ? "↓" : "↑") : ""}
|
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
<th className="p-2">
|
<th className="p-2">
|
||||||
<button
|
<a href="?toSort=Aranks&type=desc">A ranks</a>
|
||||||
onClick={() =>
|
|
||||||
setSort({
|
|
||||||
field: "A",
|
|
||||||
type:
|
|
||||||
sort.field !== "A"
|
|
||||||
? "desc"
|
|
||||||
: sort.type === "desc"
|
|
||||||
? "asc"
|
|
||||||
: "desc",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
A ranks{" "}
|
|
||||||
{sort.field === "A" ? (sort.type === "desc" ? "↓" : "↑") : ""}
|
|
||||||
</button>
|
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{county.players
|
{county.players.map((player, index) => (
|
||||||
.sort((a, b) => {
|
<tr
|
||||||
if (sort.field === "rank")
|
key={player.id}
|
||||||
return sort.type === "desc"
|
className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
|
||||||
? parseInt(a.rank) - parseInt(b.rank)
|
>
|
||||||
: parseInt(b.rank) - parseInt(a.rank);
|
<td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
|
||||||
if (sort.field === "score")
|
{index + 1}.
|
||||||
return sort.type === "desc"
|
</td>
|
||||||
? a.score - b.score
|
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
||||||
: b.score - a.score;
|
<a
|
||||||
if (sort.field === "SS")
|
className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
|
||||||
return sort.type === "desc"
|
href={`https://osu.ppy.sh/u/${player.playerName}`}
|
||||||
? a.SSranks - b.SSranks
|
rel="noreferrer"
|
||||||
: b.SSranks - a.SSranks;
|
target="_blank"
|
||||||
if (sort.field === "S")
|
>
|
||||||
return sort.type === "desc"
|
{player.playerName}
|
||||||
? a.Sranks - b.Sranks
|
</a>
|
||||||
: b.Sranks - a.Sranks;
|
</td>
|
||||||
if (sort.field === "A")
|
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
||||||
return sort.type === "desc"
|
{player.rank ? `#${player.rank}` : "-"}
|
||||||
? a.Aranks - b.Aranks
|
</td>
|
||||||
: b.Aranks - a.Aranks;
|
<td className="whitespace-nowrap p-2 tracking-wide text-ctp-subtext1">
|
||||||
})
|
{new Intl.NumberFormat().format(player.score)}
|
||||||
.map((player, index) => (
|
</td>
|
||||||
<tr
|
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
||||||
key={player.id}
|
{player.SSranks}
|
||||||
className="divide-x-2 divide-ctp-surface0 border border-ctp-surface2 odd:bg-ctp-crust even:bg-ctp-mantle"
|
</td>
|
||||||
>
|
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
||||||
<td className="whitespace-nowrap p-2 font-bold text-ctp-subtext1">
|
{player.Sranks}
|
||||||
{index + 1}.
|
</td>
|
||||||
</td>
|
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
||||||
<td className="whitespace-nowrap p-2 text-ctp-subtext1">
|
{player.Aranks}
|
||||||
<a
|
</td>
|
||||||
className="text-ctp-subtext1 hover:text-ctp-text hover:underline"
|
</tr>
|
||||||
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>
|
|
||||||
))}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -110,11 +110,15 @@ export async function action({ request }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function loader({ 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({
|
const countyData = await prisma.county.findMany({
|
||||||
include: {
|
include: {
|
||||||
players: {
|
players: {
|
||||||
orderBy: {
|
orderBy: {
|
||||||
rank: "asc",
|
[toSort ? toSort : "rank"]: type ? type : "asc",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue