binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: converting space app to use nextjs app dir (#4451)

Browse source 
* feat: changemod space

* fix: space app dir fixes

* fix: build errors
This commit is contained in:
sriram veeraghanta 2024-05-14 14:26:54 +05:30 • committed by GitHub
parent 087d54a261
commit febf19ccc0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
98 changed files with 1038 additions and 1551 deletions
Download patch file Download diff file Expand all files Collapse all files

47
space/components/views/auth.tsx
View file

@ -1,3 +1,5 @@
"use client";
import { observer } from "mobx-react-lite";
import Image from "next/image";
// ui
@ -5,7 +7,7 @@ import { useTheme } from "next-themes";
import useSWR from "swr";
import { Spinner } from "@plane/ui";
// components
import { AuthRoot, UserLoggedIn } from "@/components/accounts";
import { AuthRoot } from "@/components/accounts";
// hooks
import { useUser } from "@/hooks/store";
// images
@ -17,12 +19,15 @@ export const AuthView = observer(() => {
// hooks
const { resolvedTheme } = useTheme();
// store
const { data: currentUser, fetchCurrentUser, isLoading } = useUser();
const { fetchCurrentUser, isLoading } = useUser();
// fetching user information
const { isLoading: isSWRLoading } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
shouldRetryOnError: false,
revalidateOnFocus: false,
revalidateIfStale: false,
revalidateOnReconnect: true,
errorRetryCount: 1,
});
return (
@ -33,30 +38,26 @@ export const AuthView = observer(() => {
</div>
) : (
<>
{currentUser ? (
<UserLoggedIn />
) : (
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-full h-full object-cover"
alt="Plane background pattern"
/>
<div className="relative w-screen h-screen overflow-hidden">
<div className="absolute inset-0 z-0">
<Image
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
className="w-full h-full object-cover"
alt="Plane background pattern"
/>
</div>
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
<div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
<AuthRoot />
</div>
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
<AuthRoot />
</div>
</div>
)}
</div>
</>
)}
</>

67
space/components/views/project-details.tsx
View file

@ -1,7 +1,10 @@
import { useEffect } from "react";
"use client";
import { FC, useEffect } from "react";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import { useRouter } from "next/router";
import { useParams } from "next/navigation";
import useSWR from "swr";
// components
import { IssueCalendarView } from "@/components/issues/board-views/calendar";
import { IssueGanttView } from "@/components/issues/board-views/gantt";
@ -11,16 +14,31 @@ import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadshee
import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
import { IssuePeekOverview } from "@/components/issues/peek-overview";
// mobx store
import { useMobxStore, useUser } from "@/hooks/store";
import { RootStore } from "@/store/root.store";
import { useIssue, useUser, useProject, useIssueDetails } from "@/hooks/store";
// assets
import SomethingWentWrongImage from "public/something-went-wrong.svg";
export const ProjectDetailsView = observer(() => {
const router = useRouter();
const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
type ProjectDetailsViewProps = {
workspaceSlug: string;
projectId: string;
peekId: string;
};
const { issue: issueStore, project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
const { workspaceSlug, projectId, peekId } = props;
// router
const params = useParams();
// store hooks
const { fetchPublicIssues } = useIssue();
const { activeLayout } = useProject();
// fetching public issues
useSWR(
workspaceSlug && projectId ? "PROJECT_PUBLIC_ISSUES" : null,
workspaceSlug && projectId ? () => fetchPublicIssues(workspaceSlug, projectId, params) : null
);
// store hooks
const issueStore = useIssue();
const issueDetailStore = useIssueDetails();
const { data: currentUser, fetchCurrentUser } = useUser();
useEffect(() => {
@ -30,25 +48,14 @@ export const ProjectDetailsView = observer(() => {
}, [currentUser, fetchCurrentUser]);
useEffect(() => {
if (workspace_slug && project_slug) {
const params = {
state: states || null,
labels: labels || null,
priority: priorities || null,
};
issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
}
}, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
useEffect(() => {
if (peekId && workspace_slug && project_slug) {
if (peekId && workspaceSlug && projectId) {
issueDetailStore.setPeekId(peekId.toString());
}
}, [peekId, issueDetailStore, project_slug, workspace_slug]);
}, [peekId, issueDetailStore, projectId, workspaceSlug]);
return (
<div className="relative h-full w-full overflow-hidden">
{workspace_slug && <IssuePeekOverview />}
{workspaceSlug && <IssuePeekOverview />}
{issueStore?.loader && !issueStore.issues ? (
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
@ -67,24 +74,24 @@ export const ProjectDetailsView = observer(() => {
</div>
</div>
) : (
projectStore?.activeBoard && (
activeLayout && (
<div className="relative flex h-full w-full flex-col overflow-hidden">
{/* applied filters */}
<IssueAppliedFilters />
{projectStore?.activeBoard === "list" && (
{activeLayout === "list" && (
<div className="relative h-full w-full overflow-y-auto">
<IssueListView />
<IssueListView workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
)}
{projectStore?.activeBoard === "kanban" && (
{activeLayout === "kanban" && (
<div className="relative mx-auto h-full w-full p-5">
<IssueKanbanView />
<IssueKanbanView workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
)}
{projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
{projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
{projectStore?.activeBoard === "gantt" && <IssueGanttView />}
{activeLayout === "calendar" && <IssueCalendarView />}
{activeLayout === "spreadsheet" && <IssueSpreadsheetView />}
{activeLayout === "gantt" && <IssueGanttView />}
</div>
)
)}