import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import { Plus } from "lucide-react"; // store hooks import { useGlobalView, useUser } from "hooks/store"; // components import { CreateUpdateWorkspaceViewModal } from "components/workspace"; // constants import { DEFAULT_GLOBAL_VIEWS_LIST, EUserWorkspaceRoles } from "constants/workspace"; const ViewTab = observer((props: { viewId: string }) => { const { viewId } = props; // router const router = useRouter(); const { workspaceSlug, globalViewId } = router.query; // store hooks const { getViewDetailsById } = useGlobalView(); const view = getViewDetailsById(viewId); if (!view) return null; return ( {view.name} ); }); export const GlobalViewsHeader: React.FC = observer(() => { // states const [createViewModal, setCreateViewModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, globalViewId } = router.query; // store hooks const { currentWorkspaceViews } = useGlobalView(); const { membership: { currentWorkspaceRole }, } = useUser(); // bring the active view to the centre of the header useEffect(() => { if (!globalViewId) return; const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`); if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" }); }, [globalViewId]); const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; return ( <> setCreateViewModal(false)} />
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => ( {tab.label} ))} {currentWorkspaceViews?.map((viewId) => ( ))}
{isAuthorizedUser && ( )}
); });