Upgrade to next 13 by LBHCallumM · Pull Request #1027 · LBHackney-IT/repairs-hub-frontend

LBHCallumM · 2025-03-27T16:43:33Z

https://nextjs.org/docs/pages/building-your-application/upgrading/version-13

https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

LBHCallumM · 2025-04-11T08:49:21Z

.circleci/config.yml

+      - run:
+          name: Install Xvfb
+          command: |
+            sudo apt-get update
+            sudo apt-get install -y xvfb libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
+      - run:
+          name: Start Xvfb
+          command: |
+            Xvfb :99 -screen 0 1280x1024x24 &
+            echo "export DISPLAY=:99" >> $BASH_ENV
+          background: true


Apparently this is needed for cypress to run well in circleci

LBHCallumM · 2025-04-11T08:49:55Z

.eslintrc

  "parserOptions": {
-    "ecmaVersion": 2020,
+    "ecmaVersion": 2022,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
-  "plugins": ["react", "@typescript-eslint"],
+  "plugins": [
+    "react", 
+    "react-hooks", 
+    "@typescript-eslint"
+  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
-    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",


Updates to eslint

LBHCallumM · 2025-04-11T08:50:27Z

.gitignore

 .sentryclirc

 # Version control
-yarn.lock


Added yarn.lock back to vc, we should really be deploying with the same versions

LBHCallumM · 2025-04-11T08:50:57Z

jest.config.js

-let reporterRules = require('./reporter-rules.json')
-
 module.exports = {
+  testEnvironment: 'jsdom',


Update test config

LBHCallumM · 2025-04-11T08:51:13Z

package.json

    "loglevel": "^1.8.0",
    "mockdate": "^3.0.2",
-    "next": "^12",
+    "next": "13",


Update packages ect

LBHCallumM · 2025-04-11T08:53:21Z

src/components/Layout/MultiButton/index.test.js

+  it('closes the details panel after the enter key is pressed', async () => {
+    const user = userEvent.setup()


Update test syntax

LBHCallumM · 2025-04-11T08:53:39Z

src/components/Property/Contacts/Contacts.js

+  const tenants = contacts?.filter?.((x) => x.tenureType === 'Tenant') ?? []
+  const householdMembers =
+    contacts?.filter?.((x) => x.tenureType === 'HouseholdMember') ?? []


Handle null

LBHCallumM · 2025-04-11T08:54:10Z

src/components/Property/RaiseWorkOrder/RaiseWorkOrderForm.test.js


 const axios = require('axios')

+jest.mock('next/router', () => ({ useRouter: jest.fn() }))


Mock next router

LBHCallumM · 2025-04-11T08:54:36Z

src/components/Property/RaiseWorkOrder/RateScheduleItemView.js

      if (
-        formState.rateScheduleItems.length <
-        arrayOfRateScheduleItemComponentIndexes.length
+        formState?.rateScheduleItems &&
+        formState?.rateScheduleItems.length <
+          arrayOfRateScheduleItemComponentIndexes.length
      ) {
        arrayOfRateScheduleItemComponentIndexes.pop()
      }


Fix bug when rateScheduleItems is null

LBHCallumM · 2025-04-11T08:54:53Z

src/components/Property/RaiseWorkOrder/RateScheduleItemView.js

      }
    }
-  }, arrayOfRateScheduleItemComponentIndexes)
+  }, [arrayOfRateScheduleItemComponentIndexes])


how did this ever work without a dependency array

LBHCallumM · 2025-04-11T08:55:54Z

src/components/WorkOrder/MobileWorkingWorkOrderDetails.test.js

-    await act(async () => {
-      await waitForElementToBeRemoved([
-        screen.getByTestId('spinner-locationAlerts'),
-        screen.getByTestId('spinner-personAlerts'),
-      ])
-    })


Remove old act syntax

LBHCallumM · 2025-04-11T08:56:37Z

src/components/WorkOrder/ScheduleInternalAppointmentLink.js

+    ? 'Reschedule appointment (non DRS)'
+    : 'Schedule appointment (non DRS)'

  return (
    <>
-      <Link href={href}>
-        <a className="lbh-link">{linkText} (non DRS)</a>
+      <Link
+        href={href}
+        className="lbh-link"
+      >
+        {linkText}
      </Link>


Move (non DRS) to linkText

LBHCallumM · 2025-04-11T08:57:15Z

src/components/WorkOrder/TasksAndSors/EditTaskForm.js

    setLoading(false)
  }

-  useEffect(async () => {


Fix useEffect by moving async logic into a function

LBHCallumM · 2025-04-11T08:57:40Z

src/components/WorkOrder/Update/Summary.js

+  const onSubmit = async (e) => {
+    e.preventDefault()
+


Prevent form from reloading page within cypress tests

LBHCallumM · 2025-04-11T08:57:51Z

src/components/WorkOrder/Update/index.js

+  const onGetToSummary = (data) => {
+    updateExistingTasksQuantities(data, tasks)

    setAddedTasks(
-      e.rateScheduleItems
-        ? e.rateScheduleItems
-            .filter((e) => e != null)
-            .map((e, index) => {
-              return { id: index, ...e, code: e.code.split(' - ')[0] }
+      data.rateScheduleItems
+        ? data.rateScheduleItems
+            .filter((data) => data != null)
+            .map((data, index) => {
+              return { id: index, ...data, code: data.code.split(' - ')[0] }
            })
        : []
    )


data, not e

LBHCallumM · 2025-04-11T08:59:25Z

src/utils/hact/workOrderSchedule/raiseWorkOrderForm.js

@@ -1,4 +1,4 @@
-import { v4 as uuidv4 } from 'uuid'
+const { v4: uuidv4 } = require('uuid')


Eslint doesnt like this package due to MJS (no recent updates). The options were to replace the package, or change the import syntax

LBHCallumM added 2 commits March 27, 2025 16:40

upgrade packages

ea1b7d1

Run new-link codemod (fix legacy link behaviour)

829cf49

LBHCallumM requested a review from a team as a code owner March 27, 2025 16:43

LBHCallumM added 26 commits April 10, 2025 08:02

Merge branch 'develop' into callum/upgrade-next-13

e899977

LF

e874fce

fix

63ab0bf

update linting

cf24eb4

fix missing

af8c0b4

moar

e98bdc1

remove deprecated reporter

78e80a1

Update unit tests

08c9613

LF

801ff43

test updates

a0cbf19

fix another error

1b4f157

more test fixes

822ed31

fix cypress tests

80d134b

more fixes

8013deb

fix test issue

dfa468d

resolve formatting issue

ec3abd0

Update other snapshot

89c923b

fix snapshot

248f7ff

no sandbox

253c8ef

Try updating dependencies

8bd7a10

fix cypress test

63a9b58

manually fix snapshot

66e169a

plzzz

fa4dbe0

force exit

9f797d4

cleanup

8cf7e6b

update formatting

34ec6c5

LBHCallumM changed the title ~~Callum/upgrade next 13~~ Upgrade to next 13 Apr 11, 2025

LBHCallumM commented Apr 11, 2025

View reviewed changes

package.json

"loglevel": "^1.8.0",

"mockdate": "^3.0.2",

"next": "^12",

"next": "13",

Copy link
Copy Markdown

Member Author

LBHCallumM Apr 11, 2025

Choose a reason for hiding this comment

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

Update packages ect

LBHCallumM commented Apr 11, 2025

View reviewed changes

FaisalHackney approved these changes Apr 11, 2025

View reviewed changes

Duslerke approved these changes Apr 11, 2025

View reviewed changes

		it('closes the details panel after the enter key is pressed', async () => {
		const user = userEvent.setup()


		const axios = require('axios')

		jest.mock('next/router', () => ({ useRouter: jest.fn() }))

		@@ -1,4 +1,4 @@
		import { v4 as uuidv4 } from 'uuid'
		const { v4: uuidv4 } = require('uuid')

Conversation

LBHCallumM commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

LBHCallumM commented Mar 27, 2025 •

edited

Loading