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

src/api/interfaces/dataset.js

@@ -7,7 +7,8 @@ const url = 'dataset/'
 // 'details': https://github.com/AlexsLemonade/refinebio-frontend/pull/485
 
 export default {
-  create: (params) => http.post(url, params),
+  create: (body) => http.post(url, body),
   get: (id, headers) => http.get(`${url}${id}/`, { details: true }, headers),
-  update: (id, params) => http.put(`${url}${id}/?details=true`, params)
+  update: (id, body, headers) =>
+    http.put(`${url}${id}/?details=true`, body, headers)
 }

src/api/interfaces/token.js

@@ -3,17 +3,7 @@ import http from 'helpers/http'
 const url = 'token/'
 
 export default {
-  create: () => {
-    return http.post(url)
-  },
-  get: (id) => {
-    const path = `${url}${id}`
-
-    return http.get(path)
-  },
-  update: (id, params) => {
-    const path = `${url}${id}`
-
-    return http.put(path, params || { is_activated: true })
-  }
+  create: (body) => http.post(url, body),
+  get: (id) => http.get(`${url}${id}/`),
+  update: (id, body) => http.put(`${url}${id}`, body)
 }

src/components/Compendia/DownloadBlockForm.js

@@ -2,8 +2,8 @@ import { useRef, useState, memo } from 'react'
 import { Box, Heading, Text } from 'grommet'
 import styled, { css } from 'styled-components'
 import { useCompendiaContext } from 'hooks/useCompendiaContext'
+import { useRefinebio } from 'hooks/useRefinebio'
 import { useResponsive } from 'hooks/useResponsive'
-import { useToken } from 'hooks/useToken'
 import formatBytes from 'helpers/formatBytes'
 import formatString from 'helpers/formatString'
 import fuzzyFilterOnKey from 'helpers/fuzzyFilterOnKey'
@@ -55,9 +55,8 @@ const DropdownOption = ({ label, selected, onClick }) => (
 
 export const DownloadBlockForm = () => {
   const { setResponsive } = useResponsive()
-  const { validateToken } = useToken()
-  const hasToken = validateToken()
-  const [acceptTerms, setAcceptTerms] = useState(hasToken)
+  const { acceptedTerms, setAcceptedTerms } = useRefinebio()
+  const [isTermsChecked, setIsTermsChecked] = useState(acceptedTerms)
   const { compendia, type, goToDownloadCompendium } = useCompendiaContext()
   const [compendium, setCompendium] = useState(null)
   const [showOptions, setShowOptions] = useState(false)
@@ -82,6 +81,11 @@ export const DownloadBlockForm = () => {
     }
   }
 
+  const handleDownloadNow = () => {
+    setAcceptedTerms(isTermsChecked)
+    goToDownloadCompendium(compendium)
+  }
+
   return (
     <Box background="white" pad={setResponsive('medium', 'large', 'xlarge')}>
       <Heading
@@ -176,7 +180,7 @@ export const DownloadBlockForm = () => {
           />
         </Box>
       )}
-      {!hasToken && (
+      {!acceptedTerms && (
         <Box margin={{ vertical: 'small' }}>
           <CheckBox
             label={
@@ -185,7 +189,7 @@ export const DownloadBlockForm = () => {
                 <Anchor href={links.terms_of_use}>Terms of Use</Anchor>
               </Text>
             }
-            onClick={() => setAcceptTerms(!acceptTerms)}
+            onClick={() => setIsTermsChecked(!isTermsChecked)}
           />
         </Box>
       )}
@@ -203,10 +207,10 @@ export const DownloadBlockForm = () => {
         <Column align={setResponsive('start', 'end')}>
           <Button
             label="Download Now"
-            disabled={!acceptTerms || !compendium}
+            disabled={!isTermsChecked || !compendium}
             primary
             responsive
-            onClick={() => goToDownloadCompendium(compendium)}
+            onClick={handleDownloadNow}
           />
         </Column>
       </Row>

src/components/Dataset/DatasetPageHeader.js

@@ -6,13 +6,16 @@ import getDatasetState from 'helpers/getDatasetState'
 import { FixedContainer } from 'components/shared/FixedContainer'
 import { DatasetNotProcessed } from './DatasetNotProcessed'
 import { DatasetProcessingError } from './DatasetProcessingError'
-import { DatasetReady } from './DatasetReady'
 import { DatasetRegenerate } from './DatasetRegenerate'
 
 const DatasetProcessing = dynamic(() => import('./DatasetProcessing'), {
   ssr: false
 })
 
+const DatasetReady = dynamic(() => import('./DatasetReady'), {
+  ssr: false
+})
+
 export const DatasetPageHeader = ({ dataset }) => {
   const { setResponsive } = useResponsive()
   const { polledDatasetState } = usePollDatasetStatus(dataset.id)

src/components/Dataset/DatasetReady.js

@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Box, Heading, Text } from 'grommet'
 import gtag from 'analytics/gtag'
 import { useDatasetManager } from 'hooks/useDatasetManager'
+import { useRefinebio } from 'hooks/useRefinebio'
 import { useResponsive } from 'hooks/useResponsive'
-import { useToken } from 'hooks/useToken'
 import formatBytes from 'helpers/formatBytes'
 import { Anchor } from 'components/shared/Anchor'
 import { Button } from 'components/shared/Button'
@@ -14,26 +14,21 @@ import { links } from 'config'
 import { DatasetExplore } from './DatasetExplore'
 
 export const DatasetReady = ({ dataset }) => {
-  const { downloadDataset } = useDatasetManager()
   const { setResponsive } = useResponsive()
-  const { validateToken } = useToken()
-  const [acceptedTerms, setAcceptedTerms] = useState(false)
+  const { downloadDataset } = useDatasetManager()
+  const { acceptedTerms, setAcceptedTerms } = useRefinebio()
+  const [isTermsChecked, setIsTermsChecked] = useState(acceptedTerms)
 
-  const handleDownloadNow = async () => {
-    await downloadDataset(dataset.id, dataset.download_url)
-    gtag.trackDatasetDownload(dataset)
+  const handleDownloadNow = () => {
+    setAcceptedTerms(isTermsChecked)
+    submit()
   }
 
-  const getTokenStatus = async () => {
-    const isActivated = await validateToken()
-    setAcceptedTerms(isActivated)
+  const submit = async () => {
+    await downloadDataset(dataset.id, dataset.download_url)
+    gtag.trackDatasetDownload(dataset)
   }
 
-  // sets acceptedTerms based on the token validity
-  useEffect(() => {
-    getTokenStatus()
-  }, [])
-
   return (
     <>
       <Box align="center">
@@ -72,7 +67,7 @@ export const DatasetReady = ({ dataset }) => {
                           />
                         </Text>
                       }
-                      onClick={() => setAcceptedTerms(!acceptedTerms)}
+                      onClick={() => setIsTermsChecked(!isTermsChecked)}
                     />
                   </Column>
                 )}
@@ -87,7 +82,7 @@ export const DatasetReady = ({ dataset }) => {
                 >
                   <Button
                     label="Download Now"
-                    disabled={!acceptedTerms}
+                    disabled={!isTermsChecked}
                     primary
                     responsive
                     onClick={handleDownloadNow}

src/components/Download/DownloadDatasetModal.js

@@ -4,6 +4,7 @@ import { Box, Form, Heading, Paragraph } from 'grommet'
 import gtag from 'analytics/gtag'
 import { validationSchemas } from 'config'
 import { useDatasetManager } from 'hooks/useDatasetManager'
+import { useRefinebio } from 'hooks/useRefinebio'
 import { useResponsive } from 'hooks/useResponsive'
 import subscribeEmail from 'helpers/subscribeEmail'
 import { Button } from 'components/shared/Button'
@@ -16,10 +17,45 @@ import { TermsOfUseCheckBox } from 'components/Download/StartProcessingForm/Term
 
 export const DownloadDatasetModal = ({ dataset, id, closeModal }) => {
   const { push } = useRouter()
-  const { email, startProcessingDataset } = useDatasetManager()
   const { setResponsive } = useResponsive()
+  const { email, startProcessingDataset } = useDatasetManager()
+  const { acceptedTerms, setAcceptedTerms } = useRefinebio()
   const { StartProcessingFormSchema } = validationSchemas
 
+  const handleStartProcessing = (formValues) => {
+    setAcceptedTerms(formValues.terms)
+    submit(formValues)
+  }
+
+  const submit = async (formValues) => {
+    if (formValues.email_ccdl_ok) {
+      const subscribeEmailResponse = await subscribeEmail(
+        formValues.email_address
+      )
+      if (subscribeEmailResponse.status !== 'error') {
+        gtag.trackEmailSubscription(DownloadDatasetModal)
+      }
+    }
+
+    const downloadOptions = {
+      aggregate_by: formValues.aggregate_by,
+      data: dataset.data,
+      scale_by: formValues.scale_by,
+      quantile_normalize: formValues.quantile_normalize,
+      email_address: formValues.email_address,
+      email_ccdl_ok: formValues.email_ccdl_ok
+    }
+
+    const response = await startProcessingDataset(
+      downloadOptions,
+      dataset.id,
+      null // no accession code
+    )
+    const pathname = `/dataset/${response.id}`
+    push({ pathname }, pathname)
+    closeModal(id)
+  }
+
   return (
     <Box
       margin={{ bottom: 'medium' }}
@@ -32,29 +68,16 @@ 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: false
+          email_address: email || '',
+          email_ccdl_ok: true,
+          terms: acceptedTerms
         }}
         validationSchema={StartProcessingFormSchema}
         validateOnChange={false}
         onSubmit={async (values, { setSubmitting }) => {
-          const { emailAddress, receiveUpdates } = values
-
-          if (receiveUpdates) {
-            const subscribeEmailResponse = await subscribeEmail(emailAddress)
-            if (subscribeEmailResponse.status !== 'error') {
-              gtag.trackEmailSubscription(DownloadDatasetModal)
-            }
-          }
-
-          const response = await startProcessingDataset(values, dataset.id)
-          const pathname = `/dataset/${response.id}`
-          push({ pathname }, pathname)
-          closeModal(id)
+          handleStartProcessing(values)
           setSubmitting(false)
         }}
       >
@@ -99,21 +122,25 @@ export const DownloadDatasetModal = ({ dataset, id, closeModal }) => {
               </Paragraph>
               <Box pad={{ top: 'small' }}>
                 <EmailTextInput
-                  error={errors.emailAddress}
-                  touched={touched.emailAddress}
-                  value={values.emailAddress}
-                  handleChange={handleChange}
-                />
-                <TermsOfUseCheckBox
-                  error={errors.termsOfUse}
-                  touched={touched.termsOfUse}
-                  value={values.termsOfUse}
-                  handleChange={handleChange}
-                />
-                <ReceiveUpdatesCheckBox
-                  value={values.receiveUpdates}
+                  error={errors.email_address}
+                  touched={touched.email_address}
+                  value={values.email_address}
                   handleChange={handleChange}
                 />
+                <Box pad={{ top: 'small' }}>
+                  {!acceptedTerms && (
+                    <TermsOfUseCheckBox
+                      error={errors.terms}
+                      touched={touched.terms}
+                      value={values.terms}
+                      handleChange={handleChange}
+                    />
+                  )}
+                  <ReceiveUpdatesCheckBox
+                    value={values.email_ccdl_ok}
+                    handleChange={handleChange}
+                  />
+                </Box>
               </Box>
             </Box>
             <Box align="end">

src/components/Download/StartProcessingForm/EmailTextInput.js

@@ -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]"

src/components/Download/StartProcessingForm/ReceiveUpdatesCheckBox.js

@@ -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}
     />
   )

src/components/Download/StartProcessingForm/TermsOfUseCheckBox.js

@@ -1,30 +1,28 @@
-import { Box, Text } from 'grommet'
+import { Text } from 'grommet'
 import { links } from 'config'
 import { Anchor } from 'components/shared/Anchor'
 import { CheckBox } from 'components/shared/CheckBox'
 
 export const TermsOfUseCheckBox = ({ error, touched, value, handleChange }) => {
   return (
-    <Box margin={{ top: 'small' }}>
-      <CheckBox
-        checked={value}
-        error={error && touched}
-        errorText={error}
-        label={
-          <Text>
-            I agree to the{' '}
-            <Anchor
-              href={links.terms_of_use}
-              label="Terms of Use"
-              rel="noopener noreferrer"
-              target="_blank"
-            />
-          </Text>
-        }
-        name="termsOfUse"
-        onChange={handleChange}
-      />
-    </Box>
+    <CheckBox
+      checked={value}
+      error={error && touched}
+      errorText={error}
+      label={
+        <Text>
+          I agree to the{' '}
+          <Anchor
+            href={links.terms_of_use}
+            label="Terms of Use"
+            rel="noopener noreferrer"
+            target="_blank"
+          />
+        </Text>
+      }
+      name="terms"
+      onChange={handleChange}
+    />
   )
 }