Skip to content

Commit

Permalink
Add useState to make track if links are clicked
Browse files Browse the repository at this point in the history
  • Loading branch information
@armanmoztar
armanmoztar committed Sep 26, 2024
1 parent 7a07f56 commit bc7b0e3
Showing 1 changed file with 63 additions and 26 deletions.
89 changes: 63 additions & 26 deletions src/pages/portal/onboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,30 @@ import Image from "next/image";
import Link from "next/link";
import "../../app/globals.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faDiscord } from "@fortawesome/free-brands-svg-icons";
import { faFigma } from "@fortawesome/free-brands-svg-icons";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
import { SiNotion } from "react-icons/si";
import { Button } from "@/components/primitives/button";
import { useRouter } from "next/router";

const DiscordUrl = "https://discord.gg/AgQbWykt";
const NotionUrl =
"https://www.notion.so/team/ad259dbf-777e-4e03-b71e-cff48817296f/join";
const FigmaUrl =
"https://www.figma.com/team_invite/redeem/LEa6Ds0anjxIFqZx37WF1X";
const iCalUrl = "/2024-2025-calendar.ics";
const URLs = {
GitHub: "https://github.com/ubclaunchpad",
Discord: "https://discord.gg/AgQbWykt",
Notion: "https://www.notion.so/team/ad259dbf-777e-4e03-b71e-cff48817296f/join",
Figma: "https://www.figma.com/team_invite/redeem/LEa6Ds0anjxIFqZx37WF1X",
iCal: "/2024-2025-calendar.ics", // Use this link to modify: https://ical.marudot.com/
};

const Onboarding = () => {
const router = useRouter();
const [step, setStep] = useState(0);
const [isNextClickable, setIsNextClickable] = useState(false);

const handleStartClick = () => {
setStep(1);
setIsNextClickable(false);
setTimeout(() => {
router.push({
pathname: "/portal/onboarding",
Expand All @@ -33,6 +37,7 @@ const Onboarding = () => {

const handleNextStepClick = (nextStep: number, state: string) => {
setStep(nextStep);
setIsNextClickable(false);
setTimeout(() => {
router.push({
pathname: "/portal/onboarding",
Expand All @@ -43,6 +48,7 @@ const Onboarding = () => {

const handlePrevStepClick = (prevStep: number, state: string) => {
setStep(prevStep);
setIsNextClickable(false);
setTimeout(() => {
router.push({
pathname: "/portal/onboarding",
Expand All @@ -51,6 +57,14 @@ const Onboarding = () => {
}, 1000);
};

const handleActionClick = () => {
setIsNextClickable(true);
};

const handleDownloadClick = () => {
setIsNextClickable(true);
};

const handleEndClick = () => {
setStep(7);
router.push("/");
Expand Down Expand Up @@ -118,15 +132,20 @@ const Onboarding = () => {
Step 1: Connect to GitHub
</div>
<Button
onClick={() => window.open(DiscordUrl, "_blank")}
onClick={() => {window.open(URLs.GitHub, "_blank");
handleActionClick()
}}
className="p-6 mt-4 bg-slate-800 w-full md:w-[w29px] font-semibold text-lg rounded-xl"
>
<FontAwesomeIcon icon={faDiscord} className="mr-2" />
{"Join discord server"}
<FontAwesomeIcon icon={faGithub} className="mr-2" />
{"Join GitHub server"}
</Button>
<Button
onClick={() => handleNextStepClick(2, "connect_github")}
className="p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl bg-primary"
disabled={!isNextClickable}
className={`p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl ${
isNextClickable ? "bg-primary" : "bg-gray-500 cursor-not-allowed"
}`}
>
{"Next"}
</Button>
Expand All @@ -143,15 +162,20 @@ const Onboarding = () => {
Step 2: Connect to Discord
</div>
<Button
onClick={() => window.open(DiscordUrl, "_blank")}
onClick={() => {window.open(URLs.Discord, "_blank");
handleActionClick()
}}
className="p-6 mt-4 bg-slate-800 w-full md:w-[w29px] font-semibold text-lg rounded-xl"
>
<FontAwesomeIcon icon={faDiscord} className="mr-2" />
{"Join discord server"}
</Button>
<Button
onClick={() => handleNextStepClick(3, "connect_discord")}
className="p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl bg-primary"
disabled={!isNextClickable}
className={`p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl ${
isNextClickable ? "bg-primary" : "bg-gray-500 cursor-not-allowed"
}`}
>
{"Next"}
</Button>
Expand All @@ -168,15 +192,20 @@ const Onboarding = () => {
Step 3: Connect to Notion
</div>
<Button
onClick={() => window.open(NotionUrl, "_blank")}
onClick={() => {window.open(URLs.Notion, "_blank");
handleActionClick()
}}
className="p-6 mt-4 bg-[#F7F7F7] w-full md:w-[w29px] font-semibold text-lg text-black rounded-xl"
>
<SiNotion className="mr-2" />
{"Join Notion workspace"}
</Button>
<Button
onClick={() => handleNextStepClick(4, "connect_notion")}
className="p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl bg-primary"
disabled={!isNextClickable}
className={`p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl ${
isNextClickable ? "bg-primary" : "bg-gray-500 cursor-not-allowed"
}`}
>
{"Next"}
</Button>
Expand All @@ -193,15 +222,20 @@ const Onboarding = () => {
Step 4: Connect to Figma
</div>
<Button
onClick={() => window.open(FigmaUrl, "_blank")}
onClick={() => {window.open(URLs.Figma, "_blank");
handleActionClick()
}}
className="p-6 mt-4 bg-[#03011B] w-full md:w-[w29px] font-semibold text-lg rounded-xl"
>
<FontAwesomeIcon icon={faFigma} className="mr-2" />
{"Join Figma workspace"}
</Button>
<Button
onClick={() => handleNextStepClick(5, "connect_figma")}
className="p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl bg-primary"
disabled={!isNextClickable}
className={`p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl ${
isNextClickable ? "bg-primary" : "bg-gray-500 cursor-not-allowed"
}`}
>
{"Next"}
</Button>
Expand All @@ -217,17 +251,19 @@ const Onboarding = () => {
<div className="text-4xl font-semibold text-center font-heading mb-8">
Step 5: Connect to Calendar
</div>
<a href={iCalUrl} download>
<Button
onClick={() => handleNextStepClick(6, "connect_calendar")}
className="p-4 mt-12 w-full md:w-[w29px] font-semibold text-lg rounded-xl bg-primary"
>
<FontAwesomeIcon icon={faCalendar} className="mr-2" />
{"Download .ical"}
</Button>
</a>
<Button
onClick={() => {
window.open(URLs.iCal, "_blank");
handleDownloadClick();
}}
className="p-6 mt-4 bg-slate-800 w-full md:w-[w29px] font-semibold text-lg rounded-xl"
>
<FontAwesomeIcon icon={faCalendar} className="mr-2" />
{"Download iCal"}
</Button>
<Button
onClick={() => handleNextStepClick(6, "connect_calendar")}
disabled={!isNextClickable}
className="p-4 mt-12 w-full md:w-[129px] font-semibold text-lg rounded-xl bg-primary"
>
{"Next"}
Expand All @@ -242,7 +278,8 @@ const Onboarding = () => {
) : (
<>
<div className="text-4xl font-semibold text-center font-heading mb-8">
Onboarding Complete!
Onboarding Complete!
<div className="text-xl mt-4">You can repeat these steps in future terms when needed</div>
</div>
<Button
onClick={handleEndClick}
Expand Down

0 comments on commit bc7b0e3

Please sign in to comment.