import { useEffect } from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; // mobx import { observer } from "mobx-react-lite"; // components import { NavbarSearch } from "./search"; import { NavbarIssueBoardView } from "./issue-board-view"; import { NavbarTheme } from "./theme"; // ui import { PrimaryButton } from "components/ui"; // lib import { useMobxStore } from "lib/mobx/store-provider"; // store import { RootStore } from "store/root"; const renderEmoji = (emoji: string | { name: string; color: string }) => { if (!emoji) return; if (typeof emoji === "object") return ( {emoji.name} ); else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji)); }; const IssueNavbar = observer(() => { const { project: projectStore, user: userStore }: RootStore = useMobxStore(); // router const router = useRouter(); const { workspace_slug, project_slug, board } = router.query; const user = userStore?.currentUser; useEffect(() => { if (workspace_slug && project_slug) { projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString()); } }, [projectStore, workspace_slug, project_slug]); useEffect(() => { if (workspace_slug && projectStore) { if (board) { projectStore.setActiveBoard(board.toString()); } else { router.push(`/${workspace_slug}/${project_slug}?board=list`); projectStore.setActiveBoard("list"); } } }, [board, router, projectStore, workspace_slug, project_slug]); return (
{/* project detail */}
{projectStore?.project && projectStore?.project?.emoji ? ( renderEmoji(projectStore?.project?.emoji) ) : ( plane logo )}
{projectStore?.project?.name || `...`}
{/* issue search bar */}
{/* issue views */}
{/* theming */}
{user ? (
{user.avatar && user.avatar !== "" ? (
{/* eslint-disable-next-line @next/next/no-img-element */} {user.display_name
) : (
{(user.display_name ?? "A")[0]}
)}
{user.display_name}
) : (
Sign in
)}
); }); export default IssueNavbar;