fix: states order (#498)

* fix: order of states in the kanban board

* fix: state name in list view

apps/app/components/core/issues-view.tsx

@@ -580,7 +580,6 @@ export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModa
                 <AllLists
                   type={type}
                   states={states}
-                  members={members}
                   addIssueToState={addIssueToState}
                   makeIssueCopy={makeIssueCopy}
                   handleEditIssue={handleEditIssue}

apps/app/components/core/list-view/all-lists.tsx

@@ -9,8 +9,7 @@ import { IIssue, IProjectMember, IState, UserAuth } from "types";
 type Props = {
   type: "issue" | "cycle" | "module";
   states: IState[] | undefined;
-  members: IProjectMember[] | undefined;
+  addIssueToState: (groupTitle: string) => void;
-  addIssueToState: (groupTitle: string, stateId: string | null) => void;
   makeIssueCopy: (issue: IIssue) => void;
   handleEditIssue: (issue: IIssue) => void;
   handleDeleteIssue: (issue: IIssue) => void;
@@ -22,7 +21,6 @@ type Props = {
 export const AllLists: React.FC<Props> = ({
   type,
   states,
-  members,
   addIssueToState,
   makeIssueCopy,
   openIssuesListModal,
@@ -38,7 +36,8 @@ export const AllLists: React.FC<Props> = ({
       {groupedByIssues && (
         <div className="flex flex-col space-y-5">
           {Object.keys(groupedByIssues).map((singleGroup) => {
-            const stateId = selectedGroup === "state" ? singleGroup : null;
+            const currentState =
+              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
 
             return (
               <SingleList
@@ -47,8 +46,8 @@ export const AllLists: React.FC<Props> = ({
                 groupTitle={singleGroup}
                 groupedByIssues={groupedByIssues}
                 selectedGroup={selectedGroup}
-                members={members}
+                currentState={currentState}
-                addIssueToState={() => addIssueToState(singleGroup, stateId)}
+                addIssueToState={() => addIssueToState(singleGroup)}
                 makeIssueCopy={makeIssueCopy}
                 handleEditIssue={handleEditIssue}
                 handleDeleteIssue={handleDeleteIssue}

apps/app/components/core/list-view/single-list.tsx

@@ -24,7 +24,6 @@ type Props = {
     [key: string]: IIssue[];
   };
   selectedGroup: "priority" | "state" | "labels" | null;
-  members: IProjectMember[] | undefined;
   addIssueToState: () => void;
   makeIssueCopy: (issue: IIssue) => void;
   handleEditIssue: (issue: IIssue) => void;
@@ -41,7 +40,6 @@ export const SingleList: React.FC<Props> = ({
   groupTitle,
   groupedByIssues,
   selectedGroup,
-  members,
   addIssueToState,
   makeIssueCopy,
   handleEditIssue,
@@ -75,7 +73,9 @@ export const SingleList: React.FC<Props> = ({
                 )}
                 {selectedGroup !== null ? (
                   <h2 className="text-xl font-semibold capitalize leading-6 text-gray-800">
-                    {addSpaceIfCamelCase(groupTitle)}
+                    {selectedGroup === "state"
+                      ? addSpaceIfCamelCase(currentState?.name ?? "")
+                      : addSpaceIfCamelCase(groupTitle)}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>

apps/app/hooks/use-issues-view.tsx

@@ -15,12 +15,15 @@ import {
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
+  STATE_LIST,
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 // types
 import type { IIssue } from "types";
 import viewsService from "services/views.service";
+import stateService from "services/state.service";
+import { getStatesList } from "helpers/state.helper";
 
 const useIssuesView = () => {
   const {
@@ -96,6 +99,19 @@ const useIssuesView = () => {
       : null
   );
 
+  const { data: states } = useSWR(
+    workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
+    workspaceSlug && projectId
+      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      : null
+  );
+  const statesList = getStatesList(states ?? {});
+  const stateIds = statesList.map((state) => state.id);
+  let emptyStatesObject: { [key: string]: [] } = {};
+  for (let i = 0; i < stateIds.length; i++) {
+    emptyStatesObject[stateIds[i]] = [];
+  }
+
   const groupedByIssues:
     | {
         [key: string]: IIssue[];
@@ -104,7 +120,9 @@ const useIssuesView = () => {
     const issuesToGroup = cycleIssues ?? moduleIssues ?? projectIssues;
 
     if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
-    else return issuesToGroup;
+    if (groupByProperty === "state") return Object.assign(emptyStatesObject, issuesToGroup);
+
+    return issuesToGroup;
   }, [projectIssues, cycleIssues, moduleIssues]);
 
   return {

yarn.lock

@@ -3126,6 +3126,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz"
   integrity sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==
 
+"@types/nprogress@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
+  integrity sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==
+
 "@types/object.omit@^3.0.0":
   version "3.0.0"
   resolved "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.0.tgz"
@@ -7047,6 +7052,11 @@ npmlog@^4.1.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz"