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,
47 restoreScrollPosition,
61 import { CommentNodes } from "../comment/comment-nodes";
62 import { BannerIconHeader } from "../common/banner-icon-header";
63 import { DataTypeSelect } from "../common/data-type-select";
64 import { HtmlTags } from "../common/html-tags";
65 import { Icon, Spinner } from "../common/icon";
66 import { ListingTypeSelect } from "../common/listing-type-select";
67 import { Paginator } from "../common/paginator";
68 import { SortSelect } from "../common/sort-select";
69 import { CommunityLink } from "../community/community-link";
70 import { PersonListing } from "../person/person-listing";
71 import { PostListings } from "../post/post-listings";
72 import { SiteForm } from "./site-form";
75 trendingCommunities: CommunityView[];
76 siteRes: GetSiteResponse;
77 showEditSite: boolean;
78 showSubscribedMobile: boolean;
79 showTrendingMobile: boolean;
80 showSidebarMobile: boolean;
83 comments: CommentView[];
84 listingType: ListingType;
91 listingType: ListingType;
98 listingType?: ListingType;
104 export class Home extends Component<any, HomeState> {
105 private isoData = setIsoData(this.context);
106 private subscription: Subscription;
107 private emptyState: HomeState = {
108 trendingCommunities: [],
109 siteRes: this.isoData.site_res,
111 showSubscribedMobile: false,
112 showTrendingMobile: false,
113 showSidebarMobile: false,
117 listingType: getListingTypeFromProps(this.props),
118 dataType: getDataTypeFromProps(this.props),
119 sort: getSortTypeFromProps(this.props),
120 page: getPageFromProps(this.props),
123 constructor(props: any, context: any) {
124 super(props, context);
126 this.state = this.emptyState;
127 this.handleEditCancel = this.handleEditCancel.bind(this);
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),
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 setOptionalAuth(getPostsForm, req.auth);
225 promises.push(req.client.getPosts(getPostsForm));
227 let getCommentsForm: GetComments = {
234 setOptionalAuth(getCommentsForm, req.auth);
235 promises.push(req.client.getComments(getCommentsForm));
238 let trendingCommunitiesForm: ListCommunities = {
239 type_: ListingType.Local,
243 setOptionalAuth(trendingCommunitiesForm, req.auth);
244 promises.push(req.client.listCommunities(trendingCommunitiesForm));
249 componentDidUpdate(_: any, lastState: HomeState) {
251 lastState.listingType !== this.state.listingType ||
252 lastState.dataType !== this.state.dataType ||
253 lastState.sort !== this.state.sort ||
254 lastState.page !== this.state.page
256 this.setState({ loading: true });
261 get documentTitle(): string {
263 this.state.siteRes.site_view
264 ? this.state.siteRes.site_view.site.description
265 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
266 : this.state.siteRes.site_view.site.name
273 <div class="container">
275 title={this.documentTitle}
276 path={this.context.router.route.match.url}
278 {this.state.siteRes.site_view?.site && (
280 <main role="main" class="col-12 col-md-8">
281 <div class="d-block d-md-none">{this.mobileView()}</div>
284 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
295 {UserService.Instance.myUserInfo &&
296 UserService.Instance.myUserInfo.follows.length > 0 && (
298 class="btn btn-secondary d-inline-block mb-2 mr-3"
299 onClick={linkEvent(this, this.handleShowSubscribedMobile)}
301 {i18n.t("subscribed")}{" "}
304 this.state.showSubscribedMobile
308 classes="icon-inline"
313 class="btn btn-secondary d-inline-block mb-2 mr-3"
314 onClick={linkEvent(this, this.handleShowTrendingMobile)}
316 {i18n.t("trending")}{" "}
319 this.state.showTrendingMobile ? `minus-square` : `plus-square`
321 classes="icon-inline"
325 class="btn btn-secondary d-inline-block mb-2 mr-3"
326 onClick={linkEvent(this, this.handleShowSidebarMobile)}
328 {i18n.t("sidebar")}{" "}
331 this.state.showSidebarMobile ? `minus-square` : `plus-square`
333 classes="icon-inline"
336 {this.state.showSubscribedMobile && (
337 <div class="col-12 card border-secondary mb-3">
338 <div class="card-body">{this.subscribedCommunities()}</div>
341 {this.state.showTrendingMobile && (
342 <div class="col-12 card border-secondary mb-3">
343 <div class="card-body">{this.trendingCommunities()}</div>
346 {this.state.showSidebarMobile && (
347 <div class="col-12 card border-secondary mb-3">
348 <div class="card-body">{this.sidebar()}</div>
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()}
369 {UserService.Instance.myUserInfo &&
370 UserService.Instance.myUserInfo.follows.length > 0 && (
371 <div class="card border-secondary mb-3">
372 <div class="card-body">{this.subscribedCommunities()}</div>
376 <div class="card border-secondary mb-3">
377 <div class="card-body">{this.sidebar()}</div>
385 createCommunityButton() {
387 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
388 {i18n.t("create_a_community")}
393 exploreCommunitiesButton() {
395 <Link className="btn btn-secondary btn-block" to="/communities">
396 {i18n.t("explore_communities")}
401 trendingCommunities() {
405 <T i18nKey="trending_communities">
407 <Link className="text-body" to="/communities">
412 <ul class="list-inline mb-0">
413 {this.state.trendingCommunities.map(cv => (
414 <li class="list-inline-item d-inline-block">
415 <CommunityLink community={cv.community} />
423 subscribedCommunities() {
427 <T i18nKey="subscribed_to_communities">
429 <Link className="text-body" to="/communities">
434 <ul class="list-inline mb-0">
435 {UserService.Instance.myUserInfo.follows.map(cfv => (
436 <li class="list-inline-item d-inline-block">
437 <CommunityLink community={cfv.community} />
446 let site = this.state.siteRes.site_view.site;
449 {!this.state.showEditSite ? (
453 {this.adminButtons()}
455 <BannerIconHeader banner={site.banner} />
459 <SiteForm site={site} onCancel={this.handleEditCancel} />
465 updateUrl(paramUpdates: UrlParams) {
466 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
467 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
468 const sortStr = paramUpdates.sort || this.state.sort;
469 const page = paramUpdates.page || this.state.page;
470 this.props.history.push(
471 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
476 let site = this.state.siteRes.site_view.site;
479 {site.description && <h6>{site.description}</h6>}
480 {site.sidebar && this.siteSidebar()}
488 let site = this.state.siteRes.site_view.site;
489 return site.name && <h5 class="mb-0">{site.name}</h5>;
494 <ul class="mt-1 list-inline small mb-0">
495 <li class="list-inline-item">{i18n.t("admins")}:</li>
496 {this.state.siteRes.admins.map(av => (
497 <li class="list-inline-item">
498 <PersonListing person={av.person} />
506 let counts = this.state.siteRes.site_view.counts;
508 <ul class="my-2 list-inline">
509 <li className="list-inline-item badge badge-secondary">
510 {i18n.t("number_online", {
511 count: this.state.siteRes.online,
512 formattedCount: numToSI(this.state.siteRes.online),
516 className="list-inline-item badge badge-secondary pointer"
517 data-tippy-content={i18n.t("active_users_in_the_last_day", {
518 count: counts.users_active_day,
519 formattedCount: numToSI(counts.users_active_day),
522 {i18n.t("number_of_users", {
523 count: counts.users_active_day,
524 formattedCount: numToSI(counts.users_active_day),
529 className="list-inline-item badge badge-secondary pointer"
530 data-tippy-content={i18n.t("active_users_in_the_last_week", {
531 count: counts.users_active_week,
532 formattedCount: counts.users_active_week,
535 {i18n.t("number_of_users", {
536 count: counts.users_active_week,
537 formattedCount: numToSI(counts.users_active_week),
542 className="list-inline-item badge badge-secondary pointer"
543 data-tippy-content={i18n.t("active_users_in_the_last_month", {
544 count: counts.users_active_month,
545 formattedCount: counts.users_active_month,
548 {i18n.t("number_of_users", {
549 count: counts.users_active_month,
550 formattedCount: numToSI(counts.users_active_month),
555 className="list-inline-item badge badge-secondary pointer"
556 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
557 count: counts.users_active_half_year,
558 formattedCount: counts.users_active_half_year,
561 {i18n.t("number_of_users", {
562 count: counts.users_active_half_year,
563 formattedCount: numToSI(counts.users_active_half_year),
565 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
567 <li className="list-inline-item badge badge-secondary">
568 {i18n.t("number_of_users", {
570 formattedCount: numToSI(counts.users),
573 <li className="list-inline-item badge badge-secondary">
574 {i18n.t("number_of_communities", {
575 count: counts.communities,
576 formattedCount: numToSI(counts.communities),
579 <li className="list-inline-item badge badge-secondary">
580 {i18n.t("number_of_posts", {
582 formattedCount: numToSI(counts.posts),
585 <li className="list-inline-item badge badge-secondary">
586 {i18n.t("number_of_comments", {
587 count: counts.comments,
588 formattedCount: numToSI(counts.comments),
591 <li className="list-inline-item">
592 <Link className="badge badge-primary" to="/modlog">
603 <ul class="list-inline mb-1 text-muted font-weight-bold">
604 <li className="list-inline-item-action">
606 class="btn btn-link d-inline-block text-muted"
607 onClick={linkEvent(this, this.handleEditClick)}
608 aria-label={i18n.t("edit")}
609 data-tippy-content={i18n.t("edit")}
611 <Icon icon="edit" classes="icon-inline" />
623 dangerouslySetInnerHTML={mdToHtml(
624 this.state.siteRes.site_view.site.sidebar
632 <div class="main-content-wrapper">
633 {this.state.loading ? (
642 page={this.state.page}
643 onChange={this.handlePageChange}
652 let site = this.state.siteRes.site_view.site;
653 return this.state.dataType == DataType.Post ? (
655 posts={this.state.posts}
658 enableDownvotes={site.enable_downvotes}
659 enableNsfw={site.enable_nsfw}
663 nodes={commentsToFlatNodes(this.state.comments)}
667 enableDownvotes={site.enable_downvotes}
673 let allRss = `/feeds/all.xml?sort=${this.state.sort}`;
674 let localRss = `/feeds/local.xml?sort=${this.state.sort}`;
675 let frontRss = UserService.Instance.myUserInfo
676 ? `/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`
680 <div className="mb-3">
683 type_={this.state.dataType}
684 onChange={this.handleDataTypeChange}
689 type_={this.state.listingType}
690 showLocal={showLocal(this.isoData)}
691 onChange={this.handleListingTypeChange}
695 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
697 {this.state.listingType == ListingType.All && (
699 <a href={allRss} rel={relTags} title="RSS">
700 <Icon icon="rss" classes="text-muted small" />
702 <link rel="alternate" type="application/atom+xml" href={allRss} />
705 {this.state.listingType == ListingType.Local && (
707 <a href={localRss} rel={relTags} title="RSS">
708 <Icon icon="rss" classes="text-muted small" />
710 <link rel="alternate" type="application/atom+xml" href={localRss} />
713 {UserService.Instance.myUserInfo &&
714 this.state.listingType == ListingType.Subscribed && (
716 <a href={frontRss} title="RSS" rel={relTags}>
717 <Icon icon="rss" classes="text-muted small" />
721 type="application/atom+xml"
730 get canAdmin(): boolean {
732 UserService.Instance.myUserInfo &&
733 this.state.siteRes.admins
734 .map(a => a.person.id)
735 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
739 handleEditClick(i: Home) {
740 i.state.showEditSite = true;
745 this.state.showEditSite = false;
746 this.setState(this.state);
749 handleShowSubscribedMobile(i: Home) {
750 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
754 handleShowTrendingMobile(i: Home) {
755 i.state.showTrendingMobile = !i.state.showTrendingMobile;
759 handleShowSidebarMobile(i: Home) {
760 i.state.showSidebarMobile = !i.state.showSidebarMobile;
764 handlePageChange(page: number) {
765 this.updateUrl({ page });
766 window.scrollTo(0, 0);
769 handleSortChange(val: SortType) {
770 this.updateUrl({ sort: val, page: 1 });
771 window.scrollTo(0, 0);
774 handleListingTypeChange(val: ListingType) {
775 this.updateUrl({ listingType: val, page: 1 });
776 window.scrollTo(0, 0);
779 handleDataTypeChange(val: DataType) {
780 this.updateUrl({ dataType: DataType[val], page: 1 });
781 window.scrollTo(0, 0);
785 if (this.state.dataType == DataType.Post) {
786 let getPostsForm: GetPosts = {
787 page: this.state.page,
789 sort: this.state.sort,
790 type_: this.state.listingType,
792 auth: authField(false),
794 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
796 let getCommentsForm: GetComments = {
797 page: this.state.page,
799 sort: this.state.sort,
800 type_: this.state.listingType,
802 auth: authField(false),
804 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
808 parseMessage(msg: any) {
809 let op = wsUserOp(msg);
812 toast(i18n.t(msg.error), "danger");
814 } else if (msg.reconnect) {
815 WebSocketService.Instance.send(
816 wsClient.communityJoin({ community_id: 0 })
819 } else if (op == UserOperation.ListCommunities) {
820 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
821 this.state.trendingCommunities = data.communities;
822 this.setState(this.state);
823 } else if (op == UserOperation.EditSite) {
824 let data = wsJsonToRes<SiteResponse>(msg).data;
825 this.state.siteRes.site_view = data.site_view;
826 this.state.showEditSite = false;
827 this.setState(this.state);
828 toast(i18n.t("site_saved"));
829 } else if (op == UserOperation.GetPosts) {
830 let data = wsJsonToRes<GetPostsResponse>(msg).data;
831 this.state.posts = data.posts;
832 this.state.loading = false;
833 this.setState(this.state);
834 restoreScrollPosition(this.context);
836 } else if (op == UserOperation.CreatePost) {
837 let data = wsJsonToRes<PostResponse>(msg).data;
840 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
844 UserService.Instance.myUserInfo &&
845 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
847 // Only push these if you're on the first page, and you pass the nsfw check
848 if (this.state.page == 1 && nsfwCheck) {
849 // If you're on subscribed, only push it if you're subscribed.
850 if (this.state.listingType == ListingType.Subscribed) {
852 UserService.Instance.myUserInfo.follows
853 .map(c => c.community.id)
854 .includes(data.post_view.community.id)
856 this.state.posts.unshift(data.post_view);
858 UserService.Instance.myUserInfo?.local_user_view.local_user
859 .show_new_post_notifs
861 notifyPost(data.post_view, this.context.router);
864 } else if (this.state.listingType == ListingType.Local) {
865 // If you're on the local view, only push it if its local
866 if (data.post_view.post.local) {
867 this.state.posts.unshift(data.post_view);
869 UserService.Instance.myUserInfo?.local_user_view.local_user
870 .show_new_post_notifs
872 notifyPost(data.post_view, this.context.router);
876 this.state.posts.unshift(data.post_view);
878 UserService.Instance.myUserInfo?.local_user_view.local_user
879 .show_new_post_notifs
881 notifyPost(data.post_view, this.context.router);
884 this.setState(this.state);
887 op == UserOperation.EditPost ||
888 op == UserOperation.DeletePost ||
889 op == UserOperation.RemovePost ||
890 op == UserOperation.LockPost ||
891 op == UserOperation.StickyPost ||
892 op == UserOperation.SavePost
894 let data = wsJsonToRes<PostResponse>(msg).data;
895 editPostFindRes(data.post_view, this.state.posts);
896 this.setState(this.state);
897 } else if (op == UserOperation.CreatePostLike) {
898 let data = wsJsonToRes<PostResponse>(msg).data;
899 createPostLikeFindRes(data.post_view, this.state.posts);
900 this.setState(this.state);
901 } else if (op == UserOperation.AddAdmin) {
902 let data = wsJsonToRes<AddAdminResponse>(msg).data;
903 this.state.siteRes.admins = data.admins;
904 this.setState(this.state);
905 } else if (op == UserOperation.BanPerson) {
906 let data = wsJsonToRes<BanPersonResponse>(msg).data;
908 .filter(p => p.creator.id == data.person_view.person.id)
909 .forEach(p => (p.creator.banned = data.banned));
911 this.setState(this.state);
912 } else if (op == UserOperation.GetComments) {
913 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
914 this.state.comments = data.comments;
915 this.state.loading = false;
916 this.setState(this.state);
918 op == UserOperation.EditComment ||
919 op == UserOperation.DeleteComment ||
920 op == UserOperation.RemoveComment
922 let data = wsJsonToRes<CommentResponse>(msg).data;
923 editCommentRes(data.comment_view, this.state.comments);
924 this.setState(this.state);
925 } else if (op == UserOperation.CreateComment) {
926 let data = wsJsonToRes<CommentResponse>(msg).data;
928 // Necessary since it might be a user reply
930 // If you're on subscribed, only push it if you're subscribed.
931 if (this.state.listingType == ListingType.Subscribed) {
933 UserService.Instance.myUserInfo.follows
934 .map(c => c.community.id)
935 .includes(data.comment_view.community.id)
937 this.state.comments.unshift(data.comment_view);
940 this.state.comments.unshift(data.comment_view);
942 this.setState(this.state);
944 } else if (op == UserOperation.SaveComment) {
945 let data = wsJsonToRes<CommentResponse>(msg).data;
946 saveCommentRes(data.comment_view, this.state.comments);
947 this.setState(this.state);
948 } else if (op == UserOperation.CreateCommentLike) {
949 let data = wsJsonToRes<CommentResponse>(msg).data;
950 createCommentLikeRes(data.comment_view, this.state.comments);
951 this.setState(this.state);
952 } else if (op == UserOperation.BlockPerson) {
953 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
954 updatePersonBlock(data);
955 } else if (op == UserOperation.CreatePostReport) {
956 let data = wsJsonToRes<PostReportResponse>(msg).data;
958 toast(i18n.t("report_created"));
960 } else if (op == UserOperation.CreateCommentReport) {
961 let data = wsJsonToRes<CommentReportResponse>(msg).data;
963 toast(i18n.t("report_created"));