diff --git a/apps/space/components/issues/navbar/index.tsx b/apps/space/components/issues/navbar/index.tsx
index 86f6b384e..d17827cea 100644
--- a/apps/space/components/issues/navbar/index.tsx
+++ b/apps/space/components/issues/navbar/index.tsx
@@ -9,6 +9,8 @@ import { observer } from "mobx-react-lite";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
const renderEmoji = (emoji: string | { name: string; color: string }) => {
if (!emoji) return;
@@ -23,21 +25,30 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
};
const IssueNavbar = observer(() => {
- const store: RootStore = useMobxStore();
+ const { project: projectStore }: RootStore = useMobxStore();
+ // router
+ const router = useRouter();
+ const { workspace_slug, project_slug } = router.query;
+
+ useEffect(() => {
+ if (workspace_slug && project_slug) {
+ projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
+ }
+ }, [projectStore, workspace_slug, project_slug]);
return (
{/* project detail */}
- {store?.project?.project && store?.project?.project?.emoji ? (
- renderEmoji(store?.project?.project?.emoji)
+ {projectStore?.project && projectStore?.project?.emoji ? (
+ renderEmoji(projectStore?.project?.emoji)
) : (
)}
- {store?.project?.project?.name || `...`}
+ {projectStore?.project?.name || `...`}
@@ -49,7 +60,6 @@ const IssueNavbar = observer(() => {
{/* issue filters */}
- {/* */}
{/* issue views */}
diff --git a/apps/space/components/views/project-details.tsx b/apps/space/components/views/project-details.tsx
index f40bb1d0a..eaadff13a 100644
--- a/apps/space/components/views/project-details.tsx
+++ b/apps/space/components/views/project-details.tsx
@@ -10,52 +10,64 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
// mobx store
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
+import { useEffect } from "react";
export const ProjectDetailsView = () => {
const router = useRouter();
- const { workspace_slug } = router.query;
+ const { workspace_slug, project_slug, states, labels, priorities } = router.query;
- const store: RootStore = useMobxStore();
+ const { issue: issueStore }: RootStore = useMobxStore();
- const activeIssueId = store.issue.activePeekOverviewIssueId;
+ const activeIssueId = issueStore.activePeekOverviewIssueId;
+
+ 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]);
return (
{workspace_slug && (
store.issue.setActivePeekOverviewIssueId(null)}
- issue={store?.issue?.issues?.find((_issue) => _issue.id === activeIssueId) || null}
+ onClose={() => issueStore.setActivePeekOverviewIssueId(null)}
+ issue={issueStore?.issues?.find((_issue) => _issue.id === activeIssueId) || null}
workspaceSlug={workspace_slug.toString()}
/>
)}
- {store?.issue?.loader && !store.issue.issues ? (
+ {issueStore?.loader && !issueStore.issues ? (
Loading...
) : (
<>
- {store?.issue?.error ? (
+ {issueStore?.error ? (
Something went wrong.
) : (
- store?.issue?.currentIssueBoardView && (
+ issueStore?.currentIssueBoardView && (
<>
- {store?.issue?.currentIssueBoardView === "list" && (
+ {issueStore?.currentIssueBoardView === "list" && (
)}
- {store?.issue?.currentIssueBoardView === "kanban" && (
+ {issueStore?.currentIssueBoardView === "kanban" && (
)}
- {store?.issue?.currentIssueBoardView === "calendar" && }
- {store?.issue?.currentIssueBoardView === "spreadsheet" && }
- {store?.issue?.currentIssueBoardView === "gantt" && }
+ {issueStore?.currentIssueBoardView === "calendar" && }
+ {issueStore?.currentIssueBoardView === "spreadsheet" && }
+ {issueStore?.currentIssueBoardView === "gantt" && }
>
)
)}
diff --git a/apps/space/layouts/project-layout.tsx b/apps/space/layouts/project-layout.tsx
index 2de2a75eb..7d5990666 100644
--- a/apps/space/layouts/project-layout.tsx
+++ b/apps/space/layouts/project-layout.tsx
@@ -1,12 +1,9 @@
import Link from "next/link";
import Image from "next/image";
+import { observer } from "mobx-react-lite";
// components
import IssueNavbar from "components/issues/navbar";
-type LayoutProps = {
- params: { workspace_slug: string; project_slug: string };
-};
-
const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
@@ -28,4 +25,4 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
);
-export default ProjectLayout;
+export default observer(ProjectLayout);
diff --git a/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
index 5d29e60f2..18451fbf9 100644
--- a/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
+++ b/apps/space/pages/[workspace_slug]/[project_slug]/index.tsx
@@ -109,12 +109,12 @@ const WorkspaceProjectPage = (props: any) => {
);
};
-export const getServerSideProps: GetServerSideProps
= async ({ query: { workspace_slug, project_slug } }) => {
- const res = await fetch(
- `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`
- );
- const project_settings = await res.json();
- return { props: { project_settings } };
-};
+// export const getServerSideProps: GetServerSideProps = async ({ query: { workspace_slug, project_slug } }) => {
+// const res = await fetch(
+// `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`
+// );
+// const project_settings = await res.json();
+// return { props: { project_settings } };
+// };
export default WorkspaceProjectPage;
diff --git a/apps/space/services/project.service.ts b/apps/space/services/project.service.ts
index 6f0275877..291a5f323 100644
--- a/apps/space/services/project.service.ts
+++ b/apps/space/services/project.service.ts
@@ -6,7 +6,7 @@ class ProjectService extends APIService {
super(process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
- async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise {
+ async getProjectSettings(workspace_slug: string, project_slug: string): Promise {
return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
.then((response) => response?.data)
.catch((error) => {
diff --git a/apps/space/store/issue.ts b/apps/space/store/issue.ts
index 3b61800ce..48b13d62c 100644
--- a/apps/space/store/issue.ts
+++ b/apps/space/store/issue.ts
@@ -4,9 +4,41 @@ import { observable, action, computed, makeObservable, runInAction, reaction } f
import IssueService from "services/issue.service";
// types
import { IssueDetailType, TIssueBoardKeys } from "store/types/issue";
-import { IIssueStore, IIssue, IIssueState, IIssueLabel } from "./types";
+import { IIssue, IIssueState, IIssueLabel } from "./types";
+
+export interface IIssueStore {
+ currentIssueBoardView: TIssueBoardKeys | null;
+ loader: boolean;
+ error: any | null;
+ states: IIssueState[] | null;
+ labels: IIssueLabel[] | null;
+ issues: IIssue[] | null;
+ issue_detail: IssueDetailType;
+ userSelectedStates: string[];
+ userSelectedLabels: string[];
+ userSelectedPriorities: string[];
+ activePeekOverviewIssueId: string | null;
+ getCountOfIssuesByState: (state: string) => number;
+ getFilteredIssuesByState: (state: string) => IIssue[];
+ getUserSelectedFilter: (key: "state" | "priority" | "label", value: string) => boolean;
+ checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean;
+ clearUserSelectedFilter: (key: "state" | "priority" | "label" | "all") => void;
+ getIfFiltersIsEmpty: () => boolean;
+ getURLDefinition: (
+ workspaceSlug: string,
+ projectId: string,
+ action?: {
+ key: "state" | "priority" | "label" | "all";
+ value?: string;
+ removeAll?: boolean;
+ }
+ ) => string;
+ setActivePeekOverviewIssueId: (value: any) => void;
+ setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
+ fetchPublicIssues: (workspaceSlug: string, projectId: string, params: any) => Promise;
+ getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise;
+}
-// class IssueStore implements IIssueStore {
class IssueStore {
currentIssueBoardView: TIssueBoardKeys | null = null;
@@ -49,7 +81,7 @@ class IssueStore {
userSelectedPriorities: observable.ref,
// action
setCurrentIssueBoardView: action,
- getIssuesAsync: action,
+ fetchPublicIssues: action,
// computed
});
@@ -167,7 +199,7 @@ class IssueStore {
this.currentIssueBoardView = view;
};
- getIssuesAsync = async (workspaceSlug: string, projectId: string, params: any) => {
+ fetchPublicIssues = async (workspaceSlug: string, projectId: string, params: any) => {
try {
this.loader = true;
this.error = null;
diff --git a/apps/space/store/project.ts b/apps/space/store/project.ts
index e5ac58261..04babefe0 100644
--- a/apps/space/store/project.ts
+++ b/apps/space/store/project.ts
@@ -3,15 +3,26 @@ import { observable, action, makeObservable, runInAction } from "mobx";
// service
import ProjectService from "services/project.service";
// types
-import { IProjectStore, IWorkspace, IProject, IProjectSettings } from "./types";
+import { IWorkspace, IProject, IProjectSettings } from "./types";
+
+export interface IProjectStore {
+ loader: boolean;
+ error: any | null;
+ workspace: IWorkspace | null;
+ project: IProject | null;
+ projectDeploySettings: IProjectSettings | null;
+ viewOptions: any;
+ fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise;
+}
class ProjectStore implements IProjectStore {
loader: boolean = false;
error: any | null = null;
-
+ // data
workspace: IWorkspace | null = null;
project: IProject | null = null;
- workspaceProjectSettings: IProjectSettings | null = null;
+ projectDeploySettings: IProjectSettings | null = null;
+ viewOptions: any = null;
// root store
rootStore;
// service
@@ -19,14 +30,16 @@ class ProjectStore implements IProjectStore {
constructor(_rootStore: any | null = null) {
makeObservable(this, {
+ // loaders and error observables
+ loader: observable,
+ error: observable.ref,
// observable
workspace: observable.ref,
project: observable.ref,
- workspaceProjectSettings: observable.ref,
- loader: observable,
- error: observable.ref,
- // action
- getProjectSettingsAsync: action,
+ projectDeploySettings: observable.ref,
+ viewOptions: observable.ref,
+ // actions
+ fetchProjectSettings: action,
// computed
});
@@ -34,26 +47,21 @@ class ProjectStore implements IProjectStore {
this.projectService = new ProjectService();
}
- getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
+ fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
try {
this.loader = true;
this.error = null;
- const response = await this.projectService.getProjectSettingsAsync(workspace_slug, project_slug);
+ const response = await this.projectService.getProjectSettings(workspace_slug, project_slug);
if (response) {
const _project: IProject = { ...response?.project_details };
const _workspace: IWorkspace = { ...response?.workspace_detail };
- const _workspaceProjectSettings: IProjectSettings = {
- comments: response?.comments,
- reactions: response?.reactions,
- votes: response?.votes,
- views: { ...response?.views },
- };
+ const _viewOptions = { ...response?.views };
runInAction(() => {
this.project = _project;
this.workspace = _workspace;
- this.workspaceProjectSettings = _workspaceProjectSettings;
+ this.viewOptions = _viewOptions;
this.loader = false;
});
}
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
index 3e4497aaa..93d044ea4 100644
--- a/apps/space/store/root.ts
+++ b/apps/space/store/root.ts
@@ -3,17 +3,17 @@ import { enableStaticRendering } from "mobx-react-lite";
// store imports
import UserStore from "./user";
import ThemeStore from "./theme";
-import IssueStore from "./issue";
-import ProjectStore from "./project";
+import IssueStore, { IIssueStore } from "./issue";
+import ProjectStore, { IProjectStore } from "./project";
// types
-import { IIssueStore, IProjectStore, IThemeStore } from "./types";
+import { IThemeStore } from "./types";
enableStaticRendering(typeof window === "undefined");
export class RootStore {
user: UserStore;
theme: IThemeStore;
- issue: IssueStore;
+ issue: IIssueStore;
project: IProjectStore;
constructor() {
diff --git a/apps/space/store/types/issue.ts b/apps/space/store/types/issue.ts
index 0b3a6107c..bf05ef797 100644
--- a/apps/space/store/types/issue.ts
+++ b/apps/space/store/types/issue.ts
@@ -143,45 +143,3 @@ export interface IssueDetailType {
votes: any[];
};
}
-
-export interface IIssueStore {
- currentIssueBoardView: TIssueBoardKeys | null;
- loader: boolean;
- error: any | null;
-
- states: IIssueState[] | null;
- labels: IIssueLabel[] | null;
- issues: IIssue[] | null;
-
- issue_detail: IssueDetailType;
-
- userSelectedStates: string[];
- userSelectedLabels: string[];
- userSelectedPriorities: string[];
-
- getCountOfIssuesByState: (state: string) => number;
- getFilteredIssuesByState: (state: string) => IIssue[];
-
- getUserSelectedFilter: (key: "state" | "priority" | "label", value: string) => boolean;
-
- checkIfFilterExistsForKey: (key: "state" | "priority" | "label") => boolean;
-
- clearUserSelectedFilter: (key: "state" | "priority" | "label" | "all") => void;
-
- getIfFiltersIsEmpty: () => boolean;
-
- getURLDefinition: (
- workspaceSlug: string,
- projectId: string,
- action?: {
- key: "state" | "priority" | "label" | "all";
- value?: string;
- removeAll?: boolean;
- }
- ) => string;
-
- setCurrentIssueBoardView: (view: TIssueBoardKeys) => void;
- getIssuesAsync: (workspaceSlug: string, projectId: string, params: any) => Promise;
-
- getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise;
-}
diff --git a/apps/space/store/types/project.ts b/apps/space/store/types/project.ts
index 41f4c2f44..e0e1bba9e 100644
--- a/apps/space/store/types/project.ts
+++ b/apps/space/store/types/project.ts
@@ -27,14 +27,3 @@ export interface IProjectSettings {
spreadsheet: boolean;
};
}
-
-export interface IProjectStore {
- loader: boolean;
- error: any | null;
-
- workspace: IWorkspace | null;
- project: IProject | null;
- workspaceProjectSettings: IProjectSettings | null;
-
- getProjectSettingsAsync: (workspace_slug: string, project_slug: string) => Promise;
-}