chore: use react-router new routing approach RouterProvider (#3761)

* chore: use react-router new routing approach RouterProvider * fix: confirmation on leaving the page
ONEARMY · Jul 12, 2024 · cc1fdd0 · cc1fdd0
1 parent d5baf3c
commit cc1fdd0
Show file tree

Hide file tree

Showing 66 changed files with 302 additions and 340 deletions.
diff --git a/packages/components/src/BlockedRoute/BlockedRoute.tsx b/packages/components/src/BlockedRoute/BlockedRoute.tsx
@@ -20,7 +20,7 @@ export const BlockedRoute = (props: BlockedRouteProps) => {
       <Text sx={{ width: '100%', textAlign: 'center' }}>{props.children}</Text>
       <Box sx={{ textAlign: 'center', mt: 2 }}>
         <InternalLink to={redirectUrl}>
-          <Button variant={'subtle'} small>
+          <Button type="button" variant="subtle" small>
             {redirectLabel}
           </Button>
         </InternalLink>

diff --git a/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
@@ -17,10 +17,14 @@ interface BreadcrumbItemProps {
 const BreadcrumbButton = ({ text, link }: BreadcrumbButtonProps) => {
   return link ? (
     <Link to={link}>
-      <Button variant="breadcrumb">{text}</Button>
+      <Button type="button" variant="breadcrumb">
+        {text}
+      </Button>
     </Link>
   ) : (
-    <Button variant="breadcrumb">{text}</Button>
+    <Button type="button" variant="breadcrumb">
+      {text}
+    </Button>
   )
 }
 

diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
@@ -20,7 +20,8 @@ export const ButtonShowReplies = (props: Props) => {
 
   return (
     <Button
-      data-cy={`show-replies`}
+      type="button"
+      data-cy="show-replies"
       icon={icon}
       onClick={setIsShowReplies}
       sx={{ alignSelf: 'flex-start', border: 'none' }}

diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
@@ -160,6 +160,7 @@ export const CommentItem = (props: IProps) => {
                     }}
                   >
                     <Button
+                      type="button"
                       data-cy={`${item}: edit button`}
                       variant="outline"
                       small={true}
@@ -169,6 +170,7 @@ export const CommentItem = (props: IProps) => {
                       edit
                     </Button>
                     <Button
+                      type="button"
                       data-cy={`${item}: delete button`}
                       variant={'outline'}
                       small={true}

diff --git a/packages/components/src/CommentList/CommentList.tsx b/packages/components/src/CommentList/CommentList.tsx
@@ -235,9 +235,8 @@ export const CommentList = (props: IPropsCommentList) => {
       {comments && comments.length > shownComments && (
         <Flex>
           <Button
-            sx={{
-              margin: '0 auto',
-            }}
+            type="button"
+            sx={{ margin: '0 auto' }}
             variant="outline"
             onClick={handleMoreComments}
           >

diff --git a/packages/components/src/ConfirmModal/ConfirmModal.tsx b/packages/components/src/ConfirmModal/ConfirmModal.tsx
@@ -20,12 +20,18 @@ export const ConfirmModal = (props: Props) => {
         <Text>{message}</Text>
         <Flex p={2} mx={-1} sx={{ justifyContent: 'flex-end' }}>
           <Flex px={1}>
-            <Button variant={'outline'} onClick={() => props?.handleCancel()}>
+            <Button
+              type="button"
+              variant="outline"
+              data-cy="Confirm.modal: Cancel"
+              onClick={() => props?.handleCancel()}
+            >
               Cancel
             </Button>
           </Flex>
           <Flex px={1}>
             <Button
+              type="button"
               aria-label={`Confirm ${confirmButtonText} action`}
               data-cy="Confirm.modal: Confirm"
               variant={'outline'}

diff --git a/packages/components/src/ContentStatistics/ContentStatistics.tsx b/packages/components/src/ContentStatistics/ContentStatistics.tsx
@@ -52,7 +52,8 @@ export const ContentStatistics = (props: IProps) => {
           {showStats ? '' : 'More Information'}
         </Text>
         <Button
-          variant={'subtle'}
+          type="button"
+          variant="subtle"
           showIconOnly={true}
           icon={showStats ? 'chevron-up' : 'chevron-down'}
           small={true}

diff --git a/packages/components/src/EditComment/EditComment.tsx b/packages/components/src/EditComment/EditComment.tsx
@@ -79,6 +79,7 @@ export const EditComment = (props: IProps) => {
             />
             <Flex mt={4} ml="auto">
               <Button
+                type="button"
                 small
                 mr={4}
                 variant="secondary"
@@ -89,7 +90,7 @@ export const EditComment = (props: IProps) => {
               <Button
                 data-cy="edit-comment-submit"
                 data-testid="edit-comment-submit"
-                type={'submit'}
+                type="submit"
                 aria-label="Save changes"
                 small
                 disabled={disabled}

diff --git a/packages/components/src/FollowButton/FollowButton.tsx b/packages/components/src/FollowButton/FollowButton.tsx
@@ -19,6 +19,7 @@ export const FollowButton = (props: IProps) => {
   return (
     <>
       <Button
+        type="button"
         data-testid={isLoggedIn ? 'follow-button' : 'follow-redirect'}
         data-cy={isLoggedIn ? 'follow-button' : 'follow-redirect'}
         data-tip={isLoggedIn ? '' : 'Login to follow'}

diff --git a/packages/components/src/ImageCrop/ImageCrop.tsx b/packages/components/src/ImageCrop/ImageCrop.tsx
@@ -157,7 +157,11 @@ export const ImageCrop = (props: Props) => {
       </Flex>
 
       <Box sx={{ padding }}>
-        <Button onClick={onDownloadCropClick} disabled={isLoading}>
+        <Button
+          type="button"
+          onClick={onDownloadCropClick}
+          disabled={isLoading}
+        >
           {callbackLabel}
         </Button>
       </Box>

diff --git a/packages/components/src/MapWithPin/MapWithPin.tsx b/packages/components/src/MapWithPin/MapWithPin.tsx
@@ -89,6 +89,7 @@ export const MapWithPin = (props: Props) => {
             />
             {hasUserLocation && (
               <Button
+                type="button"
                 mx={2}
                 onClick={(evt) => {
                   evt.preventDefault()

diff --git a/packages/components/src/NotificationList/NotificationList.tsx b/packages/components/src/NotificationList/NotificationList.tsx
@@ -43,7 +43,8 @@ export const NotificationList = (props: Props) => {
             <NotificationItem key={idx} {...(notification as any)} />
           ))}
           <Button
-            style={{
+            type="button"
+            sx={{
               width: '100%',
               textAlign: 'center',
               display: 'flex',

diff --git a/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx b/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
@@ -90,7 +90,7 @@ export const ResearchEditorOverview = (props: ResearchEditorOverviewProps) => {
         </Box>
       ) : null}
       {showCreateUpdateButton ? (
-        <Button small sx={{ mr: 2 }} data-cy="create-update">
+        <Button small sx={{ mr: 2 }} data-cy="create-update" type="button">
           <InternalLink
             to={`/research/${researchSlug}/new-update`}
             sx={{ color: 'black' }}
@@ -101,7 +101,7 @@ export const ResearchEditorOverview = (props: ResearchEditorOverviewProps) => {
       ) : null}
 
       {showBackToResearchButton ? (
-        <Button small variant={'outline'}>
+        <Button small variant="outline" type="button">
           <InternalLink
             to={`/research/${researchSlug}/edit`}
             sx={{ color: 'black' }}

diff --git a/.../components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap b/.../components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ResearchEditorOverview > handles empty updates 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -27,6 +28,7 @@ exports[`ResearchEditorOverview > handles empty updates 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -56,6 +58,7 @@ exports[`ResearchEditorOverview > handles falsey updates 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -70,6 +73,7 @@ exports[`ResearchEditorOverview > handles falsey updates 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -144,6 +148,7 @@ exports[`ResearchEditorOverview > renders correctly 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -158,6 +163,7 @@ exports[`ResearchEditorOverview > renders correctly 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"

diff --git a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
@@ -35,6 +35,7 @@ export const UsefulStatsButton = (props: IProps) => {
   return (
     <>
       <Button
+        type="button"
         data-tip={props.isLoggedIn ? '' : 'Login to add your vote'}
         data-cy={props.isLoggedIn ? 'vote-useful' : 'vote-useful-redirect'}
         onClick={() =>

diff --git a/packages/cypress/src/integration/howto/write.spec.ts b/packages/cypress/src/integration/howto/write.spec.ts
@@ -335,10 +335,6 @@ describe('[How To]', () => {
     })
 
     it('[Warning on leaving page]', () => {
-      const stub = cy.stub()
-      stub.returns(false)
-      cy.on('window:confirm', stub)
-
       cy.login(creatorEmail, creatorPassword)
       cy.get('[data-cy=loader]').should('not.exist')
       cy.step('Access the create-how-to')
@@ -348,22 +344,13 @@ describe('[How To]', () => {
         .clear()
         .type(expected.title)
         .blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/how-to"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(1)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/how-to"]').click()
+      cy.get('[data-cy="Confirm.modal: Cancel"]').click()
       cy.url().should('match', /\/how-to\/create$/)
 
       cy.step('Clear title input')
       cy.get('[data-cy=intro-title]').clear().blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/how-to"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(0)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/how-to"]').click()
       cy.url().should('match', /\/how-to?/)
     })
   })

diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
@@ -84,7 +84,7 @@ describe('[Research]', () => {
         There is an issue with cypress that can not type some of the start string failing the test
         https://github.com/cypress-io/cypress/issues/3817 
       */
-      cy.wait(500)
+      cy.wait(1000)
       cy.get('[data-cy=intro-description]').type(expected.description).blur()
 
       cy.step('New collaborators can be assigned to research')
@@ -228,10 +228,6 @@ describe('[Research]', () => {
     })
 
     it('[Warning on leaving page]', () => {
-      const stub = cy.stub()
-      stub.returns(false)
-      cy.on('window:confirm', stub)
-
       cy.login(researcherEmail, researcherPassword)
       cy.step('Access the create research article')
       cy.get('[data-cy=loader]').should('not.exist')
@@ -241,22 +237,13 @@ describe('[Research]', () => {
         .clear()
         .type('Create research article test')
         .blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/research"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(1)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/research"]').click()
+      cy.get('[data-cy="Confirm.modal: Cancel"]').click()
+
       cy.url().should('match', /\/research\/create$/)
 
       cy.step('Clear title input')
       cy.get('[data-cy=intro-title').clear().blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/research"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(0)
-          stub.resetHistory()
-        })
       cy.url().should('match', /\/research?/)
     })
   })

diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
@@ -31,7 +31,7 @@ describe('[Settings]', () => {
   })
 
   describe('[Focus Member]', () => {
-    it('[Cancel edit profile and get confirmation]', (done) => {
+    it('[Cancel edit profile and get confirmation]', () => {
       cy.signUpNewUser()
 
       cy.step('Go to User Settings')
@@ -41,12 +41,7 @@ describe('[Settings]', () => {
 
       cy.step('Confirm shown when attempting to go to another page')
       cy.get('[data-cy=page-link]').contains('How-to').click()
-      cy.on('window:confirm', (text) => {
-        expect(text).to.eq(
-          'You are leaving this page without saving. Do you want to continue ?',
-        )
-        done()
-      })
+      cy.get('[data-cy="Confirm.modal: Modal"]').should('be.visible')
     })
 
     it('[Edit a new profile]', () => {
@@ -349,8 +344,8 @@ describe('[Settings]', () => {
       openTimes.forEach((openTime) => {
         cy.setSettingAddOpeningTime(openTime)
       })
-      cy.setSettingDeleteOpeningTime(0, false)
-      cy.setSettingDeleteOpeningTime(1, true)
+      cy.setSettingDeleteOpeningTime(1, false)
+      cy.setSettingDeleteOpeningTime(2, true)
 
       cy.get(`[data-cy=plastic-${plasticTypes[0]}]`).click()
       cy.get(`[data-cy=plastic-${plasticTypes[1]}]`).click()
@@ -374,7 +369,7 @@ describe('[Settings]', () => {
         `${openTimes[0].day}: ${openTimes[0].from} - ${openTimes[0].to}`,
       )
       cy.contains(
-        `${openTimes[2].day}: ${openTimes[2].from} - ${openTimes[2].to}`,
+        `${openTimes[1].day}: ${openTimes[1].from} - ${openTimes[1].to}`,
       )
       cy.contains(
         `${openTimes[3].day}: ${openTimes[3].from} - ${openTimes[3].to}`,

diff --git a/packages/cypress/src/support/commandsUi.ts b/packages/cypress/src/support/commandsUi.ts
@@ -244,11 +244,8 @@ Cypress.Commands.add(
   'selectTag',
   (tagName: string, selector = '[data-cy=tag-select]') => {
     cy.log('select tag', tagName)
-    cy.get(`${selector} input`)
-      .click({ force: true })
-      .type(tagName, { force: true })
-      .get(`${selector} .data-cy__menu-list`)
-      .contains(tagName)
-      .click()
+    cy.get(`${selector} input`).click({ force: true })
+    cy.get(`${selector} input`).type(tagName, { force: true })
+    cy.get(`${selector} .data-cy__menu-list`).contains(tagName).click()
   },
 )
diff --git a/src/common/Error/handlers/ChunkLoadError.tsx b/src/common/Error/handlers/ChunkLoadError.tsx
@@ -35,7 +35,9 @@ export const ChunkLoadErrorHandler = () => {
           <Text mb={4} sx={{ fontSize: 3 }}>
             The website got some updates
           </Text>
-          <Button onClick={() => attemptReload()}>Load the new site.</Button>
+          <Button type="button" onClick={() => attemptReload()}>
+            Load the new site.
+          </Button>
           <Text mt={4} sx={{ fontSize: 0.75 }}>
             If it doesn't work you might need to try another browser.
             <br></br>Or send us a{' '}

diff --git a/src/common/Form/FileInput/FileInput.tsx b/src/common/Form/FileInput/FileInput.tsx
@@ -69,6 +69,7 @@ export const FileInput = (props: IProps) => {
       {showFileList ? (
         <>
           <Button
+            type="button"
             onClick={() => toggleModal()}
             icon="upload"
             variant="outline"

diff --git a/src/common/Form/ImageInput/DeleteImage.tsx b/src/common/Form/ImageInput/DeleteImage.tsx
@@ -47,6 +47,7 @@ export const DeleteImage = ({ onClick }: IProps) => {
         small
         variant="secondary"
         icon="delete"
+        type="button"
         onClick={(event) => onClick(event)}
       >
         Delete