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;
81 sidebarCollapsed: boolean;
82 subscribedCollapsed: boolean;
85 comments: CommentView[];
86 listingType: ListingType;
93 listingType: ListingType;
100 listingType?: ListingType;
106 export class Home extends Component<any, HomeState> {
107 private isoData = setIsoData(this.context);
108 private subscription: Subscription;
109 private emptyState: HomeState = {
110 trendingCommunities: [],
111 siteRes: this.isoData.site_res,
113 showSubscribedMobile: false,
114 showTrendingMobile: false,
115 showSidebarMobile: false,
116 subscribedCollapsed: false,
117 sidebarCollapsed: false,
121 listingType: getListingTypeFromProps(this.props),
122 dataType: getDataTypeFromProps(this.props),
123 sort: getSortTypeFromProps(this.props),
124 page: getPageFromProps(this.props),
127 constructor(props: any, context: any) {
128 super(props, context);
130 this.state = this.emptyState;
131 this.handleEditCancel = this.handleEditCancel.bind(this);
132 this.handleSortChange = this.handleSortChange.bind(this);
133 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
134 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
135 this.handlePageChange = this.handlePageChange.bind(this);
137 this.parseMessage = this.parseMessage.bind(this);
138 this.subscription = wsSubscribe(this.parseMessage);
140 // Only fetch the data if coming from another route
141 if (this.isoData.path == this.context.router.route.match.url) {
142 if (this.state.dataType == DataType.Post) {
143 this.state.posts = this.isoData.routeData[0].posts;
145 this.state.comments = this.isoData.routeData[0].comments;
147 this.state.trendingCommunities = this.isoData.routeData[1].communities;
148 this.state.loading = false;
150 this.fetchTrendingCommunities();
155 fetchTrendingCommunities() {
156 let listCommunitiesForm: ListCommunities = {
157 type_: ListingType.Local,
160 auth: authField(false),
162 WebSocketService.Instance.send(
163 wsClient.listCommunities(listCommunitiesForm)
167 componentDidMount() {
168 // This means it hasn't been set up yet
169 if (!this.state.siteRes.site_view) {
170 this.context.router.history.push("/setup");
173 WebSocketService.Instance.send(wsClient.communityJoin({ community_id: 0 }));
177 componentWillUnmount() {
178 saveScrollPosition(this.context);
179 this.subscription.unsubscribe();
180 window.isoData.path = undefined;
183 static getDerivedStateFromProps(props: any): HomeProps {
185 listingType: getListingTypeFromProps(props),
186 dataType: getDataTypeFromProps(props),
187 sort: getSortTypeFromProps(props),
188 page: getPageFromProps(props),
192 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
193 let pathSplit = req.path.split("/");
194 let dataType: DataType = pathSplit[3]
195 ? DataType[pathSplit[3]]
198 // TODO figure out auth default_listingType, default_sort_type
199 let type_: ListingType = pathSplit[5]
200 ? ListingType[pathSplit[5]]
201 : UserService.Instance.myUserInfo
202 ? Object.values(ListingType)[
203 UserService.Instance.myUserInfo.local_user_view.local_user
204 .default_listing_type
207 let sort: SortType = pathSplit[7]
208 ? SortType[pathSplit[7]]
209 : UserService.Instance.myUserInfo
210 ? Object.values(SortType)[
211 UserService.Instance.myUserInfo.local_user_view.local_user
216 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
218 let promises: Promise<any>[] = [];
220 if (dataType == DataType.Post) {
221 let getPostsForm: GetPosts = {
228 setOptionalAuth(getPostsForm, req.auth);
229 promises.push(req.client.getPosts(getPostsForm));
231 let getCommentsForm: GetComments = {
238 setOptionalAuth(getCommentsForm, req.auth);
239 promises.push(req.client.getComments(getCommentsForm));
242 let trendingCommunitiesForm: ListCommunities = {
243 type_: ListingType.Local,
247 setOptionalAuth(trendingCommunitiesForm, req.auth);
248 promises.push(req.client.listCommunities(trendingCommunitiesForm));
253 componentDidUpdate(_: any, lastState: HomeState) {
255 lastState.listingType !== this.state.listingType ||
256 lastState.dataType !== this.state.dataType ||
257 lastState.sort !== this.state.sort ||
258 lastState.page !== this.state.page
260 this.setState({ loading: true });
265 get documentTitle(): string {
267 this.state.siteRes.site_view
268 ? this.state.siteRes.site_view.site.description
269 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
270 : this.state.siteRes.site_view.site.name
277 <div class="container">
279 title={this.documentTitle}
280 path={this.context.router.route.match.url}
282 {this.state.siteRes.site_view?.site && (
284 <main role="main" class="col-12 col-md-8">
285 <div class="d-block d-md-none">{this.mobileView()}</div>
288 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
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.showSubscribedMobile && (
341 <div class="col-12 card border-secondary mb-3">
342 <div class="card-body">{this.subscribedCommunities()}</div>
345 {this.state.showTrendingMobile && (
346 <div class="col-12 card border-secondary mb-3">
347 <div class="card-body">{this.trendingCommunities()}</div>
350 {this.state.showSidebarMobile && (
351 <div class="col-12 card border-secondary mb-3">
352 <div class="card-body">{this.sidebar()}</div>
363 {!this.state.loading && (
365 <div class="card border-secondary mb-3">
366 <div class="card-body">
367 {this.trendingCommunities()}
368 {this.createCommunityButton()}
369 {this.exploreCommunitiesButton()}
373 <div class="card border-secondary mb-3">
374 <div class="card-body">{this.sidebar()}</div>
377 {UserService.Instance.myUserInfo &&
378 UserService.Instance.myUserInfo.follows.length > 0 && (
379 <div class="card border-secondary mb-3">
380 <div class="card-body">{this.subscribedCommunities()}</div>
389 createCommunityButton() {
391 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
392 {i18n.t("create_a_community")}
397 exploreCommunitiesButton() {
399 <Link className="btn btn-secondary btn-block" to="/communities">
400 {i18n.t("explore_communities")}
405 trendingCommunities() {
409 <T i18nKey="trending_communities">
411 <Link className="text-body" to="/communities">
416 <ul class="list-inline mb-0">
417 {this.state.trendingCommunities.map(cv => (
418 <li class="list-inline-item d-inline-block">
419 <CommunityLink community={cv.community} />
427 subscribedCommunities() {
431 <T class="d-inline" i18nKey="subscribed_to_communities">
433 <Link className="text-body" to="/communities">
438 class="btn btn-sm text-muted"
439 onClick={linkEvent(this, this.handleCollapseSubscribe)}
440 aria-label={i18n.t("collapse")}
441 data-tippy-content={i18n.t("collapse")}
443 {this.state.subscribedCollapsed ? (
444 <Icon icon="plus-square" classes="icon-inline" />
446 <Icon icon="minus-square" classes="icon-inline" />
450 {!this.state.subscribedCollapsed && (
451 <ul class="list-inline mb-0">
452 {UserService.Instance.myUserInfo.follows.map(cfv => (
453 <li class="list-inline-item d-inline-block">
454 <CommunityLink community={cfv.community} />
464 let site = this.state.siteRes.site_view.site;
467 {!this.state.showEditSite ? (
471 {this.adminButtons()}
473 {!this.state.sidebarCollapsed && (
475 <BannerIconHeader banner={site.banner} />
481 <SiteForm site={site} onCancel={this.handleEditCancel} />
487 updateUrl(paramUpdates: UrlParams) {
488 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
489 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
490 const sortStr = paramUpdates.sort || this.state.sort;
491 const page = paramUpdates.page || this.state.page;
492 this.props.history.push(
493 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
498 let site = this.state.siteRes.site_view.site;
501 {site.description && <h6>{site.description}</h6>}
502 {site.sidebar && this.siteSidebar()}
510 let site = this.state.siteRes.site_view.site;
513 <h5 class="mb-0 d-inline">
516 class="btn btn-sm text-muted"
517 onClick={linkEvent(this, this.handleCollapseSidebar)}
518 aria-label={i18n.t("collapse")}
519 data-tippy-content={i18n.t("collapse")}
521 {this.state.sidebarCollapsed ? (
522 <Icon icon="plus-square" classes="icon-inline" />
524 <Icon icon="minus-square" classes="icon-inline" />
534 <ul class="mt-1 list-inline small mb-0">
535 <li class="list-inline-item">{i18n.t("admins")}:</li>
536 {this.state.siteRes.admins.map(av => (
537 <li class="list-inline-item">
538 <PersonListing person={av.person} />
546 let counts = this.state.siteRes.site_view.counts;
548 <ul class="my-2 list-inline">
549 <li className="list-inline-item badge badge-secondary">
550 {i18n.t("number_online", {
551 count: this.state.siteRes.online,
552 formattedCount: numToSI(this.state.siteRes.online),
556 className="list-inline-item badge badge-secondary pointer"
557 data-tippy-content={i18n.t("active_users_in_the_last_day", {
558 count: counts.users_active_day,
559 formattedCount: numToSI(counts.users_active_day),
562 {i18n.t("number_of_users", {
563 count: counts.users_active_day,
564 formattedCount: numToSI(counts.users_active_day),
569 className="list-inline-item badge badge-secondary pointer"
570 data-tippy-content={i18n.t("active_users_in_the_last_week", {
571 count: counts.users_active_week,
572 formattedCount: counts.users_active_week,
575 {i18n.t("number_of_users", {
576 count: counts.users_active_week,
577 formattedCount: numToSI(counts.users_active_week),
582 className="list-inline-item badge badge-secondary pointer"
583 data-tippy-content={i18n.t("active_users_in_the_last_month", {
584 count: counts.users_active_month,
585 formattedCount: counts.users_active_month,
588 {i18n.t("number_of_users", {
589 count: counts.users_active_month,
590 formattedCount: numToSI(counts.users_active_month),
595 className="list-inline-item badge badge-secondary pointer"
596 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
597 count: counts.users_active_half_year,
598 formattedCount: counts.users_active_half_year,
601 {i18n.t("number_of_users", {
602 count: counts.users_active_half_year,
603 formattedCount: numToSI(counts.users_active_half_year),
605 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
607 <li className="list-inline-item badge badge-secondary">
608 {i18n.t("number_of_users", {
610 formattedCount: numToSI(counts.users),
613 <li className="list-inline-item badge badge-secondary">
614 {i18n.t("number_of_communities", {
615 count: counts.communities,
616 formattedCount: numToSI(counts.communities),
619 <li className="list-inline-item badge badge-secondary">
620 {i18n.t("number_of_posts", {
622 formattedCount: numToSI(counts.posts),
625 <li className="list-inline-item badge badge-secondary">
626 {i18n.t("number_of_comments", {
627 count: counts.comments,
628 formattedCount: numToSI(counts.comments),
631 <li className="list-inline-item">
632 <Link className="badge badge-primary" to="/modlog">
643 <ul class="list-inline mb-1 text-muted font-weight-bold">
644 <li className="list-inline-item-action">
646 class="btn btn-link d-inline-block text-muted"
647 onClick={linkEvent(this, this.handleEditClick)}
648 aria-label={i18n.t("edit")}
649 data-tippy-content={i18n.t("edit")}
651 <Icon icon="edit" classes="icon-inline" />
663 dangerouslySetInnerHTML={mdToHtml(
664 this.state.siteRes.site_view.site.sidebar
672 <div class="main-content-wrapper">
673 {this.state.loading ? (
682 page={this.state.page}
683 onChange={this.handlePageChange}
692 let site = this.state.siteRes.site_view.site;
693 return this.state.dataType == DataType.Post ? (
695 posts={this.state.posts}
698 enableDownvotes={site.enable_downvotes}
699 enableNsfw={site.enable_nsfw}
703 nodes={commentsToFlatNodes(this.state.comments)}
707 enableDownvotes={site.enable_downvotes}
713 let allRss = `/feeds/all.xml?sort=${this.state.sort}`;
714 let localRss = `/feeds/local.xml?sort=${this.state.sort}`;
715 let frontRss = UserService.Instance.myUserInfo
716 ? `/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`
720 <div className="mb-3">
723 type_={this.state.dataType}
724 onChange={this.handleDataTypeChange}
729 type_={this.state.listingType}
730 showLocal={showLocal(this.isoData)}
731 onChange={this.handleListingTypeChange}
735 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
737 {this.state.listingType == ListingType.All && (
739 <a href={allRss} rel={relTags} title="RSS">
740 <Icon icon="rss" classes="text-muted small" />
742 <link rel="alternate" type="application/atom+xml" href={allRss} />
745 {this.state.listingType == ListingType.Local && (
747 <a href={localRss} rel={relTags} title="RSS">
748 <Icon icon="rss" classes="text-muted small" />
750 <link rel="alternate" type="application/atom+xml" href={localRss} />
753 {UserService.Instance.myUserInfo &&
754 this.state.listingType == ListingType.Subscribed && (
756 <a href={frontRss} title="RSS" rel={relTags}>
757 <Icon icon="rss" classes="text-muted small" />
761 type="application/atom+xml"
770 get canAdmin(): boolean {
772 UserService.Instance.myUserInfo &&
773 this.state.siteRes.admins
774 .map(a => a.person.id)
775 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
779 handleEditClick(i: Home) {
780 i.state.showEditSite = true;
785 this.state.showEditSite = false;
786 this.setState(this.state);
789 handleShowSubscribedMobile(i: Home) {
790 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
794 handleShowTrendingMobile(i: Home) {
795 i.state.showTrendingMobile = !i.state.showTrendingMobile;
799 handleShowSidebarMobile(i: Home) {
800 i.state.showSidebarMobile = !i.state.showSidebarMobile;
804 handleCollapseSubscribe(i: Home) {
805 i.state.subscribedCollapsed = !i.state.subscribedCollapsed;
809 handleCollapseSidebar(i: Home) {
810 i.state.sidebarCollapsed = !i.state.sidebarCollapsed;
814 handlePageChange(page: number) {
815 this.updateUrl({ page });
816 window.scrollTo(0, 0);
819 handleSortChange(val: SortType) {
820 this.updateUrl({ sort: val, page: 1 });
821 window.scrollTo(0, 0);
824 handleListingTypeChange(val: ListingType) {
825 this.updateUrl({ listingType: val, page: 1 });
826 window.scrollTo(0, 0);
829 handleDataTypeChange(val: DataType) {
830 this.updateUrl({ dataType: DataType[val], page: 1 });
831 window.scrollTo(0, 0);
835 if (this.state.dataType == DataType.Post) {
836 let getPostsForm: GetPosts = {
837 page: this.state.page,
839 sort: this.state.sort,
840 type_: this.state.listingType,
842 auth: authField(false),
844 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
846 let getCommentsForm: GetComments = {
847 page: this.state.page,
849 sort: this.state.sort,
850 type_: this.state.listingType,
852 auth: authField(false),
854 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
858 parseMessage(msg: any) {
859 let op = wsUserOp(msg);
862 toast(i18n.t(msg.error), "danger");
864 } else if (msg.reconnect) {
865 WebSocketService.Instance.send(
866 wsClient.communityJoin({ community_id: 0 })
869 } else if (op == UserOperation.ListCommunities) {
870 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
871 this.state.trendingCommunities = data.communities;
872 this.setState(this.state);
873 } else if (op == UserOperation.EditSite) {
874 let data = wsJsonToRes<SiteResponse>(msg).data;
875 this.state.siteRes.site_view = data.site_view;
876 this.state.showEditSite = false;
877 this.setState(this.state);
878 toast(i18n.t("site_saved"));
879 } else if (op == UserOperation.GetPosts) {
880 let data = wsJsonToRes<GetPostsResponse>(msg).data;
881 this.state.posts = data.posts;
882 this.state.loading = false;
883 this.setState(this.state);
884 restoreScrollPosition(this.context);
886 } else if (op == UserOperation.CreatePost) {
887 let data = wsJsonToRes<PostResponse>(msg).data;
890 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
894 UserService.Instance.myUserInfo &&
895 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
897 // Only push these if you're on the first page, and you pass the nsfw check
898 if (this.state.page == 1 && nsfwCheck) {
899 // If you're on subscribed, only push it if you're subscribed.
900 if (this.state.listingType == ListingType.Subscribed) {
902 UserService.Instance.myUserInfo.follows
903 .map(c => c.community.id)
904 .includes(data.post_view.community.id)
906 this.state.posts.unshift(data.post_view);
908 UserService.Instance.myUserInfo?.local_user_view.local_user
909 .show_new_post_notifs
911 notifyPost(data.post_view, this.context.router);
914 } else if (this.state.listingType == ListingType.Local) {
915 // If you're on the local view, only push it if its local
916 if (data.post_view.post.local) {
917 this.state.posts.unshift(data.post_view);
919 UserService.Instance.myUserInfo?.local_user_view.local_user
920 .show_new_post_notifs
922 notifyPost(data.post_view, this.context.router);
926 this.state.posts.unshift(data.post_view);
928 UserService.Instance.myUserInfo?.local_user_view.local_user
929 .show_new_post_notifs
931 notifyPost(data.post_view, this.context.router);
934 this.setState(this.state);
937 op == UserOperation.EditPost ||
938 op == UserOperation.DeletePost ||
939 op == UserOperation.RemovePost ||
940 op == UserOperation.LockPost ||
941 op == UserOperation.StickyPost ||
942 op == UserOperation.SavePost
944 let data = wsJsonToRes<PostResponse>(msg).data;
945 editPostFindRes(data.post_view, this.state.posts);
946 this.setState(this.state);
947 } else if (op == UserOperation.CreatePostLike) {
948 let data = wsJsonToRes<PostResponse>(msg).data;
949 createPostLikeFindRes(data.post_view, this.state.posts);
950 this.setState(this.state);
951 } else if (op == UserOperation.AddAdmin) {
952 let data = wsJsonToRes<AddAdminResponse>(msg).data;
953 this.state.siteRes.admins = data.admins;
954 this.setState(this.state);
955 } else if (op == UserOperation.BanPerson) {
956 let data = wsJsonToRes<BanPersonResponse>(msg).data;
958 .filter(p => p.creator.id == data.person_view.person.id)
959 .forEach(p => (p.creator.banned = data.banned));
961 this.setState(this.state);
962 } else if (op == UserOperation.GetComments) {
963 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
964 this.state.comments = data.comments;
965 this.state.loading = false;
966 this.setState(this.state);
968 op == UserOperation.EditComment ||
969 op == UserOperation.DeleteComment ||
970 op == UserOperation.RemoveComment
972 let data = wsJsonToRes<CommentResponse>(msg).data;
973 editCommentRes(data.comment_view, this.state.comments);
974 this.setState(this.state);
975 } else if (op == UserOperation.CreateComment) {
976 let data = wsJsonToRes<CommentResponse>(msg).data;
978 // Necessary since it might be a user reply
980 // If you're on subscribed, only push it if you're subscribed.
981 if (this.state.listingType == ListingType.Subscribed) {
983 UserService.Instance.myUserInfo.follows
984 .map(c => c.community.id)
985 .includes(data.comment_view.community.id)
987 this.state.comments.unshift(data.comment_view);
990 this.state.comments.unshift(data.comment_view);
992 this.setState(this.state);
994 } else if (op == UserOperation.SaveComment) {
995 let data = wsJsonToRes<CommentResponse>(msg).data;
996 saveCommentRes(data.comment_view, this.state.comments);
997 this.setState(this.state);
998 } else if (op == UserOperation.CreateCommentLike) {
999 let data = wsJsonToRes<CommentResponse>(msg).data;
1000 createCommentLikeRes(data.comment_view, this.state.comments);
1001 this.setState(this.state);
1002 } else if (op == UserOperation.BlockPerson) {
1003 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
1004 updatePersonBlock(data);
1005 } else if (op == UserOperation.CreatePostReport) {
1006 let data = wsJsonToRes<PostReportResponse>(msg).data;
1008 toast(i18n.t("report_created"));
1010 } else if (op == UserOperation.CreateCommentReport) {
1011 let data = wsJsonToRes<CommentReportResponse>(msg).data;
1013 toast(i18n.t("report_created"));