fix(project) use the project hook to avoid unneeded fetchProject queries

src/context/project.tsx

@@ -4,7 +4,6 @@ import { queryKeys } from "util/queryKeys";
 import { fetchProject } from "api/projects";
 import { LxdProject } from "types/project";
 import { useLocation } from "react-router-dom";
-import { getProjectFromUrl } from "util/projects";
 
 interface ContextProps {
   project?: LxdProject;
@@ -24,7 +23,8 @@ interface ProviderProps {
 
 export const ProjectProvider: FC<ProviderProps> = ({ children }) => {
   const location = useLocation();
-  const project = getProjectFromUrl(location.pathname);
+  const url = location.pathname;
+  const project = url.startsWith("/ui/project/") ? url.split("/")[3] : "";
 
   const { data, isLoading } = useQuery({
     queryKey: [queryKeys.projects, project],

src/pages/instances/InstanceSnapshots.tsx

@@ -16,10 +16,8 @@ import ItemName from "components/ItemName";
 import SelectableMainTable from "components/SelectableMainTable";
 import SnapshotBulkDelete from "pages/instances/actions/snapshots/SnapshotBulkDelete";
 import ConfigureSnapshotsBtn from "pages/instances/actions/snapshots/ConfigureSnapshotsBtn";
-import { useQuery } from "@tanstack/react-query";
 import Loader from "components/Loader";
-import { fetchProject } from "api/projects";
-import { queryKeys } from "util/queryKeys";
+import { useProject } from "context/project";
 
 const collapsedViewMaxWidth = 1250;
 export const figureCollapsedScreen = (): boolean =>
@@ -46,18 +44,7 @@ const InstanceSnapshots: FC<Props> = ({ instance }) => {
     setInTabNotification(failure(title, e));
   };
 
-  const {
-    data: project,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: [queryKeys.projects, instance.project],
-    queryFn: () => fetchProject(instance.project),
-  });
-
-  if (error) {
-    onFailure("Loading project failed", error);
-  }
+  const { project, isLoading } = useProject();
 
   const snapshotsDisabled = project?.config["restricted.snapshots"] === "block";
 

src/pages/profiles/ProfileDetail.tsx

@@ -11,8 +11,8 @@ import EditProfileForm from "pages/profiles/EditProfileForm";
 import ProfileDetailOverview from "pages/profiles/ProfileDetailOverview";
 import ProfileDetailHeader from "./ProfileDetailHeader";
 import { slugify } from "util/slugify";
-import { fetchProject } from "api/projects";
 import { isProjectWithProfiles } from "util/projects";
+import { useProject } from "context/project";
 
 const TABS: string[] = ["Overview", "Configuration"];
 
@@ -36,6 +36,8 @@ const ProfileDetail: FC = () => {
     return <>Missing project</>;
   }
 
+  const { project, isLoading: isProjectLoading } = useProject();
+
   const {
     data: profile,
     error,
@@ -45,22 +47,10 @@ const ProfileDetail: FC = () => {
     queryFn: () => fetchProfile(name, projectName),
   });
 
-  const {
-    data: project,
-    error: projectError,
-    isLoading: isProjectLoading,
-  } = useQuery({
-    queryKey: [queryKeys.projects, projectName],
-    queryFn: () => fetchProject(projectName),
-  });
-
   if (error) {
     notify.failure("Loading profile failed", error);
   }
 
-  if (projectError) {
-    notify.failure("Loading project failed", projectError);
-  }
   const isLoading = isProfileLoading || isProjectLoading;
 
   const featuresProfiles = isProjectWithProfiles(project);

src/pages/profiles/ProfileDetailPanel.tsx

@@ -5,13 +5,13 @@ import usePanelParams from "util/usePanelParams";
 import { useNotify } from "context/notify";
 import { fetchProfile } from "api/profiles";
 import ProfileLink from "./ProfileLink";
-import { fetchProject } from "api/projects";
 import { isProjectWithProfiles } from "util/projects";
 import { getProfileInstances } from "util/usedBy";
 import ProfileInstances from "./ProfileInstances";
 import DetailPanel from "components/DetailPanel";
 import ProfileNetworkList from "./ProfileNetworkList";
 import ProfileStorageList from "./ProfileStorageList";
+import { useProject } from "context/project";
 
 const ProfileDetailPanel: FC = () => {
   const notify = useNotify();
@@ -20,6 +20,8 @@ const ProfileDetailPanel: FC = () => {
   const profileName = panelParams.profile;
   const projectName = panelParams.project;
 
+  const { project, isLoading: isProjectLoading } = useProject();
+
   const {
     data: profile,
     error,
@@ -29,22 +31,10 @@ const ProfileDetailPanel: FC = () => {
     queryFn: () => fetchProfile(profileName ?? "", projectName),
   });
 
-  const {
-    data: project,
-    error: projectError,
-    isLoading: isProjectLoading,
-  } = useQuery({
-    queryKey: [queryKeys.projects, projectName],
-    queryFn: () => fetchProject(projectName),
-  });
-
   if (error) {
     notify.failure("Loading profile failed", error);
   }
 
-  if (projectError) {
-    notify.failure("Loading project failed", error);
-  }
   const isLoading = isProfileLoading || isProjectLoading;
 
   const featuresProfiles = isProjectWithProfiles(project);

src/pages/profiles/ProfileList.tsx

@@ -20,10 +20,10 @@ import useEventListener from "@use-it/event-listener";
 import { updateTBodyHeight } from "util/updateTBodyHeight";
 import Pagination from "components/Pagination";
 import NotificationRow from "components/NotificationRow";
-import { fetchProject } from "api/projects";
 import { defaultFirst } from "util/helpers";
 import ProfileLink from "./ProfileLink";
 import { isProjectWithProfiles } from "util/projects";
+import { useProject } from "context/project";
 
 const ProfileList: FC = () => {
   const navigate = useNavigate();
@@ -37,6 +37,8 @@ const ProfileList: FC = () => {
   }
   const isDefaultProject = projectName === "default";
 
+  const { project, isLoading: isProjectLoading } = useProject();
+
   const {
     data: profiles = [],
     error,
@@ -46,22 +48,10 @@ const ProfileList: FC = () => {
     queryFn: () => fetchProfiles(projectName),
   });
 
-  const {
-    data: project,
-    error: projectError,
-    isLoading: isProjectLoading,
-  } = useQuery({
-    queryKey: [queryKeys.projects, projectName],
-    queryFn: () => fetchProject(projectName),
-  });
-
   if (error) {
     notify.failure("Loading profiles failed", error);
   }
 
-  if (projectError) {
-    notify.failure("Loading project failed", projectError);
-  }
   const isLoading = isProfilesLoading || isProjectLoading;
 
   const featuresProfiles = isProjectWithProfiles(project);

src/pages/projects/ProjectConfiguration.tsx

@@ -1,37 +1,22 @@
 import React, { FC } from "react";
-import { fetchProject } from "api/projects";
-import { useQuery } from "@tanstack/react-query";
-import { queryKeys } from "util/queryKeys";
-import { useNotify } from "context/notify";
 import { useParams } from "react-router-dom";
 import EditProjectForm from "pages/projects/EditProjectForm";
 import Loader from "components/Loader";
+import { useProject } from "context/project";
 
 const ProjectConfiguration: FC = () => {
-  const notify = useNotify();
   const { project: projectName } = useParams<{ project: string }>();
 
   if (!projectName) {
     return <>Missing project</>;
   }
 
-  const {
-    data: project,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: [queryKeys.projects, projectName],
-    queryFn: () => fetchProject(projectName),
-  });
+  const { project, isLoading } = useProject();
 
   if (isLoading) {
     return <Loader />;
   }
 
-  if (error) {
-    notify.failure("Loading project failed", error);
-  }
-
   return project ? (
     <EditProjectForm project={project} key={project.name} />
   ) : (

src/util/projects.tsx

@@ -9,13 +9,9 @@ export const projectSubpages = [
   "configuration",
 ];
 
-export const getProjectFromUrl = (url: string) => {
-  return url.split("/")[3] ?? "";
-};
-
 export const getSubpageFromUrl = (url: string) => {
   const parts = url.split("/");
-  if (projectSubpages.includes(parts[3])) {
+  if (projectSubpages.includes(parts[4])) {
     return parts[4];
   }
   return undefined;