Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

428 - Update startProcessingDataset to accept formatted data from caller Formik components #431

Merged
merged 14 commits into from
Jan 17, 2025
Merged

428 - Update startProcessingDataset to accept formatted data from caller Formik components #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ca67726
(edit) add a new 'acceptedTerms' context state and user token validat…
nozomione Dec 2, 2024
6b50dd3
(edit) adjust the components (download forms) that utilize the token
nozomione Dec 2, 2024
d9324f8
Merge branch 'dev' into nozomione/413-update-token-validation-flow
nozomione Dec 5, 2024
60f2d49
(edit) add 404 check in validateToken, and add a new method activateT…
nozomione Dec 5, 2024
50532a7
Merge 'dev' branch into nozomione/413-update-token-validation-flow
nozomione Dec 9, 2024
a269813
(edit) add an application token (generate the user token on inital us…
nozomione Dec 10, 2024
1defad3
(edit) adjust consumer components (for form submission and the terms …
nozomione Dec 10, 2024
6fe6e31
(edit) use accetedTerms and its setter in consumer components (remove…
nozomione Dec 17, 2024
f4f48b9
(edit) replace useTriggerSubmit with useWaitFor and adjust components…
nozomione Dec 20, 2024
d69225f
(edit) prepare the download options from the formik components for us…
nozomione Dec 20, 2024
2b1a8b4
Merge the 'dev' branch into nozomione/428-prepare-options-in-formik-c…
nozomione Jan 8, 2025
4ee379a
(edit) remove unrequired comment
nozomione Jan 8, 2025
33d84ed
(clean up) remove useWaitFor
nozomione Jan 8, 2025
8f75793
(edit) use destrucring when assigning formValues and spread the reast
nozomione Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions src/components/Download/DownloadDatasetModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,23 +25,28 @@ export const DownloadDatasetModal = ({ dataset, id, closeModal }) => {
const [formValues, setFormValues] = useState(null)

const submit = async () => {
const { emailAddress, receiveUpdates } = formValues

if (receiveUpdates) {
const subscribeEmailResponse = await subscribeEmail(emailAddress)
if (formValues.email_ccdl_ok) {
const subscribeEmailResponse = await subscribeEmail(
formValues.email_address
)
if (subscribeEmailResponse.status !== 'error') {
gtag.trackEmailSubscription(DownloadDatasetModal)
}
}

const response = await startProcessingDataset(formValues, dataset.id)
const downloadOptions = {
data: dataset.data,
...formValues
}

const response = await startProcessingDataset(downloadOptions, dataset.id)
const pathname = `/dataset/${response.id}`
push({ pathname }, pathname)
closeModal(id)
}

useEffect(() => {
if (formValues.termsOfUse) setAcceptedTerms(formValues.termsOfUse)
if (formValues.terms) setAcceptedTerms(formValues.terms)
if (acceptedTerms && formValues) submit()
}, [acceptedTerms, formValues])

Expand All @@ -57,17 +62,17 @@ export const DownloadDatasetModal = ({ dataset, id, closeModal }) => {
<Formik
initialValues={{
aggregate_by: dataset.aggregate_by,
data: dataset.data,
scale_by: dataset.scale_by,
quantile_normalize: dataset.quantile_normalize,
emailAddress: email || '',
receiveUpdates: true,
termsOfUse: acceptedTerms
email_address: email || '',
email_ccdl_ok: true,
terms: acceptedTerms
}}
validationSchema={StartProcessingFormSchema}
validateOnChange={false}
onSubmit={async (values, { setSubmitting }) => {
setFormValues(values)
const { terms, ...rest } = values
setFormValues(rest)
setSubmitting(false)
}}
>
Expand Down Expand Up @@ -112,22 +117,22 @@ export const DownloadDatasetModal = ({ dataset, id, closeModal }) => {
</Paragraph>
<Box pad={{ top: 'small' }}>
<EmailTextInput
error={errors.emailAddress}
touched={touched.emailAddress}
value={values.emailAddress}
error={errors.email_address}
touched={touched.email_address}
value={values.email_address}
handleChange={handleChange}
/>
<Box pad={{ top: 'small' }}>
{!acceptedTerms && (
<TermsOfUseCheckBox
error={errors.termsOfUse}
touched={touched.termsOfUse}
value={values.termsOfUse}
error={errors.terms}
touched={touched.terms}
value={values.terms}
handleChange={handleChange}
/>
)}
<ReceiveUpdatesCheckBox
value={values.receiveUpdates}
value={values.email_ccdl_ok}
handleChange={handleChange}
/>
</Box>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Download/StartProcessingForm/EmailTextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const EmailTextInput = ({ error, touched, value, handleChange }) => {
<TextInput
error={error && touched}
errorText={error}
name="emailAddress"
name="email_address"
type="email"
value={value}
placeholder="[email protected]"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Download/StartProcessingForm/ReceiveUpdatesCheckBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const ReceiveUpdatesCheckBox = ({ value, handleChange }) => {
<CheckBox
checked={value}
label="I would like to receive occasional updates from the refine.bio team"
name="receiveUpdates"
name="email_ccdl_ok"
onChange={handleChange}
/>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/Download/StartProcessingForm/TermsOfUseCheckBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const TermsOfUseCheckBox = ({ error, touched, value, handleChange }) => {
/>
</Text>
}
name="termsOfUse"
name="terms"
onChange={handleChange}
/>
)
Expand Down
41 changes: 23 additions & 18 deletions src/components/Download/StartProcessingForm/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,40 +24,45 @@ export const StartProcessingForm = ({ dataset }) => {
const [formValues, setFormValues] = useState(null)

const submit = async () => {
const { emailAddress, receiveUpdates } = formValues

if (receiveUpdates) {
const subscribeEmailResponse = await subscribeEmail(emailAddress)
if (formValues.email_ccdl_ok) {
const subscribeEmailResponse = await subscribeEmail(
formValues.email_address
)
if (subscribeEmailResponse.status !== 'error') {
gtag.trackEmailSubscription(StartProcessingForm)
}
}

const { id } = await startProcessingDataset(formValues, dataset.id)
const downloadOptions = {
data: dataset.data,
...formValues
}

const { id } = await startProcessingDataset(downloadOptions, dataset.id)
const pathname = `/dataset/${id}`
push({ pathname }, pathname)
gtag.trackDatasetDownloadOptions(dataset)
}

useEffect(() => {
if (formValues) {
setAcceptedTerms(formValues.termsOfUse)
setAcceptedTerms(formValues.terms)
if (acceptedTerms) submit()
}
}, [acceptedTerms, formValues])

return (
<Formik
initialValues={{
data: dataset.data,
emailAddress: email || '',
receiveUpdates: true,
termsOfUse: acceptedTerms
email_address: email || '',
email_ccdl_ok: true,
terms: acceptedTerms
}}
validationSchema={StartProcessingFormSchema}
validateOnChange={false}
onSubmit={async (values, { setSubmitting }) => {
setFormValues(values)
const { terms, ...rest } = values
setFormValues(rest)
setSubmitting(false)
}}
>
Expand All @@ -73,9 +78,9 @@ export const StartProcessingForm = ({ dataset }) => {
<Row>
<Column fill basis="1">
<EmailTextInput
error={errors.emailAddress}
touched={touched.emailAddress}
value={values.emailAddress}
error={errors.email_address}
touched={touched.email_address}
value={values.email_address}
handleChange={handleChange}
/>
</Column>
Expand All @@ -94,14 +99,14 @@ export const StartProcessingForm = ({ dataset }) => {
<Box margin={{ top: 'small' }}>
{!acceptedTerms && (
<TermsOfUseCheckBox
error={errors.termsOfUse}
touched={touched.termsOfUse}
value={values.termsOfUse}
error={errors.terms}
touched={touched.terms}
value={values.terms}
handleChange={handleChange}
/>
)}
<ReceiveUpdatesCheckBox
value={values.receiveUpdates}
value={values.email_ccdl_ok}
handleChange={handleChange}
/>
</Box>
Expand Down
41 changes: 23 additions & 18 deletions src/components/shared/SearchCard/SearchCardAction/DownloadNowModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,22 @@ export const DownloadNowModal = ({
const [formValues, setFormValues] = useState(null)

const submit = async () => {
const { emailAddress, receiveUpdates } = formValues

if (receiveUpdates) {
const subscribeEmailResponse = await subscribeEmail(emailAddress)
if (formValues.email_ccdl_ok) {
const subscribeEmailResponse = await subscribeEmail(
formValues.email_address
)
if (subscribeEmailResponse.status !== 'error') {
gtag.trackEmailSubscription(DownloadNowModal)
}
}

const downloadOptions = {
data: { [accessionCode]: ['ALL'] },
...formValues
}

await startProcessingDataset(
formValues,
downloadOptions,
null, // no detaset ID
accessionCode
)
Expand All @@ -47,7 +52,7 @@ export const DownloadNowModal = ({

useEffect(() => {
if (formValues) {
setAcceptedTerms(formValues.termsOfUse)
setAcceptedTerms(formValues.terms)
if (acceptedTerms) submit()
}
}, [acceptedTerms, formValues])
Expand All @@ -67,17 +72,17 @@ export const DownloadNowModal = ({
<Formik
initialValues={{
aggregate_by: 'EXPERIMENT',
data: { [accessionCode]: ['ALL'] },
scale_by: 'NONE',
quantile_normalize: true,
emailAddress: email || '',
receiveUpdates: true,
termsOfUse: acceptedTerms
email_address: email || '',
email_ccdl_ok: true,
terms: acceptedTerms
}}
validationSchema={StartProcessingFormSchema}
validateOnChange={false}
onSubmit={async (values, { setSubmitting }) => {
setFormValues(values)
const { terms, ...rest } = values
setFormValues(rest)
setSubmitting(false)
}}
>
Expand Down Expand Up @@ -126,22 +131,22 @@ export const DownloadNowModal = ({
</Paragraph>
<Box pad={{ top: 'small' }}>
<EmailTextInput
error={errors.emailAddress}
touched={touched.emailAddress}
value={values.emailAddress}
error={errors.email_address}
touched={touched.email_address}
value={values.email_address}
handleChange={handleChange}
/>
<Box pad={{ top: 'small' }}>
{!acceptedTerms && (
<TermsOfUseCheckBox
error={errors.termsOfUse}
touched={touched.termsOfUse}
value={values.termsOfUse}
error={errors.terms}
touched={touched.terms}
value={values.terms}
handleChange={handleChange}
/>
)}
<ReceiveUpdatesCheckBox
value={values.receiveUpdates}
value={values.email_ccdl_ok}
handleChange={handleChange}
/>
</Box>
Expand Down
11 changes: 5 additions & 6 deletions src/components/shared/SignUpBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,10 @@ export const SignUpBlock = () => {
<FixedContainer align="center">
<Formik
initialValues={{
emailAddress: ''
email_address: ''
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please note that this field has also been renamed for consistency.

}}
onSubmit={async (values, { setSubmitting }) => {
const { emailAddress } = values
const response = await subscribeEmail(emailAddress)
const response = await subscribeEmail(values.email_address)

if (response.status === 'error') {
setSubmitted(false)
Expand Down Expand Up @@ -54,7 +53,7 @@ export const SignUpBlock = () => {
<strong>
Thank you for subscribing. Updates will be sent to{' '}
<Text color="alex-yellow-base" size="inherit">
{values.emailAddress}
{values.email_address}
</Text>
</strong>
</Paragraph>
Expand All @@ -81,9 +80,9 @@ export const SignUpBlock = () => {
<Row width="500px">
<Column fill basis="1">
<TextInput
name="emailAddress"
name="email_address"
type="email"
value={values.emailAddress}
value={values.email_address}
onChange={handleChange}
placeholder="[email protected]"
/>
Expand Down
4 changes: 2 additions & 2 deletions src/config/validationSchemas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ const RequestDataFormSchema = yup.object().shape({
})

const StartProcessingFormSchema = yup.object().shape({
emailAddress: yup
email_address: yup
.string()
.email('Please enter a vaild email')
.required('Please enter your email address'),
termsOfUse: yup
terms: yup
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've also shortened the termsOfUse field to terms.

.boolean()
.oneOf(
[true],
Expand Down
15 changes: 2 additions & 13 deletions src/hooks/useDatasetManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useRefinebio } from 'hooks/useRefinebio'
import differenceOfArrays from 'helpers/differenceOfArrays'
import formatString from 'helpers/formatString'
import getDatasetState from 'helpers/getDatasetState'
import filterObjectByKeys from 'helpers/filterObjectByKeys'
import isEmptyObject from 'helpers/isEmptyObject'
import unionizeArrays from 'helpers/unionizeArrays'
import { api } from 'api'
Expand Down Expand Up @@ -138,18 +137,8 @@ export const useDatasetManager = () => {
throw new Error('Terms of Use must be accepted to proceed.')
}

const { emailAddress, receiveUpdates } = options
const downloadOptionsKeys = [
'aggregate_by',
'data',
'scale_by',
'quantile_normalize'
]

const body = {
...filterObjectByKeys(options, downloadOptionsKeys),
email_address: emailAddress,
...(receiveUpdates && { email_ccdl_ok: true }),
...options,
start: true
}

Expand All @@ -158,7 +147,7 @@ export const useDatasetManager = () => {
// adds this dataset ID to processingDatasets[] for polling
addToProcessingDatasets(processingDatasetId, accessionCode)
// saves the user's newly entered email or replace the existing one
setEmail(emailAddress)
setEmail(options.email_address)
// deletes the locally saved dataset data once it has started processing (no longer mutable)
if (id && isMyDatasetId(id)) {
setDataset({})
Expand Down