Restructured onboarding to be a component instead of context

Author: innopoop

src/components/Onboarding/Onboarding.tsx

@@ -1,26 +1,33 @@
-import React, { ReactNode } from "react";
+import classNames from "classnames";
+import React, { ReactNode, useState } from "react";
 import { Card, Text } from "../atomic";
-import { useOnboarding } from "./OnboardingContext";
+import OnboardingComponent from "./OnboardingComponent";
 
 type OnboardingLayoutProps = {
   currentPageChildren: ReactNode;
 };
 
 const OnboardingLayout = ({ currentPageChildren }: OnboardingLayoutProps) => {
-  const { switchingRoutes, OnboardingComponent } = useOnboarding();
+  const [switchingRoutes, setSwitchingRoutes] = useState(false);
 
-  if (switchingRoutes) return <></>;
+  const onboardingStyles = classNames({
+    "flex flex-col h-full w-full bg-tertiary": true,
+    hidden: switchingRoutes,
+  });
 
   return (
-    <div className="flex flex-col h-full w-full bg-tertiary">
+    <div className={onboardingStyles}>
       <div className="h-3/4 w-full box-border">{currentPageChildren}</div>
 
       <div className="h-1/4 w-full z-10 px-6">
         <Card className="animate-border-pulse z-10 w-full p-4 space-y-4 box-border">
           <Text h2 b>
             Welcome to your new program!
           </Text>
-          {OnboardingComponent}
+          <OnboardingComponent
+            switchingRoutes={switchingRoutes}
+            setSwitchingRoutes={setSwitchingRoutes}
+          />
         </Card>
       </div>
     </div>

src/components/Onboarding/OnboardingComponent.tsx

@@ -1,19 +1,153 @@
+import Link from "next/link";
 import { useRouter } from "next/router";
+import React from "react";
+import {
+  UpdateProfileInput,
+  useUpdateProfileMutation,
+} from "../../generated/graphql";
+import {
+  AuthorizationLevel,
+  useAuthorizationLevel,
+  useCurrentProfile,
+} from "../../hooks";
+import LocalStorage from "../../utils/localstorage";
 import { Button, Text } from "../atomic";
 import StepTracker from "../atomic/StepTracker";
-import { OnboardingProps } from "./OnboardingContext";
+
+const ONBOARDING_STEP = "Onboarding Step";
+
+type OnboardingText = (baseRoute: string) => {
+  [key: number]: { step: string; route: string };
+};
+
+const authorizationLevelToMaxSteps = (authLevel: AuthorizationLevel) => {
+  switch (authLevel) {
+    case AuthorizationLevel.Admin:
+      return 5;
+    case AuthorizationLevel.Mentor:
+      return 2;
+    case AuthorizationLevel.Mentee:
+      return 2;
+    default:
+      return 0;
+  }
+};
+
+const AdminOnboardingText: OnboardingText = (baseRoute: string) => ({
+  1: {
+    step: "Set up your program homepage",
+    route: baseRoute,
+  },
+  2: {
+    step: "Edit your mentor applications",
+    route: baseRoute + "/applications/edit-mentor-app",
+  },
+  3: {
+    step: "Edit your mentee applications",
+    route: baseRoute + "/applications/edit-mentee-app",
+  },
+  4: {
+    step: "Edit your mentor profile structure",
+    route: baseRoute + "/mentors/edit-profile",
+  },
+  5: {
+    step: "Edit your mentee profile structure",
+    route: baseRoute + "/mentees/edit-profile",
+  },
+});
+
+const MentorOnboardingText: OnboardingText = (baseRoute: string) => ({
+  1: {
+    step: "Fill out your profile",
+    route: baseRoute + "/edit-profile",
+  },
+  2: {
+    step: "Set your availability",
+    route: baseRoute + "/availability",
+  },
+});
+
+const MenteeOnboardingText: OnboardingText = (baseRoute: string) => ({
+  1: {
+    step: "Fill out your profile",
+    route: baseRoute + "/edit-profile",
+  },
+  2: {
+    step: "Browse through available mentors",
+    route: baseRoute + "/mentors",
+  },
+});
+
+const authLevelToText = (authLevel: AuthorizationLevel) => {
+  switch (authLevel) {
+    case AuthorizationLevel.Admin:
+      return AdminOnboardingText;
+    case AuthorizationLevel.Mentor:
+      return MentorOnboardingText;
+    default:
+      return MenteeOnboardingText;
+  }
+};
+
+type OnboardingProps = {
+  switchingRoutes: boolean;
+  setSwitchingRoutes: (bool: boolean) => void;
+};
 
 const Onboarding = ({
-  onFinish,
-  currentStep,
-  setCurrentStep,
-  loading,
-  setLoading,
-  onboardingText,
-  MAX_STEPS,
+  switchingRoutes,
+  setSwitchingRoutes,
 }: OnboardingProps) => {
+  const currentProfile = useCurrentProfile();
+  const [updateProfile] = useUpdateProfileMutation({
+    refetchQueries: ["getMyUser"],
+  });
+
+  const authorizationLevel = useAuthorizationLevel();
   const router = useRouter();
 
+  const MAX_STEPS = authorizationLevelToMaxSteps(authorizationLevel);
+  const baseRoute = `/program/${router.query.slug}/${router.query.profileRoute}`;
+  const onboardingText = authLevelToText(authorizationLevel)(baseRoute);
+
+  const onFinish = () => {
+    const updateProfileInput: UpdateProfileInput = {
+      onboarded: true,
+    };
+    updateProfile({
+      variables: {
+        profileId: currentProfile.currentProfile!.profileId,
+        data: updateProfileInput,
+      },
+    })
+      .then(() => {
+        currentProfile.refetchCurrentProfile!();
+        LocalStorage.delete(ONBOARDING_STEP);
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const storedStep = LocalStorage.get(ONBOARDING_STEP);
+  const currentStep =
+    storedStep && typeof storedStep == "number" ? storedStep : 1;
+
+  //If the user tries to navigate to another route or if they land on a page that isn't the first step
+  //Return them to the actual page of the current step
+  if (
+    router.asPath !== onboardingText[currentStep]["route"] &&
+    !switchingRoutes
+  ) {
+    //Hide content if switching routes
+    setSwitchingRoutes(true);
+    router
+      .push(onboardingText[currentStep]["route"])
+      .then(() => setSwitchingRoutes(false));
+  }
+
+  const prevStep = Math.max(currentStep - 1, 1);
+  const nextStep = Math.min(currentStep + 1, MAX_STEPS);
+
+  //Use Links to switch between tabs so that you don't have to wait for router.push
   return (
     <div className="w-full flex flex-col items-center space-y-2 z-10">
       <Text h3 className="w-full">
@@ -24,41 +158,37 @@ const Onboarding = ({
         <div className="w-full">
           <StepTracker steps={MAX_STEPS} currentStep={currentStep} />
         </div>
+
         <Button
           size="small"
           variant="inverted"
-          disabled={currentStep === 1 || loading}
+          disabled={currentStep === 1}
           onClick={() => {
-            setLoading(true);
-            const prevStep = Math.max(currentStep - 1, 1);
-            router.push(onboardingText[prevStep]["route"]).then(() => {
-              setCurrentStep(prevStep);
-              setLoading(false);
-            });
+            LocalStorage.set(ONBOARDING_STEP, prevStep);
           }}
         >
-          Back
+          {currentStep !== 1 ? (
+            <Link href={onboardingText[prevStep]["route"]}>Back</Link>
+          ) : (
+            "Back"
+          )}
         </Button>
         <div className="w-4" />
         <Button
           size="small"
-          disabled={loading}
           onClick={() => {
             if (currentStep !== MAX_STEPS) {
-              setLoading(true);
-              const nextStep = Math.min(currentStep + 1, MAX_STEPS);
-              router.push(onboardingText[nextStep]["route"]).then(() => {
-                setCurrentStep(nextStep);
-                setLoading(false);
-              });
+              LocalStorage.set(ONBOARDING_STEP, nextStep);
             } else {
-              setLoading(true);
               onFinish();
-              setLoading(false);
             }
           }}
         >
-          {currentStep !== MAX_STEPS ? "Next" : "Finish"}
+          {currentStep !== MAX_STEPS ? (
+            <Link href={onboardingText[nextStep]["route"]}>Next</Link>
+          ) : (
+            "Finish"
+          )}
         </Button>
       </div>
     </div>