From 97928c5597a3172d4a8c459dec8ad0058dbd8b66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9E=C3=B3r=C3=B0ur=20H?= <thordur@hugsmidjan.is>
Date: Mon, 16 Sep 2024 16:00:48 +0000
Subject: [PATCH] fix(service-portal): Add error toast to overveiw (#16021)

* Add error toast to overveiw

* Remove console log

* Fix focus on checkmark inbox

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/DocumentLine/DocumentLineV2.tsx  | 17 ++++++++++-------
 .../documents/src/hooks/useIsChildFocused.ts    | 13 ++++++++++---
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx b/libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx
index 3249b6ba453c..31e4158d50f9 100644
--- a/libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx
+++ b/libs/service-portal/documents/src/components/DocumentLine/DocumentLineV2.tsx
@@ -3,7 +3,7 @@ import format from 'date-fns/format'
 import { FC, useEffect, useRef, useState } from 'react'
 
 import { DocumentV2, DocumentV2Content } from '@island.is/api/schema'
-import { Box, Text, LoadingDots, Icon } from '@island.is/island-ui/core'
+import { Box, Text, LoadingDots, Icon, toast } from '@island.is/island-ui/core'
 import { dateFormat } from '@island.is/shared/constants'
 import { m } from '@island.is/service-portal/core'
 import * as styles from './DocumentLine.css'
@@ -75,7 +75,7 @@ export const DocumentLine: FC<Props> = ({
   const avatarRef = useRef(null)
 
   const isFocused = useIsChildFocusedorHovered(wrapperRef)
-  const isAvatarFocused = useIsChildFocusedorHovered(avatarRef)
+  const isAvatarFocused = useIsChildFocusedorHovered(avatarRef, false)
 
   useEffect(() => {
     setHasFocusOrHover(isFocused)
@@ -135,11 +135,14 @@ export const DocumentLine: FC<Props> = ({
         }
       },
       onError: () => {
-        setDocumentDisplayError(
-          formatMessage(messages.documentFetchError, {
-            senderName: documentLine.sender?.name ?? '',
-          }),
-        )
+        const errorMessage = formatMessage(messages.documentFetchError, {
+          senderName: documentLine.sender?.name ?? '',
+        })
+        if (asFrame) {
+          toast.error(errorMessage, { toastId: 'overview-doc-error' })
+        } else {
+          setDocumentDisplayError(errorMessage)
+        }
       },
     })
 
diff --git a/libs/service-portal/documents/src/hooks/useIsChildFocused.ts b/libs/service-portal/documents/src/hooks/useIsChildFocused.ts
index 205c90cc1171..6b09e75c21bc 100644
--- a/libs/service-portal/documents/src/hooks/useIsChildFocused.ts
+++ b/libs/service-portal/documents/src/hooks/useIsChildFocused.ts
@@ -1,6 +1,9 @@
 import { RefObject, useEffect, useState } from 'react'
 
-export const useIsChildFocusedorHovered = (ref: RefObject<HTMLElement>) => {
+export const useIsChildFocusedorHovered = (
+  ref: RefObject<HTMLElement>,
+  focus = true,
+) => {
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -21,11 +24,15 @@ export const useIsChildFocusedorHovered = (ref: RefObject<HTMLElement>) => {
       }
     }
 
-    document.addEventListener('focusin', handleFocus)
+    if (focus) {
+      document.addEventListener('focusin', handleFocus)
+    }
     document.addEventListener('mouseover', handleHover)
 
     return () => {
-      document.removeEventListener('focusin', handleFocus)
+      if (focus) {
+        document.removeEventListener('focusin', handleFocus)
+      }
       document.removeEventListener('mouseover', handleHover)
     }
   }, [ref])