-
+
+
+
+
+
)}
diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx
index ef51a4512..d9a9d9f59 100644
--- a/space/components/views/project-details.tsx
+++ b/space/components/views/project-details.tsx
@@ -1,7 +1,9 @@
-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 useSWR from "swr";
// components
import { IssueCalendarView } from "@/components/issues/board-views/calendar";
import { IssueGanttView } from "@/components/issues/board-views/gantt";
@@ -11,16 +13,30 @@ 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;
+ params: any;
+};
- const { issue: issueStore, project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+export const ProjectDetailsView: FC
= observer((props) => {
+ const { workspaceSlug, projectId, params } = props;
+ const { states, labels, priorities, peekId } = params;
+ // 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
+ );
+
+ const issueStore = useIssue();
+ const issueDetailStore = useIssueDetails();
const { data: currentUser, fetchCurrentUser } = useUser();
useEffect(() => {
@@ -30,25 +46,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 (
- {workspace_slug &&
}
+ {workspaceSlug &&
}
{issueStore?.loader && !issueStore.issues ? (
Loading...
@@ -67,24 +72,24 @@ export const ProjectDetailsView = observer(() => {
) : (
- projectStore?.activeBoard && (
+ activeLayout && (
{/* applied filters */}
- {projectStore?.activeBoard === "list" && (
+ {activeLayout === "list" && (
)}
- {projectStore?.activeBoard === "kanban" && (
+ {activeLayout === "kanban" && (
)}
- {projectStore?.activeBoard === "calendar" &&
}
- {projectStore?.activeBoard === "spreadsheet" &&
}
- {projectStore?.activeBoard === "gantt" &&
}
+ {activeLayout === "calendar" &&
}
+ {activeLayout === "spreadsheet" &&
}
+ {activeLayout === "gantt" &&
}
)
)}
diff --git a/space/constants/issue.ts b/space/constants/issue.ts
new file mode 100644
index 000000000..147d840fc
--- /dev/null
+++ b/space/constants/issue.ts
@@ -0,0 +1,20 @@
+import { ILayoutDisplayFiltersOptions } from "@/types/issue-filters";
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+ [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
+} = {
+ issues: {
+ list: {
+ filters: ["priority", "state", "labels"],
+ display_properties: null,
+ display_filters: null,
+ extra_options: null,
+ },
+ kanban: {
+ filters: ["priority", "state", "labels"],
+ display_properties: null,
+ display_filters: null,
+ extra_options: null,
+ },
+ },
+};
diff --git a/space/helpers/common.helper.ts b/space/helpers/common.helper.ts
index 99e04e559..c6b305ef1 100644
--- a/space/helpers/common.helper.ts
+++ b/space/helpers/common.helper.ts
@@ -12,4 +12,9 @@ export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
export const ASSET_PREFIX = SPACE_BASE_PATH;
+export const ADMIN_BASE_URL = process.env.NEXT_PUBLIC_ADMIN_BASE_URL ?? "";
+export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH ?? "";
+
+export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL ?? "";
+
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/space/hooks/store/index.ts b/space/hooks/store/index.ts
index 3b7ef07c9..76b6f9315 100644
--- a/space/hooks/store/index.ts
+++ b/space/hooks/store/index.ts
@@ -1,4 +1,7 @@
-export * from "./user-mobx-provider";
-
export * from "./use-instance";
-export * from "./user";
+export * from "./use-project";
+export * from "./use-issue";
+export * from "./use-user";
+export * from "./use-user-profile";
+export * from "./use-issue-details";
+export * from "./use-issue-filter";
diff --git a/space/hooks/store/use-instance.ts b/space/hooks/store/use-instance.ts
index 92165e2bb..62aa0baae 100644
--- a/space/hooks/store/use-instance.ts
+++ b/space/hooks/store/use-instance.ts
@@ -1,10 +1,11 @@
import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
// store
-import { StoreContext } from "@/lib/store-context";
import { IInstanceStore } from "@/store/instance.store";
export const useInstance = (): IInstanceStore => {
const context = useContext(StoreContext);
- if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
+ if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
return context.instance;
};
diff --git a/space/hooks/store/use-issue-details.tsx b/space/hooks/store/use-issue-details.tsx
new file mode 100644
index 000000000..56ee48627
--- /dev/null
+++ b/space/hooks/store/use-issue-details.tsx
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueDetailStore } from "@/store/issue-detail.store";
+
+export const useIssueDetails = (): IIssueDetailStore => {
+ const context = useContext(StoreContext);
+ if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+ return context.issueDetail;
+};
diff --git a/space/hooks/store/use-issue-filter.ts b/space/hooks/store/use-issue-filter.ts
new file mode 100644
index 000000000..a80d9761b
--- /dev/null
+++ b/space/hooks/store/use-issue-filter.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueFilterStore } from "@/store/issue-filters.store";
+
+export const useIssueFilter = (): IIssueFilterStore => {
+ const context = useContext(StoreContext);
+ if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+ return context.issueFilter;
+};
diff --git a/space/hooks/store/use-issue.ts b/space/hooks/store/use-issue.ts
new file mode 100644
index 000000000..8ccd95ac4
--- /dev/null
+++ b/space/hooks/store/use-issue.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IIssueStore } from "@/store/issue.store";
+
+export const useIssue = (): IIssueStore => {
+ const context = useContext(StoreContext);
+ if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+ return context.issue;
+};
diff --git a/space/hooks/store/use-project.ts b/space/hooks/store/use-project.ts
new file mode 100644
index 000000000..0bc7d8f8a
--- /dev/null
+++ b/space/hooks/store/use-project.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
+// store
+import { IProjectStore } from "@/store/project.store";
+
+export const useProject = (): IProjectStore => {
+ const context = useContext(StoreContext);
+ if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+ return context.project;
+};
diff --git a/space/hooks/store/user/use-user-profile.ts b/space/hooks/store/use-user-profile.ts
similarity index 62%
rename from space/hooks/store/user/use-user-profile.ts
rename to space/hooks/store/use-user-profile.ts
index 5b1d8149d..042f16c0d 100644
--- a/space/hooks/store/user/use-user-profile.ts
+++ b/space/hooks/store/use-user-profile.ts
@@ -1,10 +1,11 @@
import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
// store
-import { StoreContext } from "@/lib/store-context";
-import { IProfileStore } from "@/store/user/profile.store";
+import { IProfileStore } from "@/store/profile.store";
export const useUserProfile = (): IProfileStore => {
const context = useContext(StoreContext);
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
- return context.user.userProfile;
+ return context.user.profile;
};
diff --git a/space/hooks/store/user/use-user.ts b/space/hooks/store/use-user.ts
similarity index 69%
rename from space/hooks/store/user/use-user.ts
rename to space/hooks/store/use-user.ts
index e491d88a2..c935946f8 100644
--- a/space/hooks/store/user/use-user.ts
+++ b/space/hooks/store/use-user.ts
@@ -1,7 +1,8 @@
import { useContext } from "react";
+// lib
+import { StoreContext } from "@/lib/app-providers";
// store
-import { StoreContext } from "@/lib/store-context";
-import { IUserStore } from "@/store/user";
+import { IUserStore } from "@/store/user.store";
export const useUser = (): IUserStore => {
const context = useContext(StoreContext);
diff --git a/space/hooks/store/user-mobx-provider.ts b/space/hooks/store/user-mobx-provider.ts
deleted file mode 100644
index 4fbc5591f..000000000
--- a/space/hooks/store/user-mobx-provider.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-// store
-import { StoreContext } from "@/lib/store-context";
-import { RootStore } from "@/store/root.store";
-
-export const useMobxStore = (): RootStore => {
- const context = useContext(StoreContext);
- if (context === undefined) throw new Error("useMobxStore must be used within StoreProvider");
- return context;
-};
diff --git a/space/hooks/store/user/index.ts b/space/hooks/store/user/index.ts
deleted file mode 100644
index 72660f100..000000000
--- a/space/hooks/store/user/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./use-user";
-export * from "./use-user-profile";
diff --git a/space/layouts/project-layout.tsx b/space/layouts/project-layout.tsx
deleted file mode 100644
index 0411bcbcc..000000000
--- a/space/layouts/project-layout.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-// components
-import IssueNavbar from "@/components/issues/navbar";
-// logo
-import planeLogo from "public/plane-logo.svg";
-
-const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
-
-);
-
-export default observer(ProjectLayout);
diff --git a/space/lib/app-providers.tsx b/space/lib/app-providers.tsx
new file mode 100644
index 000000000..389d68ab2
--- /dev/null
+++ b/space/lib/app-providers.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { ReactNode, createContext } from "react";
+import { ThemeProvider } from "next-themes";
+// store
+import { RootStore } from "@/store/root.store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext(rootStore);
+
+function initializeStore(initialData = {}) {
+ const singletonRootStore = rootStore ?? new RootStore();
+ // If your page has Next.js data fetching methods that use a Mobx store, it will
+ // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+ if (initialData) {
+ singletonRootStore.hydrate(initialData);
+ }
+ // For SSG and SSR always create a new store
+ if (typeof window === "undefined") return singletonRootStore;
+ // Create the store once in the client
+ if (!rootStore) rootStore = singletonRootStore;
+ return singletonRootStore;
+}
+
+export type AppProviderProps = {
+ children: ReactNode;
+ initialState: any;
+};
+
+export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
+ const store = initializeStore(initialState);
+ return (
+
+ {children}
+
+ );
+};
diff --git a/space/lib/index.ts b/space/lib/index.ts
deleted file mode 100644
index a10356821..000000000
--- a/space/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const init = {};
diff --git a/space/lib/store-context.tsx b/space/lib/store-context.tsx
deleted file mode 100644
index 1eff1ddde..000000000
--- a/space/lib/store-context.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ReactElement, createContext } from "react";
-// mobx store
-import { RootStore } from "@/store/root.store";
-
-export let rootStore = new RootStore();
-
-export const StoreContext = createContext
(rootStore);
-
-const initializeStore = () => {
- const singletonRootStore = rootStore ?? new RootStore();
- if (typeof window === "undefined") return singletonRootStore;
- if (!rootStore) rootStore = singletonRootStore;
- return singletonRootStore;
-};
-
-export const StoreProvider = ({ children }: { children: ReactElement }) => {
- const store = initializeStore();
- return {children};
-};
diff --git a/space/lib/wrappers/auth-wrapper.tsx b/space/lib/wrappers/auth-wrapper.tsx
index 3b49e80d5..ba1fae2e5 100644
--- a/space/lib/wrappers/auth-wrapper.tsx
+++ b/space/lib/wrappers/auth-wrapper.tsx
@@ -1,6 +1,6 @@
import { FC, ReactNode } from "react";
import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
import useSWR from "swr";
import { Spinner } from "@plane/ui";
// helpers
diff --git a/space/package.json b/space/package.json
index a10d190d2..48fe001b7 100644
--- a/space/package.json
+++ b/space/package.json
@@ -22,6 +22,7 @@
"@plane/rich-text-editor": "*",
"@plane/types": "*",
"@plane/ui": "*",
+ "@plane/constants": "*",
"@sentry/nextjs": "^7.108.0",
"axios": "^1.3.4",
"clsx": "^2.0.0",
diff --git a/space/pages/404.tsx b/space/pages/404.tsx
deleted file mode 100644
index 4591f71f8..000000000
--- a/space/pages/404.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// next imports
-import { observer } from "mobx-react-lite";
-import Image from "next/image";
-// hooks
-import { useInstance } from "@/hooks/store";
-// images
-import notFoundImage from "public/404.svg";
-
-const Custom404Error = observer(() => {
- // hooks
- const { instance } = useInstance();
-
- const redirectionUrl = instance?.config?.app_base_url || "/";
-
- return (
-
-
-
-
-
-
-
Oops! Something went wrong.
-
- Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
- temporarily unavailable.
-
-
-
-
-
-
Plane Workspace Space
-);
-
-export default WorkspaceProjectPage;
diff --git a/space/pages/_app.tsx b/space/pages/_app.tsx
deleted file mode 100644
index 363b61510..000000000
--- a/space/pages/_app.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { AppProps } from "next/app";
-import Head from "next/head";
-import { ThemeProvider } from "next-themes";
-// styles
-import "@/styles/globals.css";
-// contexts
-import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
-import { ToastContextProvider } from "@/contexts/toast.context";
-// mobx store provider
-import { StoreProvider } from "@/lib/store-context";
-// wrappers
-import { InstanceWrapper } from "@/lib/wrappers";
-
-const prefix = "/spaces/";
-
-function MyApp({ Component, pageProps }: AppProps) {
- return (
- <>
-
- {SITE_TITLE}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default MyApp;
diff --git a/space/pages/_document.tsx b/space/pages/_document.tsx
deleted file mode 100644
index ae4455438..000000000
--- a/space/pages/_document.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-
-class MyDocument extends Document {
- render() {
- return (
-
-
-
-
-
-
-
-
- );
- }
-}
-
-export default MyDocument;
diff --git a/space/pages/accounts/forgot-password.tsx b/space/pages/accounts/forgot-password.tsx
deleted file mode 100644
index 494eae9d3..000000000
--- a/space/pages/accounts/forgot-password.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { NextPage } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useTheme } from "next-themes";
-import { Controller, useForm } from "react-hook-form";
-// icons
-import { CircleCheck } from "lucide-react";
-// ui
-import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
-import { cn } from "@/helpers/common.helper";
-import { checkEmailValidity } from "@/helpers/string.helper";
-// hooks
-import useTimer from "@/hooks/use-timer";
-// wrappers
-import { AuthWrapper } from "@/lib/wrappers";
-// services
-import { AuthService } from "@/services/authentication.service";
-// images
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-
-type TForgotPasswordFormValues = {
- email: string;
-};
-
-const defaultValues: TForgotPasswordFormValues = {
- email: "",
-};
-
-// services
-const authService = new AuthService();
-
-const ForgotPasswordPage: NextPage = () => {
- // router
- const router = useRouter();
- const { email } = router.query;
- // hooks
- const { resolvedTheme } = useTheme();
- // timer
- const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
-
- // form info
- const {
- control,
- formState: { errors, isSubmitting, isValid },
- handleSubmit,
- } = useForm
({
- defaultValues: {
- ...defaultValues,
- email: email?.toString() ?? "",
- },
- });
-
- const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
- await authService
- .sendResetPasswordLink({
- email: formData.email,
- })
- .then(() => {
- setToast({
- type: TOAST_TYPE.SUCCESS,
- title: "Email sent",
- message:
- "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
- });
- setResendCodeTimer(30);
- })
- .catch((err: any) => {
- setToast({
- type: TOAST_TYPE.ERROR,
- title: "Error!",
- message: err?.error ?? "Something went wrong. Please try again.",
- });
- });
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- Reset your password
-
-
- Enter your user account{"'"}s verified email address and we will send you a password reset link.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Set new password
-
-
Secure your account with a strong password
-
-
-
-
-
-
-
-
-
-
-
-
-
- {user?.avatar && (
-
- )}
-
- {user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-
-
-
-
-
-
-
-
Welcome to Plane!
-
- Let’s setup your profile, tell us a bit about yourself.
-
-
-
-
-
-
-
-
- {user?.avatar && (
-
- )}
-
- {user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
-
-
- If this is your project, login to your workspace to adjust its visibility settings and make it public.
-
-
-
-
-
-