more work

packages/frontend/package.json

@@ -21,7 +21,7 @@
     "i18n:sort": "tsx ./src/i18n/check.ts --sort"
   },
   "dependencies": {
-    "@altinn/altinn-components": "^0.6.11",
+    "@altinn/altinn-components": "^0.6.12",
     "@digdir/designsystemet-css": "0.11.0-next.10",
     "@digdir/designsystemet-react": "1.0.0-next.15",
     "@digdir/designsystemet-theme": "1.0.0-next.14",

packages/frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import { ProtectedPageLayout } from './components/PageLayout/PageLayoutArbeidsFlate';
+import { ProtectedPageLayout } from './components/PageLayout/PageLayout.tsx';
 import { Inbox } from './pages/Inbox';
 import { Routes as AppRoutes } from './pages/Inbox/Inbox';
 import { InboxItemPage } from './pages/InboxItemPage';

packages/frontend/src/api/useDialogs.tsx

@@ -100,7 +100,7 @@ export const useSearchDialogs = ({ parties, searchString, org }: searchDialogsPr
   const { organizations } = useOrganizations();
   const partyURIs = parties.map((party) => party.party);
   const debouncedSearchString = useDebounce(searchString, 300)[0];
-  const enabled = !!debouncedSearchString && debouncedSearchString.length > 2;
+  const enabled = !!debouncedSearchString && debouncedSearchString.length > 2 && parties.length > 0;
   const { data, isSuccess, isLoading, isFetching } = useQuery<GetAllDialogsForPartiesQuery>({
     queryKey: [QUERY_KEYS.SEARCH_DIALOGS, partyURIs, debouncedSearchString, org],
     queryFn: () => searchDialogs(partyURIs, debouncedSearchString, org),

packages/frontend/src/components/Header/SearchBar.tsx

@@ -5,16 +5,16 @@ import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { useWindowSize } from '../../../utils/useWindowSize.tsx';
 import { Backdrop } from '../Backdrop';
-import { useSearchString } from '../Header';
+import { useSearchString } from '../PageLayout/Search/useSearchString.tsx';
 import { SearchDropdown } from './SearchDropdown';
 import styles from './search.module.css';
 
 export const SearchBar: React.FC = () => {
   const [showDropdownMenu, setShowDropdownMenu] = useState(false);
   const { t } = useTranslation();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { searchString, setSearchString } = useSearchString();
-  const [searchValue, setSearchValue] = useState<string>(searchString);
+  const { enteredSearchValue, onSearch } = useSearchString();
+  const [searchValue, setSearchValue] = useState<string>(enteredSearchValue);
   const { isTabletOrSmaller } = useWindowSize();
 
   const handleClose = () => {
@@ -28,22 +28,14 @@ export const SearchBar: React.FC = () => {
       setSearchParams(newSearchParams, { replace: true });
     }
     setSearchValue('');
-    setSearchString('');
+    onSearch('');
   };
 
   const onClearAndCloseDropdown = () => {
     onClearSearch();
     setShowDropdownMenu(false);
   };
 
-  const onSearch = (value: string) => {
-    const newSearchParams = new URLSearchParams(searchParams);
-    setSearchString(value);
-    setShowDropdownMenu(false);
-    newSearchParams.set('search', value);
-    setSearchParams(newSearchParams, { replace: true });
-  };
-
   useEffect(() => {
     const searchBarParam = new URLSearchParams(searchParams);
     if (searchBarParam.get('search')) {

packages/frontend/src/components/Header/index.ts

@@ -1 +1 @@
-export * from './Header.tsx';
+export * from './SearchBar.tsx';

packages/frontend/src/components/PageLayout/Background/Background.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import { useSelectedDialogs } from '../SelectedDialogs.tsx';
+import styles from './background.module.css';
+
+/* Needed for applying theme to components, like e.g. ProfileButton  */
+export const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
+  const { inSelectionMode } = useSelectedDialogs();
+  return (
+    <div
+      data-testid="pageLayout-background"
+      className={cx(styles.background, {
+        isCompany: isCompany,
+        [styles.inSelectionMode]: inSelectionMode,
+      })}
+    >
+      {children}
+    </div>
+  );
+};

packages/frontend/src/components/PageLayout/Background/index.ts

@@ -0,0 +1 @@
+export * from './Background.tsx';

packages/frontend/src/components/PageLayout/PageLayoutArbeidsFlate.tsx → packages/frontend/src/components/PageLayout/PageLayout.tsx

@@ -1,58 +1,33 @@
 import { type FooterProps, type HeaderProps, Layout, type LayoutProps, RootProvider } from '@altinn/altinn-components';
 import { useQueryClient } from '@tanstack/react-query';
-import cx from 'classnames';
-import { type ChangeEvent, useEffect, useState } from 'react';
-import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
+import { type ChangeEvent, useEffect } from 'react';
+import { Link, Outlet, useSearchParams } from 'react-router-dom';
 import { useDialogs } from '../../api/useDialogs.tsx';
 import { useParties } from '../../api/useParties.ts';
 import { getSearchStringFromQueryParams } from '../../pages/Inbox/queryParams.ts';
 import { useSavedSearches } from '../../pages/SavedSearches/useSavedSearches.ts';
 import { useProfile } from '../../profile';
 import { BetaBanner } from '../BetaBanner/BetaBanner';
-import { useSearchString } from '../Header';
 import { useAuth } from '../Login/AuthContext.tsx';
 import { useAccounts } from './Accounts/useAccounts.tsx';
-import { useFooter } from './Footer/useFooter.tsx';
-import { useSelectedDialogs } from './SelectedDialogs';
-import { useSidebarMenu } from './Sidebar/useSidebarMenu.tsx';
-import styles from './pageLayout.module.css';
-
-export const useUpdateOnLocationChange = (fn: () => void) => {
-  const location = useLocation();
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
-  useEffect(() => {
-    fn();
-  }, [location, fn]);
-};
-
-const Background: React.FC<{ children: React.ReactNode; isCompany: boolean }> = ({ children, isCompany }) => {
-  const { inSelectionMode } = useSelectedDialogs();
-  return (
-    <div
-      data-testid="pageLayout-background"
-      className={cx(styles.background, {
-        isCompany: isCompany,
-        [styles.inSelectionMode]: inSelectionMode,
-      })}
-    >
-      {children}
-    </div>
-  );
-};
+import { Background } from './Background';
+import { useFooter } from './Footer';
+import { useSearchString } from './Search/useSearchString.tsx';
+import { useSidebarMenu } from './Sidebar';
 
 export const ProtectedPageLayout = () => {
   const { isAuthenticated } = useAuth();
   if (!isAuthenticated) {
     return null;
   }
-  return <PageLayoutArbeidsFlate />;
+  return <PageLayout />;
 };
 
-export const PageLayoutArbeidsFlate: React.FC = () => {
+export const PageLayout: React.FC = () => {
   const [searchParams] = useSearchParams();
-  const [searchValue, setSearchValue] = useState<string>('');
   const queryClient = useQueryClient();
-  const { setSearchString } = useSearchString();
+  const { searchValue, setSearchValue, onSearch, onClear } = useSearchString();
+
   const { selectedProfile, selectedParties, parties, selectedPartyIds } = useParties();
   const { accounts, selectedAccount, accountSearch } = useAccounts({ parties, selectedParties });
   const { currentPartySavedSearches } = useSavedSearches(selectedPartyIds);
@@ -71,21 +46,25 @@ export const PageLayoutArbeidsFlate: React.FC = () => {
 
   useProfile();
 
-  useUpdateOnLocationChange(() => {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Full control of what triggers this code is needed
+  useEffect(() => {
     const searchString = getSearchStringFromQueryParams(searchParams);
     queryClient.setQueryData(['search'], () => searchString || '');
-  });
+  }, [searchParams]);
 
   const headerProps: HeaderProps = {
     currentAccount: selectedAccount,
+    logo: {
+      as: (props) => <Link to="/" {...props} />,
+    },
     search: {
       expanded: false,
       name: 'search',
       placeholder: 'Søk',
       value: searchValue,
-      onClear: () => setSearchValue(''),
+      onClear: () => onClear(),
       onChange: (event: ChangeEvent<HTMLInputElement>) => setSearchValue(event.target.value),
-      onEnter: () => setSearchString(searchValue),
+      onEnter: () => onSearch(searchValue),
     },
     menu: {
       menuLabel: 'Meny',