Skip to content

Commit

Permalink
Release v4.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@attemka
attemka authored Jul 28, 2023
2 parents 7136eac + 24a9a3d commit 583b22d
Show file tree
Hide file tree
Showing 11 changed files with 155 additions and 140 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [4.2.0] - 2023-07-28

### Added

- Added autofilling of the referrer field on YPP sign up

### Fixed

- Fixed QN subscriptions connection
- Fixed issues with sign up flow

## [4.1.0] - 2023-07-26

### Added
Expand Down
2 changes: 1 addition & 1 deletion packages/atlas/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@joystream/atlas",
"description": "UI for consuming Joystream - a user governed video platform",
"version": "4.1.0",
"version": "4.2.0",
"license": "GPL-3.0",
"scripts": {
"start": "vite",
Expand Down
194 changes: 87 additions & 107 deletions packages/atlas/src/components/_auth/SignUpModal/SignUpModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const SignUpModal = () => {
const [hasNavigatedBack, setHasNavigatedBack] = useState(false)
const [primaryButtonProps, setPrimaryButtonProps] = useState<DialogButtonProps>({ text: 'Continue' })
const [amountOfTokens, setAmountofTokens] = useState<number>()
const [memberId, setMemberId] = useState<string | null>(null)
const memberRef = useRef<string | null>(null)
const syncState = useRef<'synced' | 'tried' | null>(null)
const ytResponseData = useYppStore((state) => state.ytResponseData)
const setYppModalOpenName = useYppStore((state) => state.actions.setYppModalOpenName)
Expand All @@ -72,8 +72,7 @@ export const SignUpModal = () => {
)
const { ref, overflow } = useOverflowDetector<HTMLDivElement>({})

const [signUpFormData, setSignupFormData] =
useState<Omit<AccountFormData & MemberFormData, 'memberId'>>(SIGNUP_FORM_DATA_INITIAL_STATE)
const signUpFormData = useRef<Omit<AccountFormData & MemberFormData, 'memberId'>>(SIGNUP_FORM_DATA_INITIAL_STATE)
const { createNewMember, createNewOrionAccount } = useCreateMember()
const { trackPageView, trackMembershipCreation } = useSegmentAnalytics()

Expand Down Expand Up @@ -106,102 +105,83 @@ export const SignUpModal = () => {
[currentStep]
)

const handleOrionAccountCreation = useCallback(() => {
if (!memberRef.current) {
throw new Error('MemberID ref is empty, do a check before calling handleOrionAccountCreation function')
}

return createNewOrionAccount({
data: { ...signUpFormData.current, memberId: memberRef.current },
onError: (error) => {
if (error === RegisterError.EmailAlreadyExists) {
setEmailAlreadyTakenError(true)
goToStep(SignUpSteps.SignUpEmail)
return
}
if (error === RegisterError.MembershipNotFound) {
setTimeout(() => {
handleOrionAccountCreation()
}, 10_000)
return
}
goToStep(SignUpSteps.CreateMember)
},
onStart: () => {
goToStep(SignUpSteps.Creating)
syncState.current = null
},
onSuccess: ({ amountOfTokens }) => {
// if this is ypp flow, overwrite ytResponseData.email
if (ytResponseData) {
setYtResponseData({ ...ytResponseData, email: signUpFormData.current.email })
setAuthModalOpenName(undefined)
setYppModalOpenName('ypp-sync-options')
} else {
setAmountofTokens(amountOfTokens)
goToNextStep()
}
},
})
}, [
createNewOrionAccount,
goToNextStep,
goToStep,
setAuthModalOpenName,
setYppModalOpenName,
setYtResponseData,
ytResponseData,
])

const handleEmailStepSubmit = useCallback(
(email: string, confirmedTerms: boolean) => {
setSignupFormData((userForm) => ({ ...userForm, email, confirmedTerms }))
if (memberId && emailAlreadyTakenError) {
createNewOrionAccount({
data: { ...signUpFormData, email, memberId },
onError: (error) => {
if (error === RegisterError.EmailAlreadyExists) {
setEmailAlreadyTakenError(true)
goToStep(SignUpSteps.SignUpEmail)
return
}
goToStep(SignUpSteps.CreateMember)
},
onStart: () => goToStep(SignUpSteps.Creating),
onSuccess: ({ amountOfTokens }) => {
// if this is ypp flow, overwrite ytResponseData.email
if (ytResponseData) {
setYtResponseData({ ...ytResponseData, email })
setAuthModalOpenName(undefined)
setYppModalOpenName('ypp-sync-options')
} else {
setAmountofTokens(amountOfTokens)
goToNextStep()
}
},
})
signUpFormData.current = { ...signUpFormData.current, email, confirmedTerms }
if (memberRef.current && emailAlreadyTakenError) {
handleOrionAccountCreation()
return
}

goToNextStep()
},
[
createNewOrionAccount,
emailAlreadyTakenError,
goToNextStep,
goToStep,
memberId,
setAuthModalOpenName,
setYppModalOpenName,
setYtResponseData,
signUpFormData,
ytResponseData,
]
[emailAlreadyTakenError, goToNextStep, handleOrionAccountCreation]
)

const handlePasswordStepSubmit = useCallback(
async (password: string) => {
setSignupFormData((userForm) => ({ ...userForm, password }))
if (memberId && syncState.current === 'synced') {
createNewOrionAccount({
data: { ...signUpFormData, password, memberId },
onError: (error) => {
if (error === RegisterError.EmailAlreadyExists) {
setEmailAlreadyTakenError(true)
goToStep(SignUpSteps.SignUpEmail)
return
}
goToStep(SignUpSteps.CreateMember)
},
onStart: () => goToStep(SignUpSteps.Creating),
onSuccess: ({ amountOfTokens }) => {
// if this is ypp flow, overwrite ytResponseData.email
if (ytResponseData) {
setYtResponseData({ ...ytResponseData, email: signUpFormData.email })
setAuthModalOpenName(undefined)
setYppModalOpenName('ypp-sync-options')
} else {
setAmountofTokens(amountOfTokens)
goToNextStep()
}
},
})
signUpFormData.current = { ...signUpFormData.current, password }
if (memberRef.current && syncState.current === 'synced') {
handleOrionAccountCreation()
return
}
syncState.current = 'tried'
goToNextStep()
},
[
createNewOrionAccount,
goToNextStep,
goToStep,
memberId,
setAuthModalOpenName,
setYppModalOpenName,
setYtResponseData,
signUpFormData,
syncState,
ytResponseData,
]
[goToNextStep, handleOrionAccountCreation]
)

const handleCreateMemberOnSeedStepSubmit = useCallback(
async (mnemonic: string, confirmedCopy: boolean) => {
let handle = signUpFormData.handle
let blob = signUpFormData.avatar?.blob
let handle = signUpFormData.current.handle
let blob = signUpFormData.current.avatar?.blob

if (ytResponseData) {
// replace handle and avatar if they are provided via ypp flow
Expand All @@ -222,21 +202,21 @@ export const SignUpModal = () => {
avatar: blob ? { blob } : undefined,
}

setSignupFormData((userForm) => ({
...userForm,
signUpFormData.current = {
...signUpFormData.current,
...memberData,
}))
}

// don't create another member if user already created a member and click back on the password step
if (memberId) {
if (memberRef.current) {
goToNextStep()
return
}
goToNextStep()
const newMemberId = await createNewMember(
{
data: {
...signUpFormData,
...signUpFormData.current,
...memberData,
authorizationCode: ytResponseData?.authorizationCode,
userId: ytResponseData?.userId,
Expand All @@ -248,28 +228,28 @@ export const SignUpModal = () => {
() => {
if (syncState.current === 'tried') {
syncState.current = 'synced'
handlePasswordStepSubmit(signUpFormData.password)
handlePasswordStepSubmit(signUpFormData.current.password)
}
syncState.current = 'synced'
}
)

if (newMemberId) {
memberRef.current = newMemberId
}

// in case of block sync logic failure assume member is synced after 10s
setTimeout(() => {
if (syncState.current === 'tried') {
syncState.current = 'synced'
handlePasswordStepSubmit(signUpFormData.password)
handlePasswordStepSubmit(signUpFormData.current.password)
}
syncState.current = 'synced'
}, 10_000)

if (newMemberId) {
setMemberId(newMemberId)
}
}, 15_000)
},
[
signUpFormData,
ytResponseData,
memberId,
goToNextStep,
createNewMember,
generateUniqueMemberHandleBasedOnInput,
Expand All @@ -282,12 +262,12 @@ export const SignUpModal = () => {
const handleMemberStepSubmit = useCallback(
(data: MemberFormData) => {
goToNextStep()
setSignupFormData((userForm) => ({
...userForm,
signUpFormData.current = {
...signUpFormData.current,
handle: data.handle,
avatar: data.avatar,
captchaToken: data.captchaToken,
}))
}
},
[goToNextStep]
)
Expand Down Expand Up @@ -323,9 +303,9 @@ export const SignUpModal = () => {

useEffect(() => {
if (isSuccess) {
trackMembershipCreation(signUpFormData.handle, signUpFormData.email)
trackMembershipCreation(signUpFormData.current.handle, signUpFormData.current.email)
}
}, [isSuccess, signUpFormData.email, signUpFormData.handle, trackMembershipCreation])
}, [isSuccess, signUpFormData.current.email, signUpFormData.current.handle, trackMembershipCreation])

useEffect(() => {
authModalOpenName === 'signUp' && trackPageView(stepToPageName[currentStep] ?? '', { isYppFlow })
Expand All @@ -342,7 +322,7 @@ export const SignUpModal = () => {
? {
text: 'Continue',
onClick: () => {
setSignupFormData(SIGNUP_FORM_DATA_INITIAL_STATE)
signUpFormData.current = SIGNUP_FORM_DATA_INITIAL_STATE
setAuthModalOpenName(undefined)
},
}
Expand All @@ -356,7 +336,7 @@ export const SignUpModal = () => {
variant="tertiary"
onClick={() => {
setAuthModalOpenName(undefined)
setSignupFormData(SIGNUP_FORM_DATA_INITIAL_STATE)
signUpFormData.current = SIGNUP_FORM_DATA_INITIAL_STATE
}}
>
Cancel
Expand All @@ -371,24 +351,24 @@ export const SignUpModal = () => {
{...commonProps}
dialogContentRef={ref}
onSubmit={handleMemberStepSubmit}
avatar={signUpFormData.avatar}
handle={signUpFormData.handle}
avatar={signUpFormData.current.avatar}
handle={signUpFormData.current.handle}
/>
)}
{currentStep === SignUpSteps.SignUpSeed && (
<SignUpSeedStep
{...commonProps}
onSeedSubmit={handleCreateMemberOnSeedStepSubmit}
mnemonic={signUpFormData.mnemonic}
confirmedCopy={signUpFormData.confirmedCopy}
mnemonic={signUpFormData.current.mnemonic}
confirmedCopy={signUpFormData.current.confirmedCopy}
/>
)}
{currentStep === SignUpSteps.SignUpPassword && (
<SignUpPasswordStep
{...commonProps}
dialogContentRef={ref}
onPasswordSubmit={handlePasswordStepSubmit}
password={signUpFormData.password}
password={signUpFormData.current.password}
/>
)}
{currentStep === SignUpSteps.SignUpEmail && (
Expand All @@ -397,13 +377,13 @@ export const SignUpModal = () => {
isOverflowing={overflow || !smMatch}
isEmailAlreadyTakenError={emailAlreadyTakenError}
onEmailSubmit={handleEmailStepSubmit}
email={signUpFormData.email}
confirmedTerms={signUpFormData.confirmedTerms}
email={signUpFormData.current.email}
confirmedTerms={signUpFormData.current.confirmedTerms}
/>
)}
{currentStep === SignUpSteps.Creating && <SignUpCreatingMemberStep {...commonProps} />}
{currentStep === SignUpSteps.Success && (
<SignUpSuccessStep avatarUrl={signUpFormData.avatar?.url || ''} amountOfTokens={amountOfTokens} />
<SignUpSuccessStep avatarUrl={signUpFormData.current.avatar?.url || ''} amountOfTokens={amountOfTokens} />
)}
</StyledDialogModal>
)
Expand Down
6 changes: 6 additions & 0 deletions packages/atlas/src/components/_comments/Comment/Comment.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,9 @@ export const ReplyButton = styled(Button)`
margin-left: ${sizes(3)};
}
`

export const ReplyButtonWrapper = styled.div`
:not(:only-child) {
margin-left: ${sizes(3)};
}
`
Loading

0 comments on commit 583b22d

Please sign in to comment.