fix: fetch states only when the dropdown is opened (#1684)

apps/app/components/automation/auto-close-automation.tsx

@@ -37,8 +37,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-
+  const states = getStatesList(stateGroups);
-  const states = getStatesList(stateGroups ?? {});
 
   const options = states
     ?.filter((state) => state.group === "cancelled")
@@ -53,14 +52,14 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
       ),
     }));
 
-  const multipleOptions = options.length > 1;
+  const multipleOptions = (options ?? []).length > 1;
 
   const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
 
   const selectedOption = states?.find(
     (s) => s.id === projectDetails?.default_state ?? defaultState
   );
-  const currentDefaultState = states.find((s) => s.id === defaultState);
+  const currentDefaultState = states?.find((s) => s.id === defaultState);
 
   const initialValues: Partial<IProject> = {
     close_in: 1,

apps/app/components/command-palette/issue/change-issue-state.tsx

@@ -34,7 +34,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const submitChanges = useCallback(
     async (formData: Partial<IIssue>) => {

apps/app/components/core/views/all-views.tsx

@@ -75,7 +75,7 @@ export const AllViews: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const handleTrashBox = useCallback(
     (isDragging: boolean) => {

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

@@ -29,7 +29,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 import { getStatesList } from "helpers/state.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue, IIssueFilterOptions } from "types";
+import { IIssue, IIssueFilterOptions, IState } from "types";
 // fetch-keys
 import {
   CYCLE_DETAILS,
@@ -96,7 +96,7 @@ export const IssuesView: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const { data: labels } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
@@ -184,7 +184,10 @@ export const IssuesView: React.FC<Props> = ({
           // dragged item(or issue)
 
           if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
-          else if (selectedGroup === "state") draggedItem.state = destinationGroup;
+          else if (selectedGroup === "state") {
+            draggedItem.state = destinationGroup;
+            draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
+          }
         }
 
         const sourceGroup = source.droppableId; // source group id
@@ -200,8 +203,8 @@ export const IssuesView: React.FC<Props> = ({
           (prevData) => {
             if (!prevData) return prevData;
 
-            const sourceGroupArray = prevData[sourceGroup];
+            const sourceGroupArray = [...groupedByIssues[sourceGroup]];
-            const destinationGroupArray = groupedByIssues[destinationGroup];
+            const destinationGroupArray = [...groupedByIssues[destinationGroup]];
 
             sourceGroupArray.splice(source.index, 1);
             destinationGroupArray.splice(destination.index, 0, draggedItem);
@@ -229,7 +232,9 @@ export const IssuesView: React.FC<Props> = ({
             user
           )
           .then((response) => {
-            const sourceStateBeforeDrag = states.find((state) => state.name === source.droppableId);
+            const sourceStateBeforeDrag = states?.find(
+              (state) => state.name === source.droppableId
+            );
 
             if (
               sourceStateBeforeDrag?.group !== "completed" &&

apps/app/components/issues/select/state.tsx

@@ -34,7 +34,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       ? () => stateService.getStates(workspaceSlug as string, projectId)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const options = states?.map((state) => ({
     value: state.id,
@@ -48,7 +48,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
   }));
 
   const selectedOption = states?.find((s) => s.id === value);
-  const currentDefaultState = states.find((s) => s.default);
+  const currentDefaultState = states?.find((s) => s.default);
 
   return (
     <CustomSearchSelect

apps/app/components/issues/sidebar-select/state.tsx

@@ -41,7 +41,7 @@ export const SidebarStateSelect: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const selectedState = states?.find((s) => s.id === value);
 

apps/app/components/issues/view-select/state.tsx

@@ -52,7 +52,7 @@ export const ViewStateSelect: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, issue.project)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const options = states?.map((state) => ({
     value: state.id,
@@ -88,11 +88,13 @@ export const ViewStateSelect: React.FC<Props> = ({
       className={className}
       value={issue.state}
       onChange={(data: string) => {
+        const oldState = states?.find((s) => s.id === issue.state);
+        const newState = states?.find((s) => s.id === data);
+
         partialUpdateIssue(
           {
             state: data,
-            priority: issue.priority,
+            state_detail: newState,
-            target_date: issue.target_date,
           },
           issue
         );
@@ -109,9 +111,6 @@ export const ViewStateSelect: React.FC<Props> = ({
           user
         );
 
-        const oldState = states.find((s) => s.id === issue.state);
-        const newState = states.find((s) => s.id === data);
-
         if (oldState?.group !== "completed" && newState?.group !== "completed") {
           trackEventServices.trackIssueMarkedAsDoneEvent(
             {

apps/app/components/views/form.tsx

@@ -67,7 +67,7 @@ export const ViewForm: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const states = getStatesList(stateGroups ?? {});
+  const states = getStatesList(stateGroups);
 
   const { data: labels } = useSWR(
     workspaceSlug && projectId && (filters.labels ?? []).length > 0

apps/app/components/views/select-filters.tsx

@@ -49,7 +49,7 @@ export const SelectFilters: React.FC<Props> = ({
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const statesList = getStatesList(states ?? {});
+  const statesList = getStatesList(states);
 
   const { data: members } = useSWR(
     projectId ? PROJECT_MEMBERS(projectId as string) : null,
@@ -103,7 +103,7 @@ export const SelectFilters: React.FC<Props> = ({
             label: "State",
             value: statesList,
             hasChildren: true,
-            children: statesList.map((state) => ({
+            children: statesList?.map((state) => ({
               id: state.id,
               label: (
                 <div className="flex items-center gap-2">

apps/app/helpers/state.helper.ts

@@ -1,16 +1,25 @@
 // types
 import { IState, IStateResponse } from "types";
 
-export const orderStateGroups = (unorderedStateGroups: IStateResponse) =>
+export const orderStateGroups = (
-  Object.assign(
+  unorderedStateGroups: IStateResponse | undefined
+): IStateResponse | undefined => {
+  if (!unorderedStateGroups) return undefined;
+
+  return Object.assign(
     { backlog: [], unstarted: [], started: [], completed: [], cancelled: [] },
     unorderedStateGroups
   );
+};
+
+export const getStatesList = (stateGroups: IStateResponse | undefined): IState[] | undefined => {
+  if (!stateGroups) return undefined;
 
-export const getStatesList = (stateGroups: any): IState[] => {
   // order the unordered state groups first
   const orderedStateGroups = orderStateGroups(stateGroups);
 
+  if (!orderedStateGroups) return undefined;
+
   // extract states from the groups and return them
   return Object.keys(orderedStateGroups)
     .map((group) => [...orderedStateGroups[group].map((state: IState) => state)])

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

@@ -125,21 +125,22 @@ const useIssuesView = () => {
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const statesList = getStatesList(states ?? {});
+  const statesList = getStatesList(states);
-  const activeStatesList = statesList.filter(
+  const activeStatesList = statesList?.filter(
     (state) => state.group === "started" || state.group === "unstarted"
   );
-  const backlogStatesList = statesList.filter((state) => state.group === "backlog");
+  const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
 
   const stateIds =
     filters && filters?.type === "active"
-      ? activeStatesList.map((state) => state.id)
+      ? activeStatesList?.map((state) => state.id)
       : filters?.type === "backlog"
-      ? backlogStatesList.map((state) => state.id)
+      ? backlogStatesList?.map((state) => state.id)
-      : statesList.map((state) => state.id);
+      : statesList?.map((state) => state.id);
 
   const filteredStateIds =
-    filters && filters?.state ? stateIds.filter((s) => filters.state?.includes(s)) : stateIds;
+    (filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ??
+    [];
 
   const emptyStatesObject: { [key: string]: [] } = {};
   for (let i = 0; i < filteredStateIds.length; i++) {

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -49,8 +49,8 @@ const StatesSettings: NextPage = () => {
       ? () => stateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
-  const orderedStateGroups = orderStateGroups(states ?? {});
+  const orderedStateGroups = orderStateGroups(states);
-  const statesList = getStatesList(orderedStateGroups ?? {});
+  const statesList = getStatesList(orderedStateGroups);
 
   return (
     <>
@@ -79,7 +79,7 @@ const StatesSettings: NextPage = () => {
               <p className="text-custom-text-200">Manage the states of this project.</p>
             </div>
             <div className="col-span-12 space-y-8 sm:col-span-7">
-              {states && projectDetails ? (
+              {states && projectDetails && orderedStateGroups ? (
                 Object.keys(orderedStateGroups).map((key) => {
                   if (orderedStateGroups[key].length !== 0)
                     return (
@@ -114,7 +114,7 @@ const StatesSettings: NextPage = () => {
                                 key={state.id}
                                 index={index}
                                 state={state}
-                                statesList={statesList}
+                                statesList={statesList ?? []}
                                 handleEditState={() => setSelectedState(state.id)}
                                 handleDeleteState={() => setSelectDeleteState(state.id)}
                                 user={user}