1 import { Component, linkEvent } from 'inferno';
2 import { Link } from 'inferno-router';
3 import { Subscription } from 'rxjs';
7 GetFollowedCommunitiesResponse,
9 ListCommunitiesResponse,
25 WebSocketJsonResponse,
26 } from 'lemmy-js-client';
27 import { DataType } from '../interfaces';
28 import { WebSocketService, UserService } from '../services';
29 import { PostListings } from './post-listings';
30 import { CommentNodes } from './comment-nodes';
31 import { SortSelect } from './sort-select';
32 import { ListingTypeSelect } from './listing-type-select';
33 import { DataTypeSelect } from './data-type-select';
34 import { SiteForm } from './site-form';
35 import { UserListing } from './user-listing';
36 import { CommunityLink } from './community-link';
37 import { BannerIconHeader } from './banner-icon-header';
44 getListingTypeFromProps,
51 createPostLikeFindRes,
62 import { i18n } from '../i18next';
63 import { T } from 'inferno-i18next';
64 import { HtmlTags } from './html-tags';
67 subscribedCommunities: CommunityUser[];
68 trendingCommunities: Community[];
69 siteRes: GetSiteResponse;
70 showEditSite: boolean;
74 listingType: ListingType;
81 listingType: ListingType;
88 listingType?: ListingType;
94 export class Main extends Component<any, MainState> {
95 private isoData = setIsoData(this.context);
96 private subscription: Subscription;
97 private emptyState: MainState = {
98 subscribedCommunities: [],
99 trendingCommunities: [],
100 siteRes: this.isoData.site,
105 listingType: getListingTypeFromProps(this.props),
106 dataType: getDataTypeFromProps(this.props),
107 sort: getSortTypeFromProps(this.props),
108 page: getPageFromProps(this.props),
111 constructor(props: any, context: any) {
112 super(props, context);
114 this.state = this.emptyState;
115 this.handleEditCancel = this.handleEditCancel.bind(this);
116 this.handleSortChange = this.handleSortChange.bind(this);
117 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
118 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
120 this.parseMessage = this.parseMessage.bind(this);
121 this.subscription = wsSubscribe(this.parseMessage);
123 // Only fetch the data if coming from another route
124 if (this.isoData.path == this.context.router.route.match.url) {
125 if (this.state.dataType == DataType.Post) {
126 this.state.posts = this.isoData.routeData[0].posts;
128 this.state.comments = this.isoData.routeData[0].comments;
130 this.state.trendingCommunities = this.isoData.routeData[1].communities;
131 if (UserService.Instance.user) {
132 this.state.subscribedCommunities = this.isoData.routeData[2].communities;
134 this.state.loading = false;
136 this.fetchTrendingCommunities();
138 if (UserService.Instance.user) {
139 WebSocketService.Instance.getFollowedCommunities();
146 fetchTrendingCommunities() {
147 let listCommunitiesForm: ListCommunitiesForm = {
151 WebSocketService.Instance.listCommunities(listCommunitiesForm);
154 componentWillUnmount() {
156 this.subscription.unsubscribe();
160 static getDerivedStateFromProps(props: any): MainProps {
162 listingType: getListingTypeFromProps(props),
163 dataType: getDataTypeFromProps(props),
164 sort: getSortTypeFromProps(props),
165 page: getPageFromProps(props),
169 static fetchInitialData(auth: string, path: string): Promise<any>[] {
170 let pathSplit = path.split('/');
171 let dataType: DataType = pathSplit[3]
172 ? DataType[pathSplit[3]]
175 // TODO figure out auth default_listingType, default_sort_type
176 let type_: ListingType = pathSplit[5]
177 ? ListingType[pathSplit[5]]
178 : UserService.Instance.user
179 ? Object.values(ListingType)[
180 UserService.Instance.user.default_listing_type
183 let sort: SortType = pathSplit[7]
184 ? SortType[pathSplit[7]]
185 : UserService.Instance.user
186 ? Object.values(SortType)[UserService.Instance.user.default_sort_type]
189 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
191 let promises: Promise<any>[] = [];
193 if (dataType == DataType.Post) {
194 let getPostsForm: GetPostsForm = {
200 setAuth(getPostsForm, auth);
201 promises.push(lemmyHttp.getPosts(getPostsForm));
203 let getCommentsForm: GetCommentsForm = {
209 setAuth(getCommentsForm, auth);
210 promises.push(lemmyHttp.getComments(getCommentsForm));
213 let trendingCommunitiesForm: ListCommunitiesForm = {
217 promises.push(lemmyHttp.listCommunities(trendingCommunitiesForm));
220 promises.push(lemmyHttp.getFollowedCommunities({ auth }));
226 componentDidUpdate(_: any, lastState: MainState) {
228 lastState.listingType !== this.state.listingType ||
229 lastState.dataType !== this.state.dataType ||
230 lastState.sort !== this.state.sort ||
231 lastState.page !== this.state.page
233 this.setState({ loading: true });
238 get documentTitle(): string {
239 return `${this.state.siteRes.site.name}`;
244 <div class="container">
246 title={this.documentTitle}
247 path={this.context.router.route.match.url}
250 <main role="main" class="col-12 col-md-8">
253 <aside class="col-12 col-md-4">{this.mySidebar()}</aside>
262 {!this.state.loading && (
264 <div class="card bg-transparent border-secondary mb-3">
265 <div class="card-header bg-transparent border-secondary">
268 {this.adminButtons()}
270 <BannerIconHeader banner={this.state.siteRes.site.banner} />
272 <div class="card-body">
273 {this.trendingCommunities()}
274 {this.createCommunityButton()}
276 {this.subscribedCommunities()}
281 <div class="card bg-transparent border-secondary mb-3">
282 <div class="card-body">{this.sidebar()}</div>
285 <div class="card bg-transparent border-secondary">
286 <div class="card-body">{this.landing()}</div>
294 createCommunityButton() {
296 <Link className="btn btn-secondary btn-block" to="/create_community">
297 {i18n.t('create_a_community')}
302 trendingCommunities() {
306 <T i18nKey="trending_communities">
308 <Link className="text-body" to="/communities">
313 <ul class="list-inline">
314 {this.state.trendingCommunities.map(community => (
315 <li class="list-inline-item">
316 <CommunityLink community={community} />
324 subscribedCommunities() {
326 UserService.Instance.user &&
327 this.state.subscribedCommunities.length > 0 && (
330 <T i18nKey="subscribed_to_communities">
332 <Link className="text-body" to="/communities">
337 <ul class="list-inline">
338 {this.state.subscribedCommunities.map(community => (
339 <li class="list-inline-item">
342 name: community.community_name,
343 id: community.community_id,
344 local: community.community_local,
345 actor_id: community.community_actor_id,
346 icon: community.community_icon,
360 {!this.state.showEditSite ? (
364 site={this.state.siteRes.site}
365 onCancel={this.handleEditCancel}
372 updateUrl(paramUpdates: UrlParams) {
373 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
374 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
375 const sortStr = paramUpdates.sort || this.state.sort;
376 const page = paramUpdates.page || this.state.page;
377 this.props.history.push(
378 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
385 {this.state.siteRes.site.description && this.siteDescription()}
393 return <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>;
398 <ul class="mt-1 list-inline small mb-0">
399 <li class="list-inline-item">{i18n.t('admins')}:</li>
400 {this.state.siteRes.admins.map(admin => (
401 <li class="list-inline-item">
405 preferred_username: admin.preferred_username,
406 avatar: admin.avatar,
408 actor_id: admin.actor_id,
420 <ul class="my-2 list-inline">
421 <li className="list-inline-item badge badge-light">
422 {i18n.t('number_online', { count: this.state.siteRes.online })}
424 <li className="list-inline-item badge badge-light">
425 {i18n.t('number_of_users', {
426 count: this.state.siteRes.site.number_of_users,
429 <li className="list-inline-item badge badge-light">
430 {i18n.t('number_of_communities', {
431 count: this.state.siteRes.site.number_of_communities,
434 <li className="list-inline-item badge badge-light">
435 {i18n.t('number_of_posts', {
436 count: this.state.siteRes.site.number_of_posts,
439 <li className="list-inline-item badge badge-light">
440 {i18n.t('number_of_comments', {
441 count: this.state.siteRes.site.number_of_comments,
444 <li className="list-inline-item">
445 <Link className="badge badge-light" to="/modlog">
456 <ul class="list-inline mb-1 text-muted font-weight-bold">
457 <li className="list-inline-item-action">
460 onClick={linkEvent(this, this.handleEditClick)}
461 data-tippy-content={i18n.t('edit')}
463 <svg class="icon icon-inline">
464 <use xlinkHref="#icon-edit"></use>
477 dangerouslySetInnerHTML={mdToHtml(this.state.siteRes.site.description)}
486 {i18n.t('powered_by')}
487 <svg class="icon mx-2">
488 <use xlinkHref="#icon-mouse">#</use>
495 <T i18nKey="landing_0">
497 <a href="https://en.wikipedia.org/wiki/Social_network_aggregation">
500 <a href="https://en.wikipedia.org/wiki/Fediverse">#</a>
501 <br class="big"></br>
505 <br class="big"></br>
506 <a href={repoUrl}>#</a>
507 <br class="big"></br>
508 <a href="https://www.rust-lang.org">#</a>
509 <a href="https://actix.rs/">#</a>
510 <a href="https://infernojs.org">#</a>
511 <a href="https://www.typescriptlang.org/">#</a>
512 <br class="big"></br>
513 <a href="https://github.com/LemmyNet/lemmy/graphs/contributors?type=a">
524 <div class="main-content-wrapper">
525 {this.state.loading ? (
527 <svg class="icon icon-spinner spin">
528 <use xlinkHref="#icon-spinner"></use>
543 return this.state.dataType == DataType.Post ? (
545 posts={this.state.posts}
548 sort={this.state.sort}
549 enableDownvotes={this.state.siteRes.site.enable_downvotes}
550 enableNsfw={this.state.siteRes.site.enable_nsfw}
554 nodes={commentsToFlatNodes(this.state.comments)}
557 sortType={this.state.sort}
559 enableDownvotes={this.state.siteRes.site.enable_downvotes}
566 <div className="mb-3">
569 type_={this.state.dataType}
570 onChange={this.handleDataTypeChange}
575 type_={this.state.listingType}
577 this.state.siteRes.federated_instances &&
578 this.state.siteRes.federated_instances.length > 0
580 onChange={this.handleListingTypeChange}
584 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
586 {this.state.listingType == ListingType.All && (
588 href={`/feeds/all.xml?sort=${this.state.sort}`}
593 <svg class="icon text-muted small">
594 <use xlinkHref="#icon-rss">#</use>
598 {UserService.Instance.user &&
599 this.state.listingType == ListingType.Subscribed && (
601 href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`}
606 <svg class="icon text-muted small">
607 <use xlinkHref="#icon-rss">#</use>
618 {this.state.page > 1 && (
620 class="btn btn-secondary mr-1"
621 onClick={linkEvent(this, this.prevPage)}
626 {this.state.posts.length > 0 && (
628 class="btn btn-secondary"
629 onClick={linkEvent(this, this.nextPage)}
638 get canAdmin(): boolean {
640 UserService.Instance.user &&
641 this.state.siteRes.admins
643 .includes(UserService.Instance.user.id)
647 handleEditClick(i: Main) {
648 i.state.showEditSite = true;
653 this.state.showEditSite = false;
654 this.setState(this.state);
658 i.updateUrl({ page: i.state.page + 1 });
659 window.scrollTo(0, 0);
663 i.updateUrl({ page: i.state.page - 1 });
664 window.scrollTo(0, 0);
667 handleSortChange(val: SortType) {
668 this.updateUrl({ sort: val, page: 1 });
669 window.scrollTo(0, 0);
672 handleListingTypeChange(val: ListingType) {
673 this.updateUrl({ listingType: val, page: 1 });
674 window.scrollTo(0, 0);
677 handleDataTypeChange(val: DataType) {
678 this.updateUrl({ dataType: DataType[val], page: 1 });
679 window.scrollTo(0, 0);
683 if (this.state.dataType == DataType.Post) {
684 let getPostsForm: GetPostsForm = {
685 page: this.state.page,
687 sort: this.state.sort,
688 type_: this.state.listingType,
690 WebSocketService.Instance.getPosts(getPostsForm);
692 let getCommentsForm: GetCommentsForm = {
693 page: this.state.page,
695 sort: this.state.sort,
696 type_: this.state.listingType,
698 WebSocketService.Instance.getComments(getCommentsForm);
702 parseMessage(msg: WebSocketJsonResponse) {
704 let res = wsJsonToRes(msg);
706 toast(i18n.t(msg.error), 'danger');
708 } else if (msg.reconnect) {
710 } else if (res.op == UserOperation.GetFollowedCommunities) {
711 let data = res.data as GetFollowedCommunitiesResponse;
712 this.state.subscribedCommunities = data.communities;
713 this.setState(this.state);
714 } else if (res.op == UserOperation.ListCommunities) {
715 let data = res.data as ListCommunitiesResponse;
716 this.state.trendingCommunities = data.communities;
717 this.setState(this.state);
718 } else if (res.op == UserOperation.GetSite) {
719 let data = res.data as GetSiteResponse;
721 // This means it hasn't been set up yet
723 this.context.router.history.push('/setup');
725 this.state.siteRes.admins = data.admins;
726 this.state.siteRes.site = data.site;
727 this.state.siteRes.banned = data.banned;
728 this.state.siteRes.online = data.online;
729 this.setState(this.state);
730 } else if (res.op == UserOperation.EditSite) {
731 let data = res.data as SiteResponse;
732 this.state.siteRes.site = data.site;
733 this.state.showEditSite = false;
734 this.setState(this.state);
735 toast(i18n.t('site_saved'));
736 } else if (res.op == UserOperation.GetPosts) {
737 let data = res.data as GetPostsResponse;
738 this.state.posts = data.posts;
739 this.state.loading = false;
740 this.setState(this.state);
742 } else if (res.op == UserOperation.CreatePost) {
743 let data = res.data as PostResponse;
745 // If you're on subscribed, only push it if you're subscribed.
746 if (this.state.listingType == ListingType.Subscribed) {
748 this.state.subscribedCommunities
749 .map(c => c.community_id)
750 .includes(data.post.community_id)
752 this.state.posts.unshift(data.post);
753 notifyPost(data.post, this.context.router);
757 let nsfw = data.post.nsfw || data.post.community_nsfw;
759 // Don't push the post if its nsfw, and don't have that setting on
763 UserService.Instance.user &&
764 UserService.Instance.user.show_nsfw)
766 this.state.posts.unshift(data.post);
767 notifyPost(data.post, this.context.router);
770 this.setState(this.state);
771 } else if (res.op == UserOperation.EditPost) {
772 let data = res.data as PostResponse;
773 editPostFindRes(data, this.state.posts);
774 this.setState(this.state);
775 } else if (res.op == UserOperation.CreatePostLike) {
776 let data = res.data as PostResponse;
777 createPostLikeFindRes(data, this.state.posts);
778 this.setState(this.state);
779 } else if (res.op == UserOperation.AddAdmin) {
780 let data = res.data as AddAdminResponse;
781 this.state.siteRes.admins = data.admins;
782 this.setState(this.state);
783 } else if (res.op == UserOperation.BanUser) {
784 let data = res.data as BanUserResponse;
785 let found = this.state.siteRes.banned.find(u => (u.id = data.user.id));
787 // Remove the banned if its found in the list, and the action is an unban
788 if (found && !data.banned) {
789 this.state.siteRes.banned = this.state.siteRes.banned.filter(
790 i => i.id !== data.user.id
793 this.state.siteRes.banned.push(data.user);
797 .filter(p => p.creator_id == data.user.id)
798 .forEach(p => (p.banned = data.banned));
800 this.setState(this.state);
801 } else if (res.op == UserOperation.GetComments) {
802 let data = res.data as GetCommentsResponse;
803 this.state.comments = data.comments;
804 this.state.loading = false;
805 this.setState(this.state);
807 res.op == UserOperation.EditComment ||
808 res.op == UserOperation.DeleteComment ||
809 res.op == UserOperation.RemoveComment
811 let data = res.data as CommentResponse;
812 editCommentRes(data, this.state.comments);
813 this.setState(this.state);
814 } else if (res.op == UserOperation.CreateComment) {
815 let data = res.data as CommentResponse;
817 // Necessary since it might be a user reply
818 if (data.recipient_ids.length == 0) {
819 // If you're on subscribed, only push it if you're subscribed.
820 if (this.state.listingType == ListingType.Subscribed) {
822 this.state.subscribedCommunities
823 .map(c => c.community_id)
824 .includes(data.comment.community_id)
826 this.state.comments.unshift(data.comment);
829 this.state.comments.unshift(data.comment);
831 this.setState(this.state);
833 } else if (res.op == UserOperation.SaveComment) {
834 let data = res.data as CommentResponse;
835 saveCommentRes(data, this.state.comments);
836 this.setState(this.state);
837 } else if (res.op == UserOperation.CreateCommentLike) {
838 let data = res.data as CommentResponse;
839 createCommentLikeRes(data, this.state.comments);
840 this.setState(this.state);