From 38f567820ee48c3c3e624a977a61632f7726e4d5 Mon Sep 17 00:00:00 2001
From: kwasniew <kwasniewski.mateusz@gmail.com>
Date: Mon, 25 Nov 2024 13:14:06 +0100
Subject: [PATCH] fix: keep change request type in table

---
 .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
index 7dad9ef9eb7c..6236da0f07ff 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
@@ -38,6 +38,7 @@ export interface IChangeRequestTableProps {
 
 const defaultSort: SortingRule<string> & {
     columns?: string[];
+    type?: 'open' | 'closed';
 } = { id: 'createdAt', desc: true };
 
 const StyledTabContainer = styled('div')({
@@ -76,6 +77,12 @@ export const ChangeRequestsTabs = ({
     const { value: storedParams, setValue: setStoredParams } =
         createLocalStorage(`${projectId}:ProjectChangeRequest`, defaultSort);
 
+    const initialChangeRequestType =
+        searchParams.get('type') || storedParams.type;
+    const [changeRequestType, setChangeRequestType] = useState<
+        'open' | 'closed'
+    >(initialChangeRequestType === 'closed' ? 'closed' : 'open');
+
     const [openChangeRequests, closedChangeRequests] = useMemo(() => {
         const open = changeRequests.filter(
             (changeRequest) =>
@@ -97,14 +104,16 @@ export const ChangeRequestsTabs = ({
         {
             title: 'Change requests',
             data: openChangeRequests,
+            type: 'open' as const,
         },
         {
             title: 'Closed',
             data: closedChangeRequests,
+            type: 'closed' as const,
         },
     ];
-
-    const [activeTab, setActiveTab] = useState(0);
+    const activeTab =
+        tabs.find((tab) => tab.type === changeRequestType) || tabs[0];
 
     const columns = useMemo(
         () => [
@@ -193,7 +202,7 @@ export const ChangeRequestsTabs = ({
         data: searchedData,
         getSearchText,
         getSearchContext,
-    } = useSearch(columns, searchValue, tabs[activeTab]?.data);
+    } = useSearch(columns, searchValue, activeTab?.data);
 
     const data = useMemo(
         () => (loading ? featuresPlaceholder : searchedData),
@@ -259,6 +268,7 @@ export const ChangeRequestsTabs = ({
         if (searchValue) {
             tableState.search = searchValue;
         }
+        tableState.type = changeRequestType;
 
         setSearchParams(tableState, {
             replace: true,
@@ -267,9 +277,10 @@ export const ChangeRequestsTabs = ({
             ...params,
             id: sortBy[0].id,
             desc: sortBy[0].desc || false,
+            type: changeRequestType,
         }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [loading, sortBy, searchValue, setSearchParams]);
+    }, [loading, sortBy, searchValue, setSearchParams, changeRequestType]);
 
     return (
         <PageContent
@@ -281,18 +292,20 @@ export const ChangeRequestsTabs = ({
                     titleElement={
                         <StyledTabContainer>
                             <Tabs
-                                value={tabs[activeTab]?.title}
+                                value={activeTab?.title}
                                 indicatorColor='primary'
                                 textColor='primary'
                                 variant='scrollable'
                                 allowScrollButtonsMobile
                             >
-                                {tabs.map((tab, index) => (
+                                {tabs.map((tab) => (
                                     <StyledTabButton
                                         key={tab.title}
                                         label={`${tab.title} (${tab.data.length})`}
                                         value={tab.title}
-                                        onClick={() => setActiveTab(index)}
+                                        onClick={() =>
+                                            setChangeRequestType(tab.type)
+                                        }
                                     />
                                 ))}
                             </Tabs>