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

* feat: changemod space * fix: space app dir fixes * fix: build errors
2024-05-14 14:26:54 +05:30 · 2024-05-14 14:26:54 +05:30 · febf19ccc0
commit febf19ccc0
parent 087d54a261
98 changed files with 1038 additions and 1551 deletions
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@ -1,53 +1,48 @@
 "use client";

-// mobx react lite
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useRouter, useSearchParams } from "next/navigation";
+// components
 import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
 import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
 import { IssueBlockState } from "@/components/issues/board-views/block-state";
-import { useMobxStore } from "@/hooks/store";
-
-// components
+// hooks
+import { useIssueDetails, useProject } from "@/hooks/store";
 // interfaces
-import { RootStore } from "@/store/root.store";
-import { IIssue } from "types/issue";
+import { IIssue } from "@/types/issue";

-export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
-  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+type IssueKanBanBlockProps = {
+  issue: IIssue;
+  workspaceSlug: string;
+  projectId: string;
+  params: any;
+};

+export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
+  const { workspaceSlug, projectId, params, issue } = props;
+  const { board, priorities, states, labels } = params;
+  // store
+  const { project } = useProject();
+  const { setPeekId } = useIssueDetails();
  // router
  const router = useRouter();
-  const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
-    workspace_slug: string;
-    project_slug: string;
-    board: string;
-    priorities: string;
-    states: string;
-    labels: string;
-  };
+  const searchParams = useSearchParams();

  const handleBlockClick = () => {
-    issueDetailStore.setPeekId(issue.id);
+    setPeekId(issue.id);
    const params: any = { board: board, peekId: issue.id };
    if (states && states.length > 0) params.states = states;
    if (priorities && priorities.length > 0) params.priorities = priorities;
    if (labels && labels.length > 0) params.labels = labels;
-    router.push(
-      {
-        pathname: `/${workspace_slug}/${project_slug}`,
-        query: { ...params },
-      },
-      undefined,
-      { shallow: true }
-    );
+    router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
  };

  return (
    <div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
      {/* id */}
      <div className="break-words text-xs text-custom-text-300">
-        {projectStore?.project?.identifier}-{issue?.sequence_id}
+        {project?.identifier}-{issue?.sequence_id}
      </div>

      {/* name */}
--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@ -1,18 +1,16 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// interfaces
-// constants
-import { StateGroupIcon } from "@plane/ui";
-import { issueGroupFilter } from "@/constants/data";
 // ui
+import { StateGroupIcon } from "@plane/ui";
+// constants
+import { issueGroupFilter } from "@/constants/data";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
-import { IIssueState } from "types/issue";
+import { useIssue } from "@/hooks/store";
+// interfaces
+import { IIssueState } from "@/types/issue";

 export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
-
+  const { getCountOfIssuesByState } = useIssue();
  const stateGroup = issueGroupFilter(state.group);

  if (stateGroup === null) return <></>;
@ -23,9 +21,7 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
      </div>
      <div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
-      <span className="flex-shrink-0 rounded-full text-custom-text-300">
-        {store.issue.getCountOfIssuesByState(state.id)}
-      </span>
+      <span className="flex-shrink-0 rounded-full text-custom-text-300">{getCountOfIssuesByState(state.id)}</span>
    </div>
  );
 });
--- a/space/components/issues/board-views/kanban/index.tsx
+++ b/space/components/issues/board-views/kanban/index.tsx
@ -1,36 +1,47 @@
 "use client";

-// mobx react lite
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueKanBanBlock } from "@/components/issues/board-views/kanban/block";
 import { IssueKanBanHeader } from "@/components/issues/board-views/kanban/header";
 // ui
 import { Icon } from "@/components/ui";
-// interfaces
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
-import { IIssueState, IIssue } from "types/issue";
+import { useIssue } from "@/hooks/store";
+// interfaces
+import { IIssueState, IIssue } from "@/types/issue";

-export const IssueKanbanView = observer(() => {
-  const store: RootStore = useMobxStore();
+type IssueKanbanViewProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { states, getFilteredIssuesByState } = useIssue();

  return (
    <div className="relative flex h-full w-full gap-3 overflow-hidden overflow-x-auto">
-      {store?.issue?.states &&
-        store?.issue?.states.length > 0 &&
-        store?.issue?.states.map((_state: IIssueState) => (
+      {states &&
+        states.length > 0 &&
+        states.map((_state: IIssueState) => (
          <div key={_state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
            <div className="flex-shrink-0">
              <IssueKanBanHeader state={_state} />
            </div>
            <div className="hide-vertical-scrollbar h-full w-full overflow-hidden overflow-y-auto">
-              {store.issue.getFilteredIssuesByState(_state.id) &&
-              store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
+              {getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
                <div className="space-y-3 px-2 pb-2">
-                  {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueKanBanBlock key={_issue.id} issue={_issue} />
+                  {getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                    <IssueKanBanBlock
+                      key={_issue.id}
+                      issue={_issue}
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      params={{}}
+                    />
                  ))}
                </div>
              ) : (
--- a/space/components/issues/board-views/list/block.tsx
+++ b/space/components/issues/board-views/list/block.tsx
@ -1,47 +1,40 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 // components
 import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
 import { IssueBlockLabels } from "@/components/issues/board-views/block-labels";
 import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
 import { IssueBlockState } from "@/components/issues/board-views/block-state";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
+import { useIssueDetails, useProject } from "@/hooks/store";
 // interfaces
-import { RootStore } from "@/store/root.store";
-import { IIssue } from "types/issue";
+import { IIssue } from "@/types/issue";
 // store

-export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
-  const { issue } = props;
+type IssueListBlockProps = {
+  issue: IIssue;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
+  const { workspaceSlug, projectId, issue } = props;
+  const { board, states, priorities, labels } = useParams<any>();
+  const searchParams = useSearchParams();
  // store
-  const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
+  const { project } = useProject();
+  const { setPeekId } = useIssueDetails();
  // router
  const router = useRouter();
-  const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
-    workspace_slug: string;
-    project_slug: string;
-    board: string;
-    priorities: string;
-    states: string;
-    labels: string;
-  };

  const handleBlockClick = () => {
-    issueDetailStore.setPeekId(issue.id);
+    setPeekId(issue.id);
    const params: any = { board: board, peekId: issue.id };
    if (states && states.length > 0) params.states = states;
    if (priorities && priorities.length > 0) params.priorities = priorities;
    if (labels && labels.length > 0) params.labels = labels;
-    router.push(
-      {
-        pathname: `/${workspace_slug}/${project_slug}`,
-        query: { ...params },
-      },
-      undefined,
-      { shallow: true }
-    );
+    router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
    // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
  };

@ -50,7 +43,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
      <div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
        {/* id */}
        <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
-          {projectStore?.project?.identifier}-{issue?.sequence_id}
+          {project?.identifier}-{issue?.sequence_id}
        </div>
        {/* name */}
        <div onClick={handleBlockClick} className="flex-grow cursor-pointer truncate text-sm font-medium">
--- a/space/components/issues/board-views/list/header.tsx
+++ b/space/components/issues/board-views/list/header.tsx
@ -1,18 +1,15 @@
-// mobx react lite
 import { observer } from "mobx-react-lite";
-// interfaces
 // ui
 import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "@/constants/data";
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
-import { RootStore } from "@/store/root.store";
-import { IIssueState } from "types/issue";
+import { useIssue } from "@/hooks/store";
+// types
+import { IIssueState } from "@/types/issue";

 export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
-  const store: RootStore = useMobxStore();
-
+  const { getCountOfIssuesByState } = useIssue();
  const stateGroup = issueGroupFilter(state.group);

  if (stateGroup === null) return <></>;
@ -23,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
      </div>
      <div className="mr-1 font-medium capitalize">{state?.name}</div>
-      <div className="text-sm font-medium text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="text-sm font-medium text-custom-text-200">{getCountOfIssuesByState(state.id)}</div>
    </div>
  );
 });
--- a/space/components/issues/board-views/list/index.tsx
+++ b/space/components/issues/board-views/list/index.tsx
@ -1,29 +1,34 @@
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListBlock } from "@/components/issues/board-views/list/block";
 import { IssueListHeader } from "@/components/issues/board-views/list/header";
-// interfaces
 // mobx hook
-import { useMobxStore } from "@/hooks/store";
-// store
-import { RootStore } from "@/store/root.store";
-import { IIssueState, IIssue } from "types/issue";
+import { useIssue } from "@/hooks/store";
+// types
+import { IIssueState, IIssue } from "@/types/issue";

-export const IssueListView = observer(() => {
-  const { issue: issueStore }: RootStore = useMobxStore();
+type IssueListViewProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const IssueListView: FC<IssueListViewProps> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { states, getFilteredIssuesByState } = useIssue();

  return (
    <>
-      {issueStore?.states &&
-        issueStore?.states.length > 0 &&
-        issueStore?.states.map((_state: IIssueState) => (
+      {states &&
+        states.length > 0 &&
+        states.map((_state: IIssueState) => (
          <div key={_state.id} className="relative w-full">
            <IssueListHeader state={_state} />
-            {issueStore.getFilteredIssuesByState(_state.id) &&
-            issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
+            {getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
              <div className="divide-y divide-custom-border-200">
-                {issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                  <IssueListBlock key={_issue.id} issue={_issue} />
+                {getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
+                  <IssueListBlock key={_issue.id} issue={_issue} workspaceSlug={workspaceSlug} projectId={projectId} />
                ))}
              </div>
            ) : (