Browse Source

Notification improvements.

- Adding a navbar notification icon for mobile.
- Adding an in-app notification toast. To be improved later.
- Fixes #607
nutomic-federation-dev-docs
Dessalines 2 years ago
parent
commit
522649d9d3
  1. 2
      docs/src/about_goals.md
  2. 1
      ui/.eslintrc.json
  3. 48
      ui/src/components/navbar.tsx
  4. 24
      ui/src/utils.ts

2
docs/src/about_goals.md

@ -47,3 +47,5 @@
- https://docs.rs/activitypub/0.1.4/activitypub/
- [Activitypub vocab.](https://www.w3.org/TR/activitystreams-vocabulary/)
- [Activitypub main](https://www.w3.org/TR/activitypub/)
- [Federation.md](https://github.com/dariusk/gathio/blob/7fc93dbe9d4d99457a0e85c6c532112f415b7af2/FEDERATION.md)
- [Activitypub implementers guide](https://socialhub.activitypub.rocks/t/draft-guide-for-new-activitypub-implementers/479)

1
ui/.eslintrc.json

@ -38,6 +38,7 @@
"inferno/no-direct-mutation-state": 0,
"inferno/no-unknown-property": 0,
"max-statements": 0,
"max-params": 0,
"new-cap": 0,
"no-console": 0,
"no-duplicate-imports": 0,

48
ui/src/components/navbar.tsx

@ -26,6 +26,8 @@ import {
fetchLimit,
isCommentType,
toast,
messageToastify,
md,
} from '../utils';
import { version } from '../version';
import { i18n } from '../i18next';
@ -100,6 +102,22 @@ export class Navbar extends Component<any, NavbarState> {
<Link title={version} class="navbar-brand" to="/">
{this.state.siteName}
</Link>
{this.state.isLoggedIn && (
<Link
class="ml-auto navbar-toggler nav-link"
to="/inbox"
title={i18n.t('inbox')}
>
<svg class="icon">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
<span class="ml-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
</Link>
)}
<button
class="navbar-toggler"
type="button"
@ -350,21 +368,33 @@ export class Navbar extends Component<any, NavbarState> {
}
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 body = md.render(reply.content);
messageToastify(
creator_name,
creator_avatar,
body,
link,
this.context.router
);
if (Notification.permission !== 'granted') Notification.requestPermission();
else {
var notification = new Notification(reply.creator_name, {
icon: reply.creator_avatar
? reply.creator_avatar
: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`,
body: `${reply.content}`,
icon: creator_avatar,
body: body,
});
notification.onclick = () => {
this.context.router.history.push(
isCommentType(reply)
? `/post/${reply.post_id}/comment/${reply.id}`
: `/inbox`
);
event.preventDefault();
this.context.router.history.push(link);
};
}
}

24
ui/src/utils.ts

@ -218,7 +218,7 @@ export function validURL(str: string) {
}
export function validEmail(email: string) {
let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
let re = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
@ -436,6 +436,28 @@ export function toast(text: string, background: string = 'success') {
}).showToast();
}
export function messageToastify(
creator: string,
avatar: string,
body: string,
link: string,
router: any
) {
let backgroundColor = `var(--light)`;
Toastify({
text: `${body}<br />${creator}`,
avatar: avatar,
backgroundColor: backgroundColor,
close: true,
gravity: 'top',
position: 'right',
duration: 0,
onClick: () => {
router.history.push(link);
},
}).showToast();
}
export function setupTribute(): Tribute {
return new Tribute({
collection: [

Loading…
Cancel
Save