1 import { Component, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
3 import { Link } from "inferno-router";
18 ListCommunitiesResponse,
26 } from "lemmy-js-client";
27 import { Subscription } from "rxjs";
28 import { i18n } from "../../i18next";
29 import { DataType, InitialFetchRequest } from "../../interfaces";
30 import { UserService, WebSocketService } from "../../services";
35 createPostLikeFindRes,
40 getListingTypeFromProps,
45 restoreScrollPosition,
59 import { CommentNodes } from "../comment/comment-nodes";
60 import { DataTypeSelect } from "../common/data-type-select";
61 import { HtmlTags } from "../common/html-tags";
62 import { Icon, Spinner } from "../common/icon";
63 import { ListingTypeSelect } from "../common/listing-type-select";
64 import { Paginator } from "../common/paginator";
65 import { SortSelect } from "../common/sort-select";
66 import { CommunityLink } from "../community/community-link";
67 import { PostListings } from "../post/post-listings";
68 import { SiteSidebar } from "./site-sidebar";
71 trendingCommunities: CommunityView[];
72 siteRes: GetSiteResponse;
73 showSubscribedMobile: boolean;
74 showTrendingMobile: boolean;
75 showSidebarMobile: boolean;
76 subscribedCollapsed: boolean;
79 comments: CommentView[];
80 listingType: ListingType;
87 listingType: ListingType;
94 listingType?: ListingType;
100 export class Home extends Component<any, HomeState> {
101 private isoData = setIsoData(this.context);
102 private subscription: Subscription;
103 private emptyState: HomeState = {
104 trendingCommunities: [],
105 siteRes: this.isoData.site_res,
106 showSubscribedMobile: false,
107 showTrendingMobile: false,
108 showSidebarMobile: false,
109 subscribedCollapsed: false,
113 listingType: getListingTypeFromProps(this.props),
114 dataType: getDataTypeFromProps(this.props),
115 sort: getSortTypeFromProps(this.props),
116 page: getPageFromProps(this.props),
119 constructor(props: any, context: any) {
120 super(props, context);
122 this.state = this.emptyState;
123 this.handleSortChange = this.handleSortChange.bind(this);
124 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
125 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
126 this.handlePageChange = this.handlePageChange.bind(this);
128 this.parseMessage = this.parseMessage.bind(this);
129 this.subscription = wsSubscribe(this.parseMessage);
131 // Only fetch the data if coming from another route
132 if (this.isoData.path == this.context.router.route.match.url) {
133 if (this.state.dataType == DataType.Post) {
134 this.state.posts = this.isoData.routeData[0].posts;
136 this.state.comments = this.isoData.routeData[0].comments;
138 this.state.trendingCommunities = this.isoData.routeData[1].communities;
139 this.state.loading = false;
141 this.fetchTrendingCommunities();
146 fetchTrendingCommunities() {
147 let listCommunitiesForm: ListCommunities = {
148 type_: ListingType.Local,
151 auth: authField(false),
153 WebSocketService.Instance.send(
154 wsClient.listCommunities(listCommunitiesForm)
158 componentDidMount() {
159 // This means it hasn't been set up yet
160 if (!this.state.siteRes.site_view) {
161 this.context.router.history.push("/setup");
164 WebSocketService.Instance.send(wsClient.communityJoin({ community_id: 0 }));
168 componentWillUnmount() {
169 saveScrollPosition(this.context);
170 this.subscription.unsubscribe();
171 window.isoData.path = undefined;
174 static getDerivedStateFromProps(props: any): HomeProps {
176 listingType: getListingTypeFromProps(props),
177 dataType: getDataTypeFromProps(props),
178 sort: getSortTypeFromProps(props),
179 page: getPageFromProps(props),
183 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
184 let pathSplit = req.path.split("/");
185 let dataType: DataType = pathSplit[3]
186 ? DataType[pathSplit[3]]
189 // TODO figure out auth default_listingType, default_sort_type
190 let type_: ListingType = pathSplit[5]
191 ? ListingType[pathSplit[5]]
192 : UserService.Instance.myUserInfo
193 ? Object.values(ListingType)[
194 UserService.Instance.myUserInfo.local_user_view.local_user
195 .default_listing_type
198 let sort: SortType = pathSplit[7]
199 ? SortType[pathSplit[7]]
200 : UserService.Instance.myUserInfo
201 ? Object.values(SortType)[
202 UserService.Instance.myUserInfo.local_user_view.local_user
207 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
209 let promises: Promise<any>[] = [];
211 if (dataType == DataType.Post) {
212 let getPostsForm: GetPosts = {
219 setOptionalAuth(getPostsForm, req.auth);
220 promises.push(req.client.getPosts(getPostsForm));
222 let getCommentsForm: GetComments = {
229 setOptionalAuth(getCommentsForm, req.auth);
230 promises.push(req.client.getComments(getCommentsForm));
233 let trendingCommunitiesForm: ListCommunities = {
234 type_: ListingType.Local,
238 setOptionalAuth(trendingCommunitiesForm, req.auth);
239 promises.push(req.client.listCommunities(trendingCommunitiesForm));
244 componentDidUpdate(_: any, lastState: HomeState) {
246 lastState.listingType !== this.state.listingType ||
247 lastState.dataType !== this.state.dataType ||
248 lastState.sort !== this.state.sort ||
249 lastState.page !== this.state.page
251 this.setState({ loading: true });
256 get documentTitle(): string {
258 this.state.siteRes.site_view
259 ? this.state.siteRes.site_view.site.description
260 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
261 : this.state.siteRes.site_view.site.name
268 <div class="container">
270 title={this.documentTitle}
271 path={this.context.router.route.match.url}
273 {this.state.siteRes.site_view?.site && (
275 <main role="main" class="col-12 col-md-8">
276 <div class="d-block d-md-none">{this.mobileView()}</div>
279 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
287 let siteRes = this.state.siteRes;
291 {UserService.Instance.myUserInfo &&
292 UserService.Instance.myUserInfo.follows.length > 0 && (
294 class="btn btn-secondary d-inline-block mb-2 mr-3"
295 onClick={linkEvent(this, this.handleShowSubscribedMobile)}
297 {i18n.t("subscribed")}{" "}
300 this.state.showSubscribedMobile
304 classes="icon-inline"
309 class="btn btn-secondary d-inline-block mb-2 mr-3"
310 onClick={linkEvent(this, this.handleShowTrendingMobile)}
312 {i18n.t("trending")}{" "}
315 this.state.showTrendingMobile ? `minus-square` : `plus-square`
317 classes="icon-inline"
321 class="btn btn-secondary d-inline-block mb-2 mr-3"
322 onClick={linkEvent(this, this.handleShowSidebarMobile)}
324 {i18n.t("sidebar")}{" "}
327 this.state.showSidebarMobile ? `minus-square` : `plus-square`
329 classes="icon-inline"
332 {this.state.showSidebarMobile && (
334 site={siteRes.site_view.site}
335 admins={siteRes.admins}
336 counts={siteRes.site_view.counts}
337 online={siteRes.online}
340 {this.state.showTrendingMobile && (
341 <div class="col-12 card border-secondary mb-3">
342 <div class="card-body">{this.trendingCommunities()}</div>
345 {this.state.showSubscribedMobile && (
346 <div class="col-12 card border-secondary mb-3">
347 <div class="card-body">{this.subscribedCommunities()}</div>
356 let siteRes = this.state.siteRes;
359 {!this.state.loading && (
361 <div class="card border-secondary mb-3">
362 <div class="card-body">
363 {this.trendingCommunities()}
364 {this.createCommunityButton()}
365 {this.exploreCommunitiesButton()}
370 site={siteRes.site_view.site}
371 admins={siteRes.admins}
372 counts={siteRes.site_view.counts}
373 online={siteRes.online}
376 {UserService.Instance.myUserInfo &&
377 UserService.Instance.myUserInfo.follows.length > 0 && (
378 <div class="card border-secondary mb-3">
379 <div class="card-body">{this.subscribedCommunities()}</div>
388 createCommunityButton() {
390 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
391 {i18n.t("create_a_community")}
396 exploreCommunitiesButton() {
398 <Link className="btn btn-secondary btn-block" to="/communities">
399 {i18n.t("explore_communities")}
404 trendingCommunities() {
408 <T i18nKey="trending_communities">
410 <Link className="text-body" to="/communities">
415 <ul class="list-inline mb-0">
416 {this.state.trendingCommunities.map(cv => (
417 <li class="list-inline-item d-inline-block">
418 <CommunityLink community={cv.community} />
426 subscribedCommunities() {
430 <T class="d-inline" i18nKey="subscribed_to_communities">
432 <Link className="text-body" to="/communities">
437 class="btn btn-sm text-muted"
438 onClick={linkEvent(this, this.handleCollapseSubscribe)}
439 aria-label={i18n.t("collapse")}
440 data-tippy-content={i18n.t("collapse")}
442 {this.state.subscribedCollapsed ? (
443 <Icon icon="plus-square" classes="icon-inline" />
445 <Icon icon="minus-square" classes="icon-inline" />
449 {!this.state.subscribedCollapsed && (
450 <ul class="list-inline mb-0">
451 {UserService.Instance.myUserInfo.follows.map(cfv => (
452 <li class="list-inline-item d-inline-block">
453 <CommunityLink community={cfv.community} />
462 updateUrl(paramUpdates: UrlParams) {
463 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
464 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
465 const sortStr = paramUpdates.sort || this.state.sort;
466 const page = paramUpdates.page || this.state.page;
467 this.props.history.push(
468 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
474 <div class="main-content-wrapper">
475 {this.state.loading ? (
484 page={this.state.page}
485 onChange={this.handlePageChange}
494 let site = this.state.siteRes.site_view.site;
495 return this.state.dataType == DataType.Post ? (
497 posts={this.state.posts}
500 enableDownvotes={site.enable_downvotes}
501 enableNsfw={site.enable_nsfw}
505 nodes={commentsToFlatNodes(this.state.comments)}
509 enableDownvotes={site.enable_downvotes}
515 let allRss = `/feeds/all.xml?sort=${this.state.sort}`;
516 let localRss = `/feeds/local.xml?sort=${this.state.sort}`;
517 let frontRss = UserService.Instance.myUserInfo
518 ? `/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`
522 <div className="mb-3">
525 type_={this.state.dataType}
526 onChange={this.handleDataTypeChange}
531 type_={this.state.listingType}
532 showLocal={showLocal(this.isoData)}
533 onChange={this.handleListingTypeChange}
537 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
539 {this.state.listingType == ListingType.All && (
541 <a href={allRss} rel={relTags} title="RSS">
542 <Icon icon="rss" classes="text-muted small" />
544 <link rel="alternate" type="application/atom+xml" href={allRss} />
547 {this.state.listingType == ListingType.Local && (
549 <a href={localRss} rel={relTags} title="RSS">
550 <Icon icon="rss" classes="text-muted small" />
552 <link rel="alternate" type="application/atom+xml" href={localRss} />
555 {UserService.Instance.myUserInfo &&
556 this.state.listingType == ListingType.Subscribed && (
558 <a href={frontRss} title="RSS" rel={relTags}>
559 <Icon icon="rss" classes="text-muted small" />
563 type="application/atom+xml"
572 handleShowSubscribedMobile(i: Home) {
573 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
577 handleShowTrendingMobile(i: Home) {
578 i.state.showTrendingMobile = !i.state.showTrendingMobile;
582 handleShowSidebarMobile(i: Home) {
583 i.state.showSidebarMobile = !i.state.showSidebarMobile;
587 handleCollapseSubscribe(i: Home) {
588 i.state.subscribedCollapsed = !i.state.subscribedCollapsed;
592 handlePageChange(page: number) {
593 this.updateUrl({ page });
594 window.scrollTo(0, 0);
597 handleSortChange(val: SortType) {
598 this.updateUrl({ sort: val, page: 1 });
599 window.scrollTo(0, 0);
602 handleListingTypeChange(val: ListingType) {
603 this.updateUrl({ listingType: val, page: 1 });
604 window.scrollTo(0, 0);
607 handleDataTypeChange(val: DataType) {
608 this.updateUrl({ dataType: DataType[val], page: 1 });
609 window.scrollTo(0, 0);
613 if (this.state.dataType == DataType.Post) {
614 let getPostsForm: GetPosts = {
615 page: this.state.page,
617 sort: this.state.sort,
618 type_: this.state.listingType,
620 auth: authField(false),
622 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
624 let getCommentsForm: GetComments = {
625 page: this.state.page,
627 sort: this.state.sort,
628 type_: this.state.listingType,
630 auth: authField(false),
632 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
636 parseMessage(msg: any) {
637 let op = wsUserOp(msg);
640 toast(i18n.t(msg.error), "danger");
642 } else if (msg.reconnect) {
643 WebSocketService.Instance.send(
644 wsClient.communityJoin({ community_id: 0 })
647 } else if (op == UserOperation.ListCommunities) {
648 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
649 this.state.trendingCommunities = data.communities;
650 this.setState(this.state);
651 } else if (op == UserOperation.EditSite) {
652 let data = wsJsonToRes<SiteResponse>(msg).data;
653 this.state.siteRes.site_view = data.site_view;
654 this.setState(this.state);
655 toast(i18n.t("site_saved"));
656 } else if (op == UserOperation.GetPosts) {
657 let data = wsJsonToRes<GetPostsResponse>(msg).data;
658 this.state.posts = data.posts;
659 this.state.loading = false;
660 this.setState(this.state);
661 restoreScrollPosition(this.context);
663 } else if (op == UserOperation.CreatePost) {
664 let data = wsJsonToRes<PostResponse>(msg).data;
667 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
671 UserService.Instance.myUserInfo &&
672 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
674 // Only push these if you're on the first page, and you pass the nsfw check
675 if (this.state.page == 1 && nsfwCheck) {
676 // If you're on subscribed, only push it if you're subscribed.
677 if (this.state.listingType == ListingType.Subscribed) {
679 UserService.Instance.myUserInfo.follows
680 .map(c => c.community.id)
681 .includes(data.post_view.community.id)
683 this.state.posts.unshift(data.post_view);
685 UserService.Instance.myUserInfo?.local_user_view.local_user
686 .show_new_post_notifs
688 notifyPost(data.post_view, this.context.router);
691 } else if (this.state.listingType == ListingType.Local) {
692 // If you're on the local view, only push it if its local
693 if (data.post_view.post.local) {
694 this.state.posts.unshift(data.post_view);
696 UserService.Instance.myUserInfo?.local_user_view.local_user
697 .show_new_post_notifs
699 notifyPost(data.post_view, this.context.router);
703 this.state.posts.unshift(data.post_view);
705 UserService.Instance.myUserInfo?.local_user_view.local_user
706 .show_new_post_notifs
708 notifyPost(data.post_view, this.context.router);
711 this.setState(this.state);
714 op == UserOperation.EditPost ||
715 op == UserOperation.DeletePost ||
716 op == UserOperation.RemovePost ||
717 op == UserOperation.LockPost ||
718 op == UserOperation.StickyPost ||
719 op == UserOperation.SavePost
721 let data = wsJsonToRes<PostResponse>(msg).data;
722 editPostFindRes(data.post_view, this.state.posts);
723 this.setState(this.state);
724 } else if (op == UserOperation.CreatePostLike) {
725 let data = wsJsonToRes<PostResponse>(msg).data;
726 createPostLikeFindRes(data.post_view, this.state.posts);
727 this.setState(this.state);
728 } else if (op == UserOperation.AddAdmin) {
729 let data = wsJsonToRes<AddAdminResponse>(msg).data;
730 this.state.siteRes.admins = data.admins;
731 this.setState(this.state);
732 } else if (op == UserOperation.BanPerson) {
733 let data = wsJsonToRes<BanPersonResponse>(msg).data;
735 .filter(p => p.creator.id == data.person_view.person.id)
736 .forEach(p => (p.creator.banned = data.banned));
738 this.setState(this.state);
739 } else if (op == UserOperation.GetComments) {
740 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
741 this.state.comments = data.comments;
742 this.state.loading = false;
743 this.setState(this.state);
745 op == UserOperation.EditComment ||
746 op == UserOperation.DeleteComment ||
747 op == UserOperation.RemoveComment
749 let data = wsJsonToRes<CommentResponse>(msg).data;
750 editCommentRes(data.comment_view, this.state.comments);
751 this.setState(this.state);
752 } else if (op == UserOperation.CreateComment) {
753 let data = wsJsonToRes<CommentResponse>(msg).data;
755 // Necessary since it might be a user reply
757 // If you're on subscribed, only push it if you're subscribed.
758 if (this.state.listingType == ListingType.Subscribed) {
760 UserService.Instance.myUserInfo.follows
761 .map(c => c.community.id)
762 .includes(data.comment_view.community.id)
764 this.state.comments.unshift(data.comment_view);
767 this.state.comments.unshift(data.comment_view);
769 this.setState(this.state);
771 } else if (op == UserOperation.SaveComment) {
772 let data = wsJsonToRes<CommentResponse>(msg).data;
773 saveCommentRes(data.comment_view, this.state.comments);
774 this.setState(this.state);
775 } else if (op == UserOperation.CreateCommentLike) {
776 let data = wsJsonToRes<CommentResponse>(msg).data;
777 createCommentLikeRes(data.comment_view, this.state.comments);
778 this.setState(this.state);
779 } else if (op == UserOperation.BlockPerson) {
780 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
781 updatePersonBlock(data);
782 } else if (op == UserOperation.CreatePostReport) {
783 let data = wsJsonToRes<PostReportResponse>(msg).data;
785 toast(i18n.t("report_created"));
787 } else if (op == UserOperation.CreateCommentReport) {
788 let data = wsJsonToRes<CommentReportResponse>(msg).data;
790 toast(i18n.t("report_created"));