significant refactor

src/features/bracket/components/preview.tsx

@@ -7,7 +7,7 @@ import {
   Loader,
 } from "@mantine/core";
 import { useEffect, useState } from "react";
-import { bracketQueries } from "../queries";
+import { bracketQueries, useBracketPreview } from "../queries";
 import { useQuery } from "@tanstack/react-query";
 import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
 import { BracketData, Match } from "../types";
@@ -21,9 +21,7 @@ interface PreviewTeam {
 
 export const PreviewBracket: React.FC = () => {
   const [teamCount, setTeamCount] = useState(20);
-  const { data, isLoading, error } = useQuery(
-    bracketQueries.preview(teamCount)
-  );
+  const { data, isLoading, error } = useBracketPreview(teamCount);
 
   const [teams, setTeams] = useState<PreviewTeam[]>([]);
 
@@ -45,7 +43,7 @@ export const PreviewBracket: React.FC = () => {
   useEffect(() => {
     if (!data || teams.length === 0) return;
 
-    const maps = createBracketMaps(data as BracketData);
+    const maps = createBracketMaps(data);
     setBracketMaps(maps);
 
     const mapBracket = (bracket: Match[][]) => {
@@ -88,7 +86,7 @@ export const PreviewBracket: React.FC = () => {
   return (
     <Container p={0} w="100%" style={{ userSelect: "none" }}>
       <Flex w="100%" justify="space-between" align="center" h="3rem">
-        <Group gap="sm" mx='auto'>
+        <Group gap="sm" mx="auto">
           <Text size="sm" c="dimmed">
             Teams:
           </Text>