binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: pages folder structure (#544)

Browse source 
* refactor: pages folder structure, mutation issues

* fix: block edit and push

* fix: block title placeholder
This commit is contained in:
Aaryan Khandelwal 2023-03-27 23:19:05 +05:30 • committed by GitHub
parent e13b679c28
commit 3503b22dd9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 378 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

47
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
@ -43,6 +43,8 @@ import {
} from "constants/fetch-keys";
const SinglePage: NextPage<UserAuth> = (props) => {
const [isAddingBlock, setIsAddingBlock] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
@ -132,6 +134,8 @@ const SinglePage: NextPage<UserAuth> = (props) => {
const createPageBlock = async () => {
if (!workspaceSlug || !projectId || !pageId) return;
setIsAddingBlock(true);
await pagesService
.createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
name: "New block",
@ -149,6 +153,9 @@ const SinglePage: NextPage<UserAuth> = (props) => {
title: "Error!",
message: "Page could not be created. Please try again.",
});
})
.finally(() => {
setIsAddingBlock(false);
});
};
@ -392,17 +399,8 @@ const SinglePage: NextPage<UserAuth> = (props) => {
</div>
<div className="px-3">
{pageBlocks ? (
pageBlocks.length === 0 ? (
<button
type="button"
className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
onClick={createPageBlock}
>
<PlusIcon className="h-3 w-3" />
Add new block
</button>
) : (
<>
<>
{pageBlocks.length !== 0 && (
<div className="space-y-4">
{pageBlocks.map((block) => (
<SinglePageBlock
@ -412,18 +410,23 @@ const SinglePage: NextPage<UserAuth> = (props) => {
/>
))}
</div>
<div className="">
<button
type="button"
className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
onClick={createPageBlock}
>
)}
<button
type="button"
className="flex items-center gap-1 rounded px-2.5 py-1 text-xs hover:bg-gray-100"
onClick={createPageBlock}
disabled={isAddingBlock}
>
{isAddingBlock ? (
"Adding block..."
) : (
<>
<PlusIcon className="h-3 w-3" />
Add new block
</button>
</div>
</>
)
</>
)}
</button>
</>
) : (
<Loader>
<Loader.Item height="150px" />

42
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
View file

@ -4,7 +4,7 @@ import { useRouter } from "next/router";
import type { GetServerSidePropsContext, NextPage } from "next";
import dynamic from "next/dynamic";
import useSWR from "swr";
import useSWR, { mutate } from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
@ -22,7 +22,7 @@ import { PlusIcon } from "components/icons";
// layouts
import AppLayout from "layouts/app-layout";
// components
import { RecentPagesList, CreateUpdatePageModal } from "components/pages";
import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
// ui
import { HeaderButton, Input, PrimaryButton } from "components/ui";
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
@ -31,30 +31,35 @@ import { ListBulletIcon, RectangleGroupIcon } from "@heroicons/react/20/solid";
// types
import { IPage, TPageViewProps, UserAuth } from "types";
// fetch-keys
import { PROJECT_DETAILS, RECENT_PAGES_LIST } from "constants/fetch-keys";
import {
ALL_PAGES_LIST,
MY_PAGES_LIST,
PROJECT_DETAILS,
RECENT_PAGES_LIST,
} from "constants/fetch-keys";
const AllPagesList = dynamic<{ viewType: TPageViewProps }>(
const AllPagesList = dynamic<TPagesListProps>(
() => import("components/pages").then((a) => a.AllPagesList),
{
ssr: false,
}
);
const FavoritePagesList = dynamic<{ viewType: TPageViewProps }>(
const FavoritePagesList = dynamic<TPagesListProps>(
() => import("components/pages").then((a) => a.FavoritePagesList),
{
ssr: false,
}
);
const MyPagesList = dynamic<{ viewType: TPageViewProps }>(
const MyPagesList = dynamic<TPagesListProps>(
() => import("components/pages").then((a) => a.MyPagesList),
{
ssr: false,
}
);
const OtherPagesList = dynamic<{ viewType: TPageViewProps }>(
const OtherPagesList = dynamic<TPagesListProps>(
() => import("components/pages").then((a) => a.OtherPagesList),
{
ssr: false,
@ -90,13 +95,6 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
: null
);
const { data: recentPages } = useSWR(
workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
workspaceSlug && projectId
? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string)
: null
);
const createPage = async (formData: Partial<IPage>) => {
if (!workspaceSlug || !projectId) return;
@ -111,13 +109,25 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
await pagesService
.createPage(workspaceSlug as string, projectId as string, formData)
.then(() => {
.then((res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Page created successfully.",
});
reset();
mutate(RECENT_PAGES_LIST(projectId as string));
mutate<IPage[]>(
MY_PAGES_LIST(projectId as string),
(prevData) => [res, ...(prevData as IPage[])],
false
);
mutate<IPage[]>(
ALL_PAGES_LIST(projectId as string),
(prevData) => [res, ...(prevData as IPage[])],
false
);
})
.catch(() => {
setToastAlert({
@ -224,7 +234,7 @@ const ProjectPages: NextPage<UserAuth> = (props) => {
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<RecentPagesList pages={recentPages} viewType={viewType} />
<RecentPagesList viewType={viewType} />
</Tab.Panel>
<Tab.Panel>
<AllPagesList viewType={viewType} />