From 801ccdad6fbef634e14501b9c345f1177cd36f62 Mon Sep 17 00:00:00 2001 From: Liam Fitzgerald Date: Fri, 16 Apr 2021 16:01:52 +1000 Subject: [PATCH] notifications: refactor notification to match spec --- .../views/apps/notifications/notification.tsx | 163 +++++++++++------- 1 file changed, 96 insertions(+), 67 deletions(-) diff --git a/pkg/interface/src/views/apps/notifications/notification.tsx b/pkg/interface/src/views/apps/notifications/notification.tsx index e8aba5616..b4691ddba 100644 --- a/pkg/interface/src/views/apps/notifications/notification.tsx +++ b/pkg/interface/src/views/apps/notifications/notification.tsx @@ -1,6 +1,6 @@ -import React, { ReactNode, useCallback, useMemo, useState } from 'react'; -import { Row, Box } from '@tlon/indigo-react'; -import _ from 'lodash'; +import React, { ReactNode, useCallback, useMemo, useState } from "react"; +import { Row, Box } from "@tlon/indigo-react"; +import _ from "lodash"; import { GraphNotificationContents, IndexedNotification, @@ -9,16 +9,16 @@ import { GroupNotificationsConfig, Groups, Associations, - Contacts -} from '@urbit/api'; -import GlobalApi from '~/logic/api/global'; -import { getParentIndex } from '~/logic/lib/notification'; -import { StatelessAsyncAction } from '~/views/components/StatelessAsyncAction'; -import { GroupNotification } from './group'; -import { GraphNotification } from './graph'; -import { BigInteger } from 'big-integer'; -import { useHovering } from '~/logic/lib/util'; -import useHarkState from '~/logic/state/hark'; + Contacts, +} from "@urbit/api"; +import GlobalApi from "~/logic/api/global"; +import { getParentIndex } from "~/logic/lib/notification"; +import { StatelessAsyncAction } from "~/views/components/StatelessAsyncAction"; +import { GroupNotification } from "./group"; +import { GraphNotification } from "./graph"; +import { BigInteger } from "big-integer"; +import { useHovering } from "~/logic/lib/util"; +import useHarkState from "~/logic/state/hark"; interface NotificationProps { notification: IndexedNotification; @@ -33,73 +33,107 @@ function getMuted( graphs: NotificationGraphConfig ) { const { index, notification } = idxNotif; - if ('graph' in idxNotif.index) { + if ("graph" in idxNotif.index) { const { graph } = idxNotif.index.graph; - if(!('graph' in notification.contents)) { + if (!("graph" in notification.contents)) { throw new Error(); } const parent = getParentIndex(index.graph, notification.contents.graph); - return _.findIndex( - graphs?.watching || [], - g => g.graph === graph && g.index === parent - ) === -1; + return ( + _.findIndex( + graphs?.watching || [], + (g) => g.graph === graph && g.index === parent + ) === -1 + ); } - if ('group' in index) { - return _.findIndex(groups || [], g => g === index.group.group) === -1; + if ("group" in index) { + return _.findIndex(groups || [], (g) => g === index.group.group) === -1; } return false; } -function NotificationWrapper(props: { +export function NotificationWrapper(props: { api: GlobalApi; - time: BigInteger; - notif: IndexedNotification; + time?: BigInteger; + notification?: IndexedNotification; children: ReactNode; - archived: boolean; }) { - const { api, time, notif, children } = props; + const { api, time, notification, children } = props; const onArchive = useCallback(async () => { - return api.hark.archive(time, notif.index); - }, [time, notif]); + if (!(time && notification)) { + return; + } + return api.hark.archive(time, notification.index); + }, [time, notification]); - const groupConfig = useHarkState(state => state.notificationsGroupConfig); - const graphConfig = useHarkState(state => state.notificationsGraphConfig); + const groupConfig = useHarkState((state) => state.notificationsGroupConfig); + const graphConfig = useHarkState((state) => state.notificationsGraphConfig); - const isMuted = getMuted( - notif, - groupConfig, - graphConfig - ); + const isMuted = + time && notification && getMuted(notification, groupConfig, graphConfig); const onChangeMute = useCallback(async () => { - const func = isMuted ? 'unmute' : 'mute'; - return api.hark[func](notif); - }, [notif, api, isMuted]); + if (!notification) { + return; + } + const func = isMuted ? "unmute" : "mute"; + return api.hark[func](notification); + }, [notification, api, isMuted]); + + const onClick = () => { + if (!(time && notification) || notification.notification.read) { + return; + } + return api.hark.read(time, notification.index); + }; const { hovering, bind } = useHovering(); - const changeMuteDesc = isMuted ? 'Unmute' : 'Mute'; + const changeMuteDesc = isMuted ? "Unmute" : "Mute"; return ( {children} - - - {changeMuteDesc} - - {!props.archived && ( - - Dismiss - + + {time && notification && ( + <> + + {changeMuteDesc} + + + Dismiss + + )} @@ -110,23 +144,18 @@ export function Notification(props: NotificationProps) { const { notification, associations, archived } = props; const { read, contents, time } = notification.notification; - const Wrapper = ({ children }) => ( - - {children} - - ); + const wrapperProps = { + notification, + time: props.time, + api: props.api, + }; - if ('graph' in notification.index) { + if ("graph" in notification.index) { const index = notification.index.graph; const c: GraphNotificationContents = (contents as any).graph; return ( - + - + ); } - if ('group' in notification.index) { + if ("group" in notification.index) { const index = notification.index.group; const c: GroupNotificationContents = (contents as any).group; return ( - + - + ); }