Tutorial Working

src/pages/protected/RaidGroupPage.tsx

@@ -1,6 +1,8 @@
 import DangerMessage from "@/components/message/DangerMessage";
 import TabGroup, { Tab } from "@/components/tab/TabGroup";
+import TutorialComponent from "@/components/TutorialComponent";
 import { useGetRaidGroup } from "@/hooks/RaidGroupHooks";
+import { TutorialStatus } from "@/interface/AccountTutorialStatus";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { useAuth } from "@/providers/AuthProvider";
 import RaidGroupAccountsTab from "@/ui/account/RaidGroupAccountsTab";
@@ -12,17 +14,20 @@ import RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
 import RaidInstanceTab from "@/ui/raidInstance/RaidInstanceTab";
 import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
 import { isRaidGroupAdmin } from "@/util/PermissionUtil";
+import { raidGroupTutorialSteps } from "@/util/TutorialUtil";
 import { useEffect, useState } from "react";
 import { Navigate, useParams } from "react-router";
 
 
 export default function RaidGroupPage(){
 	const { raidGroupId } = useParams();
-	const { accountPermissions, raidGroupPermissions } = useAuth();
-
+	const { accountPermissions, raidGroupPermissions, tutorialsStatus, setTutorialsStatus } = useAuth();
 
 	const [ raidGroup, setRaidGroup ] = useState<RaidGroup>();
+
+
 	const raidGroupQuery = useGetRaidGroup(raidGroupId ?? "", false);
+
 	useEffect(() => {
 		if(raidGroupQuery.status === "success"){
 			setRaidGroup(raidGroupQuery.data);
@@ -30,6 +35,18 @@ export default function RaidGroupPage(){
 	}, [ raidGroupQuery ]);
 
 
+	const updateRaidGroupTutorialStatus = () => {
+		const newTutorialsStatus = { ...tutorialsStatus };
+		if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.COMPLETED){
+			newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.NOT_COMPLETED;
+		}
+		else if(tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED){
+			newTutorialsStatus.raidGroupTutorialStatus = TutorialStatus.COMPLETED;
+		}
+		setTutorialsStatus(newTutorialsStatus);
+	}
+
+
 	if(raidGroupQuery.status === "pending"){
 		return (
 			<div>Loading...</div>
@@ -48,22 +65,27 @@ export default function RaidGroupPage(){
 	else if(raidGroup){
 		const tabs: Tab[] = [
 			{
+				tabId: "calendarTab",
 				tabHeader: "Calendar",
 				tabContent: <RaidGroupCalendarDisplay gameId={raidGroup?.gameId ?? ""} raidGroupId={raidGroupId!}/>
 			},
 			{
+				tabId: "peopleTab",
 				tabHeader: "People",
 				tabContent: <PersonTab raidGroup={raidGroup}/>
 			},
 			{
+				tabId: "classGroupsTab",
 				tabHeader: "Class Groups",
 				tabContent: <ClassGroupsTab raidGroup={raidGroup}/>
 			},
 			{
+				tabId: "raidLayoutsTab",
 				tabHeader: "Raid Layout",
 				tabContent: <RaidLayoutTab raidGroup={raidGroup}/>
 			},
 			{
+				tabId: "instancesTab",
 				tabHeader: "Raid Instances",
 				tabContent: <RaidInstanceTab raidGroup={raidGroup}/>
 			}
@@ -71,10 +93,12 @@ export default function RaidGroupPage(){
 
 		if(isRaidGroupAdmin(raidGroupId!, raidGroupPermissions, accountPermissions)){
 			tabs.push({
+				tabId: "usersTab",
 				tabHeader: "Users",
 				tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
 			});
 			tabs.push({
+				tabId: "requestsTab",
 				tabHeader: "Requests",
 				tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
 			});
@@ -85,6 +109,15 @@ export default function RaidGroupPage(){
 			<main
 				className="flex flex-col items-center justify-center gap-y-8"
 			>
+				<TutorialComponent
+					steps={raidGroupTutorialSteps}
+					run={tutorialsStatus.raidGroupTutorialStatus === TutorialStatus.NOT_COMPLETED}
+					showProgress={true}
+					showSkipButton={true}
+					continuous={true}
+					disableScrolling={true}
+					updateFunction={updateRaidGroupTutorialStatus}
+				/>
 				<RaidGroupHeader
 					raidGroup={raidGroup}
 				/>