diff options
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/communities.tsx | 9 | ||||
-rw-r--r-- | ui/src/components/login.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 56 | ||||
-rw-r--r-- | ui/src/components/post-form.tsx | 8 |
4 files changed, 56 insertions, 19 deletions
diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx index 268aa115..4d2512cc 100644 --- a/ui/src/components/communities.tsx +++ b/ui/src/components/communities.tsx @@ -2,7 +2,7 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm } from '../interfaces'; +import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp } from '../utils'; @@ -30,7 +30,12 @@ export class Communities extends Component<any, CommunitiesState> { (err) => console.error(err), () => console.log('complete') ); - WebSocketService.Instance.listCommunities(); + + let listCommunitiesForm: ListCommunitiesForm = { + sort: SortType[SortType.TopAll] + } + + WebSocketService.Instance.listCommunities(listCommunitiesForm); } diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx index 933b08be..2d2339f5 100644 --- a/ui/src/components/login.tsx +++ b/ui/src/components/login.tsx @@ -103,7 +103,7 @@ export class Login extends Component<any, State> { <div class="form-group row"> <label class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> - <input type="email" class="form-control" value={this.state.registerForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} /> + <input type="email" class="form-control" placeholder="Optional" value={this.state.registerForm.email} onInput={linkEvent(this, this.handleRegisterEmailChange)} minLength={3} /> </div> </div> <div class="form-group row"> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 8faf858a..55066d00 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -2,13 +2,14 @@ import { Component } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse } from '../interfaces'; +import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { msgOp, repoUrl } from '../utils'; interface State { subscribedCommunities: Array<CommunityUser>; + trendingCommunities: Array<Community>; loading: boolean; } @@ -17,6 +18,7 @@ export class Main extends Component<any, State> { private subscription: Subscription; private emptyState: State = { subscribedCommunities: [], + trendingCommunities: [], loading: true } @@ -36,6 +38,13 @@ export class Main extends Component<any, State> { if (UserService.Instance.loggedIn) { WebSocketService.Instance.getFollowedCommunities(); } + + let listCommunitiesForm: ListCommunitiesForm = { + sort: SortType[SortType.New], + limit: 8 + } + + WebSocketService.Instance.listCommunities(listCommunitiesForm); } componentWillUnmount() { @@ -50,21 +59,22 @@ export class Main extends Component<any, State> { <PostListings /> </div> <div class="col-12 col-md-4"> - {UserService.Instance.loggedIn ? + {this.state.loading ? + <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : + <div> + {this.trendingCommunities()} + {UserService.Instance.loggedIn ? <div> - {this.state.loading ? - <h4><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h4> : - <div> - <h4>Subscribed forums</h4> - <ul class="list-unstyled"> - {this.state.subscribedCommunities.map(community => - <li><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li> - )} - </ul> - </div> - } + <h4>Subscribed forums</h4> + <ul class="list-inline"> + {this.state.subscribedCommunities.map(community => + <li class="list-inline-item"><Link to={`/community/${community.community_id}`}>{community.community_name}</Link></li> + )} + </ul> </div> : - this.landing() + this.landing() + } + </div> } </div> </div> @@ -72,6 +82,19 @@ export class Main extends Component<any, State> { ) } + trendingCommunities() { + return ( + <div> + <h4>Trending forums</h4> + <ul class="list-inline"> + {this.state.trendingCommunities.map(community => + <li class="list-inline-item"><Link to={`/community/${community.id}`}>{community.name}</Link></li> + )} + </ul> + </div> + ) + } + landing() { return ( <div> @@ -99,6 +122,11 @@ export class Main extends Component<any, State> { this.state.subscribedCommunities = res.communities; this.state.loading = false; this.setState(this.state); + } else if (op == UserOperation.ListCommunities) { + let res: ListCommunitiesResponse = msg; + this.state.trendingCommunities = res.communities; + this.state.loading = false; + this.setState(this.state); } } } diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 03ace380..67a3f42e 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -1,7 +1,7 @@ import { Component, linkEvent } from 'inferno'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse } from '../interfaces'; +import { PostForm as PostFormI, Post, PostResponse, UserOperation, Community, ListCommunitiesResponse, ListCommunitiesForm, SortType } from '../interfaces'; import { WebSocketService } from '../services'; import { msgOp } from '../utils'; import * as autosize from 'autosize'; @@ -56,7 +56,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> { () => console.log('complete') ); - WebSocketService.Instance.listCommunities(); + let listCommunitiesForm: ListCommunitiesForm = { + sort: SortType[SortType.TopAll] + } + + WebSocketService.Instance.listCommunities(listCommunitiesForm); } componentDidMount() { |