diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index e71306d6c..d90ad4d6a 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -50,6 +50,7 @@ import { commentsToFlatNodes, setupTippy, favIconUrl, + notify, } from '../utils'; import { i18n } from '../i18next'; @@ -426,6 +427,7 @@ export class Community extends Component { } else if (res.op == UserOperation.CreatePost) { let data = res.data as PostResponse; this.state.posts.unshift(data.post); + notify(data.post, this.context.router); this.setState(this.state); } else if (res.op == UserOperation.CreatePostLike) { let data = res.data as PostResponse; diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 246db6746..fba6fadca 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -55,6 +55,7 @@ import { commentsToFlatNodes, setupTippy, favIconUrl, + notify, } from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -717,6 +718,7 @@ export class Main extends Component { .includes(data.post.community_id) ) { this.state.posts.unshift(data.post); + notify(data.post, this.context.router); } } else { // NSFW posts @@ -730,6 +732,7 @@ export class Main extends Component { UserService.Instance.user.show_nsfw) ) { this.state.posts.unshift(data.post); + notify(data.post, this.context.router); } } this.setState(this.state); diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 351d00b8c..5c31a346c 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -24,12 +24,10 @@ import { pictrsAvatarThumbnail, showAvatars, fetchLimit, - isCommentType, toast, - messageToastify, - md, setTheme, getLanguage, + notify, } from '../utils'; import { i18n } from '../i18next'; @@ -436,7 +434,7 @@ export class Navbar extends Component { this.state.unreadCount++; this.setState(this.state); this.sendUnreadCount(); - this.notify(data.comment); + notify(data.comment, this.context.router); } } } else if (res.op == UserOperation.CreatePrivateMessage) { @@ -448,7 +446,7 @@ export class Navbar extends Component { this.state.unreadCount++; this.setState(this.state); this.sendUnreadCount(); - this.notify(data.message); + notify(data.message, this.context.router); } } } else if (res.op == UserOperation.GetSite) { @@ -542,37 +540,4 @@ export class Navbar extends Component { }); } } - - notify(reply: Comment | PrivateMessage) { - let creator_name = reply.creator_name; - let creator_avatar = reply.creator_avatar - ? reply.creator_avatar - : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`; - let link = isCommentType(reply) - ? `/post/${reply.post_id}/comment/${reply.id}` - : `/inbox`; - let htmlBody = md.render(reply.content); - let body = reply.content; // Unfortunately the notifications API can't do html - - messageToastify( - creator_name, - creator_avatar, - htmlBody, - link, - this.context.router - ); - - if (Notification.permission !== 'granted') Notification.requestPermission(); - else { - var notification = new Notification(reply.creator_name, { - icon: creator_avatar, - body: body, - }); - - notification.onclick = () => { - event.preventDefault(); - this.context.router.history.push(link); - }; - } - } } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 005320952..bff35e714 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -59,6 +59,7 @@ import tippy from 'tippy.js'; import moment from 'moment'; export const favIconUrl = '/static/assets/favicon.svg'; +export const favIconPngUrl = '/static/assets/apple-touch-icon.png'; export const repoUrl = 'https://github.com/LemmyNet/lemmy'; export const helpGuideUrl = '/docs/about_guide.html'; export const markdownHelpUrl = `${helpGuideUrl}#markdown-guide`; @@ -526,8 +527,19 @@ export function pictrsImage(hash: string, thumbnail: boolean = false): string { return out; } -export function isCommentType(item: Comment | PrivateMessage): item is Comment { - return (item as Comment).community_id !== undefined; +export function isCommentType( + item: Comment | PrivateMessage | Post +): item is Comment { + return ( + (item as Comment).community_id !== undefined && + (item as Comment).content !== undefined + ); +} + +export function isPostType( + item: Comment | PrivateMessage | Post +): item is Post { + return (item as Post).stickied !== undefined; } export function toast(text: string, background: string = 'success') { @@ -563,18 +575,20 @@ export function pictrsDeleteToast( }).showToast(); } -export function messageToastify( - creator: string, - avatar: string, - body: string, - link: string, - router: any -) { +interface NotifyInfo { + name: string; + icon: string; + link: string; + body: string; +} + +export function messageToastify(info: NotifyInfo, router: any) { + let htmlBody = info.body ? md.render(info.body) : ''; let backgroundColor = `var(--light)`; let toast = Toastify({ - text: `${body}
${creator}`, - avatar: avatar, + text: `${htmlBody}
${info.name}`, + avatar: info.icon, backgroundColor: backgroundColor, className: 'text-dark', close: true, @@ -584,12 +598,60 @@ export function messageToastify( onClick: () => { if (toast) { toast.hideToast(); - router.history.push(link); + router.history.push(info.link); } }, }).showToast(); } +export function notify(data: Comment | PrivateMessage | Post, router: any) { + let defaultFavIcon = `${window.location.protocol}//${window.location.host}${favIconPngUrl}`; + + let info: NotifyInfo; + + // If its a post, do community info / avatars + if (isPostType(data)) { + let post = data; + info = { + name: post.community_name, + icon: post.community_icon ? post.community_icon : defaultFavIcon, + link: `/post/${post.id}`, + body: post.name, + }; + } else if (isCommentType(data)) { + let comment = data; + info = { + name: comment.creator_name, + icon: comment.creator_avatar ? comment.creator_avatar : defaultFavIcon, + link: `/post/${comment.post_id}/comment/${comment.id}`, + body: comment.content, + }; + } else { + let pm = data; + info = { + name: pm.creator_name, + icon: pm.creator_avatar ? pm.creator_avatar : defaultFavIcon, + link: `/inbox`, + body: pm.content, + }; + } + + messageToastify(info, router); + + if (Notification.permission !== 'granted') Notification.requestPermission(); + else { + var notification = new Notification(info.name, { + icon: info.icon, + body: info.body, + }); + + notification.onclick = () => { + event.preventDefault(); + router.history.push(info.link); + }; + } +} + export function setupTribute(): Tribute { return new Tribute({ noMatchTemplate: function () {