Comment,
CommentResponse,
PrivateMessage,
- UserView,
PrivateMessageResponse,
WebSocketJsonResponse,
-} from '../interfaces';
+} from 'lemmy-js-client';
import {
wsJsonToRes,
pictrsAvatarThumbnail,
showAvatars,
fetchLimit,
- isCommentType,
toast,
- messageToastify,
- md,
setTheme,
+ getLanguage,
+ notifyComment,
+ notifyPrivateMessage,
} from '../utils';
import { i18n } from '../i18next';
mentions: Array<Comment>;
messages: Array<PrivateMessage>;
unreadCount: number;
- siteName: string;
- version: string;
- admins: Array<UserView>;
searchParam: string;
toggleSearch: boolean;
siteLoading: boolean;
+ siteRes: GetSiteResponse;
+ onSiteBanner?(url: string): any;
}
export class Navbar extends Component<any, NavbarState> {
mentions: [],
messages: [],
expanded: false,
- siteName: undefined,
- version: undefined,
- admins: [],
+ siteRes: {
+ site: {
+ id: null,
+ name: null,
+ creator_id: null,
+ creator_name: null,
+ published: null,
+ number_of_users: null,
+ number_of_posts: null,
+ number_of_comments: null,
+ number_of_communities: null,
+ enable_downvotes: null,
+ open_registration: null,
+ enable_nsfw: null,
+ icon: null,
+ banner: null,
+ creator_preferred_username: null,
+ },
+ my_user: null,
+ admins: [],
+ banned: [],
+ online: null,
+ version: null,
+ federated_instances: null,
+ },
searchParam: '',
toggleSearch: false,
siteLoading: true,
this.context.router.history.push(`/search/`);
} else {
this.context.router.history.push(
- `/search/q/${searchParam}/type/all/sort/topall/page/1`
+ `/search/q/${searchParam}/type/All/sort/TopAll/page/1`
);
}
}
// TODO class active corresponding to current page
navbar() {
+ let user = UserService.Instance.user;
return (
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
{!this.state.siteLoading ? (
- <Link title={this.state.version} class="navbar-brand" to="/">
- {this.state.siteName}
+ <Link
+ title={this.state.siteRes.version}
+ class="d-flex align-items-center navbar-brand mr-md-3"
+ to="/"
+ >
+ {this.state.siteRes.site.icon && showAvatars() && (
+ <img
+ src={pictrsAvatarThumbnail(this.state.siteRes.site.icon)}
+ height="32"
+ width="32"
+ class="rounded-circle mr-2"
+ />
+ )}
+ {this.state.siteRes.site.name}
</Link>
) : (
<div class="navbar-item">
<use xlinkHref="#icon-bell"></use>
</svg>
{this.state.unreadCount > 0 && (
- <span class="ml-1 badge badge-light">
+ <span class="mx-1 badge badge-light">
{this.state.unreadCount}
</span>
)}
</Link>
)}
<button
- class="navbar-toggler border-0"
+ class="navbar-toggler border-0 p-1"
type="button"
aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)}
</Link>
</li>
</ul>
+ <ul class="navbar-nav my-2">
+ {this.canAdmin && (
+ <li className="nav-item">
+ <Link
+ class="nav-link"
+ to={`/admin`}
+ title={i18n.t('admin_settings')}
+ >
+ <svg class="icon">
+ <use xlinkHref="#icon-settings"></use>
+ </svg>
+ </Link>
+ </li>
+ )}
+ </ul>
{!this.context.router.history.location.pathname.match(
/^\/search/
) && (
<button
name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)}
- class="btn btn-link"
+ class="px-1 btn btn-link"
style="color: var(--gray)"
>
<svg class="icon">
</button>
</form>
)}
- <ul class="navbar-nav my-2">
- {this.canAdmin && (
- <li className="nav-item">
- <Link
- class="nav-link"
- to={`/admin`}
- title={i18n.t('admin_settings')}
- >
- <svg class="icon">
- <use xlinkHref="#icon-settings"></use>
- </svg>
- </Link>
- </li>
- )}
- </ul>
{this.state.isLoggedIn ? (
<>
<ul class="navbar-nav my-2">
<li className="nav-item">
<Link
class="nav-link"
- to={`/u/${UserService.Instance.user.name}`}
+ to={`/u/${user.name}`}
title={i18n.t('settings')}
>
<span>
- {UserService.Instance.user.avatar &&
- showAvatars() && (
- <img
- src={pictrsAvatarThumbnail(
- UserService.Instance.user.avatar
- )}
- height="32"
- width="32"
- class="rounded-circle mr-2"
- />
- )}
- {UserService.Instance.user.name}
+ {user.avatar && showAvatars() && (
+ <img
+ src={pictrsAvatarThumbnail(user.avatar)}
+ height="32"
+ width="32"
+ class="rounded-circle mr-2"
+ />
+ )}
+ {user.preferred_username
+ ? user.preferred_username
+ : user.name}
</span>
</Link>
</li>
</>
) : (
<ul class="navbar-nav my-2">
- <li className="nav-item">
+ <li className="ml-2 nav-item">
<Link
class="btn btn-success"
to="/login"
this.state.unreadCount++;
this.setState(this.state);
this.sendUnreadCount();
- this.notify(data.comment);
+ notifyComment(data.comment, this.context.router);
}
}
} else if (res.op == UserOperation.CreatePrivateMessage) {
this.state.unreadCount++;
this.setState(this.state);
this.sendUnreadCount();
- this.notify(data.message);
+ notifyPrivateMessage(data.message, this.context.router);
}
}
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
- if (data.site && !this.state.siteName) {
- this.state.siteName = data.site.name;
- this.state.version = data.version;
- this.state.admins = data.admins;
- }
+ this.state.siteRes = data;
// The login
if (data.my_user) {
UserService.Instance.user = data.my_user;
+ WebSocketService.Instance.userJoin();
// On the first load, check the unreads
if (this.state.isLoggedIn == false) {
this.requestNotificationPermission();
this.fetchUnreads();
setTheme(data.my_user.theme, true);
- i18n.changeLanguage(data.my_user.lang);
+ i18n.changeLanguage(getLanguage());
}
this.state.isLoggedIn = true;
}
fetchUnreads() {
console.log('Fetching unreads...');
let repliesForm: GetRepliesForm = {
- sort: SortType[SortType.New],
+ sort: SortType.New,
unread_only: true,
page: 1,
limit: fetchLimit,
};
let userMentionsForm: GetUserMentionsForm = {
- sort: SortType[SortType.New],
+ sort: SortType.New,
unread_only: true,
page: 1,
limit: fetchLimit,
get canAdmin(): boolean {
return (
UserService.Instance.user &&
- this.state.admins.map(a => a.id).includes(UserService.Instance.user.id)
+ this.state.siteRes.admins
+ .map(a => a.id)
+ .includes(UserService.Instance.user.id)
);
}
});
}
}
-
- 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);
- };
- }
- }
}
projects / lemmy.git / blobdiff