diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx index d8b4b3e..90999da 100644 --- a/components/public/team-search.tsx +++ b/components/public/team-search.tsx @@ -2,10 +2,11 @@ import Image from "next/image"; import Link from "next/link"; -import { ArrowUpRightIcon, SearchIcon } from "lucide-react"; +import { ArrowUpRightIcon, SearchIcon, XIcon } from "lucide-react"; import { useMemo, useState, type ReactNode } from "react"; import { GuideImageExport } from "@/components/public/guide-image-export"; +import { Button } from "@/components/ui/button"; import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Kbd } from "@/components/ui/kbd"; @@ -18,6 +19,7 @@ import type { PublicGuide } from "@/lib/guides/queries"; import { matchesTeamSearch, sortTeamsByDps, + type DpsOrder, type TeamSearchTarget, } from "@/lib/guides/team-search"; import { cn } from "@/lib/utils"; @@ -361,7 +363,7 @@ function TeamCard({ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) { const [query, setQuery] = useState(""); const [searchTarget, setSearchTarget] = useState("all"); - const [dpsOrder, setDpsOrder] = useState<"best" | "worst">("best"); + const [dpsOrder, setDpsOrder] = useState(null); const filteredTeams = useMemo( () => sortTeamsByDps(teams.filter((team) => matchesTeamSearch({ team: [team.title], @@ -401,19 +403,30 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) { อาวุธ อาร์ติแฟกต์ - { - const order = value[0] as "best" | "worst" | undefined; - if (order) setDpsOrder(order); - }} - > - Best DPS - Worst DPS - +
+ { + const order = value[0] as Exclude | undefined; + if (order) setDpsOrder(order); + }} + > + Best DPS + Worst DPS + + +
{filteredTeams.length ? (
{filteredTeams.map((team) => ( diff --git a/lib/guides/team-search.test.ts b/lib/guides/team-search.test.ts index da5d464..afa3e5e 100644 --- a/lib/guides/team-search.test.ts +++ b/lib/guides/team-search.test.ts @@ -37,5 +37,6 @@ describe("team search", () => { ]; expect(sortTeamsByDps(teams, "best").map((item) => item.name)).toEqual(["best", "middle", "tie"]); expect(sortTeamsByDps(teams, "worst").map((item) => item.name)).toEqual(["middle", "tie", "best"]); + expect(sortTeamsByDps(teams, null).map((item) => item.name)).toEqual(["middle", "best", "tie"]); }); }); diff --git a/lib/guides/team-search.ts b/lib/guides/team-search.ts index 2c5cc46..bc82542 100644 --- a/lib/guides/team-search.ts +++ b/lib/guides/team-search.ts @@ -17,6 +17,8 @@ export interface DpsTeam { members: Array<{ damage: string | number }>; } +export type DpsOrder = "best" | "worst" | null; + export function teamDps(team: DpsTeam): number { const seconds = Number(team.rotationSeconds); if (!(seconds > 0)) return 0; @@ -25,8 +27,10 @@ export function teamDps(team: DpsTeam): number { export function sortTeamsByDps( teams: readonly Team[], - order: "best" | "worst", + order: DpsOrder, ): Team[] { + if (!order) return [...teams]; + return teams .map((team, index) => ({ team, index })) .sort((left, right) => {