rules, bracket page

src/features/tournaments/components/edit-rules.tsx

@@ -0,0 +1,44 @@
+import {
+  Stack,
+  Button
+} from "@mantine/core";
+import { useState, useCallback } from "react";
+import { useTournament } from "../queries";
+import useUpdateTournament from "../hooks/use-update-tournament";
+import { RichTextEditor } from "@/components/rich-text-editor";
+
+interface EditRulesProps {
+  tournamentId: string;
+  onClose?: () => void
+}
+
+const EditRules = ({ tournamentId, onClose }: EditRulesProps) => {
+  const [search, setSearch] = useState("");
+
+  const { data: tournament, isLoading: tournamentLoading } =
+    useTournament(tournamentId);
+
+  const { mutate: updateTournament, isPending: updatePending } = useUpdateTournament(tournamentId);
+  const [value, setValue] = useState(tournament.rules);
+
+  const handleSubmit = useCallback(
+    (rules?: string) => {
+      updateTournament({ rules }, {
+        onSuccess: () => {
+          onClose?.();
+        }
+      });
+    },
+    [updateTournament, tournamentId]
+  );
+
+  return (
+    <Stack gap="xs" w="100%">
+      <RichTextEditor value={value || ""} onChange={setValue} />
+      <Button onClick={() => handleSubmit(value)}>Submit</Button>
+      <Button variant="subtle" color="red" onClick={onClose}>Cancel</Button>
+    </Stack>
+  );
+};
+
+export default EditRules;

src/features/tournaments/components/manage-tournament.tsx

@@ -14,6 +14,7 @@ import EditEnrolledTeams from "./edit-enrolled-teams";
 import ListLink from "@/components/list-link";
 import { RichTextEditor } from "@/components/rich-text-editor";
 import React from "react";
+import EditRules from "./edit-rules";
 
 interface ManageTournamentProps {
   tournamentId: string;
@@ -90,9 +91,7 @@ const ManageTournament = ({ tournamentId }: ManageTournamentProps) => {
         opened={editRulesOpened}
         onChange={closeEditRules}
       >
-        <RichTextEditor value={v} onChange={setV} />
-
-        {v}
+        <EditRules tournamentId={tournamentId} onClose={closeEditRules} />
       </Sheet>
 
       <Sheet

src/features/tournaments/components/upcoming-tournament/index.tsx

@@ -5,7 +5,7 @@ import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core";
 import Countdown from "@/components/countdown";
 import ListLink from "@/components/list-link";
 import ListButton from "@/components/list-button";
-import { UsersIcon, ListIcon } from "@phosphor-icons/react";
+import { TreeStructureIcon, UsersIcon } from "@phosphor-icons/react";
 import EnrollTeam from "./enroll-team";
 import EnrollFreeAgent from "./enroll-free-agent";
 import TeamListButton from "./team-list-button";
@@ -16,6 +16,7 @@ import UpdateTeam from "./update-team";
 import UnenrollTeam from "./unenroll-team";
 import { useQueryClient } from "@tanstack/react-query";
 import { tournamentKeys } from "../../queries";
+import RulesListButton from "./rules-list-button";
 
 const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
   tournament,
@@ -42,8 +43,6 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
     queryClient.invalidateQueries({ queryKey: tournamentKeys.current })
   }
 
-  console.log(userTeam)
-
   return (
     <Stack gap="lg">
       <Header tournament={tournament} />
@@ -102,7 +101,12 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
             Icon={UsersIcon}
           />
         )}
-        <ListButton label="View Rules" Icon={ListIcon} onClick={() => {}} />
+        <ListLink
+            label={`View Bracket`}
+            to={`/tournaments/${tournament.id}/bracket`}
+            Icon={TreeStructureIcon}
+          />
+        <RulesListButton tournamentId={tournament.id} />
         <TeamListButton teams={tournament.teams || []} />
       </Box>
     </Stack>

src/features/tournaments/components/upcoming-tournament/rules-list-button.tsx

@@ -0,0 +1,45 @@
+import ListButton from "@/components/list-button"
+import Sheet from "@/components/sheet/sheet"
+import { useSheet } from "@/hooks/use-sheet"
+import { ListIcon } from "@phosphor-icons/react"
+import { useTournament } from "../../queries"
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor } from '@mantine/tiptap';
+import { Button, Stack } from "@mantine/core"
+
+interface RulesListButtonProps {
+  tournamentId: string;
+}
+
+const RulesListButton: React.FC<RulesListButtonProps> = ({ tournamentId }) => {
+  const { data: tournament } = useTournament(tournamentId);
+  const { open, isOpen, toggle } = useSheet();
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: tournament?.rules || '',
+    editable: false,
+  });
+
+  return (
+    <>
+      <ListButton
+        label={`View Rules`}
+        Icon={ListIcon}
+        onClick={open}
+      />
+
+      <Sheet title="Tournament Rules" opened={isOpen} onChange={toggle}>
+        <Stack gap="xs">
+          <RichTextEditor editor={editor}>
+            <RichTextEditor.Content />
+          </RichTextEditor>
+          <Button variant="subtle" c="red" onClick={toggle}>Close</Button>
+        </Stack>
+      </Sheet>
+    </>
+  )
+}
+
+export default RulesListButton;