diff options
author | Dessalines <tyhou13@gmx.com> | 2019-08-13 19:52:43 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-08-13 19:52:43 -0700 |
commit | d7ab85ab70478f1ec440c920d726d08b145cef5e (patch) | |
tree | cc799c34a29c4e6070a3f3a34823e7c091cddaad /ui/src/components | |
parent | ad4dbbcd7726e75aea1e06111a1af3039cbeca70 (diff) |
Squashed commit of the following:
commit ecd6c5a2f47cbbb2fc4bf482fadd78380303a904
Author: Dessalines <happydooby@gmail.com>
Date: Tue Aug 13 19:49:38 2019 -0700
Adding some docs
commit 3babd09affb1920da3d0a0ceb7e24c8aeeb9cf1a
Author: Dessalines <happydooby@gmail.com>
Date: Tue Aug 13 19:28:46 2019 -0700
Adding save user settings
commit 6e8da9cc9e522d0da668bfa31944c3348cc79620
Merge: 3246d5d c148eef
Author: Dessalines <happydooby@gmail.com>
Date: Tue Aug 13 17:26:25 2019 -0700
Merge branch 'dev' into nsfw
commit b3d4a5c4ce441bcc664704aba44cedb51d887599
Author: Dessalines <happydooby@gmail.com>
Date: Sun Aug 11 20:55:09 2019 -0700
nsfw mostly done, except for settings page.
Diffstat (limited to 'ui/src/components')
-rw-r--r-- | ui/src/components/community-form.tsx | 17 | ||||
-rw-r--r-- | ui/src/components/community.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/login.tsx | 15 | ||||
-rw-r--r-- | ui/src/components/post-form.tsx | 15 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 6 | ||||
-rw-r--r-- | ui/src/components/setup.tsx | 1 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 66 |
7 files changed, 119 insertions, 5 deletions
diff --git a/ui/src/components/community-form.tsx b/ui/src/components/community-form.tsx index b039fb4d..833d8a3f 100644 --- a/ui/src/components/community-form.tsx +++ b/ui/src/components/community-form.tsx @@ -30,7 +30,8 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt communityForm: { name: null, title: null, - category_id: null + category_id: null, + nsfw: false, }, categories: [], loading: false @@ -48,6 +49,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt category_id: this.props.community.category_id, description: this.props.community.description, edit_id: this.props.community.id, + nsfw: this.props.community.nsfw, auth: null } } @@ -105,6 +107,14 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt </div> <div class="form-group row"> <div class="col-12"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" checked={this.state.communityForm.nsfw} onChange={linkEvent(this, this.handleCommunityNsfwChange)}/> + <label class="form-check-label"><T i18nKey="nsfw">#</T></label> + </div> + </div> + </div> + <div class="form-group row"> + <div class="col-12"> <button type="submit" class="btn btn-secondary mr-2"> {this.state.loading ? <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : @@ -147,6 +157,11 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt i.setState(i.state); } + handleCommunityNsfwChange(i: CommunityForm, event: any) { + i.state.communityForm.nsfw = event.target.checked; + i.setState(i.state); + } + handleCancel(i: CommunityForm) { i.props.onCancel(); } diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 480b909e..b9f9c8b2 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -37,6 +37,7 @@ export class Community extends Component<any, State> { number_of_comments: null, published: null, removed: null, + nsfw: false, deleted: null, }, moderators: [], @@ -105,6 +106,9 @@ export class Community extends Component<any, State> { {this.state.community.removed && <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small> } + {this.state.community.nsfw && + <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small> + } </h5> {this.selects()} <PostListings posts={this.state.posts} /> diff --git a/ui/src/components/login.tsx b/ui/src/components/login.tsx index e7af89ca..66962acc 100644 --- a/ui/src/components/login.tsx +++ b/ui/src/components/login.tsx @@ -28,6 +28,7 @@ export class Login extends Component<any, State> { password: undefined, password_verify: undefined, admin: false, + show_nsfw: false, }, loginLoading: false, registerLoading: false, @@ -127,9 +128,16 @@ export class Login extends Component<any, State> { </div> <div class="form-group row"> <div class="col-sm-10"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" checked={this.state.registerForm.show_nsfw} onChange={linkEvent(this, this.handleRegisterShowNsfwChange)}/> + <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label> + </div> + </div> + </div> + <div class="form-group row"> + <div class="col-sm-10"> <button type="submit" class="btn btn-secondary">{this.state.registerLoading ? <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : i18n.t('sign_up')}</button> - </div> </div> </form> @@ -181,6 +189,11 @@ export class Login extends Component<any, State> { i.setState(i.state); } + handleRegisterShowNsfwChange(i: Login, event: any) { + i.state.registerForm.show_nsfw = event.target.checked; + i.setState(i.state); + } + parseMessage(msg: any) { let op: UserOperation = msgOp(msg); if (msg.error) { diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx index 79d37b42..704b1cdd 100644 --- a/ui/src/components/post-form.tsx +++ b/ui/src/components/post-form.tsx @@ -31,6 +31,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { private emptyState: PostFormState = { postForm: { name: null, + nsfw: false, auth: null, community_id: null, creator_id: (UserService.Instance.user) ? UserService.Instance.user.id : null, @@ -54,6 +55,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> { edit_id: this.props.post.id, creator_id: this.props.post.creator_id, url: this.props.post.url, + nsfw: this.props.post.nsfw, auth: null } } @@ -128,6 +130,14 @@ export class PostForm extends Component<PostFormProps, PostFormState> { } <div class="form-group row"> <div class="col-sm-10"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" checked={this.state.postForm.nsfw} onChange={linkEvent(this, this.handlePostNsfwChange)}/> + <label class="form-check-label"><T i18nKey="nsfw">#</T></label> + </div> + </div> + </div> + <div class="form-group row"> + <div class="col-sm-10"> <button type="submit" class="btn btn-secondary mr-2"> {this.state.loading ? <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : @@ -196,6 +206,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> { i.setState(i.state); } + handlePostNsfwChange(i: PostForm, event: any) { + i.state.postForm.nsfw = event.target.checked; + i.setState(i.state); + } + handleCancel(i: PostForm) { i.props.onCancel(); } diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index ff70783c..ca03b980 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -93,6 +93,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> { {post.locked && <small className="ml-2 text-muted font-italic"><T i18nKey="locked">#</T></small> } + {post.nsfw && + <small className="ml-2 text-muted font-italic"><T i18nKey="nsfw">#</T></small> + } { post.url && isImage(post.url) && <> { !this.state.imageExpanded @@ -251,6 +254,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { edit_id: i.props.post.id, creator_id: i.props.post.creator_id, deleted: !i.props.post.deleted, + nsfw: i.props.post.nsfw, auth: null }; WebSocketService.Instance.editPost(deleteForm); @@ -285,6 +289,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { creator_id: i.props.post.creator_id, removed: !i.props.post.removed, reason: i.state.removeReason, + nsfw: i.props.post.nsfw, auth: null, }; WebSocketService.Instance.editPost(form); @@ -299,6 +304,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> { community_id: i.props.post.community_id, edit_id: i.props.post.id, creator_id: i.props.post.creator_id, + nsfw: i.props.post.nsfw, locked: !i.props.post.locked, auth: null, }; diff --git a/ui/src/components/setup.tsx b/ui/src/components/setup.tsx index f11dc14e..24a5f2d6 100644 --- a/ui/src/components/setup.tsx +++ b/ui/src/components/setup.tsx @@ -23,6 +23,7 @@ export class Setup extends Component<any, State> { password: undefined, password_verify: undefined, admin: true, + show_nsfw: true, }, doneRegisteringUser: false, userLoading: false, diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index c6a70560..39a13e16 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -2,8 +2,8 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse } from '../interfaces'; -import { WebSocketService } from '../services'; +import { UserOperation, Post, Comment, CommunityUser, GetUserDetailsForm, SortType, UserDetailsResponse, UserView, CommentResponse, UserSettingsForm, LoginResponse } from '../interfaces'; +import { WebSocketService, UserService } from '../services'; import { msgOp, fetchLimit, routeSortTypeToEnum, capitalizeFirstLetter } from '../utils'; import { PostListing } from './post-listing'; import { CommentNodes } from './comment-nodes'; @@ -28,6 +28,8 @@ interface UserState { sort: SortType; page: number; loading: boolean; + userSettingsForm: UserSettingsForm; + userSettingsLoading: boolean; } export class User extends Component<any, UserState> { @@ -54,6 +56,11 @@ export class User extends Component<any, UserState> { view: this.getViewFromProps(this.props), sort: this.getSortTypeFromProps(this.props), page: this.getPageFromProps(this.props), + userSettingsForm: { + show_nsfw: null, + auth: null, + }, + userSettingsLoading: null, } constructor(props: any, context: any) { @@ -75,6 +82,10 @@ export class User extends Component<any, UserState> { this.refetch(); } + get isCurrentUser() { + return UserService.Instance.user && UserService.Instance.user.id == this.state.user.id; + } + getViewFromProps(props: any): View { return (props.match.params.view) ? View[capitalizeFirstLetter(props.match.params.view)] : @@ -131,6 +142,9 @@ export class User extends Component<any, UserState> { </div> <div class="col-12 col-md-3"> {this.userInfo()} + {this.isCurrentUser && + this.userSettings() + } {this.moderates()} {this.follows()} </div> @@ -219,7 +233,7 @@ export class User extends Component<any, UserState> { return ( <div> <h5>{user.name}</h5> - <div>{i18n.t('joined')}<MomentTime data={user} /></div> + <div>{i18n.t('joined')} <MomentTime data={user} /></div> <table class="table table-bordered table-sm mt-2"> <tr> <td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td> @@ -235,6 +249,30 @@ export class User extends Component<any, UserState> { ) } + userSettings() { + return ( + <div> + <h5><T i18nKey="settings">#</T></h5> + <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}> + <div class="form-group row"> + <div class="col-12"> + <div class="form-check"> + <input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/> + <label class="form-check-label"><T i18nKey="show_nsfw">#</T></label> + </div> + </div> + </div> + <div class="form-group row"> + <div class="col-12"> + <button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ? + <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button> + </div> + </div> + </form> + </div> + ) + } + moderates() { return ( <div> @@ -329,6 +367,19 @@ export class User extends Component<any, UserState> { i.refetch(); } + handleUserSettingsShowNsfwChange(i: User, event: any) { + i.state.userSettingsForm.show_nsfw = event.target.checked; + i.setState(i.state); + } + + handleUserSettingsSubmit(i: User, event: any) { + event.preventDefault(); + i.state.userSettingsLoading = true; + i.setState(i.state); + + WebSocketService.Instance.saveUserSettings(i.state.userSettingsForm); + } + parseMessage(msg: any) { console.log(msg); let op: UserOperation = msgOp(msg); @@ -343,6 +394,9 @@ export class User extends Component<any, UserState> { this.state.moderates = res.moderates; this.state.posts = res.posts; this.state.loading = false; + if (this.isCurrentUser) { + this.state.userSettingsForm.show_nsfw = UserService.Instance.user.show_nsfw; + } document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`; window.scrollTo(0,0); this.setState(this.state); @@ -378,6 +432,12 @@ export class User extends Component<any, UserState> { if (res.comment.my_vote !== null) found.my_vote = res.comment.my_vote; this.setState(this.state); + } else if (op == UserOperation.SaveUserSettings) { + this.state = this.emptyState; + this.state.userSettingsLoading = false; + this.setState(this.state); + let res: LoginResponse = msg; + UserService.Instance.login(res); } } } |