From 89f93457dcea591279dbf585a9adbd7cfd711aed Mon Sep 17 00:00:00 2001
From: Mateusz Bacherycz <mbacherycz@icloud.com>
Date: Wed, 13 Nov 2024 10:31:36 +0100
Subject: [PATCH] fix: prevent context color flickering while navigating

---
 packages/frontend/src/api/useParties.ts           | 15 ++++++++++++++-
 .../src/components/PageLayout/PageLayout.tsx      |  9 +++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/api/useParties.ts b/packages/frontend/src/api/useParties.ts
index 7ad8b44b..441910e1 100644
--- a/packages/frontend/src/api/useParties.ts
+++ b/packages/frontend/src/api/useParties.ts
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import type { PartiesQuery, PartyFieldsFragment } from 'bff-types-generated';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
 import { normalizeFlattenParties } from '../components/PartyDropdown/normalizeFlattenParties.ts';
 import { QUERY_KEYS } from '../constants/queryKeys.ts';
@@ -18,6 +18,7 @@ interface UsePartiesOutput {
   setSelectedPartyIds: (parties: string[], allOrganizationsSelected: boolean) => void;
   currentEndUser: PartyFieldsFragment | undefined;
   allOrganizationsSelected: boolean;
+  selectedProfile: 'company' | 'person';
 }
 
 interface PartiesResult {
@@ -131,6 +132,12 @@ export const useParties = (): UsePartiesOutput => {
     }
   };
 
+  const isCompanyFromParams = useMemo(() => {
+    const party = searchParams.get('party');
+    const allParties = searchParams.get('allParties');
+    return Boolean(party || allParties);
+  }, [searchParams]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
   useEffect(() => {
     if (isSuccess && data?.parties?.length > 0) {
@@ -138,6 +145,11 @@ export const useParties = (): UsePartiesOutput => {
     }
   }, [isSuccess, data?.parties, location.search]);
 
+  const isCompanyProfile =
+    isCompanyFromParams || allOrganizationsSelected || selectedParties?.[0]?.partyType === 'Organization';
+
+  const selectedProfile = (isCompanyProfile ? 'company' : 'person') as 'company' | 'person';
+
   return {
     isLoading,
     isSuccess,
@@ -149,5 +161,6 @@ export const useParties = (): UsePartiesOutput => {
     currentEndUser: data?.parties.find((party) => party.isCurrentEndUser),
     deletedParties: data?.deletedParties ?? [],
     allOrganizationsSelected,
+    selectedProfile,
   };
 };
diff --git a/packages/frontend/src/components/PageLayout/PageLayout.tsx b/packages/frontend/src/components/PageLayout/PageLayout.tsx
index 970f3f66..d8fdec5d 100644
--- a/packages/frontend/src/components/PageLayout/PageLayout.tsx
+++ b/packages/frontend/src/components/PageLayout/PageLayout.tsx
@@ -65,7 +65,6 @@ const PageLayoutContent: React.FC<PageLayoutContentProps> = memo(
 
 const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
   const { inSelectionMode } = useSelectedDialogs();
-
   return (
     <div
       data-testid="pageLayout-background"
@@ -90,14 +89,12 @@ export const ProtectedPageLayout = () => {
 export const PageLayout: React.FC = () => {
   const queryClient = useQueryClient();
   const { t } = useTranslation();
-  const { selectedParties, allOrganizationsSelected } = useParties();
+  const { selectedParties, allOrganizationsSelected, selectedProfile } = useParties();
   const [searchParams] = useSearchParams();
 
   useProfile();
 
   const name = allOrganizationsSelected ? t('parties.labels.all_organizations') : selectedParties?.[0]?.name || '';
-  const isCompany = allOrganizationsSelected || selectedParties?.[0]?.partyType === 'Organization';
-  const profile = isCompany ? 'company' : 'person';
 
   useUpdateOnLocationChange(() => {
     const searchString = getSearchStringFromQueryParams(searchParams);
@@ -106,10 +103,10 @@ export const PageLayout: React.FC = () => {
 
   return (
     <SelectedDialogsContainer>
-      <Background isCompany={isCompany}>
+      <Background isCompany={selectedProfile === 'company'}>
         <BottomDrawerContainer>
           <BetaBanner />
-          <PageLayoutContent name={name} profile={profile} />
+          <PageLayoutContent name={name} profile={selectedProfile} />
           <Snackbar />
         </BottomDrawerContainer>
       </Background>