fix: mobx changes

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 (
     <div className="px-5 relative w-full flex items-center gap-4">
       {/* project detail */}
       <div className="flex-shrink-0 flex items-center gap-2">
         <div className="w-[32px] h-[32px] rounded-sm flex justify-center items-center text-[24px]">
-          {store?.project?.project && store?.project?.project?.emoji ? (
-            renderEmoji(store?.project?.project?.emoji)
+          {projectStore?.project && projectStore?.project?.emoji ? (
+            renderEmoji(projectStore?.project?.emoji)
           ) : (
             <Image src="/plane-logo.webp" alt="plane logo" className="w-[24px] h-[24px]" height="24" width="24" />
           )}
         </div>
         <div className="font-medium text-lg max-w-[300px] line-clamp-1 overflow-hidden">
-          {store?.project?.project?.name || `...`}
+          {projectStore?.project?.name || `...`}
         </div>
       </div>
 
@@ -49,7 +60,6 @@ const IssueNavbar = observer(() => {
       {/* issue filters */}
       <div className="flex-shrink-0 relative flex items-center gap-2">
         <NavbarIssueFilter />
-        {/* <NavbarIssueView /> */}
       </div>
 
       {/* issue views */}

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 (
     <div className="relative w-full h-full overflow-hidden">
       {workspace_slug && (
         <IssuePeekOverview
           isOpen={Boolean(activeIssueId)}
-          onClose={() => 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 ? (
         <div className="text-sm text-center py-10 text-custom-text-100">Loading...</div>
       ) : (
         <>
-          {store?.issue?.error ? (
+          {issueStore?.error ? (
             <div className="text-sm text-center py-10  bg-custom-background-200 text-custom-text-100">
               Something went wrong.
             </div>
           ) : (
-            store?.issue?.currentIssueBoardView && (
+            issueStore?.currentIssueBoardView && (
               <>
-                {store?.issue?.currentIssueBoardView === "list" && (
+                {issueStore?.currentIssueBoardView === "list" && (
                   <div className="relative w-full h-full overflow-y-auto">
                     <div className="mx-auto px-4">
                       <IssueListView />
                     </div>
                   </div>
                 )}
-                {store?.issue?.currentIssueBoardView === "kanban" && (
+                {issueStore?.currentIssueBoardView === "kanban" && (
                   <div className="relative w-full h-full mx-auto px-9 py-5">
                     <IssueKanbanView />
                   </div>
                 )}
-                {store?.issue?.currentIssueBoardView === "calendar" && <IssueCalendarView />}
-                {store?.issue?.currentIssueBoardView === "spreadsheet" && <IssueSpreadsheetView />}
-                {store?.issue?.currentIssueBoardView === "gantt" && <IssueGanttView />}
+                {issueStore?.currentIssueBoardView === "calendar" && <IssueCalendarView />}
+                {issueStore?.currentIssueBoardView === "spreadsheet" && <IssueSpreadsheetView />}
+                {issueStore?.currentIssueBoardView === "gantt" && <IssueGanttView />}
               </>
             )
           )}

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 }) => (
   <div className="relative w-screen min-h-[500px] h-screen overflow-hidden flex flex-col">
     <div className="flex-shrink-0 h-[60px] border-b border-gray-300 relative flex items-center bg-white select-none">
@@ -28,4 +25,4 @@ const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
   </div>
 );
 
-export default ProjectLayout;
+export default observer(ProjectLayout);

apps/space/pages/[workspace_slug]/[project_slug]/index.tsx

@@ -109,12 +109,12 @@ const WorkspaceProjectPage = (props: any) => {
   );
 };
 
-export const getServerSideProps: GetServerSideProps<any> = 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<any> = 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;

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<any> {
+  async getProjectSettings(workspace_slug: string, project_slug: string): Promise<any> {
     return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/settings/`)
       .then((response) => response?.data)
       .catch((error) => {

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<void>;
+  getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IssueDetailType>;
+}
 
-// 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;

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<void>;
+}
 
 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;
         });
       }

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() {

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<void>;
-
-  getIssueByIdAsync: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IssueDetailType>;
-}

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<void>;
-}