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(
116 this.isoData.site_res.site_view?.site.default_post_listing_type
119 dataType: getDataTypeFromProps(this.props),
120 sort: getSortTypeFromProps(this.props),
121 page: getPageFromProps(this.props),
124 constructor(props: any, context: any) {
125 super(props, context);
127 this.state = this.emptyState;
128 this.handleSortChange = this.handleSortChange.bind(this);
129 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
130 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
131 this.handlePageChange = this.handlePageChange.bind(this);
133 this.parseMessage = this.parseMessage.bind(this);
134 this.subscription = wsSubscribe(this.parseMessage);
136 // Only fetch the data if coming from another route
137 if (this.isoData.path == this.context.router.route.match.url) {
138 if (this.state.dataType == DataType.Post) {
139 this.state.posts = this.isoData.routeData[0].posts;
141 this.state.comments = this.isoData.routeData[0].comments;
143 this.state.trendingCommunities = this.isoData.routeData[1].communities;
144 this.state.loading = false;
146 this.fetchTrendingCommunities();
151 fetchTrendingCommunities() {
152 let listCommunitiesForm: ListCommunities = {
153 type_: ListingType.Local,
156 auth: authField(false),
158 WebSocketService.Instance.send(
159 wsClient.listCommunities(listCommunitiesForm)
163 componentDidMount() {
164 // This means it hasn't been set up yet
165 if (!this.state.siteRes.site_view) {
166 this.context.router.history.push("/setup");
169 WebSocketService.Instance.send(wsClient.communityJoin({ community_id: 0 }));
173 componentWillUnmount() {
174 saveScrollPosition(this.context);
175 this.subscription.unsubscribe();
176 window.isoData.path = undefined;
179 static getDerivedStateFromProps(props: any): HomeProps {
181 listingType: getListingTypeFromProps(props, ListingType.Local),
182 dataType: getDataTypeFromProps(props),
183 sort: getSortTypeFromProps(props),
184 page: getPageFromProps(props),
188 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
189 let pathSplit = req.path.split("/");
190 let dataType: DataType = pathSplit[3]
191 ? DataType[pathSplit[3]]
194 // TODO figure out auth default_listingType, default_sort_type
195 let type_: ListingType = pathSplit[5]
196 ? ListingType[pathSplit[5]]
197 : UserService.Instance.myUserInfo
198 ? Object.values(ListingType)[
199 UserService.Instance.myUserInfo.local_user_view.local_user
200 .default_listing_type
203 let sort: SortType = pathSplit[7]
204 ? SortType[pathSplit[7]]
205 : UserService.Instance.myUserInfo
206 ? Object.values(SortType)[
207 UserService.Instance.myUserInfo.local_user_view.local_user
212 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
214 let promises: Promise<any>[] = [];
216 if (dataType == DataType.Post) {
217 let getPostsForm: GetPosts = {
224 getPostsForm.type_ = type_;
227 setOptionalAuth(getPostsForm, req.auth);
228 promises.push(req.client.getPosts(getPostsForm));
230 let getCommentsForm: GetComments = {
234 type_: type_ || ListingType.Local,
237 setOptionalAuth(getCommentsForm, req.auth);
238 promises.push(req.client.getComments(getCommentsForm));
241 let trendingCommunitiesForm: ListCommunities = {
242 type_: ListingType.Local,
246 setOptionalAuth(trendingCommunitiesForm, req.auth);
247 promises.push(req.client.listCommunities(trendingCommunitiesForm));
252 componentDidUpdate(_: any, lastState: HomeState) {
254 lastState.listingType !== this.state.listingType ||
255 lastState.dataType !== this.state.dataType ||
256 lastState.sort !== this.state.sort ||
257 lastState.page !== this.state.page
259 this.setState({ loading: true });
264 get documentTitle(): string {
266 this.state.siteRes.site_view
267 ? this.state.siteRes.site_view.site.description
268 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
269 : this.state.siteRes.site_view.site.name
276 <div class="container">
278 title={this.documentTitle}
279 path={this.context.router.route.match.url}
281 {this.state.siteRes.site_view?.site && (
283 <main role="main" class="col-12 col-md-8">
284 <div class="d-block d-md-none">{this.mobileView()}</div>
287 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
295 let siteRes = this.state.siteRes;
299 {UserService.Instance.myUserInfo &&
300 UserService.Instance.myUserInfo.follows.length > 0 && (
302 class="btn btn-secondary d-inline-block mb-2 mr-3"
303 onClick={linkEvent(this, this.handleShowSubscribedMobile)}
305 {i18n.t("subscribed")}{" "}
308 this.state.showSubscribedMobile
312 classes="icon-inline"
317 class="btn btn-secondary d-inline-block mb-2 mr-3"
318 onClick={linkEvent(this, this.handleShowTrendingMobile)}
320 {i18n.t("trending")}{" "}
323 this.state.showTrendingMobile ? `minus-square` : `plus-square`
325 classes="icon-inline"
329 class="btn btn-secondary d-inline-block mb-2 mr-3"
330 onClick={linkEvent(this, this.handleShowSidebarMobile)}
332 {i18n.t("sidebar")}{" "}
335 this.state.showSidebarMobile ? `minus-square` : `plus-square`
337 classes="icon-inline"
340 {this.state.showSidebarMobile && (
342 site={siteRes.site_view.site}
343 admins={siteRes.admins}
344 counts={siteRes.site_view.counts}
345 online={siteRes.online}
346 showLocal={showLocal(this.isoData)}
349 {this.state.showTrendingMobile && (
350 <div class="col-12 card border-secondary mb-3">
351 <div class="card-body">{this.trendingCommunities()}</div>
354 {this.state.showSubscribedMobile && (
355 <div class="col-12 card border-secondary mb-3">
356 <div class="card-body">{this.subscribedCommunities()}</div>
365 let siteRes = this.state.siteRes;
368 {!this.state.loading && (
370 <div class="card border-secondary mb-3">
371 <div class="card-body">
372 {this.trendingCommunities()}
373 {this.createCommunityButton()}
374 {this.exploreCommunitiesButton()}
379 site={siteRes.site_view.site}
380 admins={siteRes.admins}
381 counts={siteRes.site_view.counts}
382 online={siteRes.online}
383 showLocal={showLocal(this.isoData)}
386 {UserService.Instance.myUserInfo &&
387 UserService.Instance.myUserInfo.follows.length > 0 && (
388 <div class="card border-secondary mb-3">
389 <div class="card-body">{this.subscribedCommunities()}</div>
398 createCommunityButton() {
400 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
401 {i18n.t("create_a_community")}
406 exploreCommunitiesButton() {
408 <Link className="btn btn-secondary btn-block" to="/communities">
409 {i18n.t("explore_communities")}
414 trendingCommunities() {
418 <T i18nKey="trending_communities">
420 <Link className="text-body" to="/communities">
425 <ul class="list-inline mb-0">
426 {this.state.trendingCommunities.map(cv => (
427 <li class="list-inline-item d-inline-block">
428 <CommunityLink community={cv.community} />
436 subscribedCommunities() {
440 <T class="d-inline" i18nKey="subscribed_to_communities">
442 <Link className="text-body" to="/communities">
447 class="btn btn-sm text-muted"
448 onClick={linkEvent(this, this.handleCollapseSubscribe)}
449 aria-label={i18n.t("collapse")}
450 data-tippy-content={i18n.t("collapse")}
452 {this.state.subscribedCollapsed ? (
453 <Icon icon="plus-square" classes="icon-inline" />
455 <Icon icon="minus-square" classes="icon-inline" />
459 {!this.state.subscribedCollapsed && (
460 <ul class="list-inline mb-0">
461 {UserService.Instance.myUserInfo.follows.map(cfv => (
462 <li class="list-inline-item d-inline-block">
463 <CommunityLink community={cfv.community} />
472 updateUrl(paramUpdates: UrlParams) {
473 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
474 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
475 const sortStr = paramUpdates.sort || this.state.sort;
476 const page = paramUpdates.page || this.state.page;
477 this.props.history.push(
478 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
484 <div class="main-content-wrapper">
485 {this.state.loading ? (
494 page={this.state.page}
495 onChange={this.handlePageChange}
504 let site = this.state.siteRes.site_view.site;
505 return this.state.dataType == DataType.Post ? (
507 posts={this.state.posts}
510 enableDownvotes={site.enable_downvotes}
511 enableNsfw={site.enable_nsfw}
515 nodes={commentsToFlatNodes(this.state.comments)}
519 enableDownvotes={site.enable_downvotes}
525 let allRss = `/feeds/all.xml?sort=${this.state.sort}`;
526 let localRss = `/feeds/local.xml?sort=${this.state.sort}`;
527 let frontRss = UserService.Instance.myUserInfo
528 ? `/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`
532 <div className="mb-3">
535 type_={this.state.dataType}
536 onChange={this.handleDataTypeChange}
541 type_={this.state.listingType}
542 showLocal={showLocal(this.isoData)}
544 onChange={this.handleListingTypeChange}
548 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
550 {this.state.listingType == ListingType.All && (
552 <a href={allRss} rel={relTags} title="RSS">
553 <Icon icon="rss" classes="text-muted small" />
555 <link rel="alternate" type="application/atom+xml" href={allRss} />
558 {this.state.listingType == ListingType.Local && (
560 <a href={localRss} rel={relTags} title="RSS">
561 <Icon icon="rss" classes="text-muted small" />
563 <link rel="alternate" type="application/atom+xml" href={localRss} />
566 {UserService.Instance.myUserInfo &&
567 this.state.listingType == ListingType.Subscribed && (
569 <a href={frontRss} title="RSS" rel={relTags}>
570 <Icon icon="rss" classes="text-muted small" />
574 type="application/atom+xml"
583 handleShowSubscribedMobile(i: Home) {
584 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
588 handleShowTrendingMobile(i: Home) {
589 i.state.showTrendingMobile = !i.state.showTrendingMobile;
593 handleShowSidebarMobile(i: Home) {
594 i.state.showSidebarMobile = !i.state.showSidebarMobile;
598 handleCollapseSubscribe(i: Home) {
599 i.state.subscribedCollapsed = !i.state.subscribedCollapsed;
603 handlePageChange(page: number) {
604 this.updateUrl({ page });
605 window.scrollTo(0, 0);
608 handleSortChange(val: SortType) {
609 this.updateUrl({ sort: val, page: 1 });
610 window.scrollTo(0, 0);
613 handleListingTypeChange(val: ListingType) {
614 this.updateUrl({ listingType: val, page: 1 });
615 window.scrollTo(0, 0);
618 handleDataTypeChange(val: DataType) {
619 this.updateUrl({ dataType: DataType[val], page: 1 });
620 window.scrollTo(0, 0);
624 if (this.state.dataType == DataType.Post) {
625 let getPostsForm: GetPosts = {
626 page: this.state.page,
628 sort: this.state.sort,
630 auth: authField(false),
632 if (this.state.listingType) {
633 getPostsForm.type_ = this.state.listingType;
636 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
638 let getCommentsForm: GetComments = {
639 page: this.state.page,
641 sort: this.state.sort,
642 type_: this.state.listingType,
644 auth: authField(false),
646 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
650 parseMessage(msg: any) {
651 let op = wsUserOp(msg);
654 toast(i18n.t(msg.error), "danger");
656 } else if (msg.reconnect) {
657 WebSocketService.Instance.send(
658 wsClient.communityJoin({ community_id: 0 })
661 } else if (op == UserOperation.ListCommunities) {
662 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
663 this.state.trendingCommunities = data.communities;
664 this.setState(this.state);
665 } else if (op == UserOperation.EditSite) {
666 let data = wsJsonToRes<SiteResponse>(msg).data;
667 this.state.siteRes.site_view = data.site_view;
668 this.setState(this.state);
669 toast(i18n.t("site_saved"));
670 } else if (op == UserOperation.GetPosts) {
671 let data = wsJsonToRes<GetPostsResponse>(msg).data;
672 this.state.posts = data.posts;
673 this.state.loading = false;
674 this.setState(this.state);
675 restoreScrollPosition(this.context);
677 } else if (op == UserOperation.CreatePost) {
678 let data = wsJsonToRes<PostResponse>(msg).data;
681 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
685 UserService.Instance.myUserInfo &&
686 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
688 // Only push these if you're on the first page, and you pass the nsfw check
689 if (this.state.page == 1 && nsfwCheck) {
690 // If you're on subscribed, only push it if you're subscribed.
691 if (this.state.listingType == ListingType.Subscribed) {
693 UserService.Instance.myUserInfo.follows
694 .map(c => c.community.id)
695 .includes(data.post_view.community.id)
697 this.state.posts.unshift(data.post_view);
699 UserService.Instance.myUserInfo?.local_user_view.local_user
700 .show_new_post_notifs
702 notifyPost(data.post_view, this.context.router);
705 } else if (this.state.listingType == ListingType.Local) {
706 // If you're on the local view, only push it if its local
707 if (data.post_view.post.local) {
708 this.state.posts.unshift(data.post_view);
710 UserService.Instance.myUserInfo?.local_user_view.local_user
711 .show_new_post_notifs
713 notifyPost(data.post_view, this.context.router);
717 this.state.posts.unshift(data.post_view);
719 UserService.Instance.myUserInfo?.local_user_view.local_user
720 .show_new_post_notifs
722 notifyPost(data.post_view, this.context.router);
725 this.setState(this.state);
728 op == UserOperation.EditPost ||
729 op == UserOperation.DeletePost ||
730 op == UserOperation.RemovePost ||
731 op == UserOperation.LockPost ||
732 op == UserOperation.StickyPost ||
733 op == UserOperation.SavePost
735 let data = wsJsonToRes<PostResponse>(msg).data;
736 editPostFindRes(data.post_view, this.state.posts);
737 this.setState(this.state);
738 } else if (op == UserOperation.CreatePostLike) {
739 let data = wsJsonToRes<PostResponse>(msg).data;
740 createPostLikeFindRes(data.post_view, this.state.posts);
741 this.setState(this.state);
742 } else if (op == UserOperation.AddAdmin) {
743 let data = wsJsonToRes<AddAdminResponse>(msg).data;
744 this.state.siteRes.admins = data.admins;
745 this.setState(this.state);
746 } else if (op == UserOperation.BanPerson) {
747 let data = wsJsonToRes<BanPersonResponse>(msg).data;
749 .filter(p => p.creator.id == data.person_view.person.id)
750 .forEach(p => (p.creator.banned = data.banned));
752 this.setState(this.state);
753 } else if (op == UserOperation.GetComments) {
754 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
755 this.state.comments = data.comments;
756 this.state.loading = false;
757 this.setState(this.state);
759 op == UserOperation.EditComment ||
760 op == UserOperation.DeleteComment ||
761 op == UserOperation.RemoveComment
763 let data = wsJsonToRes<CommentResponse>(msg).data;
764 editCommentRes(data.comment_view, this.state.comments);
765 this.setState(this.state);
766 } else if (op == UserOperation.CreateComment) {
767 let data = wsJsonToRes<CommentResponse>(msg).data;
769 // Necessary since it might be a user reply
771 // If you're on subscribed, only push it if you're subscribed.
772 if (this.state.listingType == ListingType.Subscribed) {
774 UserService.Instance.myUserInfo.follows
775 .map(c => c.community.id)
776 .includes(data.comment_view.community.id)
778 this.state.comments.unshift(data.comment_view);
781 this.state.comments.unshift(data.comment_view);
783 this.setState(this.state);
785 } else if (op == UserOperation.SaveComment) {
786 let data = wsJsonToRes<CommentResponse>(msg).data;
787 saveCommentRes(data.comment_view, this.state.comments);
788 this.setState(this.state);
789 } else if (op == UserOperation.CreateCommentLike) {
790 let data = wsJsonToRes<CommentResponse>(msg).data;
791 createCommentLikeRes(data.comment_view, this.state.comments);
792 this.setState(this.state);
793 } else if (op == UserOperation.BlockPerson) {
794 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
795 updatePersonBlock(data);
796 } else if (op == UserOperation.CreatePostReport) {
797 let data = wsJsonToRes<PostReportResponse>(msg).data;
799 toast(i18n.t("report_created"));
801 } else if (op == UserOperation.CreateCommentReport) {
802 let data = wsJsonToRes<CommentReportResponse>(msg).data;
804 toast(i18n.t("report_created"));