[WEB-4108]chore: refactored project wrapper

web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx

@@ -16,7 +16,7 @@ import { IssueDetailRoot } from "@/components/issues";
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
 // assets
 import { useAppRouter } from "@/hooks/use-app-router";
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import { useProjectResources } from "@/plane-web/hooks/use-project-resources";
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
 
@@ -46,13 +46,16 @@ const IssueDetailsPage = observer(() => {
       : null
   );
   const issueId = data?.id;
-  const projectId = data?.project_id;
+  const projectId = data?.project_id ?? "";
   // derived values
   const issue = getIssueById(issueId?.toString() || "") || undefined;
   const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
   const issueLoader = !issue || isLoading;
   const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
 
+  // Load project resources when needed
+  useProjectResources(workspaceSlug?.toString(), projectId);
+
   useEffect(() => {
     const handleToggleIssueDetailSidebar = () => {
       if (window && window.innerWidth < 768) {
@@ -99,13 +102,11 @@ const IssueDetailsPage = observer(() => {
         workspaceSlug &&
         projectId &&
         issueId && (
-          <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
-            <IssueDetailRoot
-              workspaceSlug={workspaceSlug.toString()}
-              projectId={projectId.toString()}
-              issueId={issueId.toString()}
-            />
-          </ProjectAuthWrapper>
+          <IssueDetailRoot
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            issueId={issueId.toString()}
+          />
         )
       )}
     </>

web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx

@@ -2,17 +2,17 @@
 
 import { ReactNode } from "react";
 import { useParams } from "next/navigation";
-// plane web layouts
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// hooks
+import { useProjectResources } from "@/plane-web/hooks/use-project-resources";
 
 const ProjectDetailLayout = ({ children }: { children: ReactNode }) => {
   // router
   const { workspaceSlug, projectId } = useParams();
-  return (
-    <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
-      {children}
-    </ProjectAuthWrapper>
-  );
+
+  // Load project resources
+  useProjectResources(workspaceSlug?.toString(), projectId?.toString());
+
+  return children;
 };
 
 export default ProjectDetailLayout;

web/ce/hooks/use-project-resources.ts

@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import useSWR from "swr";
+// hooks
+import { ETimeLineTypeType } from "@/components/gantt-chart/contexts";
+import {
+  useCycle,
+  useLabel,
+  useMember,
+  useModule,
+  useProject,
+  useProjectEstimates,
+  useProjectState,
+  useProjectView,
+  useUserPermissions,
+} from "@/hooks/store";
+// local
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+import { persistence } from "@/local-db/storage.sqlite";
+
+export const useProjectCoreResources = (workspaceSlug?: string, projectId?: string) => {
+  const { fetchUserProjectInfo } = useUserPermissions();
+  const { fetchProjectDetails } = useProject();
+  const { fetchAllCycles } = useCycle();
+  const { fetchModulesSlim, fetchModules } = useModule();
+  const { initGantt } = useTimeLineChart(ETimeLineTypeType.MODULE);
+  const { fetchViews } = useProjectView();
+  const {
+    project: { fetchProjectMembers },
+  } = useMember();
+  const { fetchProjectStates } = useProjectState();
+  const { fetchProjectLabels } = useLabel();
+  const { getProjectEstimates } = useProjectEstimates();
+
+  // Initialize module timeline chart
+  useEffect(() => {
+    initGantt();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync issues
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_SYNC_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId
+      ? () => {
+          persistence.syncIssues(projectId.toString());
+        }
+      : null,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+      refreshInterval: 5 * 60 * 1000,
+    }
+  );
+
+  // Project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  // User project info
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ME_INFORMATION_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
+  );
+
+  // Project labels
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_LABELS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project members
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MEMBERS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project estimates
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project cycles
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project modules
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_MODULES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId
+      ? async () => {
+          await fetchModulesSlim(workspaceSlug.toString(), projectId.toString());
+          await fetchModules(workspaceSlug.toString(), projectId.toString());
+        }
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Project views
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchViews(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+};
+
+// Combined hook for all project resources
+export const useProjectResources = (workspaceSlug?: string, projectId?: string) => {
+  useProjectCoreResources(workspaceSlug, projectId);
+};

web/core/layouts/auth-layout/index.ts

@@ -1,2 +1 @@
 export * from "./workspace-wrapper";
-export * from "./project-wrapper";