1 import { Component, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
3 import { Link } from "inferno-router";
17 ListCommunitiesResponse,
24 } from "lemmy-js-client";
25 import { Subscription } from "rxjs";
26 import { i18n } from "../../i18next";
27 import { DataType, InitialFetchRequest } from "../../interfaces";
28 import { UserService, WebSocketService } from "../../services";
33 createPostLikeFindRes,
38 getListingTypeFromProps,
43 restoreScrollPosition,
57 import { CommentNodes } from "../comment/comment-nodes";
58 import { BannerIconHeader } from "../common/banner-icon-header";
59 import { DataTypeSelect } from "../common/data-type-select";
60 import { HtmlTags } from "../common/html-tags";
61 import { Icon, Spinner } from "../common/icon";
62 import { ListingTypeSelect } from "../common/listing-type-select";
63 import { Paginator } from "../common/paginator";
64 import { SortSelect } from "../common/sort-select";
65 import { CommunityLink } from "../community/community-link";
66 import { PersonListing } from "../person/person-listing";
67 import { PostListings } from "../post/post-listings";
68 import { SiteForm } from "./site-form";
71 trendingCommunities: CommunityView[];
72 siteRes: GetSiteResponse;
73 showEditSite: boolean;
74 showSubscribedMobile: boolean;
75 showTrendingMobile: boolean;
76 showSidebarMobile: 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,
107 showSubscribedMobile: false,
108 showTrendingMobile: false,
109 showSidebarMobile: 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.handleEditCancel = this.handleEditCancel.bind(this);
124 this.handleSortChange = this.handleSortChange.bind(this);
125 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
126 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
127 this.handlePageChange = this.handlePageChange.bind(this);
129 this.parseMessage = this.parseMessage.bind(this);
130 this.subscription = wsSubscribe(this.parseMessage);
132 // Only fetch the data if coming from another route
133 if (this.isoData.path == this.context.router.route.match.url) {
134 if (this.state.dataType == DataType.Post) {
135 this.state.posts = this.isoData.routeData[0].posts;
137 this.state.comments = this.isoData.routeData[0].comments;
139 this.state.trendingCommunities = this.isoData.routeData[1].communities;
140 this.state.loading = false;
142 this.fetchTrendingCommunities();
149 fetchTrendingCommunities() {
150 let listCommunitiesForm: ListCommunities = {
151 type_: ListingType.Local,
154 auth: authField(false),
156 WebSocketService.Instance.send(
157 wsClient.listCommunities(listCommunitiesForm)
161 componentDidMount() {
162 // This means it hasn't been set up yet
163 if (!this.state.siteRes.site_view) {
164 this.context.router.history.push("/setup");
167 WebSocketService.Instance.send(wsClient.communityJoin({ community_id: 0 }));
170 componentWillUnmount() {
171 saveScrollPosition(this.context);
172 this.subscription.unsubscribe();
173 window.isoData.path = undefined;
176 static getDerivedStateFromProps(props: any): HomeProps {
178 listingType: getListingTypeFromProps(props),
179 dataType: getDataTypeFromProps(props),
180 sort: getSortTypeFromProps(props),
181 page: getPageFromProps(props),
185 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
186 let pathSplit = req.path.split("/");
187 let dataType: DataType = pathSplit[3]
188 ? DataType[pathSplit[3]]
191 // TODO figure out auth default_listingType, default_sort_type
192 let type_: ListingType = pathSplit[5]
193 ? ListingType[pathSplit[5]]
194 : UserService.Instance.myUserInfo
195 ? Object.values(ListingType)[
196 UserService.Instance.myUserInfo.local_user_view.local_user
197 .default_listing_type
200 let sort: SortType = pathSplit[7]
201 ? SortType[pathSplit[7]]
202 : UserService.Instance.myUserInfo
203 ? Object.values(SortType)[
204 UserService.Instance.myUserInfo.local_user_view.local_user
209 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
211 let promises: Promise<any>[] = [];
213 if (dataType == DataType.Post) {
214 let getPostsForm: GetPosts = {
221 setOptionalAuth(getPostsForm, req.auth);
222 promises.push(req.client.getPosts(getPostsForm));
224 let getCommentsForm: GetComments = {
231 setOptionalAuth(getCommentsForm, req.auth);
232 promises.push(req.client.getComments(getCommentsForm));
235 let trendingCommunitiesForm: ListCommunities = {
236 type_: ListingType.Local,
240 promises.push(req.client.listCommunities(trendingCommunitiesForm));
245 componentDidUpdate(_: any, lastState: HomeState) {
247 lastState.listingType !== this.state.listingType ||
248 lastState.dataType !== this.state.dataType ||
249 lastState.sort !== this.state.sort ||
250 lastState.page !== this.state.page
252 this.setState({ loading: true });
257 get documentTitle(): string {
259 this.state.siteRes.site_view
260 ? this.state.siteRes.site_view.site.description
261 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
262 : this.state.siteRes.site_view.site.name
269 <div class="container">
271 title={this.documentTitle}
272 path={this.context.router.route.match.url}
274 {this.state.siteRes.site_view?.site && (
276 <main role="main" class="col-12 col-md-8">
277 <div class="d-block d-md-none">{this.mobileView()}</div>
280 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
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.showSubscribedMobile && (
333 <div class="col-12 card border-secondary mb-3">
334 <div class="card-body">{this.subscribedCommunities()}</div>
337 {this.state.showTrendingMobile && (
338 <div class="col-12 card border-secondary mb-3">
339 <div class="card-body">{this.trendingCommunities()}</div>
342 {this.state.showSidebarMobile && (
343 <div class="col-12 card border-secondary mb-3">
344 <div class="card-body">{this.sidebar()}</div>
355 {!this.state.loading && (
357 <div class="card border-secondary mb-3">
358 <div class="card-body">
359 {this.trendingCommunities()}
360 {this.createCommunityButton()}
361 {this.exploreCommunitiesButton()}
365 {UserService.Instance.myUserInfo &&
366 UserService.Instance.myUserInfo.follows.length > 0 && (
367 <div class="card border-secondary mb-3">
368 <div class="card-body">{this.subscribedCommunities()}</div>
372 <div class="card border-secondary mb-3">
373 <div class="card-body">{this.sidebar()}</div>
381 createCommunityButton() {
383 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
384 {i18n.t("create_a_community")}
389 exploreCommunitiesButton() {
391 <Link className="btn btn-secondary btn-block" to="/communities">
392 {i18n.t("explore_communities")}
397 trendingCommunities() {
401 <T i18nKey="trending_communities">
403 <Link className="text-body" to="/communities">
408 <ul class="list-inline mb-0">
409 {this.state.trendingCommunities.map(cv => (
410 <li class="list-inline-item d-inline-block">
411 <CommunityLink community={cv.community} />
419 subscribedCommunities() {
423 <T i18nKey="subscribed_to_communities">
425 <Link className="text-body" to="/communities">
430 <ul class="list-inline mb-0">
431 {UserService.Instance.myUserInfo.follows.map(cfv => (
432 <li class="list-inline-item d-inline-block">
433 <CommunityLink community={cfv.community} />
442 let site = this.state.siteRes.site_view.site;
445 {!this.state.showEditSite ? (
449 {this.adminButtons()}
451 <BannerIconHeader banner={site.banner} />
455 <SiteForm site={site} onCancel={this.handleEditCancel} />
461 updateUrl(paramUpdates: UrlParams) {
462 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
463 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
464 const sortStr = paramUpdates.sort || this.state.sort;
465 const page = paramUpdates.page || this.state.page;
466 this.props.history.push(
467 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
472 let site = this.state.siteRes.site_view.site;
475 {site.description && <h6>{site.description}</h6>}
476 {site.sidebar && this.siteSidebar()}
484 let site = this.state.siteRes.site_view.site;
485 return site.name && <h5 class="mb-0">{site.name}</h5>;
490 <ul class="mt-1 list-inline small mb-0">
491 <li class="list-inline-item">{i18n.t("admins")}:</li>
492 {this.state.siteRes.admins.map(av => (
493 <li class="list-inline-item">
494 <PersonListing person={av.person} />
502 let counts = this.state.siteRes.site_view.counts;
504 <ul class="my-2 list-inline">
505 <li className="list-inline-item badge badge-secondary">
506 {i18n.t("number_online", { count: this.state.siteRes.online })}
509 className="list-inline-item badge badge-secondary pointer"
510 data-tippy-content={`${i18n.t("number_of_users", {
511 count: counts.users_active_day,
512 })} ${i18n.t("active_in_the_last")} ${i18n.t("day")}`}
514 {i18n.t("number_of_users", {
515 count: counts.users_active_day,
520 className="list-inline-item badge badge-secondary pointer"
521 data-tippy-content={`${i18n.t("number_of_users", {
522 count: counts.users_active_week,
523 })} ${i18n.t("active_in_the_last")} ${i18n.t("week")}`}
525 {i18n.t("number_of_users", {
526 count: counts.users_active_week,
531 className="list-inline-item badge badge-secondary pointer"
532 data-tippy-content={`${i18n.t("number_of_users", {
533 count: counts.users_active_month,
534 })} ${i18n.t("active_in_the_last")} ${i18n.t("month")}`}
536 {i18n.t("number_of_users", {
537 count: counts.users_active_month,
542 className="list-inline-item badge badge-secondary pointer"
543 data-tippy-content={`${i18n.t("number_of_users", {
544 count: counts.users_active_half_year,
545 })} ${i18n.t("active_in_the_last")} ${i18n.t("number_of_months", {
549 {i18n.t("number_of_users", {
550 count: counts.users_active_half_year,
552 / {i18n.t("number_of_months", { count: 6 })}
554 <li className="list-inline-item badge badge-secondary">
555 {i18n.t("number_of_users", {
559 <li className="list-inline-item badge badge-secondary">
560 {i18n.t("number_of_communities", {
561 count: counts.communities,
564 <li className="list-inline-item badge badge-secondary">
565 {i18n.t("number_of_posts", {
569 <li className="list-inline-item badge badge-secondary">
570 {i18n.t("number_of_comments", {
571 count: counts.comments,
574 <li className="list-inline-item">
575 <Link className="badge badge-secondary" to="/modlog">
586 <ul class="list-inline mb-1 text-muted font-weight-bold">
587 <li className="list-inline-item-action">
589 class="btn btn-link d-inline-block text-muted"
590 onClick={linkEvent(this, this.handleEditClick)}
591 aria-label={i18n.t("edit")}
592 data-tippy-content={i18n.t("edit")}
594 <Icon icon="edit" classes="icon-inline" />
606 dangerouslySetInnerHTML={mdToHtml(
607 this.state.siteRes.site_view.site.sidebar
615 <div class="main-content-wrapper">
616 {this.state.loading ? (
625 page={this.state.page}
626 onChange={this.handlePageChange}
635 let site = this.state.siteRes.site_view.site;
636 return this.state.dataType == DataType.Post ? (
638 posts={this.state.posts}
641 enableDownvotes={site.enable_downvotes}
642 enableNsfw={site.enable_nsfw}
646 nodes={commentsToFlatNodes(this.state.comments)}
650 enableDownvotes={site.enable_downvotes}
657 <div className="mb-3">
660 type_={this.state.dataType}
661 onChange={this.handleDataTypeChange}
666 type_={this.state.listingType}
667 showLocal={showLocal(this.isoData)}
668 onChange={this.handleListingTypeChange}
672 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
674 {this.state.listingType == ListingType.All && (
676 href={`/feeds/all.xml?sort=${this.state.sort}`}
680 <Icon icon="rss" classes="text-muted small" />
683 {this.state.listingType == ListingType.Local && (
685 href={`/feeds/local.xml?sort=${this.state.sort}`}
689 <Icon icon="rss" classes="text-muted small" />
692 {UserService.Instance.myUserInfo &&
693 this.state.listingType == ListingType.Subscribed && (
695 href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`}
699 <Icon icon="rss" classes="text-muted small" />
706 get canAdmin(): boolean {
708 UserService.Instance.myUserInfo &&
709 this.state.siteRes.admins
710 .map(a => a.person.id)
711 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
715 handleEditClick(i: Home) {
716 i.state.showEditSite = true;
721 this.state.showEditSite = false;
722 this.setState(this.state);
725 handleShowSubscribedMobile(i: Home) {
726 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
730 handleShowTrendingMobile(i: Home) {
731 i.state.showTrendingMobile = !i.state.showTrendingMobile;
735 handleShowSidebarMobile(i: Home) {
736 i.state.showSidebarMobile = !i.state.showSidebarMobile;
740 handlePageChange(page: number) {
741 this.updateUrl({ page });
742 window.scrollTo(0, 0);
745 handleSortChange(val: SortType) {
746 this.updateUrl({ sort: val, page: 1 });
747 window.scrollTo(0, 0);
750 handleListingTypeChange(val: ListingType) {
751 this.updateUrl({ listingType: val, page: 1 });
752 window.scrollTo(0, 0);
755 handleDataTypeChange(val: DataType) {
756 this.updateUrl({ dataType: DataType[val], page: 1 });
757 window.scrollTo(0, 0);
761 if (this.state.dataType == DataType.Post) {
762 let getPostsForm: GetPosts = {
763 page: this.state.page,
765 sort: this.state.sort,
766 type_: this.state.listingType,
768 auth: authField(false),
770 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
772 let getCommentsForm: GetComments = {
773 page: this.state.page,
775 sort: this.state.sort,
776 type_: this.state.listingType,
778 auth: authField(false),
780 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
784 parseMessage(msg: any) {
785 let op = wsUserOp(msg);
788 toast(i18n.t(msg.error), "danger");
790 } else if (msg.reconnect) {
791 WebSocketService.Instance.send(
792 wsClient.communityJoin({ community_id: 0 })
795 } else if (op == UserOperation.ListCommunities) {
796 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
797 this.state.trendingCommunities = data.communities;
798 this.setState(this.state);
799 } else if (op == UserOperation.EditSite) {
800 let data = wsJsonToRes<SiteResponse>(msg).data;
801 this.state.siteRes.site_view = data.site_view;
802 this.state.showEditSite = false;
803 this.setState(this.state);
804 toast(i18n.t("site_saved"));
805 } else if (op == UserOperation.GetPosts) {
806 let data = wsJsonToRes<GetPostsResponse>(msg).data;
807 this.state.posts = data.posts;
808 this.state.loading = false;
809 this.setState(this.state);
810 restoreScrollPosition(this.context);
812 } else if (op == UserOperation.CreatePost) {
813 let data = wsJsonToRes<PostResponse>(msg).data;
816 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
820 UserService.Instance.myUserInfo &&
821 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
823 // Only push these if you're on the first page, and you pass the nsfw check
824 if (this.state.page == 1 && nsfwCheck) {
825 // If you're on subscribed, only push it if you're subscribed.
826 if (this.state.listingType == ListingType.Subscribed) {
828 UserService.Instance.myUserInfo.follows
829 .map(c => c.community.id)
830 .includes(data.post_view.community.id)
832 this.state.posts.unshift(data.post_view);
834 UserService.Instance.myUserInfo?.local_user_view.local_user
835 .show_new_post_notifs
837 notifyPost(data.post_view, this.context.router);
840 } else if (this.state.listingType == ListingType.Local) {
841 // If you're on the local view, only push it if its local
842 if (data.post_view.post.local) {
843 this.state.posts.unshift(data.post_view);
845 UserService.Instance.myUserInfo?.local_user_view.local_user
846 .show_new_post_notifs
848 notifyPost(data.post_view, this.context.router);
852 this.state.posts.unshift(data.post_view);
854 UserService.Instance.myUserInfo?.local_user_view.local_user
855 .show_new_post_notifs
857 notifyPost(data.post_view, this.context.router);
860 this.setState(this.state);
863 op == UserOperation.EditPost ||
864 op == UserOperation.DeletePost ||
865 op == UserOperation.RemovePost ||
866 op == UserOperation.LockPost ||
867 op == UserOperation.StickyPost ||
868 op == UserOperation.SavePost
870 let data = wsJsonToRes<PostResponse>(msg).data;
871 editPostFindRes(data.post_view, this.state.posts);
872 this.setState(this.state);
873 } else if (op == UserOperation.CreatePostLike) {
874 let data = wsJsonToRes<PostResponse>(msg).data;
875 createPostLikeFindRes(data.post_view, this.state.posts);
876 this.setState(this.state);
877 } else if (op == UserOperation.AddAdmin) {
878 let data = wsJsonToRes<AddAdminResponse>(msg).data;
879 this.state.siteRes.admins = data.admins;
880 this.setState(this.state);
881 } else if (op == UserOperation.BanPerson) {
882 let data = wsJsonToRes<BanPersonResponse>(msg).data;
883 let found = this.state.siteRes.banned.find(
884 p => (p.person.id = data.person_view.person.id)
887 // Remove the banned if its found in the list, and the action is an unban
888 if (found && !data.banned) {
889 this.state.siteRes.banned = this.state.siteRes.banned.filter(
890 i => i.person.id !== data.person_view.person.id
893 this.state.siteRes.banned.push(data.person_view);
897 .filter(p => p.creator.id == data.person_view.person.id)
898 .forEach(p => (p.creator.banned = data.banned));
900 this.setState(this.state);
901 } else if (op == UserOperation.GetComments) {
902 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
903 this.state.comments = data.comments;
904 this.state.loading = false;
905 this.setState(this.state);
907 op == UserOperation.EditComment ||
908 op == UserOperation.DeleteComment ||
909 op == UserOperation.RemoveComment
911 let data = wsJsonToRes<CommentResponse>(msg).data;
912 editCommentRes(data.comment_view, this.state.comments);
913 this.setState(this.state);
914 } else if (op == UserOperation.CreateComment) {
915 let data = wsJsonToRes<CommentResponse>(msg).data;
917 // Necessary since it might be a user reply
919 // If you're on subscribed, only push it if you're subscribed.
920 if (this.state.listingType == ListingType.Subscribed) {
922 UserService.Instance.myUserInfo.follows
923 .map(c => c.community.id)
924 .includes(data.comment_view.community.id)
926 this.state.comments.unshift(data.comment_view);
929 this.state.comments.unshift(data.comment_view);
931 this.setState(this.state);
933 } else if (op == UserOperation.SaveComment) {
934 let data = wsJsonToRes<CommentResponse>(msg).data;
935 saveCommentRes(data.comment_view, this.state.comments);
936 this.setState(this.state);
937 } else if (op == UserOperation.CreateCommentLike) {
938 let data = wsJsonToRes<CommentResponse>(msg).data;
939 createCommentLikeRes(data.comment_view, this.state.comments);
940 this.setState(this.state);
941 } else if (op == UserOperation.BlockPerson) {
942 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
943 updatePersonBlock(data);