import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components import { CreateUpdateWorkspaceViewModal } from "components/workspace"; // icon import { PlusIcon } from "lucide-react"; // constants import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace"; export const GlobalViewsHeader: React.FC = observer(() => { const [createViewModal, setCreateViewModal] = useState(false); const router = useRouter(); const { workspaceSlug, globalViewId } = router.query; const { globalViews: globalViewsStore } = useMobxStore(); useSWR( workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null, workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null ); // 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 isTabSelected = (tabKey: string) => router.pathname.includes(tabKey); return ( <> setCreateViewModal(false)} />
{DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => ( {tab.label} ))} {globalViewsStore.globalViewsList?.map((view) => ( {view.name} ))}
); });