diff --git a/src/hooks/RaidGroupHooks.ts b/src/hooks/RaidGroupHooks.ts index 80ebd70..a8f8a1d 100644 --- a/src/hooks/RaidGroupHooks.ts +++ b/src/hooks/RaidGroupHooks.ts @@ -1,9 +1,27 @@ -import { CalendarEvent } from "@/interface/Calendar"; import { RaidGroup } from "@/interface/RaidGroup"; import { api } from "@/util/AxiosUtil"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +export function useGetRaidGroup(raidGroupId: string, disabled: boolean){ + return useQuery({ + queryKey: ["raidGroups", raidGroupId], + queryFn: async () => { + const response = await api.get(`/raidGroup/${raidGroupId}`); + + if(response.status !== 200){ + throw new Error("Failed to get raid group"); + } + else if(response.data.errors){ + throw new Error(response.data.errors.join(", ")); + } + + return response.data?.raidGroupId ? response.data as RaidGroup : undefined; + }, + enabled: !disabled + }); +} + export function useGetRaidGroups(page: number, pageSize: number, searchTerm?: string){ return useQuery({ queryKey: ["raidGroups", { page, pageSize, searchTerm }], @@ -152,24 +170,6 @@ export function useGetRaidGroupsCountByAccount(accountId: string, searchTerm?: s } -export function useGetRaidGroupCalendar(raidGroupId: string){ - return useQuery({ - queryKey: ["raidGroups", raidGroupId, "calendar"], - queryFn: async () => { - const response = await api.get(`/raidGroup/${raidGroupId}/calendar`); - - if(response.status !== 200){ - throw new Error("Failed to get raid group calendar"); - } - else if(response.data.errors){ - throw new Error(response.data.errors.join(", ")); - } - - return response.data as CalendarEvent[]; - } - }); -} - export function useCreateRaidGroup(){ const queryClient = useQueryClient(); diff --git a/src/pages/protected/GamePage.tsx b/src/pages/protected/GamePage.tsx index b3dcb79..3328358 100644 --- a/src/pages/protected/GamePage.tsx +++ b/src/pages/protected/GamePage.tsx @@ -45,7 +45,7 @@ export default function GamePage(){
Error
); } - else if(gameQuery.status === "success" && (gameQuery.data === undefined || gameQuery.data === undefined)){ + else if(gameQuery.status === "success" && gameQuery.data === undefined){ return ( ); diff --git a/src/pages/protected/RaidGroupPage.tsx b/src/pages/protected/RaidGroupPage.tsx index be8729d..9d611b8 100644 --- a/src/pages/protected/RaidGroupPage.tsx +++ b/src/pages/protected/RaidGroupPage.tsx @@ -1,10 +1,60 @@ +import TabGroup, { Tab } from "@/components/tab/TabGroup"; +import { useGetRaidGroup } from "@/hooks/RaidGroupHooks"; +import { RaidGroup } from "@/interface/RaidGroup"; +import RaidGroupCalendarDisplay from "@/ui/calendar/RaidGroupCalendarDisplay"; +import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader"; +import { useEffect, useState } from "react"; +import { Navigate, useParams } from "react-router"; + + export default function RaidGroupPage(){ - //TODO: + const { raidGroupId } = useParams(); - return ( -
- Raid Group Page -
- ); + const [ raidGroup, setRaidGroup ] = useState(); + const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false); + useEffect(() => { + if(raidGroupQuery.status === "success"){ + setRaidGroup(raidGroupQuery.data); + } + }, [ raidGroupQuery ]); + + + if(raidGroupQuery.status === "pending"){ + return ( +
Loading...
+ ); + } + else if(raidGroupQuery.status === "error"){ + return ( +
Error
+ ); + } + else if(raidGroupQuery.status === "success" && raidGroupQuery.data === undefined){ + return ( + + ); + } + else if(raidGroup){ + const tabs: Tab[] = [ + { + tabHeader: "Calendar", + tabContent: + } + ]; + + + return ( +
+ + +
+ ); + } } diff --git a/src/ui/calendar/CalendarDisplay.tsx b/src/ui/calendar/CalendarDisplay.tsx index eeb9062..36284ef 100644 --- a/src/ui/calendar/CalendarDisplay.tsx +++ b/src/ui/calendar/CalendarDisplay.tsx @@ -21,6 +21,7 @@ export default function CalendarDisplay({ }){ const [ displayCalendarEventModal, setDisplayCalendarEventModal ] = useState(false); const [ alterCalendarEvent, setAlterCalendarEvent ] = useState(); + const [ disableModal, setDisableModal ] = useState(false); const createGameCalendarEventMutate = useCreateGameCalendarEvent(gameId ?? ""); const updateGameCalendarEventMutate = useUpdateGameCalendarEvent(gameId ?? ""); @@ -34,8 +35,6 @@ export default function CalendarDisplay({ const showAddCalendarEventModal = (dateClickArg: DateClickArg) => { - console.log("showAdd()"); - console.log(dateClickArg.date); setAlterCalendarEvent({ eventStartDate: dateClickArg.date, eventEndDate: moment(dateClickArg.date).add(1, "hours").toDate() @@ -44,13 +43,19 @@ export default function CalendarDisplay({ } const showEditCalendarEventModal = (eventClickArg: EventClickArg) => { - setAlterCalendarEvent(calendarEvents.find((calEvent) => calEvent.calendarEventId === eventClickArg.event.id)); + const calendarEvent = calendarEvents.find((calEvent) => calEvent.calendarEventId === eventClickArg.event.id); + if(raidGroupId && calendarEvent?.gameId){ + setDisableModal(true); + } + + setAlterCalendarEvent(calendarEvent); setDisplayCalendarEventModal(true); } const hideCalendarEventModal = () => { setAlterCalendarEvent(undefined); setDisplayCalendarEventModal(false); + setDisableModal(false); } @@ -71,6 +76,7 @@ export default function CalendarDisplay({ display={displayCalendarEventModal} close={hideCalendarEventModal} calendarEvent={alterCalendarEvent} + disabled={disableModal} createCalendarEventMutate={gameId ? createGameCalendarEventMutate : createRaidGroupCalendarEventMutate} updateCalendarEventMutate={gameId ? updateGameCalendarEventMutate : updateRaidGroupCalendarEventMutate} deleteCalendarEventMutate={gameId ? deleteGameCalendarEventMutate : deleteRaidGroupCalendarEventMutate} diff --git a/src/ui/calendar/RaidGroupCalendarDisplay.tsx b/src/ui/calendar/RaidGroupCalendarDisplay.tsx new file mode 100644 index 0000000..dd37832 --- /dev/null +++ b/src/ui/calendar/RaidGroupCalendarDisplay.tsx @@ -0,0 +1,21 @@ +import RaidGroupCalendarLoader from "./RaidGroupCalendarLoader"; + + +export default function RaidGroupCalendarDisplay({ + gameId, + raidGroupId +}:{ + gameId: string; + raidGroupId: string; +}){ + return ( +
+ +
+ ); +} diff --git a/src/ui/calendar/RaidGroupCalendarLoader.tsx b/src/ui/calendar/RaidGroupCalendarLoader.tsx new file mode 100644 index 0000000..6b95a6e --- /dev/null +++ b/src/ui/calendar/RaidGroupCalendarLoader.tsx @@ -0,0 +1,38 @@ +import DangerMessage from "@/components/message/DangerMessage"; +import { useGetGameCalendar, useGetRaidGroupCalendar } from "@/hooks/CalendarHooks"; +import CalendarDisplay from "./CalendarDisplay"; + + +export default function RaidGroupCalendarLoader({ + gameId, + raidGroupId +}:{ + gameId: string; + raidGroupId: string; +}){ + const gameCalendarQuery = useGetGameCalendar(gameId); + const raidGroupCalendarQuery = useGetRaidGroupCalendar(raidGroupId); + + + if(raidGroupCalendarQuery.status === "error"){ + return (Error {raidGroupCalendarQuery.error.message}); + } + else if(gameCalendarQuery.status === "error"){ + return (Error {gameCalendarQuery.error.message}); + } + else if((raidGroupCalendarQuery.status === "pending") || (gameCalendarQuery.status === "pending")){ + return ( +
+ Loading... +
+ ); + } + else{ + return ( + + ); + } +} diff --git a/src/ui/calendar/RaidGroupHeader.tsx b/src/ui/calendar/RaidGroupHeader.tsx new file mode 100644 index 0000000..ef78281 --- /dev/null +++ b/src/ui/calendar/RaidGroupHeader.tsx @@ -0,0 +1,61 @@ +import { ButtonProps } from "@/components/button/Button"; +import { RaidGroup } from "@/interface/RaidGroup"; +import { useState } from "react"; +import RaidGroupAdminButtons from "../raidGroup/RaidGroupAdminButtons"; +import DeleteRaidGroupModal from "../raidGroup/modals/DeleteRaidGroupModal"; +import RaidGroupModal from "../raidGroup/modals/RaidGroupModal"; + + +export default function RaidGroupHeader({ + raidGroup +}:{ + raidGroup: RaidGroup; +}){ + const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false); + const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false); + + const buttonProps: ButtonProps = { + variant: "ghost", + size: "md", + shape: "square" + }; + + + return ( +

+
+ { + raidGroup.raidGroupIcon && + + } + {raidGroup.raidGroupName} +
+
+ setDisplayEditRaidGroupModal(true)} + showDeleteRaidGroupModal={() => setDisplayDeleteRaidGroupModal(true)} + /> +
+ setDisplayEditRaidGroupModal(false)} + raidGroup={raidGroup} + /> + setDisplayDeleteRaidGroupModal(false)} + raidGroup={raidGroup} + /> +

+ ); +} diff --git a/src/ui/calendar/modals/CalendarEventModal.tsx b/src/ui/calendar/modals/CalendarEventModal.tsx index c3a3bf1..6727492 100644 --- a/src/ui/calendar/modals/CalendarEventModal.tsx +++ b/src/ui/calendar/modals/CalendarEventModal.tsx @@ -17,6 +17,7 @@ export default function CalendarEventModal({ display, close, calendarEvent, + disabled, createCalendarEventMutate, updateCalendarEventMutate, deleteCalendarEventMutate @@ -24,6 +25,7 @@ export default function CalendarEventModal({ display: boolean; close: () => void; calendarEvent?: CalendarEvent; + disabled?: boolean; createCalendarEventMutate: UseMutationResult; updateCalendarEventMutate: UseMutationResult; deleteCalendarEventMutate: UseMutationResult; @@ -117,6 +119,7 @@ export default function CalendarEventModal({ placeholder="Event Name" onChange={(e) => setEventName(e.target.value)} value={eventName} + disabled={disabled} />