diff options
author | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-10-18 17:20:27 -0700 |
commit | 4e5561283392d2ab1545cabb4455a8ffc490f86b (patch) | |
tree | a4ee9cc096826dc32faf3675212c7f95f1b3ea5e /ui/src/components/main.tsx | |
parent | 82ea5ae9186e5a8e631c87a61077e16713eb87a4 (diff) |
Running prettier on code.
- #305 , #309
Diffstat (limited to 'ui/src/components/main.tsx')
-rw-r--r-- | ui/src/components/main.tsx | 431 |
1 files changed, 298 insertions, 133 deletions
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 1366c162..b1ddef4c 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -1,12 +1,35 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; -import { Subscription } from "rxjs"; +import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType, SiteResponse, GetPostsResponse, CreatePostLikeResponse, Post, GetPostsForm } from '../interfaces'; +import { + UserOperation, + CommunityUser, + GetFollowedCommunitiesResponse, + ListCommunitiesForm, + ListCommunitiesResponse, + Community, + SortType, + GetSiteResponse, + ListingType, + SiteResponse, + GetPostsResponse, + CreatePostLikeResponse, + Post, + GetPostsForm, +} from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { SiteForm } from './site-form'; -import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum, postRefetchSeconds } from '../utils'; +import { + msgOp, + repoUrl, + mdToHtml, + fetchLimit, + routeSortTypeToEnum, + routeListingTypeToEnum, + postRefetchSeconds, +} from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -23,7 +46,6 @@ interface MainState { } export class Main extends Component<any, MainState> { - private subscription: Subscription; private postFetcher: any; private emptyState: MainState = { @@ -52,24 +74,24 @@ export class Main extends Component<any, MainState> { type_: this.getListingTypeFromProps(this.props), sort: this.getSortTypeFromProps(this.props), page: this.getPageFromProps(this.props), - } + }; getListingTypeFromProps(props: any): ListingType { - return (props.match.params.type) ? - routeListingTypeToEnum(props.match.params.type) : - UserService.Instance.user ? - ListingType.Subscribed : - ListingType.All; + return props.match.params.type + ? routeListingTypeToEnum(props.match.params.type) + : UserService.Instance.user + ? ListingType.Subscribed + : ListingType.All; } getSortTypeFromProps(props: any): SortType { - return (props.match.params.sort) ? - routeSortTypeToEnum(props.match.params.sort) : - SortType.Hot; + return props.match.params.sort + ? routeSortTypeToEnum(props.match.params.sort) + : SortType.Hot; } getPageFromProps(props: any): number { - return (props.match.params.page) ? Number(props.match.params.page) : 1; + return props.match.params.page ? Number(props.match.params.page) : 1; } constructor(props: any, context: any) { @@ -79,12 +101,19 @@ export class Main extends Component<any, MainState> { this.handleEditCancel = this.handleEditCancel.bind(this); this.subscription = WebSocketService.Instance.subject - .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10)))) - .subscribe( - (msg) => this.parseMessage(msg), - (err) => console.error(err), + .pipe( + retryWhen(errors => + errors.pipe( + delay(3000), + take(10) + ) + ) + ) + .subscribe( + msg => this.parseMessage(msg), + err => console.error(err), () => console.log('complete') - ); + ); WebSocketService.Instance.getSite(); @@ -94,8 +123,8 @@ export class Main extends Component<any, MainState> { let listCommunitiesForm: ListCommunitiesForm = { sort: SortType[SortType.Hot], - limit: 6 - } + limit: 6, + }; WebSocketService.Instance.listCommunities(listCommunitiesForm); @@ -109,7 +138,10 @@ export class Main extends Component<any, MainState> { // Necessary for back button for some reason componentWillReceiveProps(nextProps: any) { - if (nextProps.history.action == 'POP' || nextProps.history.action == 'PUSH') { + if ( + nextProps.history.action == 'POP' || + nextProps.history.action == 'PUSH' + ) { this.state.type_ = this.getListingTypeFromProps(nextProps); this.state.sort = this.getSortTypeFromProps(nextProps); this.state.page = this.getPageFromProps(nextProps); @@ -122,39 +154,47 @@ export class Main extends Component<any, MainState> { return ( <div class="container"> <div class="row"> - <div class="col-12 col-md-8"> - {this.posts()} - </div> - <div class="col-12 col-md-4"> - {this.my_sidebar()} - </div> + <div class="col-12 col-md-8">{this.posts()}</div> + <div class="col-12 col-md-4">{this.my_sidebar()}</div> </div> </div> - ) + ); } - + my_sidebar() { - return( + return ( <div> - {!this.state.loading && + {!this.state.loading && ( <div> <div class="card border-secondary mb-3"> <div class="card-body"> {this.trendingCommunities()} - {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && - <div> - <h5> - <T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T> - </h5> - <ul class="list-inline"> - {this.state.subscribedCommunities.map(community => - <li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li> - )} - </ul> - </div> - } - <Link class="btn btn-sm btn-secondary btn-block" - to="/create_community"> + {UserService.Instance.user && + this.state.subscribedCommunities.length > 0 && ( + <div> + <h5> + <T i18nKey="subscribed_to_communities"> + # + <Link class="text-white" to="/communities"> + # + </Link> + </T> + </h5> + <ul class="list-inline"> + {this.state.subscribedCommunities.map(community => ( + <li class="list-inline-item"> + <Link to={`/c/${community.community_name}`}> + {community.community_name} + </Link> + </li> + ))} + </ul> + </div> + )} + <Link + class="btn btn-sm btn-secondary btn-block" + to="/create_community" + > <T i18nKey="create_a_community">#</T> </Link> </div> @@ -162,44 +202,54 @@ export class Main extends Component<any, MainState> { {this.sidebar()} {this.landing()} </div> - } + )} </div> - ) + ); } trendingCommunities() { return ( <div> <h5> - <T i18nKey="trending_communities">#<Link class="text-white" to="/communities">#</Link></T> + <T i18nKey="trending_communities"> + # + <Link class="text-white" to="/communities"> + # + </Link> + </T> </h5> - <ul class="list-inline"> - {this.state.trendingCommunities.map(community => - <li class="list-inline-item"><Link to={`/c/${community.name}`}>{community.name}</Link></li> - )} + <ul class="list-inline"> + {this.state.trendingCommunities.map(community => ( + <li class="list-inline-item"> + <Link to={`/c/${community.name}`}>{community.name}</Link> + </li> + ))} </ul> </div> - ) + ); } sidebar() { return ( <div> - {!this.state.showEditSite ? - this.siteInfo() : + {!this.state.showEditSite ? ( + this.siteInfo() + ) : ( <SiteForm - site={this.state.site.site} - onCancel={this.handleEditCancel} + site={this.state.site.site} + onCancel={this.handleEditCancel} /> - } + )} </div> - ) + ); } updateUrl() { let typeStr = ListingType[this.state.type_].toLowerCase(); let sortStr = SortType[this.state.sort].toLowerCase(); - this.props.history.push(`/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}`); + this.props.history.push( + `/home/type/${typeStr}/sort/${sortStr}/page/${this.state.page}` + ); } siteInfo() { @@ -208,30 +258,66 @@ export class Main extends Component<any, MainState> { <div class="card border-secondary mb-3"> <div class="card-body"> <h5 class="mb-0">{`${this.state.site.site.name}`}</h5> - {this.canAdmin && - <ul class="list-inline mb-1 text-muted small font-weight-bold"> + {this.canAdmin && ( + <ul class="list-inline mb-1 text-muted small font-weight-bold"> <li className="list-inline-item"> - <span class="pointer" onClick={linkEvent(this, this.handleEditClick)}> + <span + class="pointer" + onClick={linkEvent(this, this.handleEditClick)} + > <T i18nKey="edit">#</T> </span> </li> </ul> - } + )} <ul class="my-2 list-inline"> <li className="list-inline-item badge badge-secondary"> - <T i18nKey="number_online" interpolation={{count: this.state.site.online}}>#</T> + <T + i18nKey="number_online" + interpolation={{ count: this.state.site.online }} + > + # + </T> </li> <li className="list-inline-item badge badge-secondary"> - <T i18nKey="number_of_users" interpolation={{count: this.state.site.site.number_of_users}}>#</T> + <T + i18nKey="number_of_users" + interpolation={{ + count: this.state.site.site.number_of_users, + }} + > + # + </T> </li> <li className="list-inline-item badge badge-secondary"> - <T i18nKey="number_of_communities" interpolation={{count: this.state.site.site.number_of_communities}}>#</T> + <T + i18nKey="number_of_communities" + interpolation={{ + count: this.state.site.site.number_of_communities, + }} + > + # + </T> </li> <li className="list-inline-item badge badge-secondary"> - <T i18nKey="number_of_posts" interpolation={{count: this.state.site.site.number_of_posts}}>#</T> + <T + i18nKey="number_of_posts" + interpolation={{ + count: this.state.site.site.number_of_posts, + }} + > + # + </T> </li> <li className="list-inline-item badge badge-secondary"> - <T i18nKey="number_of_comments" interpolation={{count: this.state.site.site.number_of_comments}}>#</T> + <T + i18nKey="number_of_comments" + interpolation={{ + count: this.state.site.site.number_of_comments, + }} + > + # + </T> </li> <li className="list-inline-item"> <Link className="badge badge-secondary" to="/modlog"> @@ -239,25 +325,37 @@ export class Main extends Component<any, MainState> { </Link> </li> </ul> - <ul class="mt-1 list-inline small mb-0"> + <ul class="mt-1 list-inline small mb-0"> <li class="list-inline-item"> - <T i18nKey="admins" class="d-inline">#</T>: + <T i18nKey="admins" class="d-inline"> + # + </T> + : + </li> + {this.state.site.admins.map(admin => ( + <li class="list-inline-item"> + <Link class="text-info" to={`/u/${admin.name}`}> + {admin.name} + </Link> </li> - {this.state.site.admins.map(admin => - <li class="list-inline-item"><Link class="text-info" to={`/u/${admin.name}`}>{admin.name}</Link></li> + ))} + </ul> + </div> + </div> + {this.state.site.site.description && ( + <div class="card border-secondary mb-3"> + <div class="card-body"> + <div + className="md-div" + dangerouslySetInnerHTML={mdToHtml( + this.state.site.site.description )} - </ul> + /> </div> </div> - {this.state.site.site.description && - <div class="card border-secondary mb-3"> - <div class="card-body"> - <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} /> - </div> - </div> - } - </div> - ) + )} + </div> + ); } landing() { @@ -265,43 +363,73 @@ export class Main extends Component<any, MainState> { <div class="card border-secondary"> <div class="card-body"> <h5> - <T i18nKey="powered_by" class="d-inline">#</T> - <svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg> - <a href={repoUrl}>Lemmy<sup>beta</sup></a> + <T i18nKey="powered_by" class="d-inline"> + # + </T> + <svg class="icon mx-2"> + <use xlinkHref="#icon-mouse">#</use> + </svg> + <a href={repoUrl}> + Lemmy<sup>beta</sup> + </a> </h5> <p class="mb-0"> - <T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Social_network_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a> - </T> - </p> + <T i18nKey="landing_0"> + # + <a href="https://en.wikipedia.org/wiki/Social_network_aggregation"> + # + </a> + <a href="https://en.wikipedia.org/wiki/Fediverse">#</a> + <br></br> + <code>#</code> + <br></br> + <b>#</b> + <br></br> + <a href={repoUrl}>#</a> + <br></br> + <a href="https://www.rust-lang.org">#</a> + <a href="https://actix.rs/">#</a> + <a href="https://infernojs.org">#</a> + <a href="https://www.typescriptlang.org/">#</a> + </T> + </p> + </div> </div> - </div> - ) + ); } posts() { return ( <div> - {this.state.loading ? - <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : - <div> - {this.selects()} - <PostListings posts={this.state.posts} showCommunity /> - {this.paginator()} - </div> - } + {this.state.loading ? ( + <h5> + <svg class="icon icon-spinner spin"> + <use xlinkHref="#icon-spinner"></use> + </svg> + </h5> + ) : ( + <div> + {this.selects()} + <PostListings posts={this.state.posts} showCommunity /> + {this.paginator()} + </div> + )} </div> - ) + ); } selects() { return ( <div className="mb-3"> <div class="btn-group btn-group-toggle"> - <label className={`btn btn-sm btn-secondary + <label + className={`btn btn-sm btn-secondary ${this.state.type_ == ListingType.Subscribed && 'active'} ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'} - `}> - <input type="radio" + `} + > + <input + type="radio" value={ListingType.Subscribed} checked={this.state.type_ == ListingType.Subscribed} onChange={linkEvent(this, this.handleTypeChange)} @@ -309,43 +437,82 @@ export class Main extends Component<any, MainState> { /> {i18n.t('subscribed')} </label> - <label className={`pointer btn btn-sm btn-secondary ${this.state.type_ == ListingType.All && 'active'}`}> - <input type="radio" + <label + className={`pointer btn btn-sm btn-secondary ${this.state.type_ == + ListingType.All && 'active'}`} + > + <input + type="radio" value={ListingType.All} checked={this.state.type_ == ListingType.All} onChange={linkEvent(this, this.handleTypeChange)} - /> + /> {i18n.t('all')} </label> </div> - <select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="ml-2 custom-select custom-select-sm w-auto"> - <option disabled><T i18nKey="sort_type">#</T></option> - <option value={SortType.Hot}><T i18nKey="hot">#</T></option> - <option value={SortType.New}><T i18nKey="new">#</T></option> + <select + value={this.state.sort} + onChange={linkEvent(this, this.handleSortChange)} + class="ml-2 custom-select custom-select-sm w-auto" + > + <option disabled> + <T i18nKey="sort_type">#</T> + </option> + <option value={SortType.Hot}> + <T i18nKey="hot">#</T> + </option> + <option value={SortType.New}> + <T i18nKey="new">#</T> + </option> <option disabled>─────</option> - <option value={SortType.TopDay}><T i18nKey="top_day">#</T></option> - <option value={SortType.TopWeek}><T i18nKey="week">#</T></option> - <option value={SortType.TopMonth}><T i18nKey="month">#</T></option> - <option value={SortType.TopYear}><T i18nKey="year">#</T></option> - <option value={SortType.TopAll}><T i18nKey="all">#</T></option> + <option value={SortType.TopDay}> + <T i18nKey="top_day">#</T> + </option> + <option value={SortType.TopWeek}> + <T i18nKey="week">#</T> + </option> + <option value={SortType.TopMonth}> + <T i18nKey="month">#</T> + </option> + <option value={SortType.TopYear}> + <T i18nKey="year">#</T> + </option> + <option value={SortType.TopAll}> + <T i18nKey="all">#</T> + </option> </select> </div> - ) + ); } paginator() { return ( <div class="my-2"> - {this.state.page > 1 && - <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button> - } - <button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button> + {this.state.page > 1 && ( + <button + class="btn btn-sm btn-secondary mr-1" + onClick={linkEvent(this, this.prevPage)} + > + <T i18nKey="prev">#</T> + </button> + )} + <button + class="btn btn-sm btn-secondary" + onClick={linkEvent(this, this.nextPage)} + > + <T i18nKey="next">#</T> + </button> </div> ); } get canAdmin(): boolean { - return UserService.Instance.user && this.state.site.admins.map(a => a.id).includes(UserService.Instance.user.id); + return ( + UserService.Instance.user && + this.state.site.admins + .map(a => a.id) + .includes(UserService.Instance.user.id) + ); } handleEditClick(i: Main) { @@ -358,22 +525,22 @@ export class Main extends Component<any, MainState> { this.setState(this.state); } - nextPage(i: Main) { + nextPage(i: Main) { i.state.page++; i.state.loading = true; i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } - prevPage(i: Main) { + prevPage(i: Main) { i.state.page--; i.state.loading = true; i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } handleSortChange(i: Main, event: any) { @@ -383,7 +550,7 @@ export class Main extends Component<any, MainState> { i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } handleTypeChange(i: Main, event: any) { @@ -393,7 +560,7 @@ export class Main extends Component<any, MainState> { i.setState(i.state); i.updateUrl(); i.fetchPosts(); - window.scrollTo(0,0); + window.scrollTo(0, 0); } keepFetchingPosts() { @@ -406,8 +573,8 @@ export class Main extends Component<any, MainState> { page: this.state.page, limit: fetchLimit, sort: SortType[this.state.sort], - type_: ListingType[this.state.type_] - } + type_: ListingType[this.state.type_], + }; WebSocketService.Instance.getPosts(getPostsForm); } @@ -430,7 +597,7 @@ export class Main extends Component<any, MainState> { // This means it hasn't been set up yet if (!res.site) { - this.context.router.history.push("/setup"); + this.context.router.history.push('/setup'); } this.state.site.admins = res.admins; this.state.site.site = res.site; @@ -438,7 +605,6 @@ export class Main extends Component<any, MainState> { this.state.site.online = res.online; this.setState(this.state); document.title = `${WebSocketService.Instance.site.name}`; - } else if (op == UserOperation.EditSite) { let res: SiteResponse = msg; this.state.site.site = res.site; @@ -460,4 +626,3 @@ export class Main extends Component<any, MainState> { } } } - |