feat: converting space app to use nextjs app dir (#4451)
* feat: changemod space * fix: space app dir fixes * fix: build errors
This commit is contained in:
sriram veeraghanta
GitHub
parent
087d54a261
commit
febf19ccc0
98 changed files with 1038 additions and 1551 deletions
|
|
@ -1,54 +1,52 @@
|
|||
import { useEffect } from "react";
|
||||
"use client";
|
||||
|
||||
import { useEffect, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// components
|
||||
import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
|
||||
import { Briefcase } from "lucide-react";
|
||||
import { Avatar, Button } from "@plane/ui";
|
||||
// components
|
||||
import { ProjectLogo } from "@/components/common";
|
||||
import { IssueFiltersDropdown } from "@/components/issues/filters";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { useProject, useUser, useIssueFilter } from "@/hooks/store";
|
||||
// types
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
// components
|
||||
import { NavbarIssueBoardView } from "./issue-board-view";
|
||||
import { NavbarTheme } from "./theme";
|
||||
|
||||
const IssueNavbar = observer(() => {
|
||||
const {
|
||||
project: projectStore,
|
||||
issuesFilter: { updateFilters },
|
||||
}: RootStore = useMobxStore();
|
||||
const { data: user } = useUser();
|
||||
// router
|
||||
type IssueNavbarProps = {
|
||||
projectSettings: any;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
|
||||
const { projectSettings, workspaceSlug, projectId } = props;
|
||||
const { project_details, views } = projectSettings;
|
||||
const { board, labels, states, priorities, peekId } = useParams<any>();
|
||||
const searchParams = useSearchParams();
|
||||
const pathName = usePathname();
|
||||
// hooks
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, board, peekId, states, priorities, labels } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
peekId: string;
|
||||
board: string;
|
||||
states: string;
|
||||
priorities: string;
|
||||
labels: string;
|
||||
};
|
||||
// store
|
||||
const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
|
||||
const { data: user } = useUser();
|
||||
const { updateFilters } = useIssueFilter();
|
||||
hydrate(projectSettings);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug) {
|
||||
projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
|
||||
}
|
||||
}, [projectStore, workspace_slug, project_slug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug && projectStore?.deploySettings) {
|
||||
if (workspaceSlug && projectId && settings) {
|
||||
const viewsAcceptable: string[] = [];
|
||||
let currentBoard: TIssueBoardKeys | null = null;
|
||||
|
||||
if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
|
||||
if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
|
||||
if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
|
||||
if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
|
||||
if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
|
||||
if (settings?.views?.list) viewsAcceptable.push("list");
|
||||
if (settings?.views?.kanban) viewsAcceptable.push("kanban");
|
||||
if (settings?.views?.calendar) viewsAcceptable.push("calendar");
|
||||
if (settings?.views?.gantt) viewsAcceptable.push("gantt");
|
||||
if (settings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
|
||||
|
||||
if (board) {
|
||||
if (viewsAcceptable.includes(board.toString())) {
|
||||
|
|
@ -65,49 +63,47 @@ const IssueNavbar = observer(() => {
|
|||
}
|
||||
|
||||
if (currentBoard) {
|
||||
if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
|
||||
if (activeLayout === null || activeLayout !== currentBoard) {
|
||||
let params: any = { board: currentBoard };
|
||||
if (peekId && peekId.length > 0) params = { ...params, peekId: peekId };
|
||||
if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
|
||||
if (states && states.length > 0) params = { ...params, states: states };
|
||||
if (labels && labels.length > 0) params = { ...params, labels: labels };
|
||||
|
||||
console.log("params", params);
|
||||
let storeParams: any = {};
|
||||
if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
|
||||
if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
|
||||
if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
|
||||
|
||||
if (storeParams) updateFilters(project_slug, storeParams);
|
||||
|
||||
projectStore.setActiveBoard(currentBoard);
|
||||
router.push({
|
||||
pathname: `/${workspace_slug}/${project_slug}`,
|
||||
query: { ...params },
|
||||
});
|
||||
if (storeParams) updateFilters(projectId, storeParams);
|
||||
setActiveLayout(currentBoard);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
board,
|
||||
workspace_slug,
|
||||
project_slug,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
router,
|
||||
projectStore,
|
||||
projectStore?.deploySettings,
|
||||
updateFilters,
|
||||
labels,
|
||||
states,
|
||||
priorities,
|
||||
peekId,
|
||||
settings,
|
||||
activeLayout,
|
||||
setActiveLayout,
|
||||
searchParams,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full items-center gap-4 px-5">
|
||||
{/* project detail */}
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
{projectStore.project ? (
|
||||
{project_details ? (
|
||||
<span className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
<ProjectLogo logo={projectStore.project.logo_props} className="text-lg" />
|
||||
<ProjectLogo logo={project_details.logo_props} className="text-lg" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
|
|
@ -115,21 +111,18 @@ const IssueNavbar = observer(() => {
|
|||
</span>
|
||||
)}
|
||||
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
|
||||
{projectStore?.project?.name || `...`}
|
||||
{project_details?.name || `...`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* issue search bar */}
|
||||
<div className="w-full">{/* <NavbarSearch /> */}</div>
|
||||
|
||||
{/* issue views */}
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<NavbarIssueBoardView />
|
||||
<NavbarIssueBoardView layouts={views} />
|
||||
</div>
|
||||
|
||||
{/* issue filters */}
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<IssueFiltersDropdown />
|
||||
<IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
|
||||
{/* theming */}
|
||||
|
|
@ -137,14 +130,14 @@ const IssueNavbar = observer(() => {
|
|||
<NavbarTheme />
|
||||
</div>
|
||||
|
||||
{user ? (
|
||||
{user?.id ? (
|
||||
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
|
||||
<Avatar name={user?.display_name} src={user?.avatar ?? undefined} shape="square" size="sm" />
|
||||
<h6 className="text-xs font-medium">{user.display_name}</h6>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-shrink-0">
|
||||
<Link href={`/?next_path=${router.asPath}`}>
|
||||
<Link href={`/?next_path=${pathName}`}>
|
||||
<Button variant="outline-primary">Sign in</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,49 @@
|
|||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// constants
|
||||
import { issueViews } from "@/constants/data";
|
||||
// hooks
|
||||
import { useProject } from "@/hooks/store";
|
||||
// mobx
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { TIssueBoardKeys } from "types/issue";
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
|
||||
export const NavbarIssueBoardView = observer(() => {
|
||||
const {
|
||||
project: { viewOptions, setActiveBoard, activeBoard },
|
||||
}: RootStore = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
|
||||
type NavbarIssueBoardViewProps = {
|
||||
layouts: Record<TIssueBoardKeys, boolean>;
|
||||
};
|
||||
|
||||
export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((props) => {
|
||||
const { layouts } = props;
|
||||
|
||||
const { activeLayout, setActiveLayout } = useProject();
|
||||
|
||||
const handleCurrentBoardView = (boardView: string) => {
|
||||
setActiveBoard(boardView as TIssueBoardKeys);
|
||||
router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
|
||||
setActiveLayout(boardView as TIssueBoardKeys);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{viewOptions &&
|
||||
Object.keys(viewOptions).map((viewKey: string) => {
|
||||
if (viewOptions[viewKey]) {
|
||||
{layouts &&
|
||||
Object.keys(layouts).map((layoutKey: string) => {
|
||||
if (layouts[layoutKey as TIssueBoardKeys]) {
|
||||
return (
|
||||
<div
|
||||
key={viewKey}
|
||||
key={layoutKey}
|
||||
className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
|
||||
viewKey === activeBoard
|
||||
layoutKey === activeLayout
|
||||
? `bg-custom-background-80 text-custom-text-200`
|
||||
: `text-custom-text-300 hover:bg-custom-background-80`
|
||||
}`}
|
||||
onClick={() => handleCurrentBoardView(viewKey)}
|
||||
title={viewKey}
|
||||
onClick={() => handleCurrentBoardView(layoutKey)}
|
||||
title={layoutKey}
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-rounded text-[18px] ${
|
||||
issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
|
||||
issueViews[layoutKey]?.className ? issueViews[layoutKey]?.className : ``
|
||||
}`}
|
||||
>
|
||||
{issueViews[viewKey]?.icon}
|
||||
{issueViews[layoutKey]?.icon}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
// next theme
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
|
@ -16,7 +18,6 @@ export const NavbarTheme = observer(() => {
|
|||
|
||||
useEffect(() => {
|
||||
if (!theme) return;
|
||||
|
||||
setAppTheme(theme);
|
||||
}, [theme]);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue