feat: add user action component (#4088)

ONEARMY · Jan 22, 2025 · 13c9a8c · 13c9a8c
1 parent 8e6148c
commit 13c9a8c
Show file tree

Hide file tree

Showing 26 changed files with 283 additions and 233 deletions.
diff --git a/packages/components/src/DownloadButton/DownloadButton.stories.tsx b/packages/components/src/DownloadButton/DownloadButton.stories.tsx
@@ -8,13 +8,14 @@ export default {
 } as Meta<typeof DownloadButton>
 
 export const Default: StoryFn<typeof DownloadButton> = () => (
-  <DownloadButton onClick={() => {}} />
+  <DownloadButton onClick={() => {}} fileDownloadCount={7} />
 )
 
 export const CustomDetails: StoryFn<typeof DownloadButton> = () => (
   <DownloadButton
     onClick={() => {}}
     glyph="download-cloud"
     label="Hello there"
+    fileDownloadCount={726}
   />
 )
diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx
@@ -1,23 +1,21 @@
 import { Flex, Text } from 'theme-ui'
 
+import { DownloadCounter } from '../DownloadCounter/DownloadCounter'
 import { Icon } from '../Icon/Icon'
 import { Tooltip } from '../Tooltip/Tooltip'
 
 import type { IGlyphs } from '../Icon/types'
 
 export interface IProps {
   onClick: () => void
+  fileDownloadCount?: number
   isLoggedIn?: boolean
   label?: string
   glyph?: keyof IGlyphs
 }
 
-export const DownloadButton = ({
-  glyph,
-  isLoggedIn,
-  label,
-  onClick,
-}: IProps) => {
+export const DownloadButton = (props: IProps) => {
+  const { fileDownloadCount, glyph, isLoggedIn, label, onClick } = props
   return (
     <>
       <Flex
@@ -45,6 +43,7 @@ export const DownloadButton = ({
         </Text>
       </Flex>
       <Tooltip id="download-files" />
+      <DownloadCounter total={fileDownloadCount} />
     </>
   )
 }
diff --git a/packages/components/src/DownloadStaticFile/DownloadStaticFile.stories.tsx b/packages/components/src/DownloadStaticFile/DownloadStaticFile.stories.tsx
@@ -14,6 +14,7 @@ export const Default: StoryFn<typeof DownloadStaticFile> = () => (
       size: 1200000,
       downloadUrl: 'https://example.com',
     }}
+    fileDownloadCount={346}
   />
 )
 export const LoggedOut: StoryFn<typeof DownloadStaticFile> = () => (
@@ -26,5 +27,6 @@ export const LoggedOut: StoryFn<typeof DownloadStaticFile> = () => (
     redirectToSignIn={async () => {
       alert('Redirect to Sign In')
     }}
+    fileDownloadCount={6}
   />
 )
diff --git a/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx b/packages/components/src/DownloadStaticFile/DownloadStaticFile.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import { Flex, Text } from 'theme-ui'
 
 import { DownloadButton } from '../DownloadButton/DownloadButton'
@@ -14,21 +13,22 @@ export interface IProps {
     size: number
     downloadUrl?: string | undefined
   }
+  fileDownloadCount?: number
   forDonationRequest?: boolean
   isLoggedIn?: boolean
   allowDownload?: boolean
   handleClick?: () => void
   redirectToSignIn?: () => Promise<void>
 }
 
-const FileDetails = (props: {
-  file: {
-    name: string
-  }
+interface IPropFileDetails {
+  file: { name: string }
   glyph: availableGlyphs
   size: string
   redirectToSignIn?: () => Promise<void>
-}) => {
+}
+
+const FileDetails = (props: IPropFileDetails) => {
   const { file, glyph, size, redirectToSignIn } = props
 
   return (
@@ -71,14 +71,15 @@ const FileDetails = (props: {
   )
 }
 
-export const DownloadStaticFile = ({
-  file,
-  allowDownload,
-  handleClick,
-  redirectToSignIn,
-  forDonationRequest,
-  isLoggedIn,
-}: IProps) => {
+export const DownloadStaticFile = (props: IProps) => {
+  const {
+    file,
+    fileDownloadCount,
+    allowDownload,
+    handleClick,
+    redirectToSignIn,
+    isLoggedIn,
+  } = props
   const size = bytesToSize(file.size || 0)
 
   if (!file) {
@@ -101,23 +102,13 @@ export const DownloadStaticFile = ({
         </ExternalLink>
       )}
 
-      {forDonationRequest && (
-        <DownloadButton
-          onClick={() => handleClick && handleClick()}
-          isLoggedIn={isLoggedIn}
-          label={`${file.name} (${size})`}
-          glyph="download-cloud"
-        />
-      )}
-
-      {!forDownload && !forDonationRequest && (
-        <FileDetails
-          file={file}
-          glyph="download-cloud"
-          size={size}
-          redirectToSignIn={redirectToSignIn}
-        />
-      )}
+      <DownloadButton
+        fileDownloadCount={fileDownloadCount}
+        glyph="download-cloud"
+        isLoggedIn={isLoggedIn}
+        label={`${file.name} (${size})`}
+        onClick={() => handleClick && handleClick()}
+      />
     </>
   )
 }

diff --git a/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.stories.tsx b/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.stories.tsx
@@ -21,9 +21,5 @@ const downloadProps = {
 }
 
 export const Default: StoryFn<typeof DownloadWithDonationAsk> = () => (
-  <DownloadWithDonationAsk isLoggedIn {...downloadProps} />
-)
-
-export const LoggedOut: StoryFn<typeof DownloadWithDonationAsk> = () => (
-  <DownloadWithDonationAsk isLoggedIn={false} {...downloadProps} />
+  <DownloadWithDonationAsk {...downloadProps} />
 )
diff --git a/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.test.tsx b/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.test.tsx
@@ -25,33 +25,14 @@ const downloadProps = {
 }
 
 describe('DownloadWithDonationAsk', () => {
-  it('when logged out, requires users to login', () => {
-    const { getAllByTestId } = render(
-      <DownloadWithDonationAsk
-        {...downloadProps}
-        handleClick={vi.fn()}
-        isLoggedIn={false}
-        fileDownloadCount={0}
-        fileLink="http://youtube.com/"
-        files={[]}
-      />,
-    )
-
-    const downloadButton = getAllByTestId('downloadButton')[0]
-    fireEvent.click(downloadButton)
-
-    expect(mockedUsedNavigate).toHaveBeenCalledWith('/sign-in')
-  })
-
-  it('when logged in, opens the donation modal for fileLink', () => {
+  it('opens the donation modal for fileLink', () => {
     const handleClick = vi.fn()
     const fileLink = 'http://youtube.com/'
 
     const { getAllByTestId } = render(
       <DownloadWithDonationAsk
         {...downloadProps}
         handleClick={handleClick}
-        isLoggedIn={true}
         fileDownloadCount={0}
         fileLink={fileLink}
         files={[]}
@@ -69,15 +50,14 @@ describe('DownloadWithDonationAsk', () => {
     expect(handleClick).not.toHaveBeenCalled()
   })
 
-  it('when logged in, opens the donation modal for files', () => {
+  it('opens the donation modal for files', () => {
     const downloadUrl = 'http://great-url.com/'
     const handleClick = vi.fn()
 
     const { getAllByTestId } = render(
       <DownloadWithDonationAsk
         {...downloadProps}
         handleClick={handleClick}
-        isLoggedIn={true}
         fileDownloadCount={0}
         fileLink={undefined}
         files={[

diff --git a/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.tsx b/packages/components/src/DownloadWithDonationAsk/DownloadWithDonationAsk.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { DonationRequestModal } from '../DonationRequestModal/DonationRequestModal'
 import { DownloadButton } from '../DownloadButton/DownloadButton'
-import { DownloadCounter } from '../DownloadCounter/DownloadCounter'
 import { DownloadStaticFile } from '../DownloadStaticFile/DownloadStaticFile'
 
 import type { IUploadedFileMeta } from 'oa-shared'
@@ -13,7 +11,6 @@ export interface IProps {
   handleClick: () => Promise<void>
   iframeSrc: string
   imageURL: string
-  isLoggedIn: boolean
   fileDownloadCount: number
   fileLink?: string
   files?: (IUploadedFileMeta | File | null)[]
@@ -24,15 +21,13 @@ export const DownloadWithDonationAsk = (props: IProps) => {
     body,
     iframeSrc,
     imageURL,
-    isLoggedIn,
     handleClick,
     fileDownloadCount,
     fileLink,
     files,
   } = props
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
   const [link, setLink] = useState<string>('')
-  const navigate = useNavigate()
 
   const toggleIsModalOpen = () => setIsModalOpen(!isModalOpen)
 
@@ -57,39 +52,31 @@ export const DownloadWithDonationAsk = (props: IProps) => {
         onDidDismiss={() => toggleIsModalOpen()}
       />
 
-      {!isLoggedIn && (
-        <DownloadButton
-          onClick={() => navigate('/sign-in')}
-          isLoggedIn={false}
-        />
-      )}
-      {isLoggedIn && (
-        <>
-          {fileLink && (
-            <DownloadButton
-              onClick={() => {
-                setLink(fileLink)
+      <>
+        {fileLink && (
+          <DownloadButton
+            fileDownloadCount={fileDownloadCount}
+            isLoggedIn
+            onClick={() => {
+              setLink(fileLink)
+              toggleIsModalOpen()
+            }}
+          />
+        )}
+        {filteredFiles &&
+          filteredFiles.map((file, index) => (
+            <DownloadStaticFile
+              file={file}
+              key={file ? file.name : `file-${index}`}
+              handleClick={() => {
+                setLink(file.downloadUrl)
                 toggleIsModalOpen()
               }}
+              fileDownloadCount={fileDownloadCount}
               isLoggedIn
             />
-          )}
-          {filteredFiles &&
-            filteredFiles.map((file, index) => (
-              <DownloadStaticFile
-                file={file}
-                key={file ? file.name : `file-${index}`}
-                handleClick={() => {
-                  setLink(file.downloadUrl)
-                  toggleIsModalOpen()
-                }}
-                forDonationRequest
-                isLoggedIn
-              />
-            ))}
-        </>
-      )}
-      <DownloadCounter total={fileDownloadCount} />
+          ))}
+      </>
     </>
   )
 }
diff --git a/packages/cypress/src/integration/library/write.spec.ts b/packages/cypress/src/integration/library/write.spec.ts
@@ -178,14 +178,15 @@ describe('[Library]', () => {
       const categoryGuidanceMain =
         'Cover image should show the fully built mould'
 
+      cy.get('[data-cy="sign-up"]')
       cy.signUpNewUser(creator)
       cy.get('[data-cy=loader]').should('not.exist')
       cy.get('[data-cy="MemberBadge-member"]').should('be.visible')
       cy.visit('/library')
 
       cy.step('Access the create project page')
       cy.get('a[href="/library/create"]').should('be.visible')
-      cy.get('[data-cy=create]').click()
+      cy.get('[data-cy=create-project]').click()
       cy.contains('Add your project').should('be.visible')
 
       cy.step('Warn if title is identical with the existing ones')
@@ -322,7 +323,7 @@ describe('[Library]', () => {
       cy.get('[data-cy=loader]').should('not.exist')
       cy.step('Access the create project')
       cy.get('a[href="/library/create"]').should('be.visible')
-      cy.get('[data-cy=create]').click()
+      cy.get('[data-cy=create-project]').click()
       cy.fillIntroTitle(expected.title)
       cy.get('[data-cy=page-link][href*="/library"]').click()
       cy.get('[data-cy="Confirm.modal: Cancel"]').click()

diff --git a/packages/cypress/src/integration/questions/write.spec.ts b/packages/cypress/src/integration/questions/write.spec.ts
@@ -23,6 +23,8 @@
 //     const updatedQuestionDescription = `${initialQuestionDescription} and super awesome goggles`
 
 //     it('[By Authenticated]', () => {
+//      cy.visit('/questions')
+//      cy.get('[data-cy="sign-up"]')
 //       cy.signUpNewUser()
 
 //       cy.step('Go to create page')

diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
@@ -156,8 +156,8 @@ describe('[Research]', () => {
         '0 downloads',
       )
 
-      // download the file then check the counter
       cy.step('Download counter increments')
+      cy.wait(1000)
       cy.get('[data-cy=downloadButton]').click()
       cy.get('[data-cy=DonationRequestSkip]')
         .invoke('removeAttr', 'target')
@@ -316,6 +316,7 @@ describe('[Research]', () => {
         slug: `${randomId}-create-research-article-test`,
       }
 
+      cy.get('[data-cy="sign-up"]')
       cy.login(researcherEmail, researcherPassword)
 
       cy.step('Create the research article')

diff --git a/src/common/Alerts/Alerts.tsx b/src/common/Alerts/Alerts.tsx
@@ -1,19 +1,17 @@
-import { observer } from 'mobx-react-lite'
-import { useCommonStores } from 'src/common/hooks/useCommonStores'
-
+import { UserAction } from '../UserAction'
 import { AlertIncompleteProfile } from './AlertIncompleteProfile'
 import { AlertProfileVerification } from './AlertProfileVerification'
 
-export const Alerts = observer(() => {
-  const { userStore } = useCommonStores().stores
-  const authUser = userStore.authUser
-
-  if (!authUser) return null
-
+export const Alerts = () => {
   return (
-    <>
-      <AlertProfileVerification />
-      <AlertIncompleteProfile />
-    </>
+    <UserAction
+      loggedIn={
+        <>
+          <AlertProfileVerification />
+          <AlertIncompleteProfile />
+        </>
+      }
+      loggedOut={null}
+    />
   )
-})
+}