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) ) : ( plane logo )}
- {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; -}