lemmy-ui/src/shared/components/navbar.tsx

563 lines
17 KiB
TypeScript
Raw Normal View History

2021-02-22 02:39:04 +00:00
import { Component, linkEvent, createRef, RefObject } from "inferno";
import { Link } from "inferno-router";
import { Subscription } from "rxjs";
import { WebSocketService, UserService } from "../services";
import {
UserOperation,
2020-12-24 01:58:27 +00:00
GetReplies,
GetRepliesResponse,
2021-03-15 18:09:31 +00:00
GetPersonMentions,
GetPersonMentionsResponse,
2020-12-24 01:58:27 +00:00
GetPrivateMessages,
PrivateMessagesResponse,
SortType,
GetSiteResponse,
2020-12-24 01:58:27 +00:00
CommentView,
CommentResponse,
PrivateMessageResponse,
2020-12-24 01:58:27 +00:00
PrivateMessageView,
2021-02-22 02:39:04 +00:00
} from "lemmy-js-client";
import {
wsJsonToRes,
showAvatars,
fetchLimit,
toast,
setTheme,
getLanguage,
notifyComment,
notifyPrivateMessage,
isBrowser,
2020-09-09 20:33:40 +00:00
wsSubscribe,
supportLemmyUrl,
2020-12-24 01:58:27 +00:00
wsUserOp,
wsClient,
authField,
2021-02-22 02:39:04 +00:00
} from "../utils";
import { i18n } from "../i18next";
import { PictrsImage } from "./pictrs-image";
import { Icon } from "./icon";
interface NavbarProps {
2020-12-24 01:58:27 +00:00
site_res: GetSiteResponse;
}
interface NavbarState {
isLoggedIn: boolean;
expanded: boolean;
2020-12-24 01:58:27 +00:00
replies: CommentView[];
mentions: CommentView[];
messages: PrivateMessageView[];
unreadCount: number;
searchParam: string;
toggleSearch: boolean;
onSiteBanner?(url: string): any;
}
export class Navbar extends Component<NavbarProps, NavbarState> {
private wsSub: Subscription;
private userSub: Subscription;
private unreadCountSub: Subscription;
private searchTextField: RefObject<HTMLInputElement>;
emptyState: NavbarState = {
2020-12-24 01:58:27 +00:00
isLoggedIn: !!this.props.site_res.my_user,
unreadCount: 0,
replies: [],
mentions: [],
messages: [],
expanded: false,
2021-02-22 02:39:04 +00:00
searchParam: "",
toggleSearch: false,
};
2020-09-09 20:33:40 +00:00
subscription: any;
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
2020-09-09 20:33:40 +00:00
this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage);
}
componentDidMount() {
// Subscribe to jwt changes
if (isBrowser()) {
this.websocketEvents();
2020-09-09 20:33:40 +00:00
this.searchTextField = createRef();
console.log(`isLoggedIn = ${this.state.isLoggedIn}`);
// On the first load, check the unreads
if (this.state.isLoggedIn == false) {
// setTheme(data.my_user.theme, true);
// i18n.changeLanguage(getLanguage());
// i18n.changeLanguage('de');
} else {
this.requestNotificationPermission();
WebSocketService.Instance.send(
wsClient.userJoin({
auth: authField(),
})
);
2020-09-09 20:33:40 +00:00
this.fetchUnreads();
}
this.userSub = UserService.Instance.jwtSub.subscribe(res => {
// A login
if (res !== undefined) {
this.requestNotificationPermission();
WebSocketService.Instance.send(
wsClient.getSite({ auth: authField() })
);
} else {
2020-09-09 20:33:40 +00:00
this.setState({ isLoggedIn: false });
}
});
// Subscribe to unread count changes
this.unreadCountSub = UserService.Instance.unreadCountSub.subscribe(
res => {
this.setState({ unreadCount: res });
}
);
}
}
handleSearchParam(i: Navbar, event: any) {
i.state.searchParam = event.target.value;
i.setState(i.state);
}
updateUrl() {
const searchParam = this.state.searchParam;
2021-02-22 02:39:04 +00:00
this.setState({ searchParam: "" });
this.setState({ toggleSearch: false });
2021-02-22 02:39:04 +00:00
if (searchParam === "") {
this.context.router.history.push(`/search/`);
} else {
const searchParamEncoded = encodeURIComponent(searchParam);
this.context.router.history.push(
`/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1`
);
}
}
handleSearchSubmit(i: Navbar, event: any) {
event.preventDefault();
i.updateUrl();
}
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) {
2021-02-22 02:39:04 +00:00
if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) {
i.state.toggleSearch = false;
i.setState(i.state);
}
}
render() {
return this.navbar();
}
componentWillUnmount() {
this.wsSub.unsubscribe();
this.userSub.unsubscribe();
this.unreadCountSub.unsubscribe();
}
// TODO class active corresponding to current page
navbar() {
2021-03-15 18:09:31 +00:00
let localUserView =
UserService.Instance.localUserView || this.props.site_res.my_user;
return (
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
2020-12-24 01:58:27 +00:00
{this.props.site_res.site_view && (
2020-09-15 16:07:18 +00:00
<Link
title={
this.props.site_res.site_view.site.description ||
this.props.site_res.site_view.site.name
}
2020-09-15 16:07:18 +00:00
className="d-flex align-items-center navbar-brand mr-md-3"
to="/"
>
2020-12-24 01:58:27 +00:00
{this.props.site_res.site_view.site.icon && showAvatars() && (
<PictrsImage
src={this.props.site_res.site_view.site.icon}
icon
/>
2020-09-15 16:07:18 +00:00
)}
2020-12-24 01:58:27 +00:00
{this.props.site_res.site_view.site.name}
2020-09-15 16:07:18 +00:00
</Link>
)}
{this.state.isLoggedIn && (
<Link
className="ml-auto p-1 navbar-toggler nav-link border-0"
to="/inbox"
2021-02-22 02:39:04 +00:00
title={i18n.t("inbox")}
>
2021-02-11 20:35:27 +00:00
<Icon icon="bell" />
{this.state.unreadCount > 0 && (
<span
class="mx-1 badge badge-light"
aria-label={`${this.state.unreadCount} ${i18n.t(
2021-02-22 02:39:04 +00:00
"unread_messages"
)}`}
>
{this.state.unreadCount}
</span>
)}
</Link>
)}
<button
class="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
2021-02-22 02:39:04 +00:00
data-tippy-content={i18n.t("expand_here")}
>
2021-02-11 20:35:27 +00:00
<Icon icon="menu" />
</button>
<div
2021-02-22 02:39:04 +00:00
className={`${!this.state.expanded && "collapse"} navbar-collapse`}
>
<ul class="navbar-nav my-2 mr-auto">
<li class="nav-item">
<Link
className="nav-link"
to="/communities"
2021-02-22 02:39:04 +00:00
title={i18n.t("communities")}
>
2021-02-22 02:39:04 +00:00
{i18n.t("communities")}
</Link>
</li>
<li class="nav-item">
<Link
className="nav-link"
to={{
2021-02-22 02:39:04 +00:00
pathname: "/create_post",
state: { prevPath: this.currentLocation },
}}
2021-02-22 02:39:04 +00:00
title={i18n.t("create_post")}
>
2021-02-22 02:39:04 +00:00
{i18n.t("create_post")}
</Link>
</li>
{this.canCreateCommunity && (
<li class="nav-item">
<Link
className="nav-link"
to="/create_community"
title={i18n.t("create_community")}
>
{i18n.t("create_community")}
</Link>
</li>
)}
<li class="nav-item">
<a
className="nav-link"
2021-02-22 02:39:04 +00:00
title={i18n.t("support_lemmy")}
href={supportLemmyUrl}
>
<Icon icon="heart" classes="small" />
</a>
</li>
</ul>
<ul class="navbar-nav my-2">
{this.canAdmin && (
<li className="nav-item">
<Link
className="nav-link"
to={`/admin`}
2021-02-22 02:39:04 +00:00
title={i18n.t("admin_settings")}
>
2021-02-11 20:35:27 +00:00
<Icon icon="settings" />
</Link>
</li>
)}
</ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
id="search-input"
class={`form-control mr-0 search-input ${
2021-02-22 02:39:04 +00:00
this.state.toggleSearch ? "show-input" : "hide-input"
}`}
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
ref={this.searchTextField}
type="text"
2021-02-22 02:39:04 +00:00
placeholder={i18n.t("search")}
onBlur={linkEvent(this, this.handleSearchBlur)}
></input>
<label class="sr-only" htmlFor="search-input">
2021-02-22 02:39:04 +00:00
{i18n.t("search")}
</label>
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
class="px-1 btn btn-link"
style="color: var(--gray)"
2021-02-22 02:39:04 +00:00
aria-label={i18n.t("search")}
>
2021-02-11 20:35:27 +00:00
<Icon icon="search" />
</button>
</form>
)}
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
className="nav-link"
to="/inbox"
2021-02-22 02:39:04 +00:00
title={i18n.t("inbox")}
>
2021-02-11 20:35:27 +00:00
<Icon icon="bell" />
{this.state.unreadCount > 0 && (
<span
class="ml-1 badge badge-light"
aria-label={`${this.state.unreadCount} ${i18n.t(
2021-02-22 02:39:04 +00:00
"unread_messages"
)}`}
>
{this.state.unreadCount}
</span>
)}
</Link>
</li>
</ul>
<ul class="navbar-nav">
<li className="nav-item">
<Link
className="nav-link"
2021-03-15 18:09:31 +00:00
to={`/u/${localUserView.person.name}`}
2021-02-22 02:39:04 +00:00
title={i18n.t("settings")}
>
<span>
2021-03-15 18:09:31 +00:00
{localUserView.person.avatar && showAvatars() && (
<PictrsImage src={localUserView.person.avatar} icon />
)}
{localUserView.person.display_name
? localUserView.person.display_name
2021-03-15 18:09:31 +00:00
: localUserView.person.name}
</span>
</Link>
</li>
</ul>
</>
) : (
<ul class="navbar-nav my-2">
<li className="ml-2 nav-item">
<Link
className="btn btn-success"
to="/login"
2021-02-22 02:39:04 +00:00
title={i18n.t("login_sign_up")}
>
2021-02-22 02:39:04 +00:00
{i18n.t("login_sign_up")}
</Link>
</li>
</ul>
)}
</div>
</div>
</nav>
);
}
expandNavbar(i: Navbar) {
i.state.expanded = !i.state.expanded;
i.setState(i.state);
}
2020-12-24 01:58:27 +00:00
parseMessage(msg: any) {
let op = wsUserOp(msg);
2021-04-07 15:54:38 +00:00
console.log(msg);
if (msg.error) {
2021-02-22 02:39:04 +00:00
if (msg.error == "not_logged_in") {
UserService.Instance.logout();
location.reload();
}
return;
} else if (msg.reconnect) {
toast(i18n.t("websocket_reconnected"), "success");
WebSocketService.Instance.send(
wsClient.userJoin({
auth: authField(),
})
);
this.fetchUnreads();
2020-12-24 01:58:27 +00:00
} else if (op == UserOperation.GetReplies) {
let data = wsJsonToRes<GetRepliesResponse>(msg).data;
let unreadReplies = data.replies.filter(r => !r.comment.read);
this.state.replies = unreadReplies;
this.state.unreadCount = this.calculateUnreadCount();
this.setState(this.state);
this.sendUnreadCount();
2021-03-15 18:09:31 +00:00
} else if (op == UserOperation.GetPersonMentions) {
let data = wsJsonToRes<GetPersonMentionsResponse>(msg).data;
2020-12-24 01:58:27 +00:00
let unreadMentions = data.mentions.filter(r => !r.comment.read);
this.state.mentions = unreadMentions;
this.state.unreadCount = this.calculateUnreadCount();
this.setState(this.state);
this.sendUnreadCount();
2020-12-24 01:58:27 +00:00
} else if (op == UserOperation.GetPrivateMessages) {
let data = wsJsonToRes<PrivateMessagesResponse>(msg).data;
let unreadMessages = data.private_messages.filter(
r => !r.private_message.read
);
this.state.messages = unreadMessages;
this.state.unreadCount = this.calculateUnreadCount();
this.setState(this.state);
this.sendUnreadCount();
2020-12-24 01:58:27 +00:00
} else if (op == UserOperation.GetSite) {
2020-09-09 20:33:40 +00:00
// This is only called on a successful login
2020-12-24 01:58:27 +00:00
let data = wsJsonToRes<GetSiteResponse>(msg).data;
console.log(data.my_user);
2021-03-15 18:09:31 +00:00
UserService.Instance.localUserView = data.my_user;
setTheme(UserService.Instance.localUserView.local_user.theme);
i18n.changeLanguage(getLanguage());
2020-09-09 20:33:40 +00:00
this.state.isLoggedIn = true;
this.setState(this.state);
2020-12-24 01:58:27 +00:00
} else if (op == UserOperation.CreateComment) {
let data = wsJsonToRes<CommentResponse>(msg).data;
if (this.state.isLoggedIn) {
2021-03-15 18:09:31 +00:00
if (
data.recipient_ids.includes(
UserService.Instance.localUserView.local_user.id
)
) {
2020-12-24 01:58:27 +00:00
this.state.replies.push(data.comment_view);
this.state.unreadCount++;
this.setState(this.state);
this.sendUnreadCount();
2020-12-24 01:58:27 +00:00
notifyComment(data.comment_view, this.context.router);
}
}
2020-12-24 01:58:27 +00:00
} else if (op == UserOperation.CreatePrivateMessage) {
let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
if (this.state.isLoggedIn) {
2020-12-24 01:58:27 +00:00
if (
2021-03-15 18:09:31 +00:00
data.private_message_view.recipient.id ==
UserService.Instance.localUserView.person.id
2020-12-24 01:58:27 +00:00
) {
this.state.messages.push(data.private_message_view);
this.state.unreadCount++;
this.setState(this.state);
this.sendUnreadCount();
2020-12-24 01:58:27 +00:00
notifyPrivateMessage(data.private_message_view, this.context.router);
}
}
}
}
fetchUnreads() {
2021-02-22 02:39:04 +00:00
console.log("Fetching unreads...");
2020-12-24 01:58:27 +00:00
let repliesForm: GetReplies = {
sort: SortType.New,
unread_only: true,
page: 1,
limit: fetchLimit,
auth: authField(),
};
2021-03-15 18:09:31 +00:00
let personMentionsForm: GetPersonMentions = {
sort: SortType.New,
unread_only: true,
page: 1,
limit: fetchLimit,
auth: authField(),
};
2020-12-24 01:58:27 +00:00
let privateMessagesForm: GetPrivateMessages = {
unread_only: true,
page: 1,
limit: fetchLimit,
auth: authField(),
};
2021-02-22 02:39:04 +00:00
if (this.currentLocation !== "/inbox") {
WebSocketService.Instance.send(wsClient.getReplies(repliesForm));
WebSocketService.Instance.send(
2021-03-15 18:09:31 +00:00
wsClient.getPersonMentions(personMentionsForm)
);
WebSocketService.Instance.send(
wsClient.getPrivateMessages(privateMessagesForm)
);
}
}
get currentLocation() {
return this.context.router.history.location.pathname;
}
sendUnreadCount() {
UserService.Instance.unreadCountSub.next(this.state.unreadCount);
}
calculateUnreadCount(): number {
return (
2020-12-24 01:58:27 +00:00
this.state.replies.filter(r => !r.comment.read).length +
this.state.mentions.filter(r => !r.comment.read).length +
this.state.messages.filter(r => !r.private_message.read).length
);
}
get canAdmin(): boolean {
return (
2021-03-15 18:09:31 +00:00
UserService.Instance.localUserView &&
2020-12-24 01:58:27 +00:00
this.props.site_res.admins
2021-03-15 18:09:31 +00:00
.map(a => a.person.id)
.includes(UserService.Instance.localUserView.person.id)
);
}
get canCreateCommunity(): boolean {
let adminOnly =
this.props.site_res.site_view?.site.community_creation_admin_only;
return !adminOnly || this.canAdmin;
}
/// Listens for some websocket errors
websocketEvents() {
let msg = i18n.t("websocket_disconnected");
WebSocketService.Instance.closeEventListener(() => {
toast(msg, "danger");
});
}
requestNotificationPermission() {
2021-03-15 18:09:31 +00:00
if (UserService.Instance.localUserView) {
2021-02-22 02:39:04 +00:00
document.addEventListener("DOMContentLoaded", function () {
if (!Notification) {
2021-02-22 02:39:04 +00:00
toast(i18n.t("notifications_error"), "danger");
return;
}
2021-02-22 02:39:04 +00:00
if (Notification.permission !== "granted")
Notification.requestPermission();
});
}
}
}