HD
76 lines
1.4 KiB
TypeScript
76 lines
1.4 KiB
TypeScript
import { useCallback, useState } from "react";
|
|
import { Swiper } from "swiper/types";
|
|
|
|
// `name` for in-code usage, `label` for display
|
|
export interface Step {
|
|
name: string;
|
|
label: string;
|
|
canJumpTo?: string[];
|
|
}
|
|
|
|
const steps: Step[] = [
|
|
{
|
|
name: "welcomePage",
|
|
label: "Welcome Page"
|
|
},
|
|
{
|
|
name: "serverName",
|
|
label: "Set Name"
|
|
},
|
|
{
|
|
name: "adminAccount",
|
|
label: "Admin Account"
|
|
},
|
|
{
|
|
name: "whoCanSignUp",
|
|
label: "Who Can Sign Up"
|
|
},
|
|
{
|
|
name: "inviteLink",
|
|
label: "Invites",
|
|
canJumpTo: ["whoCanSignUp"]
|
|
},
|
|
{
|
|
name: "donePage",
|
|
label: "Done",
|
|
canJumpTo: ["whoCanSignUp", "inviteLink"]
|
|
}
|
|
];
|
|
|
|
export default function useServerSetup() {
|
|
const [swiper, setSwiper] = useState<Swiper | null>(null);
|
|
|
|
const [index, setIndex] = useState<number>(0);
|
|
const step = steps[index].name;
|
|
const setStep = useCallback(
|
|
(name: string) => {
|
|
const newIndex = steps.map((step) => step.name).indexOf(name);
|
|
setIndex(newIndex);
|
|
if (swiper !== null) {
|
|
swiper.slideTo(newIndex);
|
|
}
|
|
},
|
|
[swiper]
|
|
);
|
|
const nextStep = useCallback(() => {
|
|
setIndex((prev) => prev + 1);
|
|
if (swiper !== null) {
|
|
swiper.slideNext(500);
|
|
}
|
|
}, [swiper]);
|
|
|
|
const [serverName, setServerName] = useState("");
|
|
|
|
return {
|
|
swiper,
|
|
setSwiper,
|
|
step,
|
|
setStep,
|
|
nextStep,
|
|
serverName,
|
|
setServerName
|
|
};
|
|
}
|
|
|
|
export { steps };
|