Fix "PageChangeEffect does not run when changing view on the same object" (#12196)

Fixes https://github.com/twentyhq/core-team-issues/issues/950

This issue was due to the memoization inside `useIsMatchingLocation`,
which was rerendered only if the pathname changed but not the search
params.

After discussion with @lucasbordeau, we decided to remove the hook
`useIsMatchingLocation` and to create an equivalent util function which
takes the location as an argument.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useShowFullscreen.ts

@@ -1,19 +1,23 @@
 import { useMemo } from 'react';
 
 import { SettingsPath } from '@/types/SettingsPath';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+import { useLocation } from 'react-router-dom';
+import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const useShowFullscreen = () => {
-  const { isMatchingLocation } = useIsMatchingLocation();
+  const location = useLocation();
 
   return useMemo(() => {
     if (
-      isMatchingLocation('settings/' + SettingsPath.RestPlayground + '/*') ||
-      isMatchingLocation('settings/' + SettingsPath.GraphQLPlayground)
+      isMatchingLocation(
+        location,
+        'settings/' + SettingsPath.RestPlayground + '/*',
+      ) ||
+      isMatchingLocation(location, 'settings/' + SettingsPath.GraphQLPlayground)
     ) {
       return true;
     }
 
     return false;
-  }, [isMatchingLocation]);
+  }, [location]);
 };

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx

@@ -1,17 +1,25 @@
 import { renderHook } from '@testing-library/react';
+import * as reactRouterDom from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 
 import { AppPath } from '@/types/AppPath';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
-jest.mock('~/hooks/useIsMatchingLocation');
-const mockUseIsMatchingLocation = jest.mocked(useIsMatchingLocation);
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(),
+}));
+
+const mockUseLocation = reactRouterDom.useLocation as jest.Mock;
+
+jest.mock('~/utils/isMatchingLocation');
+const mockIsMatchingLocation = jest.mocked(isMatchingLocation);
 
 const setupMockIsMatchingLocation = (pathname: string) => {
-  mockUseIsMatchingLocation.mockReturnValueOnce({
-    isMatchingLocation: (path: string) => path === pathname,
-  });
+  mockUseLocation.mockReturnValue({ pathname });
+  mockIsMatchingLocation.mockImplementation(
+    (_location, path) => path === pathname,
+  );
 };
 
 const getResult = () =>

packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts

@@ -1,28 +1,29 @@
 import { useMemo } from 'react';
 
 import { AppPath } from '@/types/AppPath';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+import { useLocation } from 'react-router-dom';
+import { isMatchingLocation } from '~/utils/isMatchingLocation';
 
 export const useShowAuthModal = () => {
-  const { isMatchingLocation } = useIsMatchingLocation();
+  const location = useLocation();
 
   return useMemo(() => {
     if (
-      isMatchingLocation(AppPath.Invite) ||
-      isMatchingLocation(AppPath.InviteTeam) ||
-      isMatchingLocation(AppPath.CreateProfile) ||
-      isMatchingLocation(AppPath.SyncEmails) ||
-      isMatchingLocation(AppPath.ResetPassword) ||
-      isMatchingLocation(AppPath.VerifyEmail) ||
-      isMatchingLocation(AppPath.Verify) ||
-      isMatchingLocation(AppPath.SignInUp) ||
-      isMatchingLocation(AppPath.CreateWorkspace) ||
-      isMatchingLocation(AppPath.PlanRequired) ||
-      isMatchingLocation(AppPath.PlanRequiredSuccess)
+      isMatchingLocation(location, AppPath.Invite) ||
+      isMatchingLocation(location, AppPath.InviteTeam) ||
+      isMatchingLocation(location, AppPath.CreateProfile) ||
+      isMatchingLocation(location, AppPath.SyncEmails) ||
+      isMatchingLocation(location, AppPath.ResetPassword) ||
+      isMatchingLocation(location, AppPath.VerifyEmail) ||
+      isMatchingLocation(location, AppPath.Verify) ||
+      isMatchingLocation(location, AppPath.SignInUp) ||
+      isMatchingLocation(location, AppPath.CreateWorkspace) ||
+      isMatchingLocation(location, AppPath.PlanRequired) ||
+      isMatchingLocation(location, AppPath.PlanRequiredSuccess)
     ) {
       return true;
     }
 
     return false;
-  }, [isMatchingLocation]);
+  }, [location]);
 };