refactor: layout roots (#2517)

web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx

@@ -1,90 +1,34 @@
 import { useRouter } from "next/router";
-import Link from "next/link";
-
 import useSWR from "swr";
-
-// services
-import { ProjectService } from "services/project";
-import { ViewService } from "services/view.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { ProjectViewLayoutRoot } from "components/issues";
-// ui
-import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
-import { EmptyState } from "components/common";
-// icons
-// images
-import emptyView from "public/empty-state/view.svg";
-// helpers
-import { truncateText } from "helpers/string.helper";
-// fetch-keys
-import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
 import { ProjectViewIssuesHeader } from "components/headers";
+// ui
+import { EmptyState } from "components/common";
+// assets
+import emptyView from "public/empty-state/view.svg";
+// types
+import { NextPage } from "next";
 
-// services
-const projectService = new ProjectService();
-const viewService = new ViewService();
-
-const SingleView: React.FC = () => {
+const ProjectViewIssues: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
 
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
-  );
+  const { projectViews: projectViewsStore } = useMobxStore();
 
-  const { data: views } = useSWR(
-    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => viewService.getViews(workspaceSlug as string, projectId as string) : null
-  );
-
-  const { data: viewDetails, error } = useSWR(
-    workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
+  const { error } = useSWR(
+    workspaceSlug && projectId && viewId ? `VIEW_DETAILS_${viewId.toString()}` : null,
     workspaceSlug && projectId && viewId
-      ? () => viewService.getViewDetails(workspaceSlug as string, projectId as string, viewId as string)
+      ? () => projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString())
       : null
   );
 
   return (
-    <ProjectAuthorizationWrapper
-      breadcrumbs={
-        <Breadcrumbs onBack={() => router.back()}>
-          <BreadcrumbItem
-            link={
-              <Link href={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}>
-                <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm `}>
-                  <p className="truncate">{`${activeProject?.name ?? "Project"} Views`}</p>
-                </a>
-              </Link>
-            }
-          />
-        </Breadcrumbs>
-      }
-      left={
-        <CustomMenu
-          label={
-            <>
-              <PhotoFilterIcon height={12} width={12} />
-              {viewDetails?.name && truncateText(viewDetails.name, 40)}
-            </>
-          }
-          className="ml-1.5"
-          width="auto"
-        >
-          {views?.map((view) => (
-            <CustomMenu.MenuItem
-              key={view.id}
-              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
-            >
-              {truncateText(view.name, 40)}
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
-      }
-      right={<ProjectViewIssuesHeader />}
-    >
+    <AppLayout header={<ProjectViewIssuesHeader />} withProjectWrapper>
       {error ? (
         <EmptyState
           image={emptyView}
@@ -98,8 +42,8 @@ const SingleView: React.FC = () => {
       ) : (
         <ProjectViewLayoutRoot />
       )}
-    </ProjectAuthorizationWrapper>
+    </AppLayout>
   );
 };
 
-export default SingleView;
+export default ProjectViewIssues;