From e13b679c2831c934e25a058b3d0121f5f921a04e Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:53:31 +0530 Subject: [PATCH] fix: join project screen flicker (#541) --- .../project/create-project-modal.tsx | 6 +++--- apps/app/layouts/app-layout/index.tsx | 11 ++++++----- .../projects/[projectId]/cycles/[cycleId].tsx | 15 +++++++++++++-- .../projects/[projectId]/cycles/index.tsx | 17 +++++++++++++---- .../projects/[projectId]/issues/[issueId].tsx | 1 + .../projects/[projectId]/issues/index.tsx | 1 + .../[projectId]/modules/[moduleId].tsx | 1 + .../projects/[projectId]/modules/index.tsx | 18 ++++++++++++++---- .../projects/[projectId]/pages/[pageId].tsx | 17 +++++++++++++---- .../projects/[projectId]/pages/index.tsx | 17 +++++++++++++---- .../projects/[projectId]/views/[viewId].tsx | 1 + .../projects/[projectId]/views/index.tsx | 17 +++++++++++++---- .../pages/[workspaceSlug]/projects/index.tsx | 12 ++++++------ 13 files changed, 98 insertions(+), 36 deletions(-) diff --git a/apps/app/components/project/create-project-modal.tsx b/apps/app/components/project/create-project-modal.tsx index 72901ae58..3ef18f5f9 100644 --- a/apps/app/components/project/create-project-modal.tsx +++ b/apps/app/components/project/create-project-modal.tsx @@ -121,17 +121,17 @@ export const CreateProjectModal: React.FC = (props) => { false ); setToastAlert({ - title: "Success", type: "success", - message: "Project created successfully", + title: "Success!", + message: "Project created successfully.", }); handleClose(); }) .catch((err) => { if (err.status === 403) { setToastAlert({ - title: "Error", type: "error", + title: "Error!", message: "You don't have permission to create project.", }); handleClose(); diff --git a/apps/app/layouts/app-layout/index.tsx b/apps/app/layouts/app-layout/index.tsx index 118c635fa..fa1a2d138 100644 --- a/apps/app/layouts/app-layout/index.tsx +++ b/apps/app/layouts/app-layout/index.tsx @@ -7,8 +7,6 @@ import useSWR from "swr"; // services import projectService from "services/project.service"; -// hooks -import useUser from "hooks/use-user"; // ui import { PrimaryButton, Spinner } from "components/ui"; // icon @@ -66,8 +64,6 @@ const AppLayout: FC = ({ const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { user } = useUser(); - const { data: projectMembers, mutate: projectMembersMutate } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId @@ -78,7 +74,12 @@ const AppLayout: FC = ({ } ); // flags - const isMember = projectMembers?.find((member) => member.member.id === user?.id) || !projectId; + const isMember = + !projectId || + memberType?.isOwner || + memberType?.isMember || + memberType?.isViewer || + memberType?.isGuest; const handleJoin = () => { setIsJoiningProject(true); diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx index 02653306f..b184542b2 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx @@ -111,6 +111,7 @@ const SingleCycle: React.FC = (props) => { handleOnSubmit={handleAddIssuesToCycle} /> = (props) => { } >
- +
- + ); diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx index 1e547f9fa..a6f3498f8 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx @@ -8,7 +8,7 @@ import useSWR from "swr"; import { PlusIcon } from "@heroicons/react/24/outline"; import { Tab } from "@headlessui/react"; // lib -import { requiredAuth } from "lib/auth"; +import { requiredAdmin, requiredAuth } from "lib/auth"; // services import cycleService from "services/cycles.service"; @@ -23,7 +23,7 @@ import { HeaderButton, Loader } from "components/ui"; import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons // types -import { SelectCycleType } from "types"; +import { SelectCycleType, UserAuth } from "types"; import type { NextPage, GetServerSidePropsContext } from "next"; // fetching keys import { @@ -44,7 +44,7 @@ const CompletedCyclesList = dynamic( } ); -const ProjectCycles: NextPage = () => { +const ProjectCycles: NextPage = (props) => { const [selectedCycle, setSelectedCycle] = useState(); const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false); @@ -86,6 +86,7 @@ const ProjectCycles: NextPage = () => { meta={{ title: "Plane - Cycles", }} + memberType={props} breadcrumbs={ @@ -210,9 +211,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; } + const projectId = ctx.query.projectId as string; + const workspaceSlug = ctx.query.workspaceSlug as string; + + const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); + return { props: { - user, + isOwner: memberDetail?.role === 20, + isMember: memberDetail?.role === 15, + isViewer: memberDetail?.role === 10, + isGuest: memberDetail?.role === 5, }, }; }; diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx index 8471a68f5..6a271428d 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx @@ -121,6 +121,7 @@ const IssueDetailsPage: NextPage = (props) => { return ( = (props) => { return ( diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx index 7b0d0ae89..dabf9ad29 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx @@ -112,6 +112,7 @@ const SingleModule: React.FC = (props) => { handleOnSubmit={handleAddIssuesToModule} /> { +const ProjectModules: NextPage = (props) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const [selectedModule, setSelectedModule] = useState(); @@ -63,6 +64,7 @@ const ProjectModules: NextPage = () => { meta={{ title: "Plane - Modules", }} + memberType={props} breadcrumbs={ @@ -140,9 +142,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; } + const projectId = ctx.query.projectId as string; + const workspaceSlug = ctx.query.workspaceSlug as string; + + const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); + return { props: { - user, + isOwner: memberDetail?.role === 20, + isMember: memberDetail?.role === 15, + isViewer: memberDetail?.role === 10, + isGuest: memberDetail?.role === 5, }, }; }; diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx index 702f1b7d9..70d582191 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx @@ -11,7 +11,7 @@ import { Popover, Transition } from "@headlessui/react"; // react-color import { TwitterPicker } from "react-color"; // lib -import { requiredAuth } from "lib/auth"; +import { requiredAdmin, requiredAuth } from "lib/auth"; // services import projectService from "services/project.service"; import pagesService from "services/pages.service"; @@ -33,7 +33,7 @@ import { renderShortTime } from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // types import type { NextPage, GetServerSidePropsContext } from "next"; -import { IIssueLabels, IPage, IPageBlock } from "types"; +import { IIssueLabels, IPage, IPageBlock, UserAuth } from "types"; // fetch-keys import { PAGE_BLOCKS_LIST, @@ -42,7 +42,7 @@ import { PROJECT_ISSUE_LABELS, } from "constants/fetch-keys"; -const SinglePage: NextPage = () => { +const SinglePage: NextPage = (props) => { const router = useRouter(); const { workspaceSlug, projectId, pageId } = router.query; @@ -233,6 +233,7 @@ const SinglePage: NextPage = () => { meta={{ title: "Plane - Pages", }} + memberType={props} breadcrumbs={ @@ -454,9 +455,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; } + const projectId = ctx.query.projectId as string; + const workspaceSlug = ctx.query.workspaceSlug as string; + + const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); + return { props: { - user, + isOwner: memberDetail?.role === 20, + isMember: memberDetail?.role === 15, + isViewer: memberDetail?.role === 10, + isGuest: memberDetail?.role === 5, }, }; }; diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx index aa6b6bb3a..17d142adc 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx @@ -9,7 +9,7 @@ import useSWR from "swr"; // react-hook-form import { useForm } from "react-hook-form"; // lib -import { requiredAuth } from "lib/auth"; +import { requiredAdmin, requiredAuth } from "lib/auth"; // headless ui import { Tab } from "@headlessui/react"; // services @@ -29,7 +29,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs"; // icons import { ListBulletIcon, RectangleGroupIcon } from "@heroicons/react/20/solid"; // types -import { IPage, TPageViewProps } from "types"; +import { IPage, TPageViewProps, UserAuth } from "types"; // fetch-keys import { PROJECT_DETAILS, RECENT_PAGES_LIST } from "constants/fetch-keys"; @@ -61,7 +61,7 @@ const OtherPagesList = dynamic<{ viewType: TPageViewProps }>( } ); -const ProjectPages: NextPage = () => { +const ProjectPages: NextPage = (props) => { const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false); const [viewType, setViewType] = useState("list"); @@ -138,6 +138,7 @@ const ProjectPages: NextPage = () => { meta={{ title: "Plane - Pages", }} + memberType={props} breadcrumbs={ @@ -260,9 +261,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; } + const projectId = ctx.query.projectId as string; + const workspaceSlug = ctx.query.workspaceSlug as string; + + const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); + return { props: { - user, + isOwner: memberDetail?.role === 20, + isMember: memberDetail?.role === 15, + isViewer: memberDetail?.role === 10, + isGuest: memberDetail?.role === 5, }, }; }; diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx index c266e03b4..89a1ad373 100644 --- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx +++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx @@ -57,6 +57,7 @@ const SingleView: React.FC = (props) => { return ( { +const ProjectViews: NextPage = (props) => { const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false); const [selectedView, setSelectedView] = useState(null); @@ -57,6 +57,7 @@ const ProjectViews: NextPage = () => { meta={{ title: "Plane - Views", }} + memberType={props} breadcrumbs={ @@ -147,9 +148,17 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { }; } + const projectId = ctx.query.projectId as string; + const workspaceSlug = ctx.query.workspaceSlug as string; + + const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie); + return { props: { - user, + isOwner: memberDetail?.role === 20, + isMember: memberDetail?.role === 15, + isViewer: memberDetail?.role === 10, + isGuest: memberDetail?.role === 5, }, }; }; diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx index 816b5de07..65b6ce720 100644 --- a/apps/app/pages/[workspaceSlug]/projects/index.tsx +++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx @@ -14,7 +14,7 @@ import AppLayout from "layouts/app-layout"; import { JoinProjectModal } from "components/project/join-project-modal"; import { DeleteProjectModal, SingleProjectCard } from "components/project"; // ui -import { HeaderButton, Loader, EmptyState } from "components/ui"; +import { HeaderButton, Loader, EmptyState } from "components/ui"; import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; @@ -83,11 +83,11 @@ const ProjectsPage: NextPage = () => { <> {projects.length === 0 ? ( + type="project" + title="Create New Project" + description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service." + imgURL={emptyProject} + /> ) : (
{projects.map((project) => (