github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-01-22 12:48:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

SetupContext with useProgress hook

Browse Source
This commit is contained in:
dan13ram
2020-08-22 19:47:50 +05:30
committed by Hammad Jutt
parent 0fb6ea4a18
commit d242b33eca
8 changed files with 173 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/web/components/RegisterPlayer.tsx
View File

@@ -5,7 +5,7 @@ import {
Icon3box,
MetaHeading,
} from '@metafam/ds';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
import { FlexContainer } from './Container';
@@ -30,10 +30,21 @@ export const RegisterPlayer: React.FC = () => {
type ButtonProps = React.ComponentProps<typeof Button>;
const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => (
<NextLink href="/profile/success">
<Button variant="outline" size="lg" p={8} alignItems="center" {...props}>
const RegisterButton: React.FC<ButtonProps> = ({ children, ...props }) => {
const router = useRouter();
const login = () => {
router.push('/profile/success');
};
return (
<Button
onClick={login}
variant="outline"
size="lg"
p={8}
alignItems="center"
{...props}
>
{children}
</Button>
</NextLink>
);
);
};

7
packages/web/components/SetupDone.tsx
View File

@@ -1,16 +1,15 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
import { FlexContainer } from './Container';
export const SetupDone: React.FC = () => {
const router = useRouter();
return (
<FlexContainer flex={1}>
<MetaHeading mb={10}>Game on!</MetaHeading>
<NextLink href="/">
<MetaButton>Play</MetaButton>
</NextLink>
<MetaButton onClick={() => router.push('/')}>Play</MetaButton>
</FlexContainer>
);
};

93
packages/web/components/SetupHeader.tsx
View File

@@ -1,49 +1,64 @@
import { Box, Flex, Grid, Image, ResponsiveText } from '@metafam/ds';
import React from 'react';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import AvatarImage from '../public/images/avatar.png';
import BackImage from '../public/images/Back.svg';
import SkipImage from '../public/images/Skip.svg';
import { FlexContainer } from './Container';
interface HeaderProps {
step: number;
progress: number;
}
export const SetupHeader: React.FC<HeaderProps> = ({ step, progress }) => (
<Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
<FlexContainer justify="flex-end">
<Image src={BackImage} h="1rem" />
</FlexContainer>
<StepProgress
title={['About You', '1. About You']}
isActive={step === 0}
isDone={step > 0}
progress={step > 0 ? 1 : progress}
/>
<StepProgress
title={[
'Portfolio',
'2. Portfolio',
'2. Portfolio',
'2. Professional Profile',
]}
isActive={step === 1}
isDone={step > 1}
progress={step > 1 ? 1 : progress}
/>
<StepProgress
title={['Play', '3. Play', '3. Start Playing']}
isDone={false}
isActive={step === 2}
progress={progress}
/>
<FlexContainer justify="flex-end">
<Image src={SkipImage} h="1rem" />
</FlexContainer>
</Grid>
);
export const SetupHeader: React.FC = () => {
const { step, progress, setStep, numTotalSteps } = useContext(SetupContext);
return (
<Grid templateColumns="0.5fr 1fr 1fr 1fr 0.5fr" gap="1rem" w="100%">
<FlexContainer
justify="flex-end"
onClick={() => {
if (step > 0) {
setStep((_step) => (_step - 1) % numTotalSteps);
}
}}
cursor="pointer"
>
<Image src={BackImage} h="1rem" />
</FlexContainer>
<StepProgress
title={['About You', '1. About You']}
isActive={step === 0}
isDone={step > 0}
progress={step > 0 ? 1 : progress}
/>
<StepProgress
title={[
'Portfolio',
'2. Portfolio',
'2. Portfolio',
'2. Professional Profile',
]}
isActive={step === 1}
isDone={step > 1}
progress={step > 1 ? 1 : progress}
/>
<StepProgress
title={['Play', '3. Play', '3. Start Playing']}
isDone={false}
isActive={step === 2}
progress={progress}
/>
<FlexContainer
justify="flex-end"
onClick={() => {
if ((step + 1) % numTotalSteps !== 0) {
setStep((_step) => (_step + 1) % numTotalSteps);
}
}}
cursor="pointer"
>
<Image src={SkipImage} h="1rem" />
</FlexContainer>
</Grid>
);
};
interface StepProps {
title: any[] | Record<string, any>;

37
packages/web/components/SetupPersonality.tsx
View File

@@ -1,41 +1,20 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import React, { useEffect, useState } from 'react';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import { FlexContainer } from './Container';
interface Props {
setStep: React.Dispatch<React.SetStateAction<number>>;
setProgress: React.Dispatch<React.SetStateAction<number>>;
}
export const SetupPersonality: React.FC<Props> = ({ setStep, setProgress }) => {
export const SetupPersonality: React.FC = () => {
const { useProgress } = useContext(SetupContext);
const numProgressSteps = 2;
const [progressStep, setProgressStep] = useState<number>(0);
useEffect(() => {
const progressValue = (progressStep + 1) / numProgressSteps;
setProgress(progressValue);
}, [progressStep, setProgress]);
const [currentProgress, onNextPress] = useProgress(numProgressSteps);
return (
<FlexContainer flex={1}>
{progressStep === 0 && (
{currentProgress === 0 && (
<MetaHeading mb={10}>Personality type</MetaHeading>
)}
{progressStep === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
<MetaButton
mb={8}
onClick={() =>
setProgressStep(
(_progressStep) => (_progressStep + 1) % numProgressSteps,
)
}
>
Progress
</MetaButton>
<MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
Next Step
</MetaButton>
{currentProgress === 1 && <MetaHeading mb={10}>Player type</MetaHeading>}
<MetaButton onClick={onNextPress}>Next Step</MetaButton>
</FlexContainer>
);
};

38
packages/web/components/SetupProfession.tsx
View File

@@ -1,42 +1,22 @@
import { MetaButton, MetaHeading } from '@metafam/ds';
import React, { useEffect, useState } from 'react';
import React, { useContext } from 'react';
import { SetupContext } from '../contexts/SetupContext';
import { FlexContainer } from './Container';
interface Props {
setStep: React.Dispatch<React.SetStateAction<number>>;
setProgress: React.Dispatch<React.SetStateAction<number>>;
}
export const SetupProfession: React.FC<Props> = ({ setStep, setProgress }) => {
export const SetupProfession: React.FC = () => {
const { useProgress } = useContext(SetupContext);
const numProgressSteps = 3;
const [progressStep, setProgressStep] = useState<number>(0);
useEffect(() => {
const progressValue = (progressStep + 1) / numProgressSteps;
setProgress(progressValue);
}, [progressStep, setProgress]);
const [currentProgress, onNextPress] = useProgress(numProgressSteps);
return (
<FlexContainer flex={1}>
{progressStep === 0 && (
{currentProgress === 0 && (
<MetaHeading mb={10}>What are your superpowers?</MetaHeading>
)}
{progressStep === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
{progressStep === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
<MetaButton
mb={8}
onClick={() =>
setProgressStep(
(_progressStep) => (_progressStep + 1) % numProgressSteps,
)
}
>
Progress
</MetaButton>
<MetaButton onClick={() => setStep((_step) => (_step + 1) % 4)}>
Next Step
</MetaButton>
{currentProgress === 1 && <MetaHeading mb={10}>Availability</MetaHeading>}
{currentProgress === 2 && <MetaHeading mb={10}>Memberships</MetaHeading>}
<MetaButton onClick={onNextPress}>Next Step</MetaButton>
</FlexContainer>
);
};

11
packages/web/components/SuccessPlayer.tsx
View File

@@ -1,5 +1,5 @@
import { Image, MetaButton, MetaHeading, Text } from '@metafam/ds';
import NextLink from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
import AvatarImage from '../public/images/avatar.png';
@@ -7,15 +7,14 @@ import { FlexContainer } from './Container';
import { MetaLink } from './Link';
export const SuccessPlayer: React.FC = () => {
const router = useRouter();
return (
<FlexContainer h="100%">
<MetaHeading m={5}>Success!</MetaHeading>
<Image m={10} src={AvatarImage} />
<NextLink href="/profile/setup">
<MetaButton mt={5} mb={8}>
Set up your profile
</MetaButton>
</NextLink>
<MetaButton mt={5} mb={8} onClick={() => router.push('/profile/setup')}>
Set up your profile
</MetaButton>
<Text fontFamily="mono" color="offwhite">
{`I'll do this later. `}
<MetaLink href="">Go to my profile</MetaLink>

61
packages/web/contexts/SetupContext.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React, { useEffect, useState } from 'react';
type SetupContextType = {
useProgress: (numProgressSteps: number) => any[];
step: number;
progress: number;
setStep: React.Dispatch<React.SetStateAction<number>>;
setProgress: React.Dispatch<React.SetStateAction<number>>;
numTotalSteps: number;
};
export const SetupContext = React.createContext<SetupContextType>({
useProgress: (numProgressSteps: number) => [numProgressSteps],
step: 0,
progress: 0,
setStep: () => undefined,
setProgress: () => undefined,
numTotalSteps: 0,
});
export const SetupContextProvider: React.FC = ({ children }) => {
const [step, setStep] = useState<number>(0);
const [progress, setProgress] = useState<number>(0.5);
const numTotalSteps = 3;
const useProgress = (numProgressSteps: number) => {
const [currentProgress, setCurrentProgress] = useState<number>(0);
useEffect(() => {
const progressValue = (currentProgress + 1) / numProgressSteps;
setProgress(progressValue);
}, [currentProgress, numProgressSteps]);
const onNextPress = () => {
if ((currentProgress + 1) % numProgressSteps === 0) {
setStep((_step) => (_step + 1) % numTotalSteps);
} else {
setCurrentProgress(
(_currentProgress) => (_currentProgress + 1) % numProgressSteps,
);
}
};
return [currentProgress, onNextPress];
};
return (
<SetupContext.Provider
value={{
useProgress,
step,
progress,
setStep,
setProgress,
numTotalSteps,
}}
>
{children}
</SetupContext.Provider>
);
};

29
packages/web/pages/profile/setup.tsx
View File

@@ -1,29 +1,32 @@
import React, { useState } from 'react';
import React, { useContext } from 'react';
import { PageContainer } from '../../components/Container';
import { SetupDone } from '../../components/SetupDone';
import { SetupHeader } from '../../components/SetupHeader';
import { SetupPersonality } from '../../components/SetupPersonality';
import { SetupProfession } from '../../components/SetupProfession';
import {
SetupContext,
SetupContextProvider,
} from '../../contexts/SetupContext';
import BackgroundImage from '../../public/images/profile-background.jpg';
const ProfileSetup: React.FC = () => {
const [step, setStep] = useState<number>(0);
const [progress, setProgress] = useState<number>(0.33);
const { step, numTotalSteps } = useContext(SetupContext);
return (
<PageContainer backgroundImage={`url(${BackgroundImage})`}>
{step % 3 !== 2 && <SetupHeader step={step} progress={progress} />}
{step === 0 && (
<SetupPersonality setStep={setStep} setProgress={setProgress} />
)}
{step === 1 && (
<SetupProfession setStep={setStep} setProgress={setProgress} />
)}
{(step + 1) % numTotalSteps !== 0 && <SetupHeader />}
{step === 0 && <SetupPersonality />}
{step === 1 && <SetupProfession />}
{step === 2 && <SetupDone />}
</PageContainer>
);
};
export default ProfileSetup;
const ProfileSetupWithContext: React.FC = () => (
<SetupContextProvider>
<ProfileSetup />
</SetupContextProvider>
);
export default ProfileSetupWithContext;