Added separate pages for each step in the setup flow

packages/web/components/LoginButton.tsx

@@ -12,12 +12,13 @@ import { MetaLink } from 'components/Link';
 import { Web3Context } from 'contexts/Web3Context';
 import React, { useCallback, useContext } from 'react';
 
-import { useUser } from '../lib/hooks';
+import { useUser, useWeb3 } from '../lib/hooks';
 import { getPlayerImage, getPlayerName } from '../utils/playerHelpers';
 
 export const LoginButton: React.FC = () => {
   const { connectWeb3, disconnect, isConnected } = useContext(Web3Context);
 
+  const { address } = useWeb3();
   const { user, fetching } = useUser();
 
   const handleLoginClick = useCallback(async () => {
@@ -29,6 +30,9 @@ export const LoginButton: React.FC = () => {
       return <Spinner color="purple.500" size="sm" />;
     }
     if (!user?.player) return null;
+
+    const hasEditedProfile = user.username && user.username !== address;
+
     return (
       <HStack>
         <Avatar
@@ -46,13 +50,11 @@ export const LoginButton: React.FC = () => {
             {user.player ? getPlayerName(user.player) : 'Unknown'}
           </MetaLink>
           <HStack spacing={2}>
-            <MetaLink
-              href="/profile/setup"
-            >
+            <MetaLink href="/profile/setup/username">
               <Button
                 variant="link"
                 fontWeight="normal"
-                title="Configure Profile"
+                title={hasEditedProfile ? 'Edit profile' : 'Setup profile'}
               >
                 <SettingsIcon w={7} h={7} color="cyan.400"/>
               </Button>

packages/web/components/Setup/SetupAvailability.tsx

@@ -14,13 +14,19 @@ import { useUpdateProfileMutation } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
 import React, { useEffect, useState } from 'react';
 
-export const SetupAvailability: React.FC = () => {
+export type SetupAvailabilityProps = {
+  availability: string;
+  setAvailability: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const SetupAvailability: React.FC<SetupAvailabilityProps> = ({
+  availability, setAvailability
+}) => {
   const {
     onNextPress,
-    nextButtonLabel,
-    availability,
-    setAvailability,
+    nextButtonLabel
   } = useSetupFlow();
+
   const [invalid, setInvalid] = useState(false);
   const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();

packages/web/components/Setup/SetupMemberships.tsx

@@ -8,24 +8,25 @@ import {
 } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { useSetupFlow } from 'contexts/SetupContext';
-import { getMemberships } from 'graphql/getMemberships';
-import React, { useEffect } from 'react';
+import { Membership } from 'graphql/types';
+import React from 'react';
 
 import { useWeb3 } from '../../lib/hooks';
 
-export const SetupMemberships: React.FC = () => {
-  const { address, isConnected } = useWeb3();
+export type SetupMembershipsProps = {
+  memberships: Array<Membership> | null | undefined;
+  setMemberships: React.Dispatch<
+    React.SetStateAction<Array<Membership> | null | undefined>
+  >;
+}
+
+export const SetupMemberships: React.FC<SetupMembershipsProps> = ({memberships}) => {
+  const { isConnected } = useWeb3();
   const {
     onNextPress,
-    nextButtonLabel,
-    memberships,
-    setMemberships,
+    nextButtonLabel
   } = useSetupFlow();
-  useEffect(() => {
-    getMemberships(address).then((data) => {
-      setMemberships(data);
-    });
-  }, [address, setMemberships]);
+
   return (
     <FlexContainer>
       <MetaHeading mb={5} textAlign="center">

packages/web/components/Setup/SetupPersonalityType.tsx

@@ -15,13 +15,20 @@ import { PersonalityType } from 'graphql/types';
 import { useUser } from 'lib/hooks';
 import React from 'react';
 
-export const SetupPersonalityType: React.FC = () => {
+export type SetupPersonalityTypeProps = {
+  personalityTypeChoices: Array<PersonalityType>;
+  personalityType: PersonalityType | undefined;
+  setPersonalityType: React.Dispatch<
+    React.SetStateAction<PersonalityType | undefined>
+  >;
+}
+
+export const SetupPersonalityType: React.FC<SetupPersonalityTypeProps> = ({
+  personalityTypeChoices, personalityType, setPersonalityType
+}) => {
   const {
     onNextPress,
     nextButtonLabel,
-    personalityTypes,
-    personalityType,
-    setPersonalityType,
   } = useSetupFlow();
   const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();
@@ -65,7 +72,7 @@ export const SetupPersonalityType: React.FC = () => {
         </MetaLink>
       </Text>
       <SimpleGrid columns={[1, null, 2, 3]} spacing="8">
-        {personalityTypes.map((p: PersonalityType) => (
+        {personalityTypeChoices.map((p: PersonalityType) => (
           <HStack
             key={p.id}
             p={6}

packages/web/components/Setup/SetupPlayerType.tsx

@@ -7,17 +7,22 @@ import {
 } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { useSetupFlow } from 'contexts/SetupContext';
-import { useUpdateAboutYouMutation } from 'graphql/autogen/types';
+import { Player_Type, useUpdateAboutYouMutation } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
 import React from 'react';
 
-export const SetupPlayerType: React.FC = () => {
+export type SetupPlayerTypeProps = {
+  playerTypeChoices: Array<Player_Type>;
+  playerType: Player_Type | undefined;
+  setPlayerType: React.Dispatch<React.SetStateAction<Player_Type | undefined>>;
+}
+
+export const SetupPlayerType: React.FC<SetupPlayerTypeProps> = ({
+  playerTypeChoices, playerType, setPlayerType
+}) => {
   const {
     onNextPress,
-    nextButtonLabel,
-    playerTypes,
-    playerType,
-    setPlayerType
+    nextButtonLabel
   } = useSetupFlow();
   const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();
@@ -59,7 +64,7 @@ export const SetupPlayerType: React.FC = () => {
         that suits you best.
       </Text>
       <SimpleGrid columns={[1, null, 3, 3]} spacing={4}>
-        {playerTypes.map((p) => (
+        {playerTypeChoices.map((p) => (
           <FlexContainer
             key={p.id}
             p={[4, null, 6]}

packages/web/components/Setup/SetupProfile.tsx

@@ -1,89 +1,19 @@
 import { FlexContainer, PageContainer } from 'components/Container';
 import { SetupHeader } from 'components/Setup/SetupHeader';
 import { useSetupFlow } from 'contexts/SetupContext';
-import { PersonalityTypes } from 'graphql/types';
-import { useUser, useWeb3 } from 'lib/hooks';
-import React, { useEffect } from 'react';
+import React from 'react';
 
-export const SetupProfile: React.FC = () => {
+export const SetupProfile: React.FC = ({children}) => {
   const {
     step,
-    screen,
-    numTotalSteps,
-    options,
-    username,
-    setUsername,
-    personalityType,
-    setPersonalityType,
-    playerType,
-    setPlayerType,
-    availability,
-    setAvailability,
-    timeZone,
-    setTimeZone,
-    skills,
-    setSkills,
+    numTotalSteps
   } = useSetupFlow();
-  const { user } = useUser({ redirectTo: '/' });
-  const { address } = useWeb3();
-  useEffect(() => {
-    if (user?.player) {
-      const {player} = user;
-      if (
-        player.username &&
-        player.username.toLowerCase() !== address?.toLowerCase() &&
-        !username
-      ) {
-        setUsername(player.username);
-      }
-      if (player.availability_hours && !availability) {
-        setAvailability(player.availability_hours.toString());
-      }
-      if (player.EnneagramType && !personalityType) {
-        setPersonalityType(PersonalityTypes[player.EnneagramType.name]);
-      }
-      if (player.playerType && !playerType) {
-        setPlayerType(player.playerType);
-      }
-      if (
-        player.Player_Skills &&
-        player.Player_Skills.length > 0 &&
-        skills.length === 0
-      ) {
-        setSkills(
-          player.Player_Skills.map((s) => ({
-            value: s.Skill.id,
-            label: s.Skill.name,
-            ...s.Skill,
-          })),
-        );
-      }
-      if (player.timezone && !timeZone) {
-        setTimeZone(player.timezone);
-      }
-    }
-  }, [
-    user,
-    address,
-    username,
-    setUsername,
-    personalityType,
-    setPersonalityType,
-    playerType,
-    setPlayerType,
-    availability,
-    setAvailability,
-    timeZone,
-    setTimeZone,
-    skills,
-    setSkills,
-  ]);
 
   return (
     <PageContainer>
       {(step + 1) % numTotalSteps !== 0 && <SetupHeader />}
       <FlexContainer flex={1} pt={24}>
-        {options[step].screens[screen].component}
+        {children}
       </FlexContainer>
     </PageContainer>
   );

packages/web/components/Setup/SetupSkills.tsx

@@ -12,13 +12,20 @@ import { SkillCategory_Enum, useUpdatePlayerSkillsMutation } from 'graphql/autog
 import { SkillColors } from 'graphql/types';
 import { useUser } from 'lib/hooks';
 import React from 'react';
-import { SkillOption } from 'utils/skillHelpers';
+import { CategoryOption, SkillOption } from 'utils/skillHelpers';
 
-export const SetupSkills: React.FC = () => {
+export type SetupSkillsProps = {
+  skillChoices: Array<CategoryOption>;
+  skills: Array<SkillOption>;
+  setSkills: React.Dispatch<
+    React.SetStateAction<Array<SkillOption>>
+  >;
+}
+
+export const SetupSkills: React.FC<SetupSkillsProps> = ({
+  skillChoices, skills, setSkills,
+}) => {
   const {
-    skillsList,
-    skills,
-    setSkills,
     onNextPress,
     nextButtonLabel,
   } = useSetupFlow();
@@ -47,7 +54,6 @@ export const SetupSkills: React.FC = () => {
     onNextPress();
   };
 
-
   const styles: typeof selectStyles = {
     ...selectStyles,
     multiValue: (s, { data }) => ({
@@ -81,7 +87,7 @@ export const SetupSkills: React.FC = () => {
           styles={styles}
           value={skills}
           onChange={(value) => setSkills(value as Array<SkillOption>)}
-          options={skillsList}
+          options={skillChoices}
           autoFocus
           closeMenuOnSelect={false}
           placeholder="ADD YOUR SKILLS"

packages/web/components/Setup/SetupTimeZone.tsx

@@ -10,12 +10,15 @@ import { useUpdateProfileMutation } from 'graphql/autogen/types';
 import { useUser } from 'lib/hooks';
 import React from 'react';
 
-export const SetupTimeZone: React.FC = () => {
+export type SetupTimezoneProps = {
+  timeZone: string;
+  setTimeZone: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const SetupTimeZone: React.FC<SetupTimezoneProps> = ({timeZone, setTimeZone}) => {
   const {
     onNextPress,
-    nextButtonLabel,
-    timeZone,
-    setTimeZone
+    nextButtonLabel
   } = useSetupFlow();
   const { user } = useUser({ redirectTo: '/' });
   const toast = useToast();

packages/web/components/Setup/SetupUsername.tsx

@@ -7,12 +7,15 @@ import React, { useEffect, useState } from 'react';
 
 const USERNAME_REGEX = /^[a-zA-Z0-9](_(?!(\.|_))|\.(?!(_|\.))|[a-zA-Z0-9]){2,18}[a-zA-Z0-9]$/;
 
-export const SetupUsername: React.FC = () => {
+export type SetupUsernameProps = {
+  username: string;
+  setUsername: React.Dispatch<React.SetStateAction<string>>;
+}
+
+export const SetupUsername: React.FC<SetupUsernameProps> = ({username, setUsername}) => {
   const {
     onNextPress,
-    nextButtonLabel,
-    username,
-    setUsername,
+    nextButtonLabel
   } = useSetupFlow();
   const [invalid, setInvalid] = useState(false);
   const { user } = useUser({ redirectTo: '/' });

packages/web/contexts/SetupContext.tsx

@@ -1,8 +1,5 @@
-import { Player_Type } from 'graphql/autogen/types';
-import { Membership, PersonalityType } from 'graphql/types';
 import { useRouter } from 'next/router';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { CategoryOption, SkillOption } from 'utils/skillHelpers';
 
 type SetupOption = {
   label: string;
@@ -11,7 +8,8 @@ type SetupOption = {
   };
   screens: Array<{
     label: string;
-    component: React.ReactNode;
+    component?: React.ReactNode;
+    slug?: string;
   }>;
 };
 
@@ -23,27 +21,6 @@ type SetupContextType = {
   onBackPress: () => void;
   nextButtonLabel: string;
   numTotalSteps: number;
-  skillsList: Array<CategoryOption>;
-  personalityTypes: Array<PersonalityType>;
-  playerTypes: Array<Player_Type>;
-  username: string;
-  setUsername: React.Dispatch<React.SetStateAction<string>>;
-  skills: Array<SkillOption>;
-  setSkills: React.Dispatch<React.SetStateAction<Array<SkillOption>>>;
-  personalityType: PersonalityType | undefined;
-  setPersonalityType: React.Dispatch<
-    React.SetStateAction<PersonalityType | undefined>
-  >;
-  playerType: Player_Type | undefined;
-  setPlayerType: React.Dispatch<React.SetStateAction<Player_Type | undefined>>;
-  availability: string;
-  setAvailability: React.Dispatch<React.SetStateAction<string>>;
-  timeZone: string;
-  setTimeZone: React.Dispatch<React.SetStateAction<string>>;
-  memberships: Array<Membership> | null | undefined;
-  setMemberships: React.Dispatch<
-    React.SetStateAction<Array<Membership> | null | undefined>
-  >;
 };
 
 export const SetupContext = React.createContext<SetupContextType>({
@@ -54,38 +31,15 @@ export const SetupContext = React.createContext<SetupContextType>({
   onBackPress: () => undefined,
   nextButtonLabel: 'Next Step',
   numTotalSteps: 0,
-  skillsList: [],
-  personalityTypes: [],
-  playerTypes: [],
-  username: '',
-  setUsername: () => undefined,
-  skills: [],
-  setSkills: () => undefined,
-  personalityType: undefined,
-  setPersonalityType: () => undefined,
-  playerType: undefined,
-  setPlayerType: () => undefined,
-  availability: '',
-  setAvailability: () => undefined,
-  timeZone: '',
-  setTimeZone: () => undefined,
-  memberships: undefined,
-  setMemberships: () => undefined,
 });
 
 type Props = {
   options: Array<SetupOption>;
-  skillsList: Array<CategoryOption>;
-  personalityTypes: Array<PersonalityType>;
-  playerTypes: Array<Player_Type>;
 };
 
 export const SetupContextProvider: React.FC<Props> = ({
   children,
-  options,
-  skillsList,
-  personalityTypes,
-  playerTypes,
+  options
 }) => {
   const router = useRouter();
   const [step, setStep] = useState<number>(0);
@@ -116,7 +70,8 @@ export const SetupContextProvider: React.FC<Props> = ({
     } else {
       setScreen((screen + 1) % numScreens);
     }
-  }, [options, step, screen, setStep, setScreen, numTotalSteps]);
+    router.push(`/profile/setup/${options[step].screens[(screen + 1) % numScreens].slug}`);
+  }, [router, options, step, screen, setStep, setScreen, numTotalSteps]);
 
   const onBackPress = useCallback(() => {
     if (step <= 0 && screen <= 0) {
@@ -132,16 +87,6 @@ export const SetupContextProvider: React.FC<Props> = ({
     }
   }, [router, options, step, screen, setStep, setScreen, numTotalSteps]);
 
-  const [username, setUsername] = useState<string>('');
-  const [skills, setSkills] = useState<Array<SkillOption>>([]);
-  const [personalityType, setPersonalityType] = useState<PersonalityType>();
-  const [playerType, setPlayerType] = useState<Player_Type>();
-  const [availability, setAvailability] = useState<string>('');
-  const [timeZone, setTimeZone] = useState<string>('');
-  const [memberships, setMemberships] = useState<
-    Array<Membership> | null | undefined
-  >();
-
   return (
     <SetupContext.Provider
       value={{
@@ -152,31 +97,6 @@ export const SetupContextProvider: React.FC<Props> = ({
         onNextPress,
         onBackPress,
         nextButtonLabel,
-        // data
-        skillsList,
-        personalityTypes,
-        playerTypes,
-        // username
-        username,
-        setUsername,
-        // skills
-        skills,
-        setSkills,
-        // personalityType
-        personalityType,
-        setPersonalityType,
-        // playerType
-        playerType,
-        setPlayerType,
-        // availability
-        availability,
-        setAvailability,
-        // time zone
-        timeZone,
-        setTimeZone,
-        // memberships
-        memberships,
-        setMemberships,
       }}
     >
       {children}

packages/web/pages/profile/setup.tsx

@@ -1,37 +0,0 @@
-import { SetupProfile } from 'components/Setup/SetupProfile';
-import { SetupContextProvider } from 'contexts/SetupContext';
-import { getPersonalityTypes } from 'graphql/getPersonalityTypes';
-import { getPlayerTypes } from 'graphql/getPlayerTypes';
-import { getSkills } from 'graphql/getSkills';
-import { InferGetStaticPropsType } from 'next';
-import React from 'react';
-import { options as setupOptions } from 'utils/setupOptions';
-import { parseSkills } from 'utils/skillHelpers';
-
-export const getStaticProps = async () => {
-  const [skills, personalityTypes, playerTypes] = await Promise.all([
-    getSkills(),
-    getPersonalityTypes(),
-    getPlayerTypes(),
-  ]);
-  const skillsList = parseSkills(skills);
-
-  return {
-    props: {
-      skillsList,
-      personalityTypes,
-      playerTypes,
-      hideAppDrawer: true,
-    },
-  };
-};
-
-type Props = InferGetStaticPropsType<typeof getStaticProps>;
-
-const ProfileSetup: React.FC<Props> = (props) => (
-  <SetupContextProvider options={setupOptions} {...props}>
-    <SetupProfile />
-  </SetupContextProvider>
-);
-
-export default ProfileSetup;

packages/web/pages/profile/setup/availability.tsx

@@ -0,0 +1,28 @@
+import { SetupAvailability } from 'components/Setup/SetupAvailability';
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { useUser } from 'lib/hooks';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+const AvailabilitySetup: React.FC = () => {
+
+  const [availability, setAvailability] = useState<string>('');
+  const { user } = useUser({ redirectTo: '/' });
+
+  if (user?.player) {
+    const {player} = user;
+    if (player.availability_hours && !availability) {
+      setAvailability(player.availability_hours.toString());
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupAvailability availability={availability} setAvailability={setAvailability} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default AvailabilitySetup;

packages/web/pages/profile/setup/memberships.tsx

@@ -0,0 +1,29 @@
+import { SetupMemberships } from 'components/Setup/SetupMemberships';
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { getMemberships } from 'graphql/getMemberships';
+import { Membership } from 'graphql/types';
+import { useWeb3 } from 'lib/hooks';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+const MembershipsSetup: React.FC = () => {
+
+  const [memberships, setMemberships] = useState<
+    Array<Membership> | null | undefined
+  >();
+  
+  const { address } = useWeb3();
+  getMemberships(address).then((data) => {
+    setMemberships(data);
+  });
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupMemberships memberships={memberships} setMemberships={setMemberships} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default MembershipsSetup;

packages/web/pages/profile/setup/personalityType.tsx

@@ -0,0 +1,47 @@
+import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType';
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { getPersonalityTypes } from 'graphql/getPersonalityTypes';
+import { PersonalityType, PersonalityTypes } from 'graphql/types';
+import { useUser } from 'lib/hooks';
+import { InferGetStaticPropsType } from 'next';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+export const getStaticProps = async () => {
+  const personalityTypeChoices = await getPersonalityTypes();
+
+  return {
+    props: {
+      personalityTypeChoices
+    }
+  };
+};
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+const PersonalityTypeSetup: React.FC<Props> = (props) => {
+
+  const {personalityTypeChoices} = props;
+  const [personalityType, setPersonalityType] = useState<PersonalityType>();
+  const { user } = useUser({ redirectTo: '/' });
+  
+  if (user?.player) {
+    const {player} = user;
+    if (player.EnneagramType && !personalityType) {
+      setPersonalityType(PersonalityTypes[player.EnneagramType.name]);
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupPersonalityType 
+          personalityTypeChoices={personalityTypeChoices} 
+          personalityType={personalityType} 
+          setPersonalityType={setPersonalityType} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default PersonalityTypeSetup;

packages/web/pages/profile/setup/playerType.tsx

@@ -0,0 +1,47 @@
+import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { Player_Type } from 'graphql/autogen/types';
+import { getPlayerTypes } from 'graphql/getPlayerTypes';
+import { useUser } from 'lib/hooks';
+import { InferGetStaticPropsType } from 'next';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+export const getStaticProps = async () => {
+  const playerTypeChoices = await getPlayerTypes();
+
+  return {
+    props: {
+      hideAppDrawer: true,
+      playerTypeChoices
+    }
+  };
+};
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+const PlayerTypeSetup: React.FC<Props> = (props) => {
+  const {playerTypeChoices} = props;
+  const [playerType, setPlayerType] = useState<Player_Type>();
+  const { user } = useUser({ redirectTo: '/' });
+  
+  if (user?.player) {
+    const {player} = user;
+    if (player.playerType && !playerType) {
+      setPlayerType(player.playerType);
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupPlayerType 
+          playerTypeChoices={playerTypeChoices} 
+          playerType={playerType} 
+          setPlayerType={setPlayerType} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default PlayerTypeSetup;

packages/web/pages/profile/setup/skills.tsx

@@ -0,0 +1,57 @@
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupSkills } from 'components/Setup/SetupSkills';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { getSkills } from 'graphql/getSkills';
+import { useUser } from 'lib/hooks';
+import { InferGetStaticPropsType } from 'next';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+import { parseSkills, SkillOption } from 'utils/skillHelpers';
+
+export const getStaticProps = async () => {
+  const skills = await getSkills();
+  const skillChoices = parseSkills(skills);
+
+  return {
+    props: {
+      skillChoices
+    },
+  };
+};
+
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+
+const SkillsSetup: React.FC<Props> = (props) => {
+  const {skillChoices} = props;
+  const [skills, setSkills] = useState<Array<SkillOption>>([]);
+  const { user } = useUser({ redirectTo: '/' });
+  
+  if (user?.player) {
+    const {player} = user;
+    if (
+      player.Player_Skills &&
+      player.Player_Skills.length > 0 &&
+      skills.length === 0
+    ) {
+      setSkills(
+        player.Player_Skills.map((s) => ({
+          value: s.Skill.id,
+          label: s.Skill.name,
+          ...s.Skill,
+        })),
+      );
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupSkills
+          skillChoices={skillChoices} 
+          skills={skills}
+          setSkills={setSkills} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default SkillsSetup;

packages/web/pages/profile/setup/timeZone.tsx

@@ -0,0 +1,28 @@
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupTimeZone } from 'components/Setup/SetupTimeZone';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { useUser } from 'lib/hooks';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+const TimeZoneSetup: React.FC = () => {
+
+  const [timeZone, setTimeZone] = useState<string>('');
+  const { user } = useUser({ redirectTo: '/' });
+
+  if (user?.player) {
+    const {player} = user;
+    if (player.timezone && !timeZone) {
+      setTimeZone(player.timezone);
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupTimeZone timeZone={timeZone} setTimeZone={setTimeZone} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default TimeZoneSetup;

packages/web/pages/profile/setup/username.tsx

@@ -0,0 +1,33 @@
+import { SetupProfile } from 'components/Setup/SetupProfile';
+import { SetupUsername } from 'components/Setup/SetupUsername';
+import { SetupContextProvider } from 'contexts/SetupContext';
+import { useUser, useWeb3 } from 'lib/hooks';
+import React, { useState } from 'react';
+import { options as setupOptions } from 'utils/setupOptions';
+
+const UsernameSetup: React.FC = () => {
+
+  const [username, setUsername] = useState<string>('');
+  const { address } = useWeb3();
+  const { user } = useUser({ redirectTo: '/' });
+
+  if (user?.player) {
+    const {player} = user;
+    if (
+      player.username &&
+      player.username.toLowerCase() !== address?.toLowerCase() &&
+      !username
+    ) {
+      setUsername(player.username);
+    }
+  }
+
+  return (
+    <SetupContextProvider options={setupOptions}>
+      <SetupProfile>
+        <SetupUsername username={username} setUsername={setUsername} />
+      </SetupProfile>
+    </SetupContextProvider>
+  );
+};
+export default UsernameSetup;

packages/web/utils/setupOptions.tsx

@@ -1,11 +1,4 @@
-import { SetupAvailability } from 'components/Setup/SetupAvailability';
 import { SetupDone } from 'components/Setup/SetupDone';
-import { SetupMemberships } from 'components/Setup/SetupMemberships';
-import { SetupPersonalityType } from 'components/Setup/SetupPersonalityType';
-import { SetupPlayerType } from 'components/Setup/SetupPlayerType';
-import { SetupSkills } from 'components/Setup/SetupSkills';
-import { SetupTimeZone } from 'components/Setup/SetupTimeZone';
-import { SetupUsername } from 'components/Setup/SetupUsername';
 import React from 'react';
 
 export const options = [
@@ -15,41 +8,41 @@ export const options = [
     screens: [
       {
         label: 'Username',
-        component: <SetupUsername />,
+        slug: 'username'
       },
       {
         label: 'Personality Type',
-        component: <SetupPersonalityType />,
+        slug: 'personalityType'
       },
       {
         label: 'Player Type',
-        component: <SetupPlayerType />,
+        slug: 'playerType',
       },
     ],
   },
   {
-    label: 'Portfolio',
+    label: 'Profile',
     title: {
-      base: 'Portfolio',
-      sm: '2. Portfolio',
+      base: 'Profile',
+      sm: '2. Profile',
       lg: '2. Professional Profile',
     },
     screens: [
       {
         label: 'Skills',
-        component: <SetupSkills />,
+        slug: 'skills'
       },
       {
         label: 'Availability',
-        component: <SetupAvailability />,
+        slug: 'availability',
       },
       {
         label: 'Time Zone',
-        component: <SetupTimeZone />
+        slug: 'timeZone'
       },
       {
         label: 'Memberships',
-        component: <SetupMemberships />,
+        slug: 'memberships',
       },
     ],
   },