import React, { FC, useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import useSWR from "swr"; // services import projectService from "services/project.service"; // ui import { PrimaryButton, Spinner } from "components/ui"; // icon import { LayerDiagonalIcon } from "components/icons"; // components import { NotAuthorizedView } from "components/core"; import { CommandPalette } from "components/command-palette"; import { JoinProject } from "components/project"; // local components import Container from "layouts/container"; import AppSidebar from "layouts/app-layout/app-sidebar"; import AppHeader from "layouts/app-layout/app-header"; // types import { UserAuth } from "types"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; import SettingsNavbar from "layouts/settings-navbar"; type Meta = { title?: string | null; description?: string | null; image?: string | null; url?: string | null; }; type AppLayoutProps = { meta?: Meta; children: React.ReactNode; noPadding?: boolean; bg?: "primary" | "secondary"; noHeader?: boolean; breadcrumbs?: JSX.Element; left?: JSX.Element; right?: JSX.Element; settingsLayout?: boolean; profilePage?: boolean; memberType?: UserAuth; }; const AppLayout: FC = ({ meta, children, noPadding = false, bg = "primary", noHeader = false, breadcrumbs, left, right, settingsLayout = false, profilePage = false, memberType, }) => { // states const [toggleSidebar, setToggleSidebar] = useState(false); const [isJoiningProject, setIsJoiningProject] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { data: projectMembers, mutate: projectMembersMutate } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null, { shouldRetryOnError: false, } ); // flags const isMember = !projectId || memberType?.isOwner || memberType?.isMember || memberType?.isViewer || memberType?.isGuest; const handleJoin = () => { setIsJoiningProject(true); projectService .joinProject(workspaceSlug as string, { project_ids: [projectId as string], }) .then(() => { setIsJoiningProject(false); projectMembersMutate(); }) .catch((err) => { console.error(err); }); }; return (
{settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? ( Go to Issues ) : ( (memberType?.isViewer || memberType?.isGuest) && workspaceSlug && ( Go to workspace ) ) } /> ) : (
{!noHeader && ( )} {projectId && !projectMembers ? (
) : isMember ? (
{settingsLayout && (

{profilePage ? "Profile" : projectId ? "Project" : "Workspace"} Settings

{profilePage ? "This information will be visible to only you." : projectId ? "This information will be displayed to every member of the project." : "This information will be displayed to every member of the workspace."}

)} {children}
) : ( )}
)}
); }; export default AppLayout;