refactor: pages folder structure (#544)

* refactor: pages folder structure, mutation issues

* fix: block edit and push

* fix: block title placeholder

apps/app/components/pages/pages-list/all-pages-list.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { ALL_PAGES_LIST } from "constants/fetch-keys";
+
+export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? ALL_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getAllPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};

apps/app/components/pages/pages-list/favorite-pages-list.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { FAVORITE_PAGES_LIST } from "constants/fetch-keys";
+
+export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? FAVORITE_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getFavoritePages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};

apps/app/components/pages/pages-list/index.ts

@@ -0,0 +1,6 @@
+export * from "./all-pages-list";
+export * from "./favorite-pages-list";
+export * from "./my-pages-list";
+export * from "./other-pages-list";
+export * from "./recent-pages-list";
+export * from "./types";

apps/app/components/pages/pages-list/my-pages-list.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { MY_PAGES_LIST } from "constants/fetch-keys";
+
+export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? MY_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getMyPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};

apps/app/components/pages/pages-list/other-pages-list.tsx

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// types
+import { TPagesListProps } from "./types";
+// fetch-keys
+import { OTHER_PAGES_LIST } from "constants/fetch-keys";
+
+export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? OTHER_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getOtherPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <div className="mt-4 space-y-4">
+      <PagesView pages={pages} viewType={viewType} />
+    </div>
+  );
+};

apps/app/components/pages/pages-list/recent-pages-list.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import pagesService from "services/pages.service";
+// components
+import { PagesView } from "components/pages";
+// ui
+import { Loader } from "components/ui";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { TPagesListProps } from "./types";
+import { RecentPagesResponse } from "types";
+// fetch-keys
+import { RECENT_PAGES_LIST } from "constants/fetch-keys";
+
+export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { data: pages } = useSWR(
+    workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string)
+      : null
+  );
+
+  return (
+    <>
+      {pages ? (
+        Object.keys(pages).length > 0 ? (
+          <div className="mt-4 space-y-4">
+            {Object.keys(pages).map((key) => {
+              if (pages[key].length === 0) return null;
+
+              return (
+                <React.Fragment key={key}>
+                  <h2 className="text-xl font-medium capitalize">
+                    {replaceUnderscoreIfSnakeCase(key)}
+                  </h2>
+                  <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
+                </React.Fragment>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="mt-4 text-center">No issues found</p>
+        )
+      ) : (
+        <Loader className="mt-8 space-y-4">
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+          <Loader.Item height="40px" />
+        </Loader>
+      )}
+    </>
+  );
+};

apps/app/components/pages/pages-list/types.ts

@@ -0,0 +1,5 @@
+import { TPageViewProps } from "types";
+
+export type TPagesListProps = {
+  viewType: TPageViewProps;
+};