Browse Source

Adding save user settings

pull/1/head
Dessalines 3 years ago
parent
commit
238b8cfb59
  1. 2
      package.json
  2. 1
      src/components/setup.tsx
  3. 66
      src/components/user.tsx
  4. 7
      src/interfaces.ts
  5. 7
      src/services/WebSocketService.ts
  6. 1
      src/translations/en.ts
  7. 2
      tslint.json
  8. 2
      yarn.lock

2
package.json

@ -41,6 +41,6 @@
"fuse-box": "^3.1.3",
"ts-transform-classcat": "^0.0.2",
"ts-transform-inferno": "^4.0.2",
"typescript": "^3.3.3333"
"typescript": "^3.5.3"
}
}

1
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,

66
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);
}
}
}

7
src/interfaces.ts

@ -1,5 +1,5 @@
export enum UserOperation {
Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead
Login, Register, CreateCommunity, CreatePost, ListCommunities, ListCategories, GetPost, GetCommunity, CreateComment, EditComment, SaveComment, CreateCommentLike, GetPosts, CreatePostLike, EditPost, SavePost, EditCommunity, FollowCommunity, GetFollowedCommunities, GetUserDetails, GetReplies, GetModlog, BanFromCommunity, AddModToCommunity, CreateSite, EditSite, GetSite, AddAdmin, BanUser, Search, MarkAllAsRead, SaveUserSettings
}
export enum CommentSortType {
@ -347,7 +347,10 @@ export interface LoginResponse {
jwt: string;
}
export interface UserSettingsForm {
show_nsfw: boolean;
auth: string;
}
export interface CommunityForm {
name: string;

7
src/services/WebSocketService.ts

@ -1,5 +1,5 @@
import { wsUri } from '../env';
import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, SavePostForm, CommentForm, SaveCommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm, ListCommunitiesForm, GetModlogForm, BanFromCommunityForm, AddModToCommunityForm, AddAdminForm, BanUserForm, SiteForm, Site, UserView, GetRepliesForm, SearchForm } from '../interfaces';
import { LoginForm, RegisterForm, UserOperation, CommunityForm, PostForm, SavePostForm, CommentForm, SaveCommentForm, CommentLikeForm, GetPostsForm, CreatePostLikeForm, FollowCommunityForm, GetUserDetailsForm, ListCommunitiesForm, GetModlogForm, BanFromCommunityForm, AddModToCommunityForm, AddAdminForm, BanUserForm, SiteForm, Site, UserView, GetRepliesForm, SearchForm, UserSettingsForm } from '../interfaces';
import { webSocket } from 'rxjs/webSocket';
import { Subject } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
@ -184,6 +184,11 @@ export class WebSocketService {
this.subject.next(this.wsSendWrapper(UserOperation.MarkAllAsRead, form));
}
public saveUserSettings(userSettingsForm: UserSettingsForm) {
this.setAuth(userSettingsForm);
this.subject.next(this.wsSendWrapper(UserOperation.SaveUserSettings, userSettingsForm));
}
private wsSendWrapper(op: UserOperation, data: any) {
let send = { op: UserOperation[op], data: data };
console.log(send);

1
src/translations/en.ts

@ -29,6 +29,7 @@ export const en = {
mod: 'mod',
mods: 'mods',
moderates: 'Moderates',
settings: 'Settings',
remove_as_mod: 'remove as mod',
appoint_as_mod: 'appoint as mod',
modlog: 'Modlog',

2
tslint.json

@ -2,7 +2,7 @@
"extends": "tslint:recommended",
"rules": {
"forin": false,
"indent": [ true, "tabs" ],
"indent": [ true, "spaces" ],
"interface-name": false,
"ban-types": true,
"max-classes-per-file": true,

2
yarn.lock

@ -2773,7 +2773,7 @@ [email protected]^2.6.2:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"
integrity sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==
[email protected]^3.3.3333:
[email protected]^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==

Loading…
Cancel
Save