From d8a990e2ff8f5e356d3387e86b6ff08cbe57736c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Mon, 15 Jul 2024 09:13:21 +0100 Subject: [PATCH] feat: Update Zustand, resolve deprecated imports (#3423) --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 14 ++++++---- .../@planx/components/Calculate/logic.test.ts | 4 +-- .../DrawBoundary/Public/Public.test.tsx | 4 +-- .../FileUploadAndLabel/Editor.test.tsx | 4 +-- .../FileUploadAndLabel/Public.test.tsx | 4 +-- .../src/@planx/components/Pay/Editor.test.tsx | 4 +-- .../@planx/components/Pay/Public/Pay.test.tsx | 4 +-- .../@planx/components/Result/Public.test.tsx | 4 +-- .../components/Review/Public/Public.test.tsx | 4 +-- .../components/shared/Preview/Card.test.tsx | 4 +-- .../src/components/Feedback/index.test.tsx | 4 +-- .../src/components/Header.test.tsx | 4 +-- .../lib/__tests__/advancedAutomations.test.ts | 4 +-- .../lib/__tests__/automations.test.ts | 4 +-- .../FlowEditor/lib/__tests__/clones.test.ts | 4 +-- .../lib/__tests__/externalPortals.test.ts | 4 +-- .../FlowEditor/lib/__tests__/filters.test.ts | 4 +-- .../FlowEditor/lib/__tests__/flags.test.ts | 4 +-- .../lib/__tests__/granularity.test.ts | 4 +-- .../lib/__tests__/navigation.test.ts | 4 +-- .../FlowEditor/lib/__tests__/ordering.test.ts | 4 +-- .../lib/__tests__/preview/canGoBack.test.ts | 4 +-- .../lib/__tests__/preview/changeAnswer.ts | 4 +-- .../lib/__tests__/preview/hasPaid.test.ts | 4 +-- .../__tests__/preview/overrideAnswer.test.ts | 4 +-- .../__tests__/preview/previousCard.test.ts | 4 +-- .../lib/__tests__/preview/record.test.ts | 4 +-- .../removeNodesDependentOnPassport.test.ts | 4 +-- .../__tests__/preview/resetPreview.test.ts | 4 +-- .../__tests__/preview/upcomingCardIds.test.ts | 4 +-- .../FlowEditor/lib/__tests__/setValue.test.ts | 4 +-- .../FlowEditor/lib/__tests__/unseen.test.ts | 4 +-- .../lib/__tests__/useNotValues.test.ts | 4 +-- .../FlowEditor/lib/__tests__/user.test.ts | 4 +-- .../src/pages/FlowEditor/lib/store/index.ts | 27 +++++-------------- .../src/pages/FlowEditor/lib/store/shared.ts | 1 - .../src/pages/Preview/SaveAndReturn.test.tsx | 4 +-- editor.planx.uk/src/routes/utils.test.tsx | 4 +-- 39 files changed, 87 insertions(+), 97 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 74c80819f3..a4d7d5357b 100644 --- a/editor.planx.uk/package.json +++ b/editor.planx.uk/package.json @@ -89,7 +89,7 @@ "wkt": "^0.1.1", "yup": "^0.32.11", "zod": "^3.22.4", - "zustand": "^4.3.8" + "zustand": "^4.5.4" }, "devDependencies": { "@babel/core": "^7.22.5", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index d4765034e1..4ae9acf1b1 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -271,8 +271,8 @@ dependencies: specifier: ^3.22.4 version: 3.22.4 zustand: - specifier: ^4.3.8 - version: 4.3.8(immer@9.0.21)(react@18.2.0) + specifier: ^4.5.4 + version: 4.5.4(@types/react@18.2.45)(immer@9.0.21)(react@18.2.0) devDependencies: '@babel/core': @@ -21815,18 +21815,22 @@ packages: resolution: {integrity: sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==} dev: false - /zustand@4.3.8(immer@9.0.21)(react@18.2.0): - resolution: {integrity: sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==} + /zustand@4.5.4(@types/react@18.2.45)(immer@9.0.21)(react@18.2.0): + resolution: {integrity: sha512-/BPMyLKJPtFEvVL0E9E9BTUM63MNyhPGlvxk1XjrfWTUlV+BR8jufjsovHzrtR6YNcBEcL7cMHovL1n9xHawEg==} engines: {node: '>=12.7.0'} peerDependencies: - immer: '>=9.0' + '@types/react': '>=16.8' + immer: '>=9.0.6' react: '>=16.8' peerDependenciesMeta: + '@types/react': + optional: true immer: optional: true react: optional: true dependencies: + '@types/react': 18.2.45 immer: 9.0.21 react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) diff --git a/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts b/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts index 6d27065ed8..2dde552b55 100644 --- a/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts +++ b/editor.planx.uk/src/@planx/components/Calculate/logic.test.ts @@ -1,7 +1,7 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "pages/FlowEditor/lib/store"; +import { Store, useStore } from "pages/FlowEditor/lib/store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { upcomingCardIds, resetPreview, record } = getState(); // Helper method diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx index 570a387cbb..87c345b2ec 100644 --- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/Public.test.tsx @@ -2,7 +2,7 @@ import { Breadcrumbs } from "@opensystemslab/planx-core/types"; import { PASSPORT_REQUESTED_FILES_KEY } from "@planx/components/FileUploadAndLabel/model"; import { screen } from "@testing-library/react"; import axios from "axios"; -import { vanillaStore } from "pages/FlowEditor/lib/store"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { act } from "react-dom/test-utils"; import { axe, setup } from "testUtils"; @@ -18,7 +18,7 @@ jest.mock("axios"); const mockedAxios = axios as jest.Mocked; global.URL.createObjectURL = jest.fn(); -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; test("recovers previously submitted files when clicking the back button", async () => { const handleSubmit = jest.fn(); diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx index 1c3b97a4cd..7e75a02126 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx @@ -1,5 +1,5 @@ import { screen } from "@testing-library/react"; -import { vanillaStore } from "pages/FlowEditor/lib/store"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; @@ -7,7 +7,7 @@ import { setup } from "testUtils"; import FileUploadAndLabelComponent from "./Editor"; -const { getState } = vanillaStore; +const { getState } = useStore; describe("FileUploadAndLabel - Editor Modal", () => { // TODO correctly mock an authenticated Platform Admin user so 'add new' button is enabled in final test diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx index a8a8435fd8..7011823847 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.test.tsx @@ -1,7 +1,7 @@ import { act, screen, waitFor, within } from "@testing-library/react"; import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup"; import axios from "axios"; -import { vanillaStore } from "pages/FlowEditor/lib/store"; +import { useStore } from "pages/FlowEditor/lib/store"; import { FullStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { axe, setup } from "testUtils"; @@ -11,7 +11,7 @@ import { mockFileTypes, mockFileTypesUniqueKeys } from "./mocks"; import { PASSPORT_REQUESTED_FILES_KEY } from "./model"; import FileUploadAndLabelComponent from "./Public"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; jest.mock("axios"); diff --git a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx index 3357aee964..6f3c1d4086 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Editor.test.tsx @@ -1,7 +1,7 @@ import { User } from "@opensystemslab/planx-core/types"; import { fireEvent, waitFor } from "@testing-library/react"; import { toggleFeatureFlag } from "lib/featureFlags"; -import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { DndProvider } from "react-dnd"; import { HTML5Backend } from "react-dnd-html5-backend"; @@ -35,7 +35,7 @@ describe("Pay component - Editor Modal", () => { jest.setTimeout(20000); // Set up mock state with platformAdmin user so all Editor features are enabled - const { getState, setState } = vanillaStore; + const { getState, setState } = useStore; const mockUser: User = { id: 123, email: "b.baggins@shire.com", diff --git a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx index cece85b320..9baed31d53 100644 --- a/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx +++ b/editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx @@ -1,7 +1,7 @@ import { PaymentStatus } from "@opensystemslab/planx-core/types"; import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { screen } from "@testing-library/react"; -import { FullStore, Store, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, Store, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { act } from "react-dom/test-utils"; import * as ReactNavi from "react-navi"; @@ -11,7 +11,7 @@ import { ApplicationPath, Breadcrumbs } from "types"; import Confirm, { Props } from "./Confirm"; import Pay from "./Pay"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; diff --git a/editor.planx.uk/src/@planx/components/Result/Public.test.tsx b/editor.planx.uk/src/@planx/components/Result/Public.test.tsx index 5aa861166c..415fcd39ce 100644 --- a/editor.planx.uk/src/@planx/components/Result/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/Result/Public.test.tsx @@ -2,10 +2,10 @@ import { screen } from "@testing-library/react"; import React from "react"; import { axe, setup } from "testUtils"; -import { vanillaStore } from "../../../pages/FlowEditor/lib/store"; +import { useStore } from "../../../pages/FlowEditor/lib/store"; import Result from "./Public"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; beforeEach(() => { getState().resetPreview(); diff --git a/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx b/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx index beb16b0701..afc6b37639 100644 --- a/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx +++ b/editor.planx.uk/src/@planx/components/Review/Public/Public.test.tsx @@ -1,5 +1,5 @@ import { act, screen, waitFor, within } from "@testing-library/react"; -import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { axe, setup } from "testUtils"; @@ -25,7 +25,7 @@ import { import { mockedBreadcrumbs, mockedFlow, mockedPassport } from "./mocks/simple"; import Review from "./Presentational"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.test.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.test.tsx index 83baaeeaa8..381b22462c 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/Card.test.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/Card.test.tsx @@ -1,13 +1,13 @@ import Button from "@mui/material/Button"; import { act, screen, waitFor } from "@testing-library/react"; -import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { axe, setup } from "testUtils"; import { ApplicationPath } from "types"; import Card from "./Card"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; diff --git a/editor.planx.uk/src/components/Feedback/index.test.tsx b/editor.planx.uk/src/components/Feedback/index.test.tsx index 181d6e09d9..2009dea98f 100644 --- a/editor.planx.uk/src/components/Feedback/index.test.tsx +++ b/editor.planx.uk/src/components/Feedback/index.test.tsx @@ -4,13 +4,13 @@ import { getInternalFeedbackMetadata, insertFeedbackMutation, } from "lib/feedback"; -import { vanillaStore } from "pages/FlowEditor/lib/store"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { axe, setup } from "testUtils"; import Feedback from "./index"; -const { setState } = vanillaStore; +const { setState } = useStore; const mockedBreadcrumbs: Breadcrumbs = { LU5xin8PHs: { diff --git a/editor.planx.uk/src/components/Header.test.tsx b/editor.planx.uk/src/components/Header.test.tsx index e3e2cfee26..f7a358169e 100644 --- a/editor.planx.uk/src/components/Header.test.tsx +++ b/editor.planx.uk/src/components/Header.test.tsx @@ -1,6 +1,6 @@ import { Team } from "@opensystemslab/planx-core/types"; import { screen } from "@testing-library/react"; -import { vanillaStore } from "pages/FlowEditor/lib/store"; +import { useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { act } from "react-dom/test-utils"; import * as ReactNavi from "react-navi"; @@ -10,7 +10,7 @@ import flowWithoutSections from "../pages/FlowEditor/lib/__tests__/mocks/flowWit import flowWithThreeSections from "../pages/FlowEditor/lib/__tests__/mocks/flowWithThreeSections.json"; import Header from "./Header"; -const { setState, getState } = vanillaStore; +const { setState, getState } = useStore; const mockTeam1: Team = { id: 123, diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/advancedAutomations.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/advancedAutomations.test.ts index e0df4e2696..ac20d92923 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/advancedAutomations.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/advancedAutomations.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const flow: Store.flow = { _root: { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/automations.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/automations.test.ts index 9b2599a997..54fc776b78 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/automations.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/automations.test.ts @@ -1,9 +1,9 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import shuffle from "lodash/shuffle"; -import { vanillaStore } from "../store"; +import { useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; beforeEach(() => { getState().resetPreview(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/clones.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/clones.test.ts index 71f051ccf6..d87413e083 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/clones.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/clones.test.ts @@ -1,5 +1,5 @@ -import { vanillaStore } from "../store"; -const { getState, setState } = vanillaStore; +import { useStore } from "../store"; +const { getState, setState } = useStore; import forwardsFlow from "./mocks/flowWithClones.json"; import reverseFlow from "./mocks/flowWithReverseClones.json"; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/externalPortals.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/externalPortals.test.ts index 6646cafadd..d43d63afbd 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/externalPortals.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/externalPortals.test.ts @@ -1,8 +1,8 @@ -import { FullStore, vanillaStore } from "../store"; +import { FullStore, useStore } from "../store"; import multipleExternalPortals from "./mocks/multipleExternalPortals.json"; import singleExternalPortal from "./mocks/singleExternalPortal.json"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { upcomingCardIds, record } = getState(); let initialState: FullStore; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/filters.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/filters.test.ts index 30e90ac03d..9ce3674e38 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/filters.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/filters.test.ts @@ -1,9 +1,9 @@ -import { vanillaStore } from "../store"; +import { useStore } from "../store"; import flowWithAutoAnsweredFilterPaths from "./mocks/flowWithAutoAnsweredFilterPaths.json"; import flowWithBranchingFilters from "./mocks/flowWithBranchingFilters.json"; import flowWithRootFilter from "./mocks/flowWithRootFilter.json"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { upcomingCardIds, resetPreview, diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/flags.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/flags.test.ts index 857ba71305..1c6e8f4e83 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/flags.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/flags.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { vanillaStore } from "../store"; +import { useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; describe("in a flow with no collected flags, the user", () => { beforeEach(() => { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/granularity.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/granularity.test.ts index aaf4e7201f..95aaa41af7 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/granularity.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/granularity.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const flow: Store.flow = { _root: { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/navigation.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/navigation.test.ts index 21a56af59f..0e92ae9bc6 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/navigation.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/navigation.test.ts @@ -1,10 +1,10 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { FullStore, vanillaStore } from "../store"; +import { FullStore, useStore } from "../store"; import flowWithoutSections from "./mocks/flowWithClones.json"; import flowWithThreeSections from "./mocks/flowWithThreeSections.json"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { filterFlowByType, initNavigationStore, record } = getState(); let initialState: FullStore; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/ordering.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/ordering.test.ts index 43f1fdb515..d27323334a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/ordering.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/ordering.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const flow: Store.flow = { _root: { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/canGoBack.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/canGoBack.test.ts index 6a12ab655d..22f0af6d53 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/canGoBack.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/canGoBack.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "../../store"; +import { Store, useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { canGoBack, getCurrentCard, resetPreview, record, changeAnswer } = getState(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/changeAnswer.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/changeAnswer.ts index 03cc472c81..fe9bf87b80 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/changeAnswer.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/changeAnswer.ts @@ -1,9 +1,9 @@ import cloneDeep from "lodash/cloneDeep"; -import { Store, vanillaStore } from "../../store"; +import { Store, useStore } from "../../store"; import flowWithAutoAnswersMock from "../mocks/flowWithAutoAnswers.json"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const flowWithAutoAnswers = cloneDeep(flowWithAutoAnswersMock) as Store.flow; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/hasPaid.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/hasPaid.test.ts index a32b6cce32..b829da536a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/hasPaid.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/hasPaid.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { vanillaStore } from "../../store"; +import { useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { record, hasPaid } = getState(); test("hasPaid is updated if a Pay component has been recorded", () => { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/overrideAnswer.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/overrideAnswer.test.ts index c7bcb0da1b..6aa0936cf4 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/overrideAnswer.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/overrideAnswer.test.ts @@ -1,6 +1,6 @@ -import { vanillaStore } from "../../store"; +import { useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { overrideAnswer, getCurrentCard, upcomingCardIds, record } = getState(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/previousCard.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/previousCard.test.ts index 92ccc71a37..cdb1986792 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/previousCard.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/previousCard.test.ts @@ -1,6 +1,6 @@ -import { vanillaStore } from "../../store"; +import { useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { resetPreview, previousCard, getCurrentCard } = getState(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/record.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/record.test.ts index e8d825104f..5c39916a80 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/record.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/record.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { vanillaStore } from "../../store"; +import { useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { record } = getState(); describe("error handling", () => { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/removeNodesDependentOnPassport.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/removeNodesDependentOnPassport.test.ts index dcf8e20d8b..bcc4415941 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/removeNodesDependentOnPassport.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/removeNodesDependentOnPassport.test.ts @@ -1,11 +1,11 @@ import cloneDeep from "lodash/cloneDeep"; -import { Store, vanillaStore } from "../../store"; +import { Store, useStore } from "../../store"; import { removeNodesDependentOnPassport } from "../../store/preview"; import breadcrumbsDependentOnPassportMock from "../mocks/breadcrumbsDependentOnPassport.json"; import flowWithPassportComponentsMock from "../mocks/flowWithPassportComponents.json"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let breadcrumbsDependentOnPassport = cloneDeep( breadcrumbsDependentOnPassportMock, diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/resetPreview.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/resetPreview.test.ts index c212c43630..add46df266 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/resetPreview.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/resetPreview.test.ts @@ -1,6 +1,6 @@ -import { vanillaStore } from "../../store"; +import { useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { resetPreview } = getState(); diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/upcomingCardIds.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/upcomingCardIds.test.ts index 6c3a1f5e05..b166ce5463 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/upcomingCardIds.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/preview/upcomingCardIds.test.ts @@ -1,8 +1,8 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; -import { Store, vanillaStore } from "../../store"; +import { Store, useStore } from "../../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { upcomingCardIds, resetPreview, record, getCurrentCard } = getState(); const flow: Store.flow = { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/setValue.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/setValue.test.ts index 72983ec6fd..7aae5da40a 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/setValue.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/setValue.test.ts @@ -1,9 +1,9 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { cloneDeep, merge } from "lodash"; -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { resetPreview, record, computePassport, getCurrentCard } = getState(); const baseFlow: Store.flow = { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/unseen.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/unseen.test.ts index a4575e3558..4ea8774a75 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/unseen.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/unseen.test.ts @@ -1,6 +1,6 @@ -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; // https://github.com/theopensystemslab/planx-new/pull/430#issue-625111571 const flow: Store.flow = { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/useNotValues.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/useNotValues.test.ts index 54a789d760..cb74d0cebc 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/useNotValues.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/useNotValues.test.ts @@ -1,4 +1,4 @@ -import { Store, vanillaStore } from "../store"; +import { Store, useStore } from "../store"; // flow preview: https://i.imgur.com/nCov5CE.png @@ -106,7 +106,7 @@ const flow: Store.flow = { }, }; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; describe("if I initially pick", () => { beforeEach(() => { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/user.test.ts b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/user.test.ts index 5c0f9e24c7..2f14e589aa 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/user.test.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/__tests__/user.test.ts @@ -1,8 +1,8 @@ import { User } from "@opensystemslab/planx-core/types"; -import { FullStore, vanillaStore } from "../store"; +import { FullStore, useStore } from "../store"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; const { canUserEditTeam } = getState(); const redUser: User = { diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts index bc3b32961c..94572fdd6b 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/index.ts @@ -1,7 +1,6 @@ import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; import { isPreviewOnlyDomain } from "routes/utils"; -import { create, UseBoundStore } from "zustand"; -import { createStore, StoreApi } from "zustand/vanilla"; +import { create, StoreApi,UseBoundStore } from "zustand"; import type { EditorStore, EditorUIStore } from "./editor"; import type { NavigationStore } from "./navigation"; @@ -54,32 +53,25 @@ export type PublicStore = SharedStore & export type FullStore = PublicStore & EditorStore & EditorUIStore & UserStore; -interface PlanXStores { - // Non-React implementation (e.g. for use in tests) - vanillaStore: StoreApi; - // React hook - useStore: UseBoundStore>; -} - /** * If accessing the public preview, don't load editor store files * Cast to FullStore for autocomplete and linting */ -const createPublicStore = (): StoreApi => - createStore((...args) => ({ +const createPublicStore = () => + create()((...args) => ({ ...sharedStore(...args), ...previewStore(...args), ...navigationStore(...args), ...settingsStore(...args), ...teamStore(...args), - })) as StoreApi; + })) as UseBoundStore>; /** * If accessing the editor then load ALL store files */ -const createFullStore = (): StoreApi => { +const createFullStore = () => { const { editorStore, editorUIStore } = require("./editor"); - return createStore((...args) => ({ + return create()((...args) => ({ ...sharedStore(...args), ...previewStore(...args), ...navigationStore(...args), @@ -94,12 +86,7 @@ const createFullStore = (): StoreApi => { const isPublic = isPreviewOnlyDomain || window?.location?.href?.includes("/published"); -export const { vanillaStore, useStore }: PlanXStores = (() => { - const vanillaStore: StoreApi = (() => - isPublic ? createPublicStore() : createFullStore())(); - - return { vanillaStore, useStore: create(vanillaStore) }; -})(); +export const useStore = isPublic ? createPublicStore() : createFullStore(); // having window.api in console is useful for debugging (window as any)["api"] = useStore; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts index ff71086a35..80ea07475e 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts @@ -2,7 +2,6 @@ import { CoreDomainClient } from "@opensystemslab/planx-core"; import { Auth } from "@opensystemslab/planx-core/dist/requests/graphql"; import { FlowStatus } from "@opensystemslab/planx-core/types"; import { ROOT_NODE_KEY } from "@planx/graph"; -import { capitalize } from "lodash"; import { removeSessionIdSearchParam } from "utils"; import type { StateCreator } from "zustand"; diff --git a/editor.planx.uk/src/pages/Preview/SaveAndReturn.test.tsx b/editor.planx.uk/src/pages/Preview/SaveAndReturn.test.tsx index 87a154a4c6..d69ea4433e 100644 --- a/editor.planx.uk/src/pages/Preview/SaveAndReturn.test.tsx +++ b/editor.planx.uk/src/pages/Preview/SaveAndReturn.test.tsx @@ -1,12 +1,12 @@ import Button from "@mui/material/Button"; import { act, screen, waitFor } from "@testing-library/react"; -import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, useStore } from "pages/FlowEditor/lib/store"; import React from "react"; import { axe, setup } from "testUtils"; import SaveAndReturn, { ConfirmEmail } from "./SaveAndReturn"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; diff --git a/editor.planx.uk/src/routes/utils.test.tsx b/editor.planx.uk/src/routes/utils.test.tsx index 6e47cd424f..0d398a6318 100644 --- a/editor.planx.uk/src/routes/utils.test.tsx +++ b/editor.planx.uk/src/routes/utils.test.tsx @@ -1,11 +1,11 @@ import { waitFor } from "@testing-library/react"; import { NaviRequest } from "navi"; -import { FullStore, vanillaStore } from "pages/FlowEditor/lib/store"; +import { FullStore, useStore } from "pages/FlowEditor/lib/store"; import { ApplicationPath } from "types"; import { isSaveReturnFlow, setPath } from "./utils"; -const { getState, setState } = vanillaStore; +const { getState, setState } = useStore; let initialState: FullStore; const mockFlow = {