feat: add UserAction across app

ONEARMY · Jan 17, 2025 · 4a35308 · 4a35308
1 parent 8377ef7
commit 4a35308
Show file tree

Hide file tree

Showing 17 changed files with 188 additions and 186 deletions.
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,5 +1,4 @@
 import { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { DonationRequestModal } from '../DonationRequestModal/DonationRequestModal'
 import { DownloadButton } from '../DownloadButton/DownloadButton'
@@ -13,7 +12,6 @@ export interface IProps {
   handleClick: () => Promise<void>
   iframeSrc: string
   imageURL: string
-  isLoggedIn: boolean
   fileDownloadCount: number
   fileLink?: string
   files?: (IUploadedFileMeta | File | null)[]
@@ -24,15 +22,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,38 +53,30 @@ export const DownloadWithDonationAsk = (props: IProps) => {
         onDidDismiss={() => toggleIsModalOpen()}
       />
 
-      {!isLoggedIn && (
-        <DownloadButton
-          onClick={() => navigate('/sign-in')}
-          isLoggedIn={false}
-        />
-      )}
-      {isLoggedIn && (
-        <>
-          {fileLink && (
-            <DownloadButton
-              onClick={() => {
-                setLink(fileLink)
+      <>
+        {fileLink && (
+          <DownloadButton
+            onClick={() => {
+              setLink(fileLink)
+              toggleIsModalOpen()
+            }}
+            isLoggedIn
+          />
+        )}
+        {filteredFiles &&
+          filteredFiles.map((file, index) => (
+            <DownloadStaticFile
+              file={file}
+              key={file ? file.name : `file-${index}`}
+              handleClick={() => {
+                setLink(file.downloadUrl)
                 toggleIsModalOpen()
               }}
+              forDonationRequest
               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
@@ -179,14 +179,15 @@ describe('[Library]', () => {
         'Cover image should show the fully built mould'
       const categoryGuidanceFiles = 'Include files to replicate the 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')
@@ -325,7 +326,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
@@ -20,6 +20,9 @@ describe('[Question]', () => {
     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
@@ -48,7 +48,7 @@ describe('[Research]', () => {
       cy.visit('/research')
       cy.get('[data-cy=loader]').should('not.exist')
       cy.get('a[href="/research/create"]').should('be.visible')
-      cy.get('[data-cy=create]').click()
+      cy.get('[data-cy=create-research]').click()
 
       cy.step('Warn if title is identical to an existing one')
       cy.contains('Start your Research')
@@ -229,7 +229,7 @@ describe('[Research]', () => {
       cy.step('Can access create form')
       cy.visit('/research')
       cy.get('[data-cy=loader]').should('not.exist')
-      cy.get('[data-cy=create]').should('be.visible')
+      cy.get('[data-cy=create-research]').should('be.visible')
       cy.get('a[href="/research/create"]').should('be.visible')
 
       cy.step('Enter research article details')
@@ -286,7 +286,7 @@ describe('[Research]', () => {
       cy.step('Access the create research article')
       cy.get('[data-cy=loader]').should('not.exist')
       cy.get('a[href="/research/create"]').should('be.visible')
-      cy.get('[data-cy=create]').click()
+      cy.get('[data-cy=create-research]').click()
       cy.get('[data-cy=intro-title')
         .clear()
         .type('Create research article test')
@@ -325,13 +325,14 @@ describe('[Research]', () => {
         slug: `${randomId}-create-research-article-test`,
       }
 
+      cy.get('[data-cy="sign-up"]')
       cy.login(researcherEmail, researcherPassword)
 
       cy.step('Create the research article')
       cy.visit('/research')
       cy.get('[data-cy=loader]').should('not.exist')
       cy.get('a[href="/research/create"]').should('be.visible')
-      cy.get('[data-cy=create]').click()
+      cy.get('[data-cy=create-research]').click()
 
       cy.step('Enter research article details')
       cy.get('[data-cy=intro-title').clear().type(expected.title).blur()

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}
+    />
   )
-})
+}
diff --git a/src/common/DownloadWrapper.tsx b/src/common/DownloadWrapper.tsx
@@ -1,4 +1,7 @@
-import { DownloadWithDonationAsk } from 'oa-components'
+import { useNavigate } from 'react-router-dom'
+import { DownloadButton, DownloadWithDonationAsk } from 'oa-components'
+
+import { UserAction } from './UserAction'
 
 import type { IUploadedFileMeta } from 'oa-shared'
 
@@ -14,6 +17,8 @@ export const DownloadWrapper = (props: IProps) => {
   const { handleClick, fileLink, isLoggedIn, files, fileDownloadCount } = props
   const hasFiles = files && files.length > 0
 
+  const navigate = useNavigate()
+
   if (!fileLink && !hasFiles) {
     return null
   }
@@ -23,15 +28,25 @@ export const DownloadWrapper = (props: IProps) => {
   const imageURL = import.meta.env.VITE_DONATIONS_IMAGE_URL
 
   return (
-    <DownloadWithDonationAsk
-      body={body}
-      handleClick={handleClick}
-      fileLink={fileLink}
-      iframeSrc={iframeSrc}
-      imageURL={imageURL}
-      isLoggedIn={!!isLoggedIn}
-      files={files}
-      fileDownloadCount={fileDownloadCount}
+    <UserAction
+      loggedIn={
+        <DownloadWithDonationAsk
+          body={body}
+          handleClick={handleClick}
+          fileLink={fileLink}
+          iframeSrc={iframeSrc}
+          imageURL={imageURL}
+          isLoggedIn={!!isLoggedIn}
+          files={files}
+          fileDownloadCount={fileDownloadCount}
+        />
+      }
+      loggedOut={
+        <DownloadButton
+          onClick={() => navigate('/sign-in')}
+          isLoggedIn={false}
+        />
+      }
     />
   )
 }
diff --git a/src/pages/Library/Content/List/LibraryListHeader.tsx b/src/pages/Library/Content/List/LibraryListHeader.tsx
@@ -3,7 +3,7 @@ import { Link, useSearchParams } from '@remix-run/react'
 import debounce from 'debounce'
 import { CategoryVerticalList, SearchField, Select } from 'oa-components'
 import { FieldContainer } from 'src/common/Form/FieldContainer'
-import { useCommonStores } from 'src/common/hooks/useCommonStores'
+import { UserAction } from 'src/common/UserAction'
 import DraftButton from 'src/pages/common/Drafts/DraftButton'
 import { ListHeader } from 'src/pages/common/Layout/ListHeader'
 import { Button, Flex } from 'theme-ui'
@@ -33,7 +33,6 @@ export const HowtoHeader = (props: IProps) => {
   const sort = searchParams.get(HowtosSearchParams.sort) as HowtoSortOption
 
   const headingTitle = import.meta.env.VITE_HOWTOS_HEADING
-  const isUserLoggedIn = useCommonStores().stores.userStore?.user
 
   useEffect(() => {
     if (q && q.length > 0) {
@@ -138,25 +137,39 @@ export const HowtoHeader = (props: IProps) => {
   )
 
   const actionComponents = (
-    <>
-      {isUserLoggedIn && (
-        <DraftButton
-          showDrafts={showDrafts}
-          draftCount={draftCount}
-          handleShowDrafts={handleShowDrafts}
-        />
-      )}
-      <Link to={isUserLoggedIn ? '/library/create' : '/sign-up'}>
-        <Button
-          type="button"
-          sx={{ width: '100%' }}
-          variant="primary"
-          data-cy="create"
-        >
-          {listing.create}
-        </Button>
-      </Link>
-    </>
+    <UserAction
+      loggedIn={
+        <>
+          <DraftButton
+            showDrafts={showDrafts}
+            draftCount={draftCount}
+            handleShowDrafts={handleShowDrafts}
+          />
+          <Link to="/library/create">
+            <Button
+              type="button"
+              sx={{ width: '100%' }}
+              variant="primary"
+              data-cy="create-project"
+            >
+              {listing.create}
+            </Button>
+          </Link>
+        </>
+      }
+      loggedOut={
+        <Link to="/sign-up">
+          <Button
+            type="button"
+            sx={{ width: '100%' }}
+            variant="primary"
+            data-cy="sign-up"
+          >
+            {listing.join}
+          </Button>
+        </Link>
+      }
+    />
   )
 
   return (

diff --git a/src/pages/Library/labels.ts b/src/pages/Library/labels.ts
@@ -167,6 +167,7 @@ export const steps: ILabels = {
 
 export const listing = {
   create: 'Add your project',
+  join: 'Join to add your project',
   empty: 'No projects to show!',
   usefulness: 'How useful it is',
   totalComments: 'Total comments',