2020-07-03 20:20:44 +00:00
|
|
|
import { Component, linkEvent, createRef, RefObject } from 'inferno';
|
|
|
|
import { Link } from 'inferno-router';
|
2019-10-19 00:20:27 +00:00
|
|
|
import { Subscription } from 'rxjs';
|
2019-04-21 17:49:57 +00:00
|
|
|
import { retryWhen, delay, take } from 'rxjs/operators';
|
|
|
|
import { WebSocketService, UserService } from '../services';
|
2019-10-19 00:20:27 +00:00
|
|
|
import {
|
|
|
|
UserOperation,
|
|
|
|
GetRepliesForm,
|
|
|
|
GetRepliesResponse,
|
2019-10-20 00:46:29 +00:00
|
|
|
GetUserMentionsForm,
|
|
|
|
GetUserMentionsResponse,
|
2020-01-22 21:35:29 +00:00
|
|
|
GetPrivateMessagesForm,
|
|
|
|
PrivateMessagesResponse,
|
2019-10-19 00:20:27 +00:00
|
|
|
SortType,
|
|
|
|
GetSiteResponse,
|
|
|
|
Comment,
|
2020-02-01 01:02:20 +00:00
|
|
|
CommentResponse,
|
2020-01-22 21:35:29 +00:00
|
|
|
PrivateMessage,
|
2020-04-10 20:55:57 +00:00
|
|
|
UserView,
|
2020-02-01 03:34:08 +00:00
|
|
|
PrivateMessageResponse,
|
2020-01-19 05:38:45 +00:00
|
|
|
WebSocketJsonResponse,
|
2019-10-19 00:20:27 +00:00
|
|
|
} from '../interfaces';
|
2020-01-15 21:20:54 +00:00
|
|
|
import {
|
2020-01-19 04:54:10 +00:00
|
|
|
wsJsonToRes,
|
2020-06-09 21:17:24 +00:00
|
|
|
pictrsAvatarThumbnail,
|
2020-01-15 21:20:54 +00:00
|
|
|
showAvatars,
|
|
|
|
fetchLimit,
|
2020-01-22 21:35:29 +00:00
|
|
|
isCommentType,
|
2020-01-23 03:29:11 +00:00
|
|
|
toast,
|
2020-03-20 20:13:54 +00:00
|
|
|
messageToastify,
|
|
|
|
md,
|
2020-01-15 21:20:54 +00:00
|
|
|
} from '../utils';
|
2019-04-09 03:28:07 +00:00
|
|
|
import { version } from '../version';
|
2019-08-09 01:58:04 +00:00
|
|
|
import { i18n } from '../i18next';
|
2019-03-21 01:22:31 +00:00
|
|
|
|
2019-04-09 00:04:03 +00:00
|
|
|
interface NavbarState {
|
|
|
|
isLoggedIn: boolean;
|
|
|
|
expanded: boolean;
|
2019-10-19 00:20:27 +00:00
|
|
|
replies: Array<Comment>;
|
2019-10-20 00:46:29 +00:00
|
|
|
mentions: Array<Comment>;
|
2020-01-22 21:35:29 +00:00
|
|
|
messages: Array<PrivateMessage>;
|
2019-04-20 18:17:00 +00:00
|
|
|
unreadCount: number;
|
2019-04-30 15:19:00 +00:00
|
|
|
siteName: string;
|
2020-04-10 20:55:57 +00:00
|
|
|
admins: Array<UserView>;
|
2020-06-30 21:30:23 +00:00
|
|
|
searchParam: string;
|
2020-07-03 20:20:44 +00:00
|
|
|
toggleSearch: boolean;
|
2019-04-09 00:04:03 +00:00
|
|
|
}
|
|
|
|
|
2020-07-03 20:20:44 +00:00
|
|
|
export class Navbar extends Component<any, NavbarState> {
|
2019-04-21 17:49:57 +00:00
|
|
|
private wsSub: Subscription;
|
|
|
|
private userSub: Subscription;
|
2020-07-03 20:20:44 +00:00
|
|
|
private searchTextField: RefObject<HTMLInputElement>;
|
2019-04-09 00:04:03 +00:00
|
|
|
emptyState: NavbarState = {
|
2019-10-19 00:20:27 +00:00
|
|
|
isLoggedIn: UserService.Instance.user !== undefined,
|
2019-04-20 18:17:00 +00:00
|
|
|
unreadCount: 0,
|
2019-05-18 23:41:22 +00:00
|
|
|
replies: [],
|
2019-10-20 00:46:29 +00:00
|
|
|
mentions: [],
|
2020-01-22 21:35:29 +00:00
|
|
|
messages: [],
|
2019-04-09 00:04:03 +00:00
|
|
|
expanded: false,
|
2019-10-19 00:20:27 +00:00
|
|
|
siteName: undefined,
|
2020-04-10 20:55:57 +00:00
|
|
|
admins: [],
|
2020-06-30 21:30:23 +00:00
|
|
|
searchParam: '',
|
2020-07-03 20:20:44 +00:00
|
|
|
toggleSearch: false,
|
2019-10-19 00:20:27 +00:00
|
|
|
};
|
2019-03-21 01:22:31 +00:00
|
|
|
|
2019-04-08 05:19:02 +00:00
|
|
|
constructor(props: any, context: any) {
|
2019-03-21 01:22:31 +00:00
|
|
|
super(props, context);
|
2019-04-09 00:04:03 +00:00
|
|
|
this.state = this.emptyState;
|
2019-03-23 01:42:57 +00:00
|
|
|
|
|
|
|
// Subscribe to user changes
|
2019-04-21 17:49:57 +00:00
|
|
|
this.userSub = UserService.Instance.sub.subscribe(user => {
|
2019-04-20 18:17:00 +00:00
|
|
|
this.state.isLoggedIn = user.user !== undefined;
|
2020-02-11 15:14:09 +00:00
|
|
|
if (this.state.isLoggedIn) {
|
|
|
|
this.state.unreadCount = user.user.unreadCount;
|
|
|
|
this.requestNotificationPermission();
|
|
|
|
}
|
2019-04-20 18:17:00 +00:00
|
|
|
this.setState(this.state);
|
2019-03-23 01:42:57 +00:00
|
|
|
});
|
2019-04-21 17:49:57 +00:00
|
|
|
|
|
|
|
this.wsSub = WebSocketService.Instance.subject
|
2020-01-15 21:20:54 +00:00
|
|
|
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
2019-10-19 00:20:27 +00:00
|
|
|
.subscribe(
|
|
|
|
msg => this.parseMessage(msg),
|
|
|
|
err => console.error(err),
|
2019-04-21 17:49:57 +00:00
|
|
|
() => console.log('complete')
|
2019-10-19 00:20:27 +00:00
|
|
|
);
|
2019-04-30 15:19:00 +00:00
|
|
|
|
2019-05-18 23:41:22 +00:00
|
|
|
if (this.state.isLoggedIn) {
|
|
|
|
this.requestNotificationPermission();
|
2020-02-01 03:34:08 +00:00
|
|
|
// TODO couldn't get re-logging in to re-fetch unreads
|
|
|
|
this.fetchUnreads();
|
2019-05-18 23:41:22 +00:00
|
|
|
}
|
|
|
|
|
2019-04-30 15:19:00 +00:00
|
|
|
WebSocketService.Instance.getSite();
|
2020-06-30 21:30:23 +00:00
|
|
|
|
2020-07-03 20:20:44 +00:00
|
|
|
this.searchTextField = createRef();
|
2020-06-30 21:30:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
handleSearchParam(i: Navbar, event: any) {
|
|
|
|
i.state.searchParam = event.target.value;
|
|
|
|
i.setState(i.state);
|
|
|
|
}
|
|
|
|
|
|
|
|
updateUrl() {
|
2020-07-03 20:20:44 +00:00
|
|
|
const searchParam = this.state.searchParam;
|
2020-06-30 21:30:23 +00:00
|
|
|
this.setState({ searchParam: '' });
|
2020-07-03 20:20:44 +00:00
|
|
|
this.setState({ toggleSearch: false });
|
|
|
|
if (searchParam === '') {
|
|
|
|
this.context.router.history.push(`/search/`);
|
|
|
|
} else {
|
|
|
|
this.context.router.history.push(
|
|
|
|
`/search/q/${searchParam}/type/all/sort/topall/page/1`
|
|
|
|
);
|
|
|
|
}
|
2020-06-30 21:30:23 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
handleSearchSubmit(i: Navbar, event: any) {
|
|
|
|
event.preventDefault();
|
|
|
|
i.updateUrl();
|
2019-03-21 01:22:31 +00:00
|
|
|
}
|
|
|
|
|
2020-07-03 20:20:44 +00:00
|
|
|
handleSearchBtn(i: Navbar, event: any) {
|
|
|
|
event.preventDefault();
|
|
|
|
i.setState({ toggleSearch: true });
|
|
|
|
|
|
|
|
i.searchTextField.current.focus();
|
|
|
|
const offsetWidth = i.searchTextField.current.offsetWidth;
|
|
|
|
if (i.state.searchParam && offsetWidth > 100) {
|
|
|
|
i.updateUrl();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
handleSearchBlur(i: Navbar, event: any) {
|
|
|
|
if (!(event.relatedTarget && event.relatedTarget.name !== 'search-btn')) {
|
|
|
|
i.state.toggleSearch = false;
|
|
|
|
i.setState(i.state);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-21 01:22:31 +00:00
|
|
|
render() {
|
2020-01-31 00:07:01 +00:00
|
|
|
return this.navbar();
|
2019-03-21 01:22:31 +00:00
|
|
|
}
|
|
|
|
|
2019-04-21 17:49:57 +00:00
|
|
|
componentWillUnmount() {
|
|
|
|
this.wsSub.unsubscribe();
|
|
|
|
this.userSub.unsubscribe();
|
|
|
|
}
|
|
|
|
|
2019-03-21 01:22:31 +00:00
|
|
|
// TODO class active corresponding to current page
|
|
|
|
navbar() {
|
|
|
|
return (
|
2019-08-20 02:37:32 +00:00
|
|
|
<nav class="container-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3">
|
2019-04-29 01:30:52 +00:00
|
|
|
<Link title={version} class="navbar-brand" to="/">
|
2019-04-30 15:19:00 +00:00
|
|
|
{this.state.siteName}
|
2019-04-29 01:30:52 +00:00
|
|
|
</Link>
|
2020-03-20 20:13:54 +00:00
|
|
|
{this.state.isLoggedIn && (
|
|
|
|
<Link
|
2020-03-20 21:20:59 +00:00
|
|
|
class="ml-auto p-0 navbar-toggler nav-link"
|
2020-03-20 20:13:54 +00:00
|
|
|
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>
|
|
|
|
)}
|
2019-10-19 00:20:27 +00:00
|
|
|
<button
|
|
|
|
class="navbar-toggler"
|
|
|
|
type="button"
|
2020-01-31 20:52:27 +00:00
|
|
|
aria-label="menu"
|
2019-10-19 00:20:27 +00:00
|
|
|
onClick={linkEvent(this, this.expandNavbar)}
|
2020-03-03 07:29:45 +00:00
|
|
|
data-tippy-content={i18n.t('expand_here')}
|
2019-10-19 00:20:27 +00:00
|
|
|
>
|
2019-03-23 01:42:57 +00:00
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
|
</button>
|
2019-10-19 00:20:27 +00:00
|
|
|
<div
|
|
|
|
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
|
|
|
|
>
|
2020-07-04 15:35:38 +00:00
|
|
|
<ul class="navbar-nav my-2 mr-auto">
|
2019-04-03 06:49:32 +00:00
|
|
|
<li class="nav-item">
|
2020-03-03 07:29:45 +00:00
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to="/communities"
|
|
|
|
title={i18n.t('communities')}
|
|
|
|
>
|
2020-02-02 18:50:44 +00:00
|
|
|
{i18n.t('communities')}
|
2019-10-19 00:20:27 +00:00
|
|
|
</Link>
|
2019-03-23 01:42:57 +00:00
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
2019-10-19 00:20:27 +00:00
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to={{
|
|
|
|
pathname: '/create_post',
|
|
|
|
state: { prevPath: this.currentLocation },
|
|
|
|
}}
|
2020-03-03 07:29:45 +00:00
|
|
|
title={i18n.t('create_post')}
|
2019-10-19 00:20:27 +00:00
|
|
|
>
|
2020-02-02 18:50:44 +00:00
|
|
|
{i18n.t('create_post')}
|
2019-10-19 00:20:27 +00:00
|
|
|
</Link>
|
2019-03-23 01:42:57 +00:00
|
|
|
</li>
|
|
|
|
<li class="nav-item">
|
2020-03-03 07:29:45 +00:00
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to="/create_community"
|
|
|
|
title={i18n.t('create_community')}
|
|
|
|
>
|
2020-02-02 18:50:44 +00:00
|
|
|
{i18n.t('create_community')}
|
2019-10-19 00:20:27 +00:00
|
|
|
</Link>
|
2019-03-23 01:42:57 +00:00
|
|
|
</li>
|
2020-01-19 21:28:29 +00:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
2020-01-29 01:10:22 +00:00
|
|
|
class="nav-link"
|
2020-01-19 21:28:29 +00:00
|
|
|
to="/sponsors"
|
|
|
|
title={i18n.t('donate_to_lemmy')}
|
|
|
|
>
|
|
|
|
<svg class="icon">
|
|
|
|
<use xlinkHref="#icon-coffee"></use>
|
|
|
|
</svg>
|
|
|
|
</Link>
|
|
|
|
</li>
|
2019-03-23 01:42:57 +00:00
|
|
|
</ul>
|
2020-07-03 20:20:44 +00:00
|
|
|
{!this.context.router.history.location.pathname.match(
|
|
|
|
/^\/search/
|
|
|
|
) && (
|
2020-07-04 15:35:38 +00:00
|
|
|
<form
|
|
|
|
class="form-inline"
|
|
|
|
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
|
|
|
>
|
|
|
|
<input
|
|
|
|
class={`form-control mr-0 search-input ${
|
|
|
|
this.state.toggleSearch ? 'show-input' : 'hide-input'
|
|
|
|
}`}
|
|
|
|
onInput={linkEvent(this, this.handleSearchParam)}
|
|
|
|
value={this.state.searchParam}
|
|
|
|
ref={this.searchTextField}
|
|
|
|
type="text"
|
|
|
|
placeholder={i18n.t('search')}
|
|
|
|
onBlur={linkEvent(this, this.handleSearchBlur)}
|
|
|
|
></input>
|
|
|
|
<button
|
|
|
|
name="search-btn"
|
|
|
|
onClick={linkEvent(this, this.handleSearchBtn)}
|
|
|
|
class="btn btn-link"
|
|
|
|
style="color: var(--gray)"
|
2020-07-03 20:20:44 +00:00
|
|
|
>
|
2020-07-04 15:35:38 +00:00
|
|
|
<svg class="icon">
|
|
|
|
<use xlinkHref="#icon-search"></use>
|
|
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
</form>
|
2020-06-30 21:30:23 +00:00
|
|
|
)}
|
2020-07-04 02:00:51 +00:00
|
|
|
<ul class="navbar-nav my-2">
|
2020-04-10 20:55:57 +00:00
|
|
|
{this.canAdmin && (
|
2020-07-04 02:00:51 +00:00
|
|
|
<li className="nav-item">
|
2020-04-10 20:55:57 +00:00
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to={`/admin`}
|
|
|
|
title={i18n.t('admin_settings')}
|
|
|
|
>
|
|
|
|
<svg class="icon">
|
|
|
|
<use xlinkHref="#icon-settings"></use>
|
|
|
|
</svg>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
)}
|
2020-07-04 15:35:38 +00:00
|
|
|
</ul>
|
|
|
|
{this.state.isLoggedIn ? (
|
|
|
|
<>
|
|
|
|
<ul class="navbar-nav my-2">
|
2020-07-04 02:00:51 +00:00
|
|
|
<li className="nav-item">
|
2020-03-03 07:29:45 +00:00
|
|
|
<Link class="nav-link" to="/inbox" title={i18n.t('inbox')}>
|
2019-10-30 03:35:39 +00:00
|
|
|
<svg class="icon">
|
2020-03-03 07:29:45 +00:00
|
|
|
<use xlinkHref="#icon-bell"></use>
|
2019-10-30 03:35:39 +00:00
|
|
|
</svg>
|
|
|
|
{this.state.unreadCount > 0 && (
|
|
|
|
<span class="ml-1 badge badge-light">
|
|
|
|
{this.state.unreadCount}
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</Link>
|
|
|
|
</li>
|
2020-07-04 15:35:38 +00:00
|
|
|
</ul>
|
|
|
|
<ul class="navbar-nav">
|
2019-10-30 03:35:39 +00:00
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to={`/u/${UserService.Instance.user.username}`}
|
2020-03-03 07:29:45 +00:00
|
|
|
title={i18n.t('settings')}
|
2019-10-19 00:20:27 +00:00
|
|
|
>
|
2019-12-29 20:39:48 +00:00
|
|
|
<span>
|
2020-01-02 21:55:54 +00:00
|
|
|
{UserService.Instance.user.avatar && showAvatars() && (
|
2019-12-29 20:39:48 +00:00
|
|
|
<img
|
2020-06-09 21:17:24 +00:00
|
|
|
src={pictrsAvatarThumbnail(
|
2019-12-29 20:39:48 +00:00
|
|
|
UserService.Instance.user.avatar
|
|
|
|
)}
|
|
|
|
height="32"
|
|
|
|
width="32"
|
|
|
|
class="rounded-circle mr-2"
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{UserService.Instance.user.username}
|
|
|
|
</span>
|
2019-10-30 03:35:39 +00:00
|
|
|
</Link>
|
2019-04-20 22:49:23 +00:00
|
|
|
</li>
|
2020-07-04 15:35:38 +00:00
|
|
|
</ul>
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<ul class="navbar-nav my-2">
|
|
|
|
<li className="nav-item">
|
|
|
|
<Link
|
|
|
|
class="nav-link"
|
|
|
|
to="/login"
|
|
|
|
title={i18n.t('login_sign_up')}
|
|
|
|
>
|
|
|
|
{i18n.t('login_sign_up')}
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
)}
|
2019-03-23 01:42:57 +00:00
|
|
|
</div>
|
2019-03-21 01:22:31 +00:00
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-04-08 05:19:02 +00:00
|
|
|
expandNavbar(i: Navbar) {
|
2019-04-06 22:49:51 +00:00
|
|
|
i.state.expanded = !i.state.expanded;
|
|
|
|
i.setState(i.state);
|
|
|
|
}
|
2019-04-21 17:49:57 +00:00
|
|
|
|
2020-01-19 05:38:45 +00:00
|
|
|
parseMessage(msg: WebSocketJsonResponse) {
|
2020-01-19 04:54:10 +00:00
|
|
|
let res = wsJsonToRes(msg);
|
2020-01-25 14:58:53 +00:00
|
|
|
if (msg.error) {
|
|
|
|
if (msg.error == 'not_logged_in') {
|
2019-05-02 16:55:29 +00:00
|
|
|
UserService.Instance.logout();
|
|
|
|
location.reload();
|
|
|
|
}
|
2019-04-21 17:49:57 +00:00
|
|
|
return;
|
2020-02-04 16:19:05 +00:00
|
|
|
} else if (msg.reconnect) {
|
|
|
|
this.fetchUnreads();
|
2020-01-19 04:54:10 +00:00
|
|
|
} else if (res.op == UserOperation.GetReplies) {
|
|
|
|
let data = res.data as GetRepliesResponse;
|
|
|
|
let unreadReplies = data.replies.filter(r => !r.read);
|
2019-05-18 23:41:22 +00:00
|
|
|
|
2019-05-19 16:15:08 +00:00
|
|
|
this.state.replies = unreadReplies;
|
2020-02-01 03:34:08 +00:00
|
|
|
this.state.unreadCount = this.calculateUnreadCount();
|
2019-10-20 00:46:29 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
this.sendUnreadCount();
|
2020-01-19 04:54:10 +00:00
|
|
|
} else if (res.op == UserOperation.GetUserMentions) {
|
|
|
|
let data = res.data as GetUserMentionsResponse;
|
|
|
|
let unreadMentions = data.mentions.filter(r => !r.read);
|
2019-10-20 00:46:29 +00:00
|
|
|
|
|
|
|
this.state.mentions = unreadMentions;
|
2020-02-01 03:34:08 +00:00
|
|
|
this.state.unreadCount = this.calculateUnreadCount();
|
2019-10-20 00:46:29 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
this.sendUnreadCount();
|
2020-01-24 00:17:42 +00:00
|
|
|
} else if (res.op == UserOperation.GetPrivateMessages) {
|
|
|
|
let data = res.data as PrivateMessagesResponse;
|
|
|
|
let unreadMessages = data.messages.filter(r => !r.read);
|
2020-01-22 21:35:29 +00:00
|
|
|
|
|
|
|
this.state.messages = unreadMessages;
|
2020-02-01 03:34:08 +00:00
|
|
|
this.state.unreadCount = this.calculateUnreadCount();
|
2020-01-22 21:35:29 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
this.sendUnreadCount();
|
2020-02-01 01:02:20 +00:00
|
|
|
} else if (res.op == UserOperation.CreateComment) {
|
|
|
|
let data = res.data as CommentResponse;
|
|
|
|
|
2020-02-01 03:34:08 +00:00
|
|
|
if (this.state.isLoggedIn) {
|
2020-02-01 01:02:20 +00:00
|
|
|
if (data.recipient_ids.includes(UserService.Instance.user.id)) {
|
2020-02-01 03:34:08 +00:00
|
|
|
this.state.replies.push(data.comment);
|
|
|
|
this.state.unreadCount++;
|
|
|
|
this.setState(this.state);
|
|
|
|
this.sendUnreadCount();
|
2020-02-01 01:02:20 +00:00
|
|
|
this.notify(data.comment);
|
|
|
|
}
|
|
|
|
}
|
2020-02-01 03:34:08 +00:00
|
|
|
} else if (res.op == UserOperation.CreatePrivateMessage) {
|
|
|
|
let data = res.data as PrivateMessageResponse;
|
|
|
|
|
|
|
|
if (this.state.isLoggedIn) {
|
|
|
|
if (data.message.recipient_id == UserService.Instance.user.id) {
|
|
|
|
this.state.messages.push(data.message);
|
|
|
|
this.state.unreadCount++;
|
|
|
|
this.setState(this.state);
|
|
|
|
this.sendUnreadCount();
|
|
|
|
this.notify(data.message);
|
|
|
|
}
|
|
|
|
}
|
2020-01-19 04:54:10 +00:00
|
|
|
} else if (res.op == UserOperation.GetSite) {
|
|
|
|
let data = res.data as GetSiteResponse;
|
2019-04-30 15:19:00 +00:00
|
|
|
|
2020-03-05 03:35:55 +00:00
|
|
|
if (data.site && !this.state.siteName) {
|
2020-01-19 04:54:10 +00:00
|
|
|
this.state.siteName = data.site.name;
|
2020-04-10 20:55:57 +00:00
|
|
|
this.state.admins = data.admins;
|
2020-01-19 04:54:10 +00:00
|
|
|
WebSocketService.Instance.site = data.site;
|
2020-04-10 20:55:57 +00:00
|
|
|
WebSocketService.Instance.admins = data.admins;
|
|
|
|
|
2019-04-30 15:19:00 +00:00
|
|
|
this.setState(this.state);
|
|
|
|
}
|
2019-10-19 00:20:27 +00:00
|
|
|
}
|
2019-04-21 17:49:57 +00:00
|
|
|
}
|
|
|
|
|
2019-10-20 00:46:29 +00:00
|
|
|
fetchUnreads() {
|
2019-04-21 17:49:57 +00:00
|
|
|
if (this.state.isLoggedIn) {
|
|
|
|
let repliesForm: GetRepliesForm = {
|
|
|
|
sort: SortType[SortType.New],
|
|
|
|
unread_only: true,
|
|
|
|
page: 1,
|
2020-01-15 21:20:54 +00:00
|
|
|
limit: fetchLimit,
|
2019-04-21 17:49:57 +00:00
|
|
|
};
|
2019-10-20 00:46:29 +00:00
|
|
|
|
|
|
|
let userMentionsForm: GetUserMentionsForm = {
|
|
|
|
sort: SortType[SortType.New],
|
|
|
|
unread_only: true,
|
|
|
|
page: 1,
|
2020-01-15 21:20:54 +00:00
|
|
|
limit: fetchLimit,
|
2019-10-20 00:46:29 +00:00
|
|
|
};
|
2020-01-22 21:35:29 +00:00
|
|
|
|
|
|
|
let privateMessagesForm: GetPrivateMessagesForm = {
|
|
|
|
unread_only: true,
|
|
|
|
page: 1,
|
|
|
|
limit: fetchLimit,
|
|
|
|
};
|
|
|
|
|
2019-10-19 00:20:27 +00:00
|
|
|
if (this.currentLocation !== '/inbox') {
|
2019-09-06 00:55:57 +00:00
|
|
|
WebSocketService.Instance.getReplies(repliesForm);
|
2019-10-20 00:46:29 +00:00
|
|
|
WebSocketService.Instance.getUserMentions(userMentionsForm);
|
2020-01-22 21:35:29 +00:00
|
|
|
WebSocketService.Instance.getPrivateMessages(privateMessagesForm);
|
2019-09-06 00:55:57 +00:00
|
|
|
}
|
2019-04-21 17:49:57 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-29 16:07:41 +00:00
|
|
|
get currentLocation() {
|
|
|
|
return this.context.router.history.location.pathname;
|
|
|
|
}
|
|
|
|
|
2019-10-20 00:46:29 +00:00
|
|
|
sendUnreadCount() {
|
2020-02-11 15:14:09 +00:00
|
|
|
UserService.Instance.user.unreadCount = this.state.unreadCount;
|
2019-10-19 00:20:27 +00:00
|
|
|
UserService.Instance.sub.next({
|
|
|
|
user: UserService.Instance.user,
|
|
|
|
});
|
2019-04-21 17:49:57 +00:00
|
|
|
}
|
2019-04-09 00:04:03 +00:00
|
|
|
|
2020-02-01 03:34:08 +00:00
|
|
|
calculateUnreadCount(): number {
|
2019-10-20 00:46:29 +00:00
|
|
|
return (
|
|
|
|
this.state.replies.filter(r => !r.read).length +
|
2020-01-22 21:35:29 +00:00
|
|
|
this.state.mentions.filter(r => !r.read).length +
|
|
|
|
this.state.messages.filter(r => !r.read).length
|
2019-10-20 00:46:29 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-04-10 20:55:57 +00:00
|
|
|
get canAdmin(): boolean {
|
|
|
|
return (
|
|
|
|
UserService.Instance.user &&
|
|
|
|
this.state.admins.map(a => a.id).includes(UserService.Instance.user.id)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-05-18 23:41:22 +00:00
|
|
|
requestNotificationPermission() {
|
|
|
|
if (UserService.Instance.user) {
|
2020-06-09 21:17:24 +00:00
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
2019-10-19 00:20:27 +00:00
|
|
|
if (!Notification) {
|
2020-01-23 03:29:11 +00:00
|
|
|
toast(i18n.t('notifications_error'), 'danger');
|
2019-10-19 00:20:27 +00:00
|
|
|
return;
|
|
|
|
}
|
2019-05-18 23:41:22 +00:00
|
|
|
|
2019-10-19 00:20:27 +00:00
|
|
|
if (Notification.permission !== 'granted')
|
|
|
|
Notification.requestPermission();
|
|
|
|
});
|
2019-05-18 23:41:22 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-01 01:02:20 +00:00
|
|
|
notify(reply: Comment | PrivateMessage) {
|
2020-03-20 20:13:54 +00:00
|
|
|
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`;
|
2020-04-01 15:31:24 +00:00
|
|
|
let htmlBody = md.render(reply.content);
|
|
|
|
let body = reply.content; // Unfortunately the notifications API can't do html
|
2020-03-20 20:13:54 +00:00
|
|
|
|
|
|
|
messageToastify(
|
|
|
|
creator_name,
|
|
|
|
creator_avatar,
|
2020-04-01 15:31:24 +00:00
|
|
|
htmlBody,
|
2020-03-20 20:13:54 +00:00
|
|
|
link,
|
|
|
|
this.context.router
|
|
|
|
);
|
|
|
|
|
2019-10-19 00:20:27 +00:00
|
|
|
if (Notification.permission !== 'granted') Notification.requestPermission();
|
2019-05-18 23:41:22 +00:00
|
|
|
else {
|
2020-02-01 03:34:08 +00:00
|
|
|
var notification = new Notification(reply.creator_name, {
|
2020-03-20 20:13:54 +00:00
|
|
|
icon: creator_avatar,
|
|
|
|
body: body,
|
2020-02-01 03:34:08 +00:00
|
|
|
});
|
2019-05-18 23:41:22 +00:00
|
|
|
|
|
|
|
notification.onclick = () => {
|
2020-03-20 20:13:54 +00:00
|
|
|
event.preventDefault();
|
|
|
|
this.context.router.history.push(link);
|
2019-05-18 23:41:22 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|