-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(service-portal): Notifications on minarsidur (#13566)
* WIP notifications * update header buttons * Update notifications load more * Notifications to header menu * Add badge and linkbutton * Mark As Read * enable notification service and workers * feature deploy trigger * Update charts and api infra * Update resolver and ui w seen and read * Update org logo loader * Update notifitication logo display from org. * Minor cleanup * Try logo url * Audit * Add notification UI and resolver feature flag * Use document scope * Add circle option to action card. Add clickable whole line bubble notification * fix logo width * cleanup after pr comments * Single resolver queries audit contain id * Update click action url * Update names after code review suggestion * Update after code review suggestions. Add relative island.is link support --------- Co-authored-by: Rafn Árnason <[email protected]> Co-authored-by: brynjarorng <[email protected]>
- Loading branch information
3 people
authored
Apr 22, 2024
1 parent
d442285
commit 3612a21
Showing
42 changed files
with
1,124 additions
and
228 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
apps/service-portal/src/components/Notifications/NotificationButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React, { useEffect, useRef, useState } from 'react' | ||
| import cn from 'classnames' | ||
| import { Box, Button } from '@island.is/island-ui/core' | ||
| import { useLocale } from '@island.is/localization' | ||
| import { theme } from '@island.is/island-ui/theme' | ||
| import { useWindowSize } from 'react-use' | ||
| import { m } from '@island.is/service-portal/core' | ||
| import NotificationMenu from './NotificationMenu' | ||
| import { MenuTypes } from '../Header/Header' | ||
| import * as styles from './Notifications.css' | ||
| import { | ||
| useGetUserNotificationsOverviewQuery, | ||
| useMarkAllNotificationsAsSeenMutation, | ||
| } from '@island.is/service-portal/information' | ||
|
|
||
| interface Props { | ||
| setMenuState: (val: MenuTypes) => void | ||
| showMenu?: boolean | ||
| } | ||
|
|
||
| const NotificationButton = ({ setMenuState, showMenu = false }: Props) => { | ||
| const { formatMessage } = useLocale() | ||
| const [hasMarkedLocally, setHasMarkedLocally] = useState(false) | ||
| const [markAllAsSeen] = useMarkAllNotificationsAsSeenMutation() | ||
| const { width } = useWindowSize() | ||
| const isMobile = width < theme.breakpoints.md | ||
| const ref = useRef<HTMLButtonElement>(null) | ||
|
|
||
| const { data } = useGetUserNotificationsOverviewQuery({ | ||
| variables: { | ||
| input: { | ||
| limit: 5, | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| const showBadge = | ||
| !!data?.userNotificationsOverview?.unseenCount && !hasMarkedLocally | ||
|
|
||
| useEffect(() => { | ||
| if (showMenu && showBadge) { | ||
| markAllAsSeen() | ||
| setHasMarkedLocally(true) | ||
| } | ||
| }, [showMenu, showBadge]) | ||
|
|
||
| return ( | ||
| <Box position="relative" marginRight={[1, 1, 2]}> | ||
| <Button | ||
| variant="utility" | ||
| colorScheme="white" | ||
| icon={showMenu && isMobile ? 'close' : 'notifications'} | ||
| iconType="outline" | ||
| onClick={() => { | ||
| showMenu && isMobile | ||
| ? setMenuState(undefined) | ||
| : setMenuState('notifications') | ||
| }} | ||
| ref={ref} | ||
| aria-label={formatMessage(m.notifications)} | ||
| /> | ||
| {data?.userNotificationsOverview?.data.length ? ( | ||
| <Box | ||
| borderRadius="circle" | ||
| className={cn({ [styles.badge]: showBadge })} | ||
| /> | ||
| ) : undefined} | ||
| <NotificationMenu | ||
| closeNotificationMenu={() => setMenuState(undefined)} | ||
| sideMenuOpen={showMenu} | ||
| rightPosition={ref.current?.getBoundingClientRect().right} | ||
| data={data} | ||
| /> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default NotificationButton |
Oops, something went wrong.