fix: project states fixes (#2731)

* fix: project states fixes * fix: states fixes * fix: formating all files
2023-11-08 20:31:46 +05:30 · 2023-11-08 20:31:46 +05:30 · 20fb79567f
commit 20fb79567f
parent bd1a850f35
156 changed files with 1585 additions and 1758 deletions
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@ -15,7 +15,7 @@ import { X } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";

 type Props = {
  appliedFilters: IIssueFilterOptions;
@ -24,7 +24,7 @@ type Props = {
  labels?: IIssueLabels[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
@ -70,7 +70,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
            {filterKey === "priority" && (
              <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
            )}
-            {filterKey === "state" && (
+            {filterKey === "state" && states && (
              <AppliedStateFilters
                handleRemove={(val) => handleRemoveFilter("state", val)}
                states={states}
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@ -12,7 +12,11 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
+  const {
+    archivedIssueFilters: archivedIssueFiltersStore,
+    project: projectStore,
+    projectState: projectStateStore,
+  } = useMobxStore();

  const userFilters = archivedIssueFiltersStore.userFilters;

@ -74,7 +78,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@ -1,6 +1,5 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -12,7 +11,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId } = router.query;

-  const { project: projectStore, cycleIssueFilter: cycleIssueFilterStore } = useMobxStore();
+  const {
+    project: projectStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+    projectState: projectStateStore,
+  } = useMobxStore();

  const userFilters = cycleIssueFilterStore.cycleFilters;

@ -70,7 +73,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@ -12,7 +12,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId, moduleId } = router.query;

-  const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+  const { project: projectStore, moduleFilter: moduleFilterStore, projectState: projectStateStore } = useMobxStore();

  const userFilters = moduleFilterStore.moduleFilters;

@ -70,7 +70,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@ -12,7 +12,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

-  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+  const { issueFilter: issueFilterStore, project: projectStore, projectState: projectStateStore } = useMobxStore();

  const userFilters = issueFilterStore.userFilters;

@ -74,7 +74,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
    </div>
  );
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@ -19,6 +19,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {

  const {
    project: projectStore,
+    projectState: projectStateStore,
    projectViews: projectViewsStore,
    projectViewFilters: projectViewFiltersStore,
  } = useMobxStore();
@ -99,7 +100,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
        handleRemoveFilter={handleRemoveFilter}
        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
-        states={projectStore.states?.[projectId?.toString() ?? ""]}
+        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
        <Button variant="primary" size="sm" onClick={handleUpdateView}>
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@ -3,26 +3,22 @@ import { observer } from "mobx-react-lite";
 // icons
 import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";

 type Props = {
  handleRemove: (val: string) => void;
-  states: IStateResponse | undefined;
+  states: IState[];
  values: string[];
 };

 export const AppliedStateFilters: React.FC<Props> = observer((props) => {
  const { handleRemove, states, values } = props;

-  const statesList = getStatesList(states);
-
  return (
    <div className="flex items-center gap-1 flex-wrap">
      {values.map((stateId) => {
-        const stateDetails = statesList?.find((s) => s.id === stateId);
+        const stateDetails = states?.find((s) => s.id === stateId);

        if (!stateDetails) return null;

--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@ -15,7 +15,7 @@ import {
  FilterTargetDate,
 } from "components/issues";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions } from "constants/issue";

@ -26,7 +26,7 @@ type Props = {
  labels?: IIssueLabels[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 export const FilterSelection: React.FC<Props> = observer((props) => {
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@ -1,19 +1,16 @@
 import React, { useState } from "react";
-
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader, StateGroupIcon } from "@plane/ui";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IStateResponse } from "types";
+import { IState } from "types";

 type Props = {
  appliedFilters: string[] | null;
  handleUpdate: (val: string) => void;
  searchQuery: string;
-  states: IStateResponse | undefined;
+  states: IState[] | undefined;
 };

 export const FilterState: React.FC<Props> = (props) => {
@ -22,11 +19,9 @@ export const FilterState: React.FC<Props> = (props) => {
  const [itemsToRender, setItemsToRender] = useState(5);
  const [previewEnabled, setPreviewEnabled] = useState(true);

-  const statesList = getStatesList(states);
-
  const appliedFiltersCount = appliedFilters?.length ?? 0;

-  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));

  const handleViewToggle = () => {
    if (!filteredOptions) return;
--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@ -25,6 +25,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    cycleIssue: cycleIssueStore,
    issueFilter: issueFilterStore,
    cycleIssueKanBanView: cycleIssueKanBanViewStore,
@ -98,7 +99,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@ -9,8 +9,6 @@ import { KanBanSwimLanes } from "../swimlanes";
 import { KanBan } from "../default";
 import { ModuleIssueQuickActions } from "components/issues";
 import { Spinner } from "@plane/ui";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@ -24,6 +22,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    moduleIssue: moduleIssueStore,
    issueFilter: issueFilterStore,
    moduleIssueKanBanView: moduleIssueKanBanViewStore,
@ -96,7 +95,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@ -20,6 +20,7 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
  const {
    workspace: workspaceStore,
    project: projectStore,
+    projectState: projectStateStore,
    profileIssues: profileIssuesStore,
    profileIssueFilters: profileIssueFiltersStore,
    issueKanBanView: issueKanBanViewStore,
@ -85,7 +86,7 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
    issueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = workspaceStore.workspaceLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@ -22,6 +22,7 @@ export const KanBanLayout: React.FC = observer(() => {

  const {
    project: projectStore,
+    projectState: projectStateStore,
    issue: issueStore,
    issueFilter: issueFilterStore,
    issueKanBanView: issueKanBanViewStore,
@ -88,7 +89,7 @@ export const KanBanLayout: React.FC = observer(() => {
    issueKanBanViewStore.handleKanBanToggle(toggle, value);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@ -1,7 +1,5 @@
 import React from "react";
-// react beautiful dnd
 import { DragDropContext } from "@hello-pangea/dnd";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { KanBanSwimLanes } from "../swimlanes";
@ -17,6 +15,7 @@ export interface IViewKanBanLayout {}
 export const ProjectViewKanBanLayout: React.FC = observer(() => {
  const {
    project: projectStore,
+    projectState: projectStateStore,
    issue: issueStore,
    issueFilter: issueFilterStore,
    issueKanBanView: issueKanBanViewStore,
@ -54,12 +53,12 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
+  const projects = projectStateStore?.projectStates || null;
  const estimates = null;

  return null;
--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@ -19,6 +19,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {

  const {
    project: projectStore,
+    projectState: projectStateStore,
    archivedIssues: archivedIssueStore,
    archivedIssueFilters: archivedIssueFiltersStore,
  } = useMobxStore();
@ -38,7 +39,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {

  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@ -21,6 +21,7 @@ export const CycleListLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    issueFilter: issueFilterStore,
    cycleIssue: cycleIssueStore,
    issueDetail: issueDetailStore,
@ -55,7 +56,7 @@ export const CycleListLayout: React.FC = observer(() => {
    [cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
  );

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@ -21,6 +21,7 @@ export const ModuleListLayout: React.FC = observer(() => {

  const {
    project: projectStore,
+    projectState: projectStateStore,
    issueFilter: issueFilterStore,
    moduleIssue: moduleIssueStore,
    issueDetail: issueDetailStore,
@ -55,7 +56,7 @@ export const ModuleListLayout: React.FC = observer(() => {
    [moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
  );

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@ -16,6 +16,7 @@ export interface IProfileIssuesListLayout {}
 export const ProfileIssuesListLayout: FC = observer(() => {
  const {
    workspace: workspaceStore,
+    projectState: projectStateStore,
    project: projectStore,
    profileIssueFilters: profileIssueFiltersStore,
    profileIssues: profileIssuesStore,
@ -44,7 +45,7 @@ export const ProfileIssuesListLayout: FC = observer(() => {
    [profileIssuesStore, issueDetailStore, workspaceSlug]
  );

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = workspaceStore.workspaceLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@ -20,6 +20,7 @@ export const ListLayout: FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectState: projectStateStore,
    issue: issueStore,
    issueDetail: issueDetailStore,
    issueFilter: issueFilterStore,
@ -45,7 +46,7 @@ export const ListLayout: FC = observer(() => {
    [issueStore, issueDetailStore, workspaceSlug]
  );

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
--- a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@ -11,7 +11,12 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 export interface IViewListLayout {}

 export const ProjectViewListLayout: React.FC = observer(() => {
-  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    projectState: projectStateStore,
+  }: RootStore = useMobxStore();

  const issues = issueStore?.getIssues;

@ -23,12 +28,12 @@ export const ProjectViewListLayout: React.FC = observer(() => {
    issueStore.updateIssueStructure(group_by, null, issue);
  };

-  const states = projectStore?.projectStates || null;
+  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
  const labels = projectStore?.projectLabels || null;
  const members = projectStore?.projectMembers || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = projectStore?.projectStates || null;
+  const projects = projectStateStore?.projectStates || null;
  const estimates = null;

  return null;
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@ -100,14 +100,12 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
            {(projectLabels ? projectLabels : [])
              ?.filter((l) => value.includes(l.id))
              .map((label) => (
-                <Tooltip
-                  position="top"
-                  tooltipHeading="Labels"
-                  tooltipContent={label.name ?? ''}
-                >
+                <Tooltip position="top" tooltipHeading="Labels" tooltipContent={label.name ?? ""}>
                  <div
                    key={label.id}
-                    className={`overflow-hidden flex hover:bg-custom-background-80 ${!disabled && "cursor-pointer"} items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
+                    className={`overflow-hidden flex hover:bg-custom-background-80 ${
+                      !disabled && "cursor-pointer"
+                    } items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full max-w-full`}
                  >
                    <div className="overflow-hidden flex items-center gap-1.5 text-custom-text-200 max-w-full">
                      <span
@ -116,9 +114,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                          backgroundColor: label?.color ?? "#000000",
                        }}
                      />
-                      <div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">
-                        {label.name}
-                      </div>
+                      <div className="truncate line-clamp-1 inline-block w-auto max-w-[100px]">{label.name}</div>
                    </div>
                  </div>
                </Tooltip>
@ -143,8 +139,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
        )
      ) : (
        <div
-          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
-            }`}
+          className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
+            noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+          }`}
        >
          Select labels
        </div>
@ -165,12 +162,13 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
        <button
          ref={setReferenceElement}
          type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs ${disabled
-            ? "cursor-not-allowed text-custom-text-200"
-            : value.length <= maxRender
+          className={`flex items-center justify-between gap-1 w-full text-xs ${
+            disabled
+              ? "cursor-not-allowed text-custom-text-200"
+              : value.length <= maxRender
              ? "cursor-pointer"
              : "cursor-pointer hover:bg-custom-background-80"
-            }  ${buttonClassName}`}
+          }  ${buttonClassName}`}
          onClick={() => !projectLabels && fetchProjectLabels()}
        >
          {label}
@ -204,19 +202,19 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                  key={option.value}
                  value={option.value}
                  className={({ active, selected }) =>
-                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${active ? "bg-custom-background-80" : ""
+                    `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                      active ? "bg-custom-background-80" : ""
                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                  }
                >
                  {({ selected }) => (
                    <>
                      {option.content}
-                      {selected &&
+                      {selected && (
                        <div className="flex-shrink-0">
-
                          <Check className={`h-3.5 w-3.5`} />
                        </div>
-                      }
+                      )}
                    </>
                  )}
                </Combobox.Option>
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@ -41,7 +41,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
    placement,
  } = props;

-  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const { workspace: workspaceStore, projectState: projectStateStore }: RootStore = useMobxStore();
  const workspaceSlug = workspaceStore?.workspaceSlug;

  const [query, setQuery] = useState("");
@ -50,7 +50,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
  const [isLoading, setIsLoading] = useState<Boolean>(false);

  const projectStates: IState[] = [];
-  const projectStatesByGroup = projectId && projectStore?.states?.[projectId];
+  const projectStatesByGroup = projectStateStore.groupedProjectStates;
  if (projectStatesByGroup)
    for (const group in projectStatesByGroup) projectStates.push(...projectStatesByGroup[group]);

@ -59,7 +59,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
    if (workspaceSlug && projectId)
      workspaceSlug &&
        projectId &&
-        projectStore.fetchProjectStates(workspaceSlug, projectId).then(() => setIsLoading(false));
+        projectStateStore.fetchProjectStates(workspaceSlug, projectId).then(() => setIsLoading(false));
  };

  const dropdownOptions = projectStates?.map((state) => ({
--- a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
@ -2,14 +2,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { SpreadsheetColumn } from "components/issues";
 // types
-import {
-  IIssue,
-  IIssueDisplayFilterOptions,
-  IIssueDisplayProperties,
-  IIssueLabels,
-  IStateResponse,
-  IUserLite,
-} from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";

 type Props = {
  displayFilters: IIssueDisplayFilterOptions;
@ -21,7 +14,7 @@ type Props = {
  issues: IIssue[] | undefined;
  members?: IUserLite[] | undefined;
  labels?: IIssueLabels[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 export const SpreadsheetColumnsList: React.FC<Props> = observer((props) => {
--- a/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@ -5,12 +5,12 @@ import { IssuePropertyState } from "../../properties";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { IIssue, IStateResponse } from "types";
+import { IIssue, IState } from "types";

 type Props = {
  issue: IIssue;
  onChange: (data: Partial<IIssue>) => void;
-  states: IStateResponse | undefined;
+  states: IState[] | undefined;
  expandedIssues: string[];
  disabled: boolean;
 };
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@ -20,6 +20,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
    cycleIssue: cycleIssueStore,
    issueDetail: issueDetailStore,
    project: projectStore,
+    projectState: projectStateStore,
  } = useMobxStore();

  const issues = cycleIssueStore.getIssues;
@ -60,7 +61,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
      issues={issues as IIssueUnGroupedStructure}
      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
-      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
      disableUserActions={false}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@ -20,6 +20,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
    moduleIssue: moduleIssueStore,
    issueDetail: issueDetailStore,
    project: projectStore,
+    projectState: projectStateStore,
  } = useMobxStore();

  const issues = moduleIssueStore.getIssues;
@ -60,7 +61,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
      issues={issues as IIssueUnGroupedStructure}
      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
-      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
      disableUserActions={false}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@ -20,6 +20,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    issueDetail: issueDetailStore,
    project: projectStore,
+    projectState: projectStateStore,
    user: userStore,
  } = useMobxStore();

@ -62,7 +63,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
      issues={issues as IIssueUnGroupedStructure}
      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
-      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
      disableUserActions={false}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@ -20,6 +20,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
    projectViewIssues: projectViewIssueStore,
    issueDetail: issueDetailStore,
    project: projectStore,
+    projectState: projectStateStore,
  } = useMobxStore();

  const issues = projectViewIssueStore.getIssues;
@ -60,7 +61,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
      issues={issues as IIssueUnGroupedStructure}
      members={projectId ? projectStore.members?.[projectId.toString()]?.map((m) => m.member) : undefined}
      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
-      states={projectId ? projectStore.states?.[projectId.toString()] : undefined}
+      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
      disableUserActions={false}
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@ -27,14 +27,7 @@ import {
 // ui
 import { CustomMenu } from "@plane/ui";
 // types
-import {
-  IIssue,
-  IIssueDisplayFilterOptions,
-  IIssueLabels,
-  IStateResponse,
-  IUserLite,
-  TIssueOrderByOptions,
-} from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueLabels, IState, IUserLite, TIssueOrderByOptions } from "types";
 // constants
 import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";

@ -48,7 +41,7 @@ type Props = {
  property: string;
  members?: IUserLite[] | undefined;
  labels?: IIssueLabels[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
 };

 export const SpreadsheetColumn: React.FC<Props> = (props) => {
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@ -6,14 +6,7 @@ import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreat
 import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 import { Spinner } from "@plane/ui";
 // types
-import {
-  IIssue,
-  IIssueDisplayFilterOptions,
-  IIssueDisplayProperties,
-  IIssueLabels,
-  IStateResponse,
-  IUserLite,
-} from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";

 type Props = {
  displayProperties: IIssueDisplayProperties;
@ -22,7 +15,7 @@ type Props = {
  issues: IIssue[] | undefined;
  members?: IUserLite[] | undefined;
  labels?: IIssueLabels[] | undefined;
-  states?: IStateResponse | undefined;
+  states?: IState[] | undefined;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
  openIssuesListModal?: (() => void) | null;
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@ -251,7 +251,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
              )}
              {isLoading && !issue ? (
-                <div className="h-full w-full flex items-center justify-center"><Spinner/></div>
+                <div className="h-full w-full flex items-center justify-center">
+                  <Spinner />
+                </div>
              ) : (
                issue && (
                  <>
--- a/web/components/issues/issue-reaction.tsx
+++ b/web/components/issues/issue-reaction.tsx
@ -18,8 +18,11 @@ export const IssueReaction: React.FC<Props> = (props) => {

  const { user } = useUserAuth();

-  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } =
-    useIssueReaction(workspaceSlug, projectId, issueId);
+  const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction(
+    workspaceSlug,
+    projectId,
+    issueId
+  );

  const handleReactionClick = (reaction: string) => {
    if (!workspaceSlug || !projectId || !issueId) return;
@ -38,9 +41,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
      <ReactionSelector
        size="md"
        position="top"
-        value={
-          reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []
-        }
+        value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []}
        onSelect={handleReactionClick}
      />

--- a/web/components/issues/peek-overview/issue-details.tsx
+++ b/web/components/issues/peek-overview/issue-details.tsx
@ -10,12 +10,7 @@ type Props = {
  workspaceSlug: string;
 };

-export const PeekOverviewIssueDetails: React.FC<Props> = ({
-  handleUpdateIssue,
-  issue,
-  readOnly,
-  workspaceSlug,
-}) => (
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ handleUpdateIssue, issue, readOnly, workspaceSlug }) => (
  <div className="space-y-2">
    <h6 className="font-medium text-custom-text-200">
      {issue.project_detail.identifier}-{issue.sequence_id}
--- a/web/components/issues/select/date.tsx
+++ b/web/components/issues/select/date.tsx
@ -1,4 +1,4 @@
-import React, { Fragment, useState } from "react";
+import { Fragment, useState, FC } from "react";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 import { CalendarDays, X } from "lucide-react";
@ -15,9 +15,9 @@ type Props = {
  value: string | null;
 };

-export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onChange, value }) => {
-  const [referenceElement, setReferenceElement] = React.useState<HTMLDivElement | null>(null);
-  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+export const IssueDateSelect: FC<Props> = ({ label, maxDate, minDate, onChange, value }) => {
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: "bottom-start",
@ -50,7 +50,7 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
          </Popover.Button>

          <Transition
-            as={React.Fragment}
+            as={Fragment}
            enter="transition ease-out duration-200"
            enterFrom="opacity-0 translate-y-1"
            enterTo="opacity-100 translate-y-0"
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@ -1,17 +1,12 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
 import { ProjectStateService } from "services/project";
 // ui
 import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 // icons
 import { Plus } from "lucide-react";
-// helpers
-import { getStatesList } from "helpers/state.helper";
 // fetch keys
 import { STATES_LIST } from "constants/fetch-keys";

@ -30,11 +25,10 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
  const router = useRouter();
  const { workspaceSlug } = router.query;

-  const { data: stateGroups } = useSWR(
+  const { data: states } = useSWR(
    workspaceSlug && projectId ? STATES_LIST(projectId) : null,
    workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null
  );
-  const states = getStatesList(stateGroups);

  const options = states?.map((state) => ({
    value: state.id,
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@ -9,7 +9,6 @@ import { ProjectStateService } from "services/project";
 // ui
 import { CustomSearchSelect, StateGroupIcon } from "@plane/ui";
 // helpers
-import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // constants
 import { STATES_LIST } from "constants/fetch-keys";
@ -27,11 +26,10 @@ export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled
  const router = useRouter();
  const { workspaceSlug, projectId, inboxIssueId } = router.query;

-  const { data: stateGroups } = useSWR(
+  const { data: states } = useSWR(
    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
  );
-  const states = getStatesList(stateGroups);

  const selectedOption = states?.find((s) => s.id === value);