diff options
-rw-r--r-- | ui/src/components/home.tsx | 10 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 15 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/post-listings.tsx | 22 | ||||
-rw-r--r-- | ui/src/index.tsx | 1 |
5 files changed, 35 insertions, 15 deletions
diff --git a/ui/src/components/home.tsx b/ui/src/components/home.tsx index 8fced5be..eff09f7e 100644 --- a/ui/src/components/home.tsx +++ b/ui/src/components/home.tsx @@ -1,12 +1,20 @@ import { Component } from 'inferno'; import { Main } from './main'; +import { ListingType } from '../interfaces'; export class Home extends Component<any, any> { + constructor(props: any, context: any) { + super(props, context); + } + render() { return ( - <Main /> + <Main type={this.listType()}/> ) } + listType(): ListingType { + return (this.props.match.path == '/all') ? ListingType.All : ListingType.Subscribed; + } } diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index e3d6f844..6e0b96b6 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -2,22 +2,27 @@ import { Component } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, GetRepliesResponse, GetRepliesForm } from '../interfaces'; +import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, GetRepliesResponse, GetRepliesForm, ListingType } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { msgOp, repoUrl, mdToHtml } from '../utils'; -interface State { + +interface MainProps { + type: ListingType; +} + +interface MainState { subscribedCommunities: Array<CommunityUser>; trendingCommunities: Array<Community>; site: GetSiteResponse; loading: boolean; } -export class Main extends Component<any, State> { +export class Main extends Component<MainProps, MainState> { private subscription: Subscription; - private emptyState: State = { + private emptyState: MainState = { subscribedCommunities: [], trendingCommunities: [], site: { @@ -83,7 +88,7 @@ export class Main extends Component<any, State> { <div class="container"> <div class="row"> <div class="col-12 col-md-8"> - <PostListings /> + <PostListings type={this.props.type} /> </div> <div class="col-12 col-md-4"> {this.state.loading ? diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index fed49e6f..5fc6ed7e 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -71,7 +71,7 @@ export class Navbar extends Component<any, NavbarState> { { <li className="nav-item"> <Link class="nav-link" to="/inbox">🖂 - {this.state.unreadCount> 0 && <span class="badge badge-light">{this.state.unreadCount}</span>} + {this.state.unreadCount> 0 && <span class="ml-1 badge badge-light">{this.state.unreadCount}</span>} </Link> </li> } diff --git a/ui/src/components/post-listings.tsx b/ui/src/components/post-listings.tsx index b1e48a61..37b7a648 100644 --- a/ui/src/components/post-listings.tsx +++ b/ui/src/components/post-listings.tsx @@ -8,6 +8,7 @@ import { PostListing } from './post-listing'; import { msgOp, fetchLimit } from '../utils'; interface PostListingsProps { + type?: ListingType; communityId?: number; } @@ -27,19 +28,19 @@ export class PostListings extends Component<PostListingsProps, PostListingsState moderators: [], posts: [], sortType: SortType.Hot, - type_: this.props.communityId - ? ListingType.Community - : UserService.Instance.user - ? ListingType.Subscribed - : ListingType.All, - page: 1, - loading: true + type_: (this.props.type !== undefined) ? this.props.type : + this.props.communityId + ? ListingType.Community + : UserService.Instance.user + ? ListingType.Subscribed + : ListingType.All, + page: 1, + loading: true } constructor(props: any, context: any) { super(props, context); - this.state = this.emptyState; this.subscription = WebSocketService.Instance.subject @@ -147,6 +148,11 @@ export class PostListings extends Component<PostListingsProps, PostListingsState handleTypeChange(i: PostListings, event: any) { i.state.type_ = Number(event.target.value); i.state.page = 1; + if (i.state.type_ == ListingType.All) { + i.context.router.history.push('/all'); + } else { + i.context.router.history.push('/'); + } i.setState(i.state); i.refetch(); } diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 677d7678..716684de 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -37,6 +37,7 @@ class Index extends Component<any, any> { <Navbar /> <div class="mt-3 p-0"> <Switch> + <Route exact path="/all" component={Home} /> <Route exact path="/" component={Home} /> <Route path={`/login`} component={Login} /> <Route path={`/create_post`} component={CreatePost} /> |