Merge pull request #1369 from Chiamaka489/feature/retain-phase-states

humansinstitute · web-flow · commit bed575cad114 · 2025-03-25T10:49:20.000+08:00
Retain Phase State on Feature View Across Page Reloads
diff --git a/src/people/widgetViews/workspace/HiveFeaturesView/HiveFeaturesView.tsx b/src/people/widgetViews/workspace/HiveFeaturesView/HiveFeaturesView.tsx
@@ -304,7 +304,6 @@ const HiveFeaturesView = observer<HiveFeaturesViewProps>(() => {
   const [phaseNames, setPhaseNames] = useState<{ [key: string]: string }>({});
   const [collapsed, setCollapsed] = useState(false);
   const [data, setData] = useState<QuickBountyTicket[]>([]);
-  const [expandedPhases, setExpandedPhases] = useState<{ [key: string]: boolean }>({});
   const { ui, main } = useStores();
   const [draftTexts, setDraftTexts] = useState<{ [phaseID: string]: string }>({});
   const [toasts, setToasts] = React.useState<any[]>([]);
@@ -452,11 +451,8 @@ const HiveFeaturesView = observer<HiveFeaturesViewProps>(() => {
         for (const phase of phases) {
           names[phase.uuid] = phase.name || 'Untitled Phase';
 
-          if (!(phase.uuid in expandedPhases)) {
-            setExpandedPhases((prev) => ({
-              ...prev,
-              [phase.uuid]: true
-            }));
+          if (!(phase.uuid in quickBountyTicketStore.expandedPhases)) {
+            quickBountyTicketStore.setPhaseExpanded(phase.uuid, true);
           }
         }
         setPhaseNames(names);
@@ -465,17 +461,6 @@ const HiveFeaturesView = observer<HiveFeaturesViewProps>(() => {
     fetchAllPhases();
   }, [featureUuid, main]);
 
-  useEffect(() => {
-    const savedState = localStorage.getItem(`expandedPhases_${featureUuid}`);
-    if (savedState) {
-      setExpandedPhases(JSON.parse(savedState));
-    }
-  }, [featureUuid]);
-
-  useEffect(() => {
-    localStorage.setItem(`expandedPhases_${featureUuid}`, JSON.stringify(expandedPhases));
-  }, [expandedPhases, featureUuid]);
-
   useEffect(() => {
     const socket = createSocketInstance();
 
@@ -536,10 +521,8 @@ const HiveFeaturesView = observer<HiveFeaturesViewProps>(() => {
   }, [workspaceUuid, main]);
 
   const togglePhase = (phaseID: string) => {
-    setExpandedPhases((prev) => ({
-      ...prev,
-      [phaseID]: !prev[phaseID]
-    }));
+    const currentState = quickBountyTicketStore.expandedPhases[phaseID] !== false;
+    quickBountyTicketStore.setPhaseExpanded(phaseID, !currentState);
   };
 
   const getNavigationURL = (item: QuickBountyTicket) => {
@@ -916,7 +899,7 @@ const HiveFeaturesView = observer<HiveFeaturesViewProps>(() => {
             ) : (
               Object.entries(phaseNames).map(([phaseID, phaseName], index) => {
                 const items = groupedData[phaseID] || [];
-                const isExpanded = expandedPhases[phaseID] !== false;
+                const isExpanded = quickBountyTicketStore.expandedPhases[phaseID] !== false;
                 const draftText = draftTexts[phaseID] || '';
 
                 return (
diff --git a/src/people/widgetViews/workspace/HiveFeaturesView/__tests__/HiveFeaturesView.spec.tsx b/src/people/widgetViews/workspace/HiveFeaturesView/__tests__/HiveFeaturesView.spec.tsx
@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import HiveFeaturesView from '../HiveFeaturesView';
+import { quickBountyTicketStore } from '../../../../../store/quickBountyTicketStore';
 
 jest.mock('../HiveFeaturesView', () => ({
   __esModule: true,
@@ -93,4 +94,80 @@ describe('HiveFeaturesView', () => {
       expect(screen.getByTestId('mock-component')).toBeInTheDocument();
     });
   });
+
+  describe('Phase Expansion State', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should initialize phases with stored expansion states', async () => {
+      const mockExpandedStates = {
+        'phase-1': true,
+        'phase-2': false
+      };
+
+      quickBountyTicketStore.expandedPhases = mockExpandedStates;
+
+      renderComponent();
+
+      waitFor(() => {
+        const phase1Header = screen.getByText('Phase 1').closest('div');
+        const phase2Header = screen.getByText('Phase 2').closest('div');
+
+        expect(phase1Header).toHaveAttribute('aria-expanded', 'true');
+        expect(phase2Header).toHaveAttribute('aria-expanded', 'false');
+      });
+    });
+
+    it('should default new phases to expanded state', async () => {
+      quickBountyTicketStore.expandedPhases = {};
+
+      renderComponent();
+
+      waitFor(() => {
+        const phaseHeaders = screen.getAllByRole('button', { name: /Phase \d/ });
+        phaseHeaders.forEach((header) => {
+          expect(header).toHaveAttribute('aria-expanded', 'true');
+        });
+      });
+    });
+
+    it('should persist phase state changes', async () => {
+      renderComponent();
+
+      waitFor(() => {
+        const phaseHeader = screen.getByText('Phase 1').closest('div');
+        if (phaseHeader) {
+          fireEvent.click(phaseHeader);
+          expect(quickBountyTicketStore.setPhaseExpanded).toHaveBeenCalledWith('phase-1', false);
+        }
+      });
+    });
+
+    it('should maintain phase states after data refresh', async () => {
+      const mockExpandedStates = {
+        'phase-1': false,
+        'phase-2': true
+      };
+
+      quickBountyTicketStore.expandedPhases = mockExpandedStates;
+
+      const { rerender } = renderComponent();
+
+      quickBountyTicketStore.fetchAndSetQuickData('test-feature');
+      rerender(
+        <MemoryRouter>
+          <HiveFeaturesView />
+        </MemoryRouter>
+      );
+
+      waitFor(() => {
+        const phase1Header = screen.getByText('Phase 1').closest('div');
+        const phase2Header = screen.getByText('Phase 2').closest('div');
+
+        expect(phase1Header).toHaveAttribute('aria-expanded', 'false');
+        expect(phase2Header).toHaveAttribute('aria-expanded', 'true');
+      });
+    });
+  });
 });
diff --git a/src/store/__test__/quickBountyTicketStore.spec.tsx b/src/store/__test__/quickBountyTicketStore.spec.tsx
@@ -0,0 +1,152 @@
+import { waitFor } from '@testing-library/react';
+import { quickBountyTicketStore } from '../quickBountyTicketStore';
+
+describe('QuickBountyTicketStore', () => {
+  let localStorageMock: { [key: string]: string };
+
+  beforeEach(() => {
+    localStorageMock = {};
+
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: jest.fn((key) => localStorageMock[key]),
+        setItem: jest.fn((key, value) => {
+          localStorageMock[key] = value;
+        }),
+        removeItem: jest.fn((key) => delete localStorageMock[key]),
+        clear: jest.fn(() => {
+          localStorageMock = {};
+        })
+      },
+      writable: true
+    });
+
+    quickBountyTicketStore.quickBountyTickets = [];
+    quickBountyTicketStore.expandedPhases = {};
+  });
+
+  describe('initialization', () => {
+    it('should initialize with empty quickBountyTickets', () => {
+      expect(quickBountyTicketStore.quickBountyTickets).toEqual([]);
+    });
+
+    it('should initialize with empty expandedPhases', () => {
+      expect(quickBountyTicketStore.expandedPhases).toEqual({});
+    });
+
+    it('should load expanded states from localStorage if available', () => {
+      const savedState = { 'phase-1': true, 'phase-2': false };
+      localStorageMock['expandedPhases'] = JSON.stringify(savedState);
+
+      (quickBountyTicketStore as any).loadExpandedStates();
+
+      expect(quickBountyTicketStore.expandedPhases).toEqual(savedState);
+    });
+
+    it('should handle invalid JSON in localStorage', () => {
+      localStorageMock['expandedPhases'] = 'invalid-json';
+
+      (quickBountyTicketStore as any).loadExpandedStates();
+
+      expect(quickBountyTicketStore.expandedPhases).toEqual({});
+    });
+  });
+
+  describe('setPhaseExpanded', () => {
+    it('should update expanded state for a phase', () => {
+      quickBountyTicketStore.setPhaseExpanded('phase-1', true);
+
+      expect(quickBountyTicketStore.expandedPhases['phase-1']).toBe(true);
+    });
+
+    it('should save to localStorage when updating state', () => {
+      quickBountyTicketStore.setPhaseExpanded('phase-1', true);
+
+      expect(localStorage.setItem).toHaveBeenCalledWith(
+        'expandedPhases',
+        JSON.stringify({ 'phase-1': true })
+      );
+    });
+
+    it('should handle multiple phase states', () => {
+      quickBountyTicketStore.setPhaseExpanded('phase-1', true);
+      quickBountyTicketStore.setPhaseExpanded('phase-2', false);
+
+      expect(quickBountyTicketStore.expandedPhases).toEqual({
+        'phase-1': true,
+        'phase-2': false
+      });
+    });
+  });
+
+  describe('fetchAndSetQuickData', () => {
+    const mockBounties = {
+      featureID: 'feature-1',
+      phases: {
+        'phase-1': [
+          {
+            bountyID: 1,
+            phaseID: 'phase-1',
+            bountyTitle: 'Test Bounty',
+            status: 'TODO',
+            assignedAlias: 'tester'
+          }
+        ]
+      }
+    };
+
+    const mockTickets = {
+      featureID: 'feature-1',
+      phases: {
+        'phase-1': [
+          {
+            ticketUUID: 'ticket-1',
+            phaseID: 'phase-1',
+            ticketTitle: 'Test Ticket',
+            status: 'TODO',
+            assignedAlias: 'tester'
+          }
+        ]
+      }
+    };
+
+    beforeEach(() => {
+      const mainStore = {
+        fetchQuickBounties: jest.fn().mockResolvedValue(mockBounties),
+        fetchQuickTickets: jest.fn().mockResolvedValue(mockTickets)
+      };
+      quickBountyTicketStore['main'] = mainStore;
+    });
+
+    it('should fetch and process bounties and tickets', async () => {
+      const result = await quickBountyTicketStore.fetchAndSetQuickData('feature-1');
+
+      waitFor(() => {
+        expect(result).toHaveLength(2);
+        expect(result?.find((item) => item.bountyTicket === 'bounty')).toBeTruthy();
+        expect(result?.find((item) => item.bountyTicket === 'ticket')).toBeTruthy();
+      });
+    });
+
+    it('should handle empty response', async () => {
+      quickBountyTicketStore['main'].fetchQuickBounties.mockResolvedValue(null);
+      quickBountyTicketStore['main'].fetchQuickTickets.mockResolvedValue(null);
+
+      const result = await quickBountyTicketStore.fetchAndSetQuickData('feature-1');
+
+      expect(result).toEqual([]);
+    });
+
+    it('should handle fetch errors', async () => {
+      quickBountyTicketStore['main'].fetchQuickBounties.mockRejectedValue(
+        new Error('Fetch failed')
+      );
+
+      const result = await quickBountyTicketStore.fetchAndSetQuickData('feature-1');
+
+      waitFor(() => {
+        expect(result).toBeUndefined();
+      });
+    });
+  });
+});
diff --git a/src/store/quickBountyTicketStore.tsx b/src/store/quickBountyTicketStore.tsx
@@ -18,9 +18,35 @@ export interface QuickBountyTicket {
 
 class QuickBountyTicketStore {
   quickBountyTickets: QuickBountyTicket[] = [];
+  expandedPhases: { [key: string]: boolean } = {};
 
   constructor() {
     makeAutoObservable(this);
+    this.loadExpandedStates();
+  }
+
+  private loadExpandedStates() {
+    try {
+      const savedState = localStorage.getItem('expandedPhases');
+      if (savedState) {
+        this.expandedPhases = JSON.parse(savedState);
+      }
+    } catch (error) {
+      console.error('Error loading expanded states:', error);
+    }
+  }
+
+  setPhaseExpanded(phaseId: string, expanded: boolean) {
+    this.expandedPhases[phaseId] = expanded;
+    this.saveExpandedStates();
+  }
+
+  private saveExpandedStates() {
+    try {
+      localStorage.setItem('expandedPhases', JSON.stringify(this.expandedPhases));
+    } catch (error) {
+      console.error('Error saving expanded states:', error);
+    }
   }
 
   async fetchAndSetQuickData(featureUUID: string) {
