diff options
author | Dessalines <tyhou13@gmx.com> | 2019-04-21 14:38:57 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-04-21 14:38:57 -0700 |
commit | 2a92a5611cfb2caaf0329f485d042cbaedfe0e24 (patch) | |
tree | 3894aa09466b5b1684d670f3e7d483ce1a84842f /ui/src | |
parent | 016920aeb7dc47f32412829c70b872c54caf10e3 (diff) |
Add site editing.
- Fixes #96
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/community-form.tsx | 5 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 85 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 8 | ||||
-rw-r--r-- | ui/src/components/site-form.tsx | 6 | ||||
-rw-r--r-- | ui/src/interfaces.ts | 2 | ||||
-rw-r--r-- | ui/src/version.ts | 2 |
6 files changed, 85 insertions, 23 deletions
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index 14c2a6b8..2d5aa3e7 100644 --- a/ui/src/components/community-form.tsx +++ b/ui/src/components/community-form.tsx @@ -168,7 +168,10 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt let res: CommunityResponse = msg; this.state.loading = false; this.props.onCreate(res.community.id); - } else if (op == UserOperation.EditCommunity) { + } + + // TODO is this necessary? + else if (op == UserOperation.EditCommunity) { let res: CommunityResponse = msg; this.state.loading = false; this.props.onEdit(res.community); diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index c64773f3..0687ffbc 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -1,10 +1,11 @@ -import { Component } from 'inferno'; +import { Component, linkEvent } 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, ListingType } from '../interfaces'; +import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommunitiesForm, ListCommunitiesResponse, Community, SortType, GetSiteResponse, ListingType, SiteResponse } from '../interfaces'; import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; +import { SiteForm } from './site-form'; import { msgOp, repoUrl, mdToHtml } from '../utils'; @@ -16,6 +17,7 @@ interface MainState { subscribedCommunities: Array<CommunityUser>; trendingCommunities: Array<Community>; site: GetSiteResponse; + showEditSite: boolean; loading: boolean; } @@ -40,6 +42,7 @@ export class Main extends Component<MainProps, MainState> { admins: [], banned: [], }, + showEditSite: false, loading: true } @@ -68,6 +71,8 @@ export class Main extends Component<MainProps, MainState> { } WebSocketService.Instance.listCommunities(listCommunitiesForm); + + this.handleEditCancel = this.handleEditCancel.bind(this); } componentWillUnmount() { @@ -87,16 +92,16 @@ export class Main extends Component<MainProps, MainState> { <div> {this.trendingCommunities()} {UserService.Instance.user && this.state.subscribedCommunities.length > 0 && - <div> - <h5>Subscribed forums</h5> - <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> + <div> + <h5>Subscribed forums</h5> + <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.sidebar()} </div> } </div> @@ -118,17 +123,39 @@ export class Main extends Component<MainProps, MainState> { ) } - landing() { + sidebar() { return ( <div> - <h5>{`${this.state.site.site.name}`}</h5> - <ul class="my-1 list-inline"> + {!this.state.showEditSite ? + this.siteInfo() : + <SiteForm + site={this.state.site.site} + onCancel={this.handleEditCancel} + /> + } + {this.landing()} + </div> + ) + } + + siteInfo() { + return ( + <div> + <h5 class="mb-0">{`${this.state.site.site.name}`}</h5> + {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)}>edit</span> + </li> + </ul> + } + <ul class="my-2 list-inline"> <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_users} Users</li> <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_posts} Posts</li> <li className="list-inline-item badge badge-light">{this.state.site.site.number_of_comments} Comments</li> <li className="list-inline-item"><Link className="badge badge-light" to="/modlog">Modlog</Link></li> </ul> - <ul class="list-inline small"> + <ul class="my-1 list-inline small"> <li class="list-inline-item">admins: </li> {this.state.site.admins.map(admin => <li class="list-inline-item"><Link class="text-info" to={`/user/${admin.id}`}>{admin.name}</Link></li> @@ -141,6 +168,13 @@ export class Main extends Component<MainProps, MainState> { <hr /> </div> } + </div> + ) + } + + landing() { + return ( + <div> <h5>Welcome to <svg class="icon mx-2"><use xlinkHref="#icon-mouse"></use></svg> <a href={repoUrl}>Lemmy<sup>Beta</sup></a> @@ -154,6 +188,20 @@ export class Main extends Component<MainProps, MainState> { ) } + get canAdmin(): boolean { + return UserService.Instance.user && this.state.site.admins.map(a => a.id).includes(UserService.Instance.user.id); + } + + handleEditClick(i: Main) { + i.state.showEditSite = true; + i.setState(i.state); + } + + handleEditCancel() { + this.state.showEditSite = false; + this.setState(this.state); + } + parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); @@ -181,7 +229,12 @@ export class Main extends Component<MainProps, MainState> { this.state.site.site = res.site; this.state.site.banned = res.banned; this.setState(this.state); - } + } else if (op == UserOperation.EditSite) { + let res: SiteResponse = msg; + this.state.site.site = res.site; + this.state.showEditSite = false; + this.setState(this.state); + } } } diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 95880448..3644903c 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -39,7 +39,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { <div> {!this.state.showEdit ? this.sidebar() - : <CommunityForm community={this.props.community} onEdit={this.handleEditCommunity} onCancel={this.handleEditCancel}/> + : <CommunityForm + community={this.props.community} + onEdit={this.handleEditCommunity} + onCancel={this.handleEditCancel} /> } </div> ) @@ -206,7 +209,4 @@ export class Sidebar extends Component<SidebarProps, SidebarState> { i.state.showRemoveDialog = false; i.setState(i.state); } - - - } diff --git a/ui/src/components/site-form.tsx b/ui/src/components/site-form.tsx index 55da1667..9c0f472b 100644 --- a/ui/src/components/site-form.tsx +++ b/ui/src/components/site-form.tsx @@ -24,6 +24,12 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> { constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; + if (this.props.site) { + this.state.siteForm = { + name: this.props.site.name, + description: this.props.site.description, + } + } } componentDidMount() { diff --git a/ui/src/interfaces.ts b/ui/src/interfaces.ts index 23b86074..ec111719 100644 --- a/ui/src/interfaces.ts +++ b/ui/src/interfaces.ts @@ -341,7 +341,7 @@ export interface CommunityForm { description?: string, category_id: number, edit_id?: number; - removed: boolean; + removed?: boolean; reason?: string; expires?: number; auth?: string; diff --git a/ui/src/version.ts b/ui/src/version.ts index cb3fdf37..5651d40f 100644 --- a/ui/src/version.ts +++ b/ui/src/version.ts @@ -1 +1 @@ -export let version: string = "v0.0.3-3-gfe52d59";
\ No newline at end of file +export let version: string = "v0.0.3-11-g9278104";
\ No newline at end of file |