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,
46 restoreScrollPosition,
60 import { CommentNodes } from "../comment/comment-nodes";
61 import { BannerIconHeader } from "../common/banner-icon-header";
62 import { DataTypeSelect } from "../common/data-type-select";
63 import { HtmlTags } from "../common/html-tags";
64 import { Icon, Spinner } from "../common/icon";
65 import { ListingTypeSelect } from "../common/listing-type-select";
66 import { Paginator } from "../common/paginator";
67 import { SortSelect } from "../common/sort-select";
68 import { CommunityLink } from "../community/community-link";
69 import { PersonListing } from "../person/person-listing";
70 import { PostListings } from "../post/post-listings";
71 import { SiteForm } from "./site-form";
74 trendingCommunities: CommunityView[];
75 siteRes: GetSiteResponse;
76 showEditSite: boolean;
77 showSubscribedMobile: boolean;
78 showTrendingMobile: boolean;
79 showSidebarMobile: boolean;
82 comments: CommentView[];
83 listingType: ListingType;
90 listingType: ListingType;
97 listingType?: ListingType;
103 export class Home extends Component<any, HomeState> {
104 private isoData = setIsoData(this.context);
105 private subscription: Subscription;
106 private emptyState: HomeState = {
107 trendingCommunities: [],
108 siteRes: this.isoData.site_res,
110 showSubscribedMobile: false,
111 showTrendingMobile: false,
112 showSidebarMobile: false,
116 listingType: getListingTypeFromProps(this.props),
117 dataType: getDataTypeFromProps(this.props),
118 sort: getSortTypeFromProps(this.props),
119 page: getPageFromProps(this.props),
122 constructor(props: any, context: any) {
123 super(props, context);
125 this.state = this.emptyState;
126 this.handleEditCancel = this.handleEditCancel.bind(this);
127 this.handleSortChange = this.handleSortChange.bind(this);
128 this.handleListingTypeChange = this.handleListingTypeChange.bind(this);
129 this.handleDataTypeChange = this.handleDataTypeChange.bind(this);
130 this.handlePageChange = this.handlePageChange.bind(this);
132 this.parseMessage = this.parseMessage.bind(this);
133 this.subscription = wsSubscribe(this.parseMessage);
135 // Only fetch the data if coming from another route
136 if (this.isoData.path == this.context.router.route.match.url) {
137 if (this.state.dataType == DataType.Post) {
138 this.state.posts = this.isoData.routeData[0].posts;
140 this.state.comments = this.isoData.routeData[0].comments;
142 this.state.trendingCommunities = this.isoData.routeData[1].communities;
143 this.state.loading = false;
145 this.fetchTrendingCommunities();
150 fetchTrendingCommunities() {
151 let listCommunitiesForm: ListCommunities = {
152 type_: ListingType.Local,
155 auth: authField(false),
157 WebSocketService.Instance.send(
158 wsClient.listCommunities(listCommunitiesForm)
162 componentDidMount() {
163 // This means it hasn't been set up yet
164 if (!this.state.siteRes.site_view) {
165 this.context.router.history.push("/setup");
168 WebSocketService.Instance.send(wsClient.communityJoin({ community_id: 0 }));
172 componentWillUnmount() {
173 saveScrollPosition(this.context);
174 this.subscription.unsubscribe();
175 window.isoData.path = undefined;
178 static getDerivedStateFromProps(props: any): HomeProps {
180 listingType: getListingTypeFromProps(props),
181 dataType: getDataTypeFromProps(props),
182 sort: getSortTypeFromProps(props),
183 page: getPageFromProps(props),
187 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
188 let pathSplit = req.path.split("/");
189 let dataType: DataType = pathSplit[3]
190 ? DataType[pathSplit[3]]
193 // TODO figure out auth default_listingType, default_sort_type
194 let type_: ListingType = pathSplit[5]
195 ? ListingType[pathSplit[5]]
196 : UserService.Instance.myUserInfo
197 ? Object.values(ListingType)[
198 UserService.Instance.myUserInfo.local_user_view.local_user
199 .default_listing_type
202 let sort: SortType = pathSplit[7]
203 ? SortType[pathSplit[7]]
204 : UserService.Instance.myUserInfo
205 ? Object.values(SortType)[
206 UserService.Instance.myUserInfo.local_user_view.local_user
211 let page = pathSplit[9] ? Number(pathSplit[9]) : 1;
213 let promises: Promise<any>[] = [];
215 if (dataType == DataType.Post) {
216 let getPostsForm: GetPosts = {
223 setOptionalAuth(getPostsForm, req.auth);
224 promises.push(req.client.getPosts(getPostsForm));
226 let getCommentsForm: GetComments = {
233 setOptionalAuth(getCommentsForm, req.auth);
234 promises.push(req.client.getComments(getCommentsForm));
237 let trendingCommunitiesForm: ListCommunities = {
238 type_: ListingType.Local,
242 setOptionalAuth(trendingCommunitiesForm, req.auth);
243 promises.push(req.client.listCommunities(trendingCommunitiesForm));
248 componentDidUpdate(_: any, lastState: HomeState) {
250 lastState.listingType !== this.state.listingType ||
251 lastState.dataType !== this.state.dataType ||
252 lastState.sort !== this.state.sort ||
253 lastState.page !== this.state.page
255 this.setState({ loading: true });
260 get documentTitle(): string {
262 this.state.siteRes.site_view
263 ? this.state.siteRes.site_view.site.description
264 ? `${this.state.siteRes.site_view.site.name} - ${this.state.siteRes.site_view.site.description}`
265 : this.state.siteRes.site_view.site.name
272 <div class="container">
274 title={this.documentTitle}
275 path={this.context.router.route.match.url}
277 {this.state.siteRes.site_view?.site && (
279 <main role="main" class="col-12 col-md-8">
280 <div class="d-block d-md-none">{this.mobileView()}</div>
283 <aside class="d-none d-md-block col-md-4">{this.mySidebar()}</aside>
294 {UserService.Instance.myUserInfo &&
295 UserService.Instance.myUserInfo.follows.length > 0 && (
297 class="btn btn-secondary d-inline-block mb-2 mr-3"
298 onClick={linkEvent(this, this.handleShowSubscribedMobile)}
300 {i18n.t("subscribed")}{" "}
303 this.state.showSubscribedMobile
307 classes="icon-inline"
312 class="btn btn-secondary d-inline-block mb-2 mr-3"
313 onClick={linkEvent(this, this.handleShowTrendingMobile)}
315 {i18n.t("trending")}{" "}
318 this.state.showTrendingMobile ? `minus-square` : `plus-square`
320 classes="icon-inline"
324 class="btn btn-secondary d-inline-block mb-2 mr-3"
325 onClick={linkEvent(this, this.handleShowSidebarMobile)}
327 {i18n.t("sidebar")}{" "}
330 this.state.showSidebarMobile ? `minus-square` : `plus-square`
332 classes="icon-inline"
335 {this.state.showSubscribedMobile && (
336 <div class="col-12 card border-secondary mb-3">
337 <div class="card-body">{this.subscribedCommunities()}</div>
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.showSidebarMobile && (
346 <div class="col-12 card border-secondary mb-3">
347 <div class="card-body">{this.sidebar()}</div>
358 {!this.state.loading && (
360 <div class="card border-secondary mb-3">
361 <div class="card-body">
362 {this.trendingCommunities()}
363 {this.createCommunityButton()}
364 {this.exploreCommunitiesButton()}
368 {UserService.Instance.myUserInfo &&
369 UserService.Instance.myUserInfo.follows.length > 0 && (
370 <div class="card border-secondary mb-3">
371 <div class="card-body">{this.subscribedCommunities()}</div>
375 <div class="card border-secondary mb-3">
376 <div class="card-body">{this.sidebar()}</div>
384 createCommunityButton() {
386 <Link className="mt-2 btn btn-secondary btn-block" to="/create_community">
387 {i18n.t("create_a_community")}
392 exploreCommunitiesButton() {
394 <Link className="btn btn-secondary btn-block" to="/communities">
395 {i18n.t("explore_communities")}
400 trendingCommunities() {
404 <T i18nKey="trending_communities">
406 <Link className="text-body" to="/communities">
411 <ul class="list-inline mb-0">
412 {this.state.trendingCommunities.map(cv => (
413 <li class="list-inline-item d-inline-block">
414 <CommunityLink community={cv.community} />
422 subscribedCommunities() {
426 <T i18nKey="subscribed_to_communities">
428 <Link className="text-body" to="/communities">
433 <ul class="list-inline mb-0">
434 {UserService.Instance.myUserInfo.follows.map(cfv => (
435 <li class="list-inline-item d-inline-block">
436 <CommunityLink community={cfv.community} />
445 let site = this.state.siteRes.site_view.site;
448 {!this.state.showEditSite ? (
452 {this.adminButtons()}
454 <BannerIconHeader banner={site.banner} />
458 <SiteForm site={site} onCancel={this.handleEditCancel} />
464 updateUrl(paramUpdates: UrlParams) {
465 const listingTypeStr = paramUpdates.listingType || this.state.listingType;
466 const dataTypeStr = paramUpdates.dataType || DataType[this.state.dataType];
467 const sortStr = paramUpdates.sort || this.state.sort;
468 const page = paramUpdates.page || this.state.page;
469 this.props.history.push(
470 `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
475 let site = this.state.siteRes.site_view.site;
478 {site.description && <h6>{site.description}</h6>}
479 {site.sidebar && this.siteSidebar()}
487 let site = this.state.siteRes.site_view.site;
488 return site.name && <h5 class="mb-0">{site.name}</h5>;
493 <ul class="mt-1 list-inline small mb-0">
494 <li class="list-inline-item">{i18n.t("admins")}:</li>
495 {this.state.siteRes.admins.map(av => (
496 <li class="list-inline-item">
497 <PersonListing person={av.person} />
505 let counts = this.state.siteRes.site_view.counts;
507 <ul class="my-2 list-inline">
508 <li className="list-inline-item badge badge-secondary">
509 {i18n.t("number_online", {
510 count: this.state.siteRes.online,
511 formattedCount: numToSI(this.state.siteRes.online),
515 className="list-inline-item badge badge-secondary pointer"
516 data-tippy-content={i18n.t("active_users_in_the_last_day", {
517 count: counts.users_active_day,
518 formattedCount: numToSI(counts.users_active_day),
521 {i18n.t("number_of_users", {
522 count: counts.users_active_day,
523 formattedCount: numToSI(counts.users_active_day),
528 className="list-inline-item badge badge-secondary pointer"
529 data-tippy-content={i18n.t("active_users_in_the_last_week", {
530 count: counts.users_active_week,
531 formattedCount: counts.users_active_week,
534 {i18n.t("number_of_users", {
535 count: counts.users_active_week,
536 formattedCount: numToSI(counts.users_active_week),
541 className="list-inline-item badge badge-secondary pointer"
542 data-tippy-content={i18n.t("active_users_in_the_last_month", {
543 count: counts.users_active_month,
544 formattedCount: counts.users_active_month,
547 {i18n.t("number_of_users", {
548 count: counts.users_active_month,
549 formattedCount: numToSI(counts.users_active_month),
554 className="list-inline-item badge badge-secondary pointer"
555 data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
556 count: counts.users_active_half_year,
557 formattedCount: counts.users_active_half_year,
560 {i18n.t("number_of_users", {
561 count: counts.users_active_half_year,
562 formattedCount: numToSI(counts.users_active_half_year),
564 / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
566 <li className="list-inline-item badge badge-secondary">
567 {i18n.t("number_of_users", {
569 formattedCount: numToSI(counts.users),
572 <li className="list-inline-item badge badge-secondary">
573 {i18n.t("number_of_communities", {
574 count: counts.communities,
575 formattedCount: numToSI(counts.communities),
578 <li className="list-inline-item badge badge-secondary">
579 {i18n.t("number_of_posts", {
581 formattedCount: numToSI(counts.posts),
584 <li className="list-inline-item badge badge-secondary">
585 {i18n.t("number_of_comments", {
586 count: counts.comments,
587 formattedCount: numToSI(counts.comments),
590 <li className="list-inline-item">
591 <Link className="badge badge-primary" to="/modlog">
602 <ul class="list-inline mb-1 text-muted font-weight-bold">
603 <li className="list-inline-item-action">
605 class="btn btn-link d-inline-block text-muted"
606 onClick={linkEvent(this, this.handleEditClick)}
607 aria-label={i18n.t("edit")}
608 data-tippy-content={i18n.t("edit")}
610 <Icon icon="edit" classes="icon-inline" />
622 dangerouslySetInnerHTML={mdToHtml(
623 this.state.siteRes.site_view.site.sidebar
631 <div class="main-content-wrapper">
632 {this.state.loading ? (
641 page={this.state.page}
642 onChange={this.handlePageChange}
651 let site = this.state.siteRes.site_view.site;
652 return this.state.dataType == DataType.Post ? (
654 posts={this.state.posts}
657 enableDownvotes={site.enable_downvotes}
658 enableNsfw={site.enable_nsfw}
662 nodes={commentsToFlatNodes(this.state.comments)}
666 enableDownvotes={site.enable_downvotes}
673 <div className="mb-3">
676 type_={this.state.dataType}
677 onChange={this.handleDataTypeChange}
682 type_={this.state.listingType}
683 showLocal={showLocal(this.isoData)}
684 onChange={this.handleListingTypeChange}
688 <SortSelect sort={this.state.sort} onChange={this.handleSortChange} />
690 {this.state.listingType == ListingType.All && (
692 href={`/feeds/all.xml?sort=${this.state.sort}`}
696 <Icon icon="rss" classes="text-muted small" />
699 {this.state.listingType == ListingType.Local && (
701 href={`/feeds/local.xml?sort=${this.state.sort}`}
705 <Icon icon="rss" classes="text-muted small" />
708 {UserService.Instance.myUserInfo &&
709 this.state.listingType == ListingType.Subscribed && (
711 href={`/feeds/front/${UserService.Instance.auth}.xml?sort=${this.state.sort}`}
715 <Icon icon="rss" classes="text-muted small" />
722 get canAdmin(): boolean {
724 UserService.Instance.myUserInfo &&
725 this.state.siteRes.admins
726 .map(a => a.person.id)
727 .includes(UserService.Instance.myUserInfo.local_user_view.person.id)
731 handleEditClick(i: Home) {
732 i.state.showEditSite = true;
737 this.state.showEditSite = false;
738 this.setState(this.state);
741 handleShowSubscribedMobile(i: Home) {
742 i.state.showSubscribedMobile = !i.state.showSubscribedMobile;
746 handleShowTrendingMobile(i: Home) {
747 i.state.showTrendingMobile = !i.state.showTrendingMobile;
751 handleShowSidebarMobile(i: Home) {
752 i.state.showSidebarMobile = !i.state.showSidebarMobile;
756 handlePageChange(page: number) {
757 this.updateUrl({ page });
758 window.scrollTo(0, 0);
761 handleSortChange(val: SortType) {
762 this.updateUrl({ sort: val, page: 1 });
763 window.scrollTo(0, 0);
766 handleListingTypeChange(val: ListingType) {
767 this.updateUrl({ listingType: val, page: 1 });
768 window.scrollTo(0, 0);
771 handleDataTypeChange(val: DataType) {
772 this.updateUrl({ dataType: DataType[val], page: 1 });
773 window.scrollTo(0, 0);
777 if (this.state.dataType == DataType.Post) {
778 let getPostsForm: GetPosts = {
779 page: this.state.page,
781 sort: this.state.sort,
782 type_: this.state.listingType,
784 auth: authField(false),
786 WebSocketService.Instance.send(wsClient.getPosts(getPostsForm));
788 let getCommentsForm: GetComments = {
789 page: this.state.page,
791 sort: this.state.sort,
792 type_: this.state.listingType,
794 auth: authField(false),
796 WebSocketService.Instance.send(wsClient.getComments(getCommentsForm));
800 parseMessage(msg: any) {
801 let op = wsUserOp(msg);
804 toast(i18n.t(msg.error), "danger");
806 } else if (msg.reconnect) {
807 WebSocketService.Instance.send(
808 wsClient.communityJoin({ community_id: 0 })
811 } else if (op == UserOperation.ListCommunities) {
812 let data = wsJsonToRes<ListCommunitiesResponse>(msg).data;
813 this.state.trendingCommunities = data.communities;
814 this.setState(this.state);
815 } else if (op == UserOperation.EditSite) {
816 let data = wsJsonToRes<SiteResponse>(msg).data;
817 this.state.siteRes.site_view = data.site_view;
818 this.state.showEditSite = false;
819 this.setState(this.state);
820 toast(i18n.t("site_saved"));
821 } else if (op == UserOperation.GetPosts) {
822 let data = wsJsonToRes<GetPostsResponse>(msg).data;
823 this.state.posts = data.posts;
824 this.state.loading = false;
825 this.setState(this.state);
826 restoreScrollPosition(this.context);
828 } else if (op == UserOperation.CreatePost) {
829 let data = wsJsonToRes<PostResponse>(msg).data;
832 let nsfw = data.post_view.post.nsfw || data.post_view.community.nsfw;
836 UserService.Instance.myUserInfo &&
837 UserService.Instance.myUserInfo.local_user_view.local_user.show_nsfw);
839 // Only push these if you're on the first page, and you pass the nsfw check
840 if (this.state.page == 1 && nsfwCheck) {
841 // If you're on subscribed, only push it if you're subscribed.
842 if (this.state.listingType == ListingType.Subscribed) {
844 UserService.Instance.myUserInfo.follows
845 .map(c => c.community.id)
846 .includes(data.post_view.community.id)
848 this.state.posts.unshift(data.post_view);
850 UserService.Instance.myUserInfo?.local_user_view.local_user
851 .show_new_post_notifs
853 notifyPost(data.post_view, this.context.router);
856 } else if (this.state.listingType == ListingType.Local) {
857 // If you're on the local view, only push it if its local
858 if (data.post_view.post.local) {
859 this.state.posts.unshift(data.post_view);
861 UserService.Instance.myUserInfo?.local_user_view.local_user
862 .show_new_post_notifs
864 notifyPost(data.post_view, this.context.router);
868 this.state.posts.unshift(data.post_view);
870 UserService.Instance.myUserInfo?.local_user_view.local_user
871 .show_new_post_notifs
873 notifyPost(data.post_view, this.context.router);
876 this.setState(this.state);
879 op == UserOperation.EditPost ||
880 op == UserOperation.DeletePost ||
881 op == UserOperation.RemovePost ||
882 op == UserOperation.LockPost ||
883 op == UserOperation.StickyPost ||
884 op == UserOperation.SavePost
886 let data = wsJsonToRes<PostResponse>(msg).data;
887 editPostFindRes(data.post_view, this.state.posts);
888 this.setState(this.state);
889 } else if (op == UserOperation.CreatePostLike) {
890 let data = wsJsonToRes<PostResponse>(msg).data;
891 createPostLikeFindRes(data.post_view, this.state.posts);
892 this.setState(this.state);
893 } else if (op == UserOperation.AddAdmin) {
894 let data = wsJsonToRes<AddAdminResponse>(msg).data;
895 this.state.siteRes.admins = data.admins;
896 this.setState(this.state);
897 } else if (op == UserOperation.BanPerson) {
898 let data = wsJsonToRes<BanPersonResponse>(msg).data;
899 let found = this.state.siteRes.banned.find(
900 p => (p.person.id = data.person_view.person.id)
903 // Remove the banned if its found in the list, and the action is an unban
904 if (found && !data.banned) {
905 this.state.siteRes.banned = this.state.siteRes.banned.filter(
906 i => i.person.id !== data.person_view.person.id
909 this.state.siteRes.banned.push(data.person_view);
913 .filter(p => p.creator.id == data.person_view.person.id)
914 .forEach(p => (p.creator.banned = data.banned));
916 this.setState(this.state);
917 } else if (op == UserOperation.GetComments) {
918 let data = wsJsonToRes<GetCommentsResponse>(msg).data;
919 this.state.comments = data.comments;
920 this.state.loading = false;
921 this.setState(this.state);
923 op == UserOperation.EditComment ||
924 op == UserOperation.DeleteComment ||
925 op == UserOperation.RemoveComment
927 let data = wsJsonToRes<CommentResponse>(msg).data;
928 editCommentRes(data.comment_view, this.state.comments);
929 this.setState(this.state);
930 } else if (op == UserOperation.CreateComment) {
931 let data = wsJsonToRes<CommentResponse>(msg).data;
933 // Necessary since it might be a user reply
935 // If you're on subscribed, only push it if you're subscribed.
936 if (this.state.listingType == ListingType.Subscribed) {
938 UserService.Instance.myUserInfo.follows
939 .map(c => c.community.id)
940 .includes(data.comment_view.community.id)
942 this.state.comments.unshift(data.comment_view);
945 this.state.comments.unshift(data.comment_view);
947 this.setState(this.state);
949 } else if (op == UserOperation.SaveComment) {
950 let data = wsJsonToRes<CommentResponse>(msg).data;
951 saveCommentRes(data.comment_view, this.state.comments);
952 this.setState(this.state);
953 } else if (op == UserOperation.CreateCommentLike) {
954 let data = wsJsonToRes<CommentResponse>(msg).data;
955 createCommentLikeRes(data.comment_view, this.state.comments);
956 this.setState(this.state);
957 } else if (op == UserOperation.BlockPerson) {
958 let data = wsJsonToRes<BlockPersonResponse>(msg).data;
959 updatePersonBlock(data);
960 } else if (op == UserOperation.CreatePostReport) {
961 let data = wsJsonToRes<PostReportResponse>(msg).data;
963 toast(i18n.t("report_created"));
965 } else if (op == UserOperation.CreateCommentReport) {
966 let data = wsJsonToRes<CommentReportResponse>(msg).data;
968 toast(i18n.t("report_created"));