Skip to content

Commit

Permalink
change from stepper to onboardingchecklist #750
Browse files Browse the repository at this point in the history
  • Loading branch information
@clintonlunn
clintonlunn committed May 7, 2023
1 parent 34fc4ab commit d3c2d52
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 141 deletions.
35 changes: 35 additions & 0 deletions src/components/ui/OnboardingChecklist.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { ReactElement } from 'react'

interface OnboardingChecklistProps {
mediaCount: number
hasUsername: boolean
}

const OnboardingChecklist = ({ mediaCount, hasUsername }: OnboardingChecklistProps): ReactElement => {
const checklistItems = [
{
text: 'Add 3 photos to complete your profile',
isCompleted: mediaCount >= 3
},
{
text: 'Create a username',
isCompleted: hasUsername
}
]

return (
<div className='flex justify-center mt-8 text-secondary text-sm whitespace-normal px-4 lg:px-0'>
<div className='border rounded-md px-6 py-2 shadow'>
<ul className='list-disc'>
{checklistItems.map((item, index) => (
<li key={index}>
{item.text} {item.isCompleted && <span>&#10004;</span>}
</li>
))}
</ul>
</div>
</div>
)
}

export default OnboardingChecklist
166 changes: 35 additions & 131 deletions src/components/users/account/ProfileEditForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { doesUsernameExist } from '../../../js/userApi/user'
import { checkUsername, checkWebsiteUrl } from '../../../js/utils'
import { revalidateUserHomePage } from '../../../js/stores/media'
import Spinner from '../../ui/Spinner'
import Stepper from '../../ui/Stepper'

const UserProfileSchema = Yup.object().shape({
nick: Yup.string()
Expand Down Expand Up @@ -50,9 +49,6 @@ export default function ProfileEditForm (): ReactElement {
const [loadingName, setLoadingUser] = useState(false)
const [justSubmitted, setJustSubmitted] = useState(false)
const [isChanged, setChanged] = useState(false)
const [currentStep, setCurrentStep] = useState(1)
// const [isFirstLogin, setIsFirstLogin] = useState(true)
const [isFirstLogin] = useState(true)
const [isLoading, setIsLoading] = useState(true)

const [profile, setProfile] = useState<IWritableUserMetadata>({
Expand All @@ -62,18 +58,6 @@ export default function ProfileEditForm (): ReactElement {
website: undefined
})

const handleStepClick = (index: number): void => {
setCurrentStep(index)
}

// const goToNextStep = (): void => {
// setCurrentStep(currentStep + 1)
// }

// const goToPreviousStep = (): void => {
// setCurrentStep(currentStep - 1)
// }

useLayoutEffect(() => {
const asyncLoad = async (): Promise<void> => {
setIsLoading(true)
Expand All @@ -82,7 +66,6 @@ export default function ProfileEditForm (): ReactElement {

if (profile != null) {
setProfile(profile)
// setIsFirstLogin(profile.loginsCount === 1)
}
setIsLoading(false)
}
Expand Down Expand Up @@ -133,98 +116,46 @@ export default function ProfileEditForm (): ReactElement {
setLoadingUser(false)
return undefined
}, [profile.nick])

const steps = [
{
title: 'Username',
content: (
<div className='flex relative justify-end'>
<TextField
name='nick'
label='Username'
validate={checkUsernameHandler}
isChanged={isChanged}
validateImmediately
/>
{loadingName && (
<div className='absolute bg-ob-primary p-1 rounded-full text-white -right-2 top-2 animate-spin'>
<svg xmlns='http://www.w3.org/2000/svg' className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
<path strokeLinecap='round' strokeLinejoin='round' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
</svg>
</div>
)}
</div>
)
},
{
title: 'Display Name',
content: <TextField name='name' label='Display Name' isChanged />
},
{
title: 'Bio',
content: <TextField name='bio' label='Bio' multiline rows={3} spellcheck isChanged />
},
{
title: 'Website',
content: <TextField name='website' label='Website (optional)' isChanged />
}
]

return (
<div data-lpignore='true'>
<h3 className='text-center mb-6'>
Edit your profile details
</h3>
<h3 className='text-center mb-6'>Edit your profile details</h3>

{isLoading
? <Spinner size={50} />
? (
<Spinner size={50} />
)
: (
<>
{isFirstLogin && (
<div className='flex justify-start w-full min-w-full'>
<Formik
initialValues={profile}
validationSchema={UserProfileSchema}
onSubmit={submitHandler}
enableReinitialize
>{({ isValid, isSubmitting, dirty }) => (
<div className='flex justify-start w-full min-w-full'>
<Formik
initialValues={profile}
validationSchema={UserProfileSchema}
onSubmit={submitHandler}
enableReinitialize
>
{({ isValid, isSubmitting, dirty }) => (
<Form>
{isFirstLogin
? (
<>
<Stepper
currentStep={currentStep} steps={['Username', 'Display Name', 'Bio', 'Website']} onStepClick={handleStepClick}
>
{steps[currentStep].content}
</Stepper>

</>
)
: (
<>
<div className='flex relative justify-end'>
<TextField
name='nick'
label='Username'
validate={checkUsernameHandler}
isChanged={isChanged}
validateImmediately
/>
<div className='flex relative justify-end'>
<TextField
name='nick'
label='Username'
validate={checkUsernameHandler}
isChanged={isChanged}
validateImmediately
/>

{loadingName && (
<div className='absolute bg-ob-primary p-1 rounded-full text-white -right-2 top-2 animate-spin'>
<svg xmlns='http://www.w3.org/2000/svg' className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
<path strokeLinecap='round' strokeLinejoin='round' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
</svg>
</div>
)}
</div>
{loadingName && (
<div className='absolute bg-ob-primary p-1 rounded-full text-white -right-2 top-2 animate-spin'>
<svg xmlns='http://www.w3.org/2000/svg' className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
<path strokeLinecap='round' strokeLinejoin='round' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15' />
</svg>
</div>
)}
</div>

<TextField name='name' label='Display Name' isChanged />
<TextField name='bio' label='Bio' multiline rows={3} spellcheck isChanged />
<TextField name='website' label='Website (optional)' isChanged />
</>
)}
<TextField name='name' label='Display Name' isChanged />
<TextField name='bio' label='Bio' multiline rows={3} spellcheck isChanged />
<TextField name='website' label='Website (optional)' isChanged />

<div className='flex justify-center pt-6'>
<Snackbar
Expand All @@ -234,31 +165,6 @@ export default function ProfileEditForm (): ReactElement {
/>
</div>

{/* <div className='flex space-x-4 justify-end pt-4'>
{isFirstLogin && (
<button
title='Go to previous step'
type='button'
onClick={goToPreviousStep}
disabled={currentStep === 1}
className='btn btn-secondary w-40'
>
Previous
</button>
)}
{isFirstLogin && (
<button
title='Go to next step'
type='button'
onClick={goToNextStep}
disabled={currentStep === 4}
className='btn btn-primary w-40'
>
Next
</button>
)}
</div> */}
<button
title='Commit these changes to your profile'
type='submit'
Expand All @@ -268,12 +174,10 @@ export default function ProfileEditForm (): ReactElement {
{isSubmitting ? 'Saving...' : 'Save'}
</button>
<div className='flex justify-center pt-6' />
</Form>)}
</Formik>

</div>
)}

</Form>
)}
</Formik>
</div>
</>
)}
</div>
Expand Down
12 changes: 2 additions & 10 deletions src/pages/u/[...slug].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import usePermissions from '../../js/hooks/auth/usePermissions'
import { useUserProfileSeo } from '../../js/hooks/seo'
import useMediaDataStore from '../../js/hooks/useMediaDS'
import type { UserGalleryProps } from '../../components/media/UserGallery'
import OnboardingChecklist from '../../components/ui/OnboardingChecklist'

interface UserHomeProps {
uid: string
Expand Down Expand Up @@ -57,16 +58,7 @@ const UserHomePage: NextPage<UserHomeProps> = ({ uid, postId = null, serverMedia

<PublicProfile userProfile={userProfile} />

{isAuthorized && (
<div className='flex justify-center mt-8 text-secondary text-sm whitespace-normal px-4 lg:px-0'>
<div className='border rounded-md px-6 py-2 shadow'>
<ul className='list-disc'>
<li>Please upload 3 photos to complete your profile {mediaList?.length >= 3 && <span>&#10004;</span>}</li>
<li>Upload only your own photos</li>
<li>Keep it <b>Safe For Work</b> and climbing-related</li>
</ul>
</div>
</div>)}
{isAuthorized && <OnboardingChecklist mediaCount={mediaList?.length} hasUsername={false} />}

<hr className='mt-8' />

Expand Down

0 comments on commit d3c2d52

Please sign in to comment.