[CP-2995] extract headlineMessage logic into useTemporaryHeadlineMess…

…age hook

libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx

@@ -25,6 +25,7 @@ import Icon, {
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { selectActiveDeviceMenuElements } from "generic-view/store"
+import useTemporaryHeadlineMessage from "Core/__deprecated__/renderer/components/rest/header/use-temporary-headline-message"
 
 const messages = defineMessages({
   backButtonLabel: { id: "module.generic.viewBackButton" },
@@ -107,6 +108,9 @@ const Header: FunctionComponent<HeaderProps> = ({
       }
     }
   }, [genericMenu, location, previousViewName])
+
+  const temporaryHeadlineMessage = useTemporaryHeadlineMessage(currentLocation)
+
   return (
     <HeaderWrapper>
       {previousViewName ? (
@@ -123,7 +127,7 @@ const Header: FunctionComponent<HeaderProps> = ({
       ) : (
         <HeaderText
           displayStyle={TextDisplayStyle.Headline4}
-          message={currentLocation}
+          message={temporaryHeadlineMessage}
           data-testid={"location"}
         />
       )}

libs/core/__deprecated__/renderer/components/rest/header/use-temporary-headline-message.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useState, useEffect } from "react"
+import { useSelector } from "react-redux"
+import { selectActiveApiDeviceId, selectEntitiesData } from "generic-view/store"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+
+function useTemporaryHeadlineMessage(
+  currentLocation: { id: string } | string | undefined
+) {
+  const [headlineMessage, setHeadlineMessage] = useState("")
+  const deviceId = useSelector(selectActiveApiDeviceId)!
+  const entitiesData = useSelector((state: ReduxRootState) =>
+    selectEntitiesData(state, {
+      entitiesType: "contacts",
+      deviceId,
+    })
+  )
+
+  useEffect(() => {
+    if (typeof currentLocation === "string") {
+      setHeadlineMessage(currentLocation)
+    }
+
+    if (currentLocation === "Contacts") {
+      const ContactsLength = entitiesData?.length ?? 0
+      const message =
+        ContactsLength < 1 ? "Contacts" : `Contacts (${ContactsLength})`
+      setHeadlineMessage(message)
+    }
+  }, [currentLocation, entitiesData?.length])
+
+  return headlineMessage
+}
+
+export default useTemporaryHeadlineMessage