fix : use original sort

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<TeamSearchTarget>("all");
-  const [dpsOrder, setDpsOrder] = useState<"best" | "worst">("best");
+  const [dpsOrder, setDpsOrder] = useState<DpsOrder>(null);
   const filteredTeams = useMemo(
     () => sortTeamsByDps(teams.filter((team) => matchesTeamSearch({
         team: [team.title],
@@ -401,19 +403,30 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
         <ToggleGroupItem value="weapon">อาวุธ</ToggleGroupItem>
         <ToggleGroupItem value="artifact">อาร์ติแฟกต์</ToggleGroupItem>
       </ToggleGroup>
-      <ToggleGroup
-        aria-label="เรียงทีมตาม DPS"
-        variant="outline"
-        size="sm"
-        value={[dpsOrder]}
-        onValueChange={(value) => {
-          const order = value[0] as "best" | "worst" | undefined;
-          if (order) setDpsOrder(order);
-        }}
-      >
-        <ToggleGroupItem value="best">Best DPS</ToggleGroupItem>
-        <ToggleGroupItem value="worst">Worst DPS</ToggleGroupItem>
-      </ToggleGroup>
+      <div className="flex items-center gap-2">
+        <ToggleGroup
+          aria-label="เรียงทีมตาม DPS"
+          variant="outline"
+          size="sm"
+          value={dpsOrder ? [dpsOrder] : []}
+          onValueChange={(value) => {
+            const order = value[0] as Exclude<DpsOrder, null> | undefined;
+            if (order) setDpsOrder(order);
+          }}
+        >
+          <ToggleGroupItem value="best">Best DPS</ToggleGroupItem>
+          <ToggleGroupItem value="worst">Worst DPS</ToggleGroupItem>
+        </ToggleGroup>
+        <Button
+          variant="ghost"
+          size="sm"
+          disabled={!dpsOrder}
+          onClick={() => setDpsOrder(null)}
+        >
+          <XIcon data-icon="inline-start" />
+          Clear
+        </Button>
+      </div>
       {filteredTeams.length ? (
         <div className="grid gap-5 xl:grid-cols-2">
           {filteredTeams.map((team) => (

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"]);
   });
 });

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<Team extends DpsTeam>(
   teams: readonly Team[],
-  order: "best" | "worst",
+  order: DpsOrder,
 ): Team[] {
+  if (!order) return [...teams];
+
   return teams
     .map((team, index) => ({ team, index }))
     .sort((left, right) => {