feat: init

apps/web/core/components/project-states/root.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { FC } from "react";
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { EUserPermissionsLevel } from "@plane/constants";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+import { ProjectStateLoader, GroupList } from "@/components/project-states";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type TProjectState = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectStateRoot: FC<TProjectState> = observer((props) => {
+  const { workspaceSlug, projectId } = props;
+  // hooks
+  const {
+    groupedProjectStates,
+    fetchProjectStates,
+    createState,
+    moveStatePosition,
+    updateState,
+    deleteState,
+    markStateAsDefault,
+  } = useProjectState();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isEditable = allowPermissions(
+    [EUserProjectRoles.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  // Fetching all project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // State operations callbacks
+  const stateOperationsCallbacks: TStateOperationsCallbacks = useMemo(
+    () => ({
+      createState: async (data: Partial<IState>) => createState(workspaceSlug, projectId, data),
+      updateState: async (stateId: string, data: Partial<IState>) =>
+        updateState(workspaceSlug, projectId, stateId, data),
+      deleteState: async (stateId: string) => deleteState(workspaceSlug, projectId, stateId),
+      moveStatePosition: async (stateId: string, data: Partial<IState>) =>
+        moveStatePosition(workspaceSlug, projectId, stateId, data),
+      markStateAsDefault: async (stateId: string) => markStateAsDefault(workspaceSlug, projectId, stateId),
+    }),
+    [workspaceSlug, projectId, createState, moveStatePosition, updateState, deleteState, markStateAsDefault]
+  );
+
+  // Loader
+  if (!groupedProjectStates) return <ProjectStateLoader />;
+
+  return (
+    <div className="py-3">
+      <GroupList
+        groupedStates={groupedProjectStates}
+        stateOperationsCallbacks={stateOperationsCallbacks}
+        isEditable={isEditable}
+        shouldTrackEvents
+      />
+    </div>
+  );
+});