fix: Move client to store to avoid circular dependencies

editor.planx.uk/src/client/index.ts

@@ -1,5 +1,4 @@
 import { CoreDomainClient } from "@opensystemslab/planx-core";
-import { useStore } from "pages/FlowEditor/lib/store";
 
 /**
  * core doesn't expose a graphql interface like the graphql/hasura clients do
@@ -8,8 +7,3 @@ import { useStore } from "pages/FlowEditor/lib/store";
 export const _public = new CoreDomainClient({
   targetURL: process.env.REACT_APP_HASURA_URL!,
 });
-
-export const _client = new CoreDomainClient({
-  targetURL: process.env.REACT_APP_HASURA_URL!,
-  auth: { jwt: useStore.getState().jwt || "" },
-});

editor.planx.uk/src/pages/FlowEditor/lib/store/shared.ts

@@ -1,3 +1,4 @@
+import { CoreDomainClient } from "@opensystemslab/planx-core";
 import { ROOT_NODE_KEY } from "@planx/graph";
 import { capitalize } from "lodash";
 import { removeSessionIdSearchParam } from "utils";
@@ -31,6 +32,7 @@ export interface SharedStore extends Store.Store {
   setPreviewEnvironment: (previewEnvironment: PreviewEnvironment) => void;
   setFlowSlug: (flowSlug: string) => void;
   setFlowNameFromSlug: (flowSlug: string) => void;
+  _client: CoreDomainClient,
 }
 
 export const sharedStore: StateCreator<
@@ -107,4 +109,8 @@ export const sharedStore: StateCreator<
     const flowName = capitalize(flowSlug.replaceAll?.("-", " "));
     set({ flowName });
   },
+
+  _client: new CoreDomainClient({
+    targetURL: process.env.REACT_APP_HASURA_URL!,
+  }),
 });

editor.planx.uk/src/pages/FlowEditor/lib/store/team.ts

@@ -8,6 +8,8 @@ import gql from "graphql-tag";
 import { client } from "lib/graphql";
 import type { StateCreator } from "zustand";
 
+import { SharedStore } from "./shared";
+
 export interface TeamStore {
   teamId: number;
   teamTheme?: TeamTheme;
@@ -21,9 +23,10 @@ export interface TeamStore {
   getTeam: () => Team;
   initTeamStore: (slug: string) => Promise<void>;
   clearTeamStore: () => void;
+  fetchCurrentTeam: () => Promise<Team>;
 }
 
-export const teamStore: StateCreator<TeamStore, [], [], TeamStore> = (
+export const teamStore: StateCreator<TeamStore & SharedStore, [], [], TeamStore> = (
   set,
   get,
 ) => ({
@@ -100,4 +103,15 @@ export const teamStore: StateCreator<TeamStore, [], [], TeamStore> = (
       notifyPersonalisation: undefined,
       boundaryBBox: undefined,
     }),
+
+  /**
+   * Fetch current team
+   * Does not necessarily match team held in store as this is context-based (e.g. we don't use the team theme in the Editor)
+   */
+  fetchCurrentTeam: async () => {
+    const { teamSlug, _client } = get()
+    const team = await _client.team.getBySlug(teamSlug);
+    console.log({team})
+    return team;
+  },
 });

editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts

@@ -1,8 +1,10 @@
+import { CoreDomainClient } from "@opensystemslab/planx-core";
 import { Team, User, UserTeams } from "@opensystemslab/planx-core/types";
 import axios from "axios";
-import { _client } from "client";
 import type { StateCreator } from "zustand";
 
+import { EditorStore } from "./editor";
+
 export interface UserStore {
   user?: User;
   jwt?: string;
@@ -13,11 +15,18 @@ export interface UserStore {
   initUserStore: () => Promise<void>;
 }
 
-export const userStore: StateCreator<UserStore, [], [], UserStore> = (
+export const userStore: StateCreator<UserStore & EditorStore, [], [], UserStore> = (
   set,
   get,
 ) => ({
-  setUser: ({ jwt, ...user }) => set({ jwt, user }),
+  setUser: ({ jwt, ...user }) => {
+    const authenticatedClient = new CoreDomainClient({
+      targetURL: process.env.REACT_APP_HASURA_URL!,
+      auth: { jwt },
+    });
+    set({client: authenticatedClient });
+    set({ jwt, user })
+  },
 
   getUser: () => get().user,