feat: Update Zustand, resolve deprecated imports (#3423)

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",

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

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<typeof axios>;
 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();

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.test.tsx

@@ -1,13 +1,13 @@
 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";
 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

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");

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: "[email protected]",

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;
 

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();

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;
 

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;
 

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: {

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,

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: {

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();

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";
 

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;

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,

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(() => {

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: {

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;

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: {

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();
 

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;
 

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", () => {

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();
 

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();
 

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", () => {

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,