LemmyNet
/
lemmy
3
2
Fork 3
Code Pull Requests 1 Releases Wiki Activity

HTML title bugs. 

- Fixing HTML titles for some pages. Fixes #801
- Removing WebSocketService.Instance.site, fetching site on demand now.
This commit is contained in:
Dessalines 2020-07-08 01:02:14 -04:00
parent 8fda7d00d5
commit cd4e0ab3c2
24 changed files with 397 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/comment-node.tsx vendored
View File

@ -73,6 +73,7 @@ interface CommentNodeProps {
showCommunity?: boolean;
sort?: CommentSortType;
sortType?: SortType;
enableDownvotes: boolean;
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
@ -279,7 +280,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
<span class="ml-1">{this.state.upvotes}</span>
)}
</button>
{WebSocketService.Instance.site.enable_downvotes && (
{this.props.enableDownvotes && (
<button
className={`btn btn-link btn-animate ${
this.state.my_vote == -1
@ -703,6 +704,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
postCreatorId={this.props.postCreatorId}
sort={this.props.sort}
sortType={this.props.sortType}
enableDownvotes={this.props.enableDownvotes}
/>
)}
{/* A collapsed clearfix */}

2
ui/src/components/comment-nodes.tsx vendored
View File

@ -24,6 +24,7 @@ interface CommentNodesProps {
showCommunity?: boolean;
sort?: CommentSortType;
sortType?: SortType;
enableDownvotes: boolean;
}
export class CommentNodes extends Component<
@ -52,6 +53,7 @@ export class CommentNodes extends Component<
showCommunity={this.props.showCommunity}
sort={this.props.sort}
sortType={this.props.sortType}
enableDownvotes={this.props.enableDownvotes}
/>
))}
</div>

12
ui/src/components/communities.tsx vendored
View File

@ -1,5 +1,4 @@
import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {
@ -11,6 +10,7 @@ import {
ListCommunitiesForm,
SortType,
WebSocketJsonResponse,
GetSiteResponse,
} from '../interfaces';
import { WebSocketService } from '../services';
import { wsJsonToRes, toast } from '../utils';
@ -47,6 +47,7 @@ export class Communities extends Component<any, CommunitiesState> {
);
this.refetch();
WebSocketService.Instance.getSite();
}
getPageFromProps(props: any): number {
@ -57,12 +58,6 @@ export class Communities extends Component<any, CommunitiesState> {
this.subscription.unsubscribe();
}
componentDidMount() {
document.title = `${i18n.t('communities')} - ${
WebSocketService.Instance.site.name
}`;
}
// Necessary for back button for some reason
componentWillReceiveProps(nextProps: any) {
if (nextProps.history.action == 'POP') {
@ -244,6 +239,9 @@ export class Communities extends Component<any, CommunitiesState> {
found.subscribed = data.community.subscribed;
found.number_of_subscribers = data.community.number_of_subscribers;
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
document.title = `${i18n.t('communities')} - ${data.site.name}`;
}
}
}

11
ui/src/components/community-form.tsx vendored
View File

@ -8,7 +8,6 @@ import {
Category,
ListCategoriesResponse,
CommunityResponse,
GetSiteResponse,
WebSocketJsonResponse,
} from '../interfaces';
import { WebSocketService } from '../services';
@ -30,13 +29,13 @@ interface CommunityFormProps {
onCancel?(): any;
onCreate?(community: Community): any;
onEdit?(community: Community): any;
enableNsfw: boolean;
}
interface CommunityFormState {
communityForm: CommunityFormI;
categories: Array<Category>;
loading: boolean;
enable_nsfw: boolean;
}
export class CommunityForm extends Component<
@ -56,7 +55,6 @@ export class CommunityForm extends Component<
},
categories: [],
loading: false,
enable_nsfw: null,
};
constructor(props: any, context: any) {
@ -86,7 +84,6 @@ export class CommunityForm extends Component<
);
WebSocketService.Instance.listCategories();
WebSocketService.Instance.getSite();
}
componentDidMount() {
@ -187,7 +184,7 @@ export class CommunityForm extends Component<
</div>
</div>
{this.state.enable_nsfw && (
{this.props.enableNsfw && (
<div class="form-group row">
<div class="col-12">
<div class="form-check">
@ -303,10 +300,6 @@ export class CommunityForm extends Component<
let data = res.data as CommunityResponse;
this.state.loading = false;
this.props.onEdit(data.community);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
}
}
}

28
ui/src/components/community.tsx vendored
View File

@ -23,6 +23,8 @@ import {
GetCommentsResponse,
CommentResponse,
WebSocketJsonResponse,
GetSiteResponse,
Site,
} from '../interfaces';
import { WebSocketService } from '../services';
import { PostListings } from './post-listings';
@ -60,6 +62,7 @@ interface State {
dataType: DataType;
sort: SortType;
page: number;
site: Site;
}
export class Community extends Component<any, State> {
@ -97,6 +100,20 @@ export class Community extends Component<any, State> {
dataType: getDataTypeFromProps(this.props),
sort: getSortTypeFromProps(this.props),
page: getPageFromProps(this.props),
site: {
id: undefined,
name: undefined,
creator_id: undefined,
published: undefined,
creator_name: undefined,
number_of_users: undefined,
number_of_posts: undefined,
number_of_comments: undefined,
number_of_communities: undefined,
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
},
};
constructor(props: any, context: any) {
@ -119,6 +136,7 @@ export class Community extends Component<any, State> {
name: this.state.communityName ? this.state.communityName : null,
};
WebSocketService.Instance.getCommunity(form);
WebSocketService.Instance.getSite();
}
componentWillUnmount() {
@ -174,6 +192,7 @@ export class Community extends Component<any, State> {
moderators={this.state.moderators}
admins={this.state.admins}
online={this.state.online}
enableNsfw={this.state.site.enable_nsfw}
/>
</div>
</div>
@ -188,6 +207,8 @@ export class Community extends Component<any, State> {
posts={this.state.posts}
removeDuplicates
sort={this.state.sort}
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
) : (
<CommentNodes
@ -195,6 +216,7 @@ export class Community extends Component<any, State> {
noIndent
sortType={this.state.sort}
showContext
enableDownvotes={this.state.site.enable_downvotes}
/>
);
}
@ -331,7 +353,7 @@ export class Community extends Component<any, State> {
this.state.moderators = data.moderators;
this.state.admins = data.admins;
this.state.online = data.online;
document.title = `/c/${this.state.community.name} - ${WebSocketService.Instance.site.name}`;
document.title = `/c/${this.state.community.name} - ${this.state.site.name}`;
this.setState(this.state);
this.fetchData();
} else if (res.op == UserOperation.EditCommunity) {
@ -399,6 +421,10 @@ export class Community extends Component<any, State> {
let data = res.data as CommentResponse;
createCommentLikeRes(data, this.state.comments);
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
}
}
}

56
ui/src/components/create-community.tsx vendored
View File

@ -1,19 +1,44 @@
import { Component } from 'inferno';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { CommunityForm } from './community-form';
import { Community } from '../interfaces';
import {
Community,
UserOperation,
WebSocketJsonResponse,
GetSiteResponse,
} from '../interfaces';
import { toast, wsJsonToRes } from '../utils';
import { WebSocketService } from '../services';
import { i18n } from '../i18next';
export class CreateCommunity extends Component<any, any> {
interface CreateCommunityState {
enableNsfw: boolean;
}
export class CreateCommunity extends Component<any, CreateCommunityState> {
private subscription: Subscription;
private emptyState: CreateCommunityState = {
enableNsfw: null,
};
constructor(props: any, context: any) {
super(props, context);
this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
}
componentDidMount() {
document.title = `${i18n.t('create_community')} - ${
WebSocketService.Instance.site.name
}`;
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() {
@ -22,7 +47,10 @@ export class CreateCommunity extends Component<any, any> {
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t('create_community')}</h5>
<CommunityForm onCreate={this.handleCommunityCreate} />
<CommunityForm
onCreate={this.handleCommunityCreate}
enableNsfw={this.state.enableNsfw}
/>
</div>
</div>
</div>
@ -32,4 +60,18 @@ export class CreateCommunity extends Component<any, any> {
handleCommunityCreate(community: Community) {
this.props.history.push(`/c/${community.name}`);
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
return;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enableNsfw = data.site.enable_nsfw;
this.setState(this.state);
document.title = `${i18n.t('create_community')} - ${data.site.name}`;
}
}
}

73
ui/src/components/create-post.tsx vendored
View File

@ -1,19 +1,59 @@
import { Component } from 'inferno';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { PostForm } from './post-form';
import { toast, wsJsonToRes } from '../utils';
import { WebSocketService } from '../services';
import { PostFormParams } from '../interfaces';
import {
UserOperation,
PostFormParams,
WebSocketJsonResponse,
GetSiteResponse,
Site,
} from '../interfaces';
import { i18n } from '../i18next';
export class CreatePost extends Component<any, any> {
interface CreatePostState {
site: Site;
}
export class CreatePost extends Component<any, CreatePostState> {
private subscription: Subscription;
private emptyState: CreatePostState = {
site: {
id: undefined,
name: undefined,
creator_id: undefined,
published: undefined,
creator_name: undefined,
number_of_users: undefined,
number_of_posts: undefined,
number_of_comments: undefined,
number_of_communities: undefined,
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
},
};
constructor(props: any, context: any) {
super(props, context);
this.handlePostCreate = this.handlePostCreate.bind(this);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
}
componentDidMount() {
document.title = `${i18n.t('create_post')} - ${
WebSocketService.Instance.site.name
}`;
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() {
@ -22,7 +62,12 @@ export class CreatePost extends Component<any, any> {
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3 mb-4">
<h5>{i18n.t('create_post')}</h5>
<PostForm onCreate={this.handlePostCreate} params={this.params} />
<PostForm
onCreate={this.handlePostCreate}
params={this.params}
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
</div>
</div>
</div>
@ -56,4 +101,18 @@ export class CreatePost extends Component<any, any> {
handlePostCreate(id: number) {
this.props.history.push(`/post/${id}`);
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
return;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
document.title = `${i18n.t('create_post')} - ${data.site.name}`;
}
}
}

42
ui/src/components/create-private-message.tsx vendored
View File

@ -1,22 +1,38 @@
import { Component } from 'inferno';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { PrivateMessageForm } from './private-message-form';
import { WebSocketService } from '../services';
import { PrivateMessageFormParams } from '../interfaces';
import { toast } from '../utils';
import {
UserOperation,
WebSocketJsonResponse,
GetSiteResponse,
PrivateMessageFormParams,
} from '../interfaces';
import { toast, wsJsonToRes } from '../utils';
import { i18n } from '../i18next';
export class CreatePrivateMessage extends Component<any, any> {
private subscription: Subscription;
constructor(props: any, context: any) {
super(props, context);
this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
this
);
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
}
componentDidMount() {
document.title = `${i18n.t('create_private_message')} - ${
WebSocketService.Instance.site.name
}`;
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() {
@ -50,4 +66,18 @@ export class CreatePrivateMessage extends Component<any, any> {
// Navigate to the front
this.props.history.push(`/`);
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
return;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
document.title = `${i18n.t('create_private_message')} - ${
data.site.name
}`;
}
}
}

20
ui/src/components/inbox.tsx vendored
View File

@ -16,6 +16,7 @@ import {
GetPrivateMessagesForm,
PrivateMessagesResponse,
PrivateMessageResponse,
GetSiteResponse,
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
@ -56,6 +57,7 @@ interface InboxState {
messages: Array<PrivateMessageI>;
sort: SortType;
page: number;
enableDownvotes: boolean;
}
export class Inbox extends Component<any, InboxState> {
@ -68,6 +70,7 @@ export class Inbox extends Component<any, InboxState> {
messages: [],
sort: SortType.New,
page: 1,
enableDownvotes: undefined,
};
constructor(props: any, context: any) {
@ -85,18 +88,13 @@ export class Inbox extends Component<any, InboxState> {
);
this.refetch();
WebSocketService.Instance.getSite();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
componentDidMount() {
document.title = `/u/${UserService.Instance.user.username} ${i18n.t(
'inbox'
)} - ${WebSocketService.Instance.site.name}`;
}
render() {
return (
<div class="container">
@ -270,6 +268,7 @@ export class Inbox extends Component<any, InboxState> {
noIndent
markable
showContext
enableDownvotes={this.state.enableDownvotes}
/>
) : (
<PrivateMessage privateMessage={i} />
@ -287,6 +286,7 @@ export class Inbox extends Component<any, InboxState> {
noIndent
markable
showContext
enableDownvotes={this.state.enableDownvotes}
/>
</div>
);
@ -301,6 +301,7 @@ export class Inbox extends Component<any, InboxState> {
noIndent
markable
showContext
enableDownvotes={this.state.enableDownvotes}
/>
))}
</div>
@ -522,6 +523,13 @@ export class Inbox extends Component<any, InboxState> {
let data = res.data as CommentResponse;
createCommentLikeRes(data, this.state.replies);
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enableDownvotes = data.site.enable_downvotes;
this.setState(this.state);
document.title = `/u/${UserService.Instance.user.username} ${i18n.t(
'inbox'
)} - ${data.site.name}`;
}
}

4
ui/src/components/login.tsx vendored
View File

@ -385,9 +385,7 @@ export class Login extends Component<any, State> {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
document.title = `${i18n.t('login')} - ${
WebSocketService.Instance.site.name
}`;
document.title = `${i18n.t('login')} - ${data.site.name}`;
}
}
}

5
ui/src/components/main.tsx vendored
View File

@ -418,6 +418,8 @@ export class Main extends Component<any, MainState> {
showCommunity
removeDuplicates
sort={this.state.sort}
enableDownvotes={this.state.siteRes.site.enable_downvotes}
enableNsfw={this.state.siteRes.site.enable_nsfw}
/>
) : (
<CommentNodes
@ -426,6 +428,7 @@ export class Main extends Component<any, MainState> {
showCommunity
sortType={this.state.sort}
showContext
enableDownvotes={this.state.siteRes.site.enable_downvotes}
/>
);
}
@ -617,7 +620,7 @@ export class Main extends Component<any, MainState> {
this.state.siteRes.banned = data.banned;
this.state.siteRes.online = data.online;
this.setState(this.state);
document.title = `${WebSocketService.Instance.site.name}`;
document.title = `${this.state.siteRes.site.name}`;
} else if (res.op == UserOperation.EditSite) {
let data = res.data as SiteResponse;
this.state.siteRes.site = data.site;

9
ui/src/components/modlog.tsx vendored
View File

@ -16,6 +16,7 @@ import {
ModAddCommunity,
ModAdd,
WebSocketJsonResponse,
GetSiteResponse,
} from '../interfaces';
import { WebSocketService } from '../services';
import { wsJsonToRes, addTypeInfo, fetchLimit, toast } from '../utils';
@ -64,16 +65,13 @@ export class Modlog extends Component<any, ModlogState> {
);
this.refetch();
WebSocketService.Instance.getSite();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
componentDidMount() {
document.title = `Modlog - ${WebSocketService.Instance.site.name}`;
}
setCombined(res: GetModlogResponse) {
let removed_posts = addTypeInfo(res.removed_posts, 'removed_posts');
let locked_posts = addTypeInfo(res.locked_posts, 'locked_posts');
@ -434,6 +432,9 @@ export class Modlog extends Component<any, ModlogState> {
this.state.loading = false;
window.scrollTo(0, 0);
this.setCombined(data);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
document.title = `Modlog - ${data.site.name}`;
}
}
}

3
ui/src/components/navbar.tsx vendored
View File

@ -396,9 +396,6 @@ export class Navbar extends Component<any, NavbarState> {
if (data.site && !this.state.siteName) {
this.state.siteName = data.site.name;
this.state.admins = data.admins;
WebSocketService.Instance.site = data.site;
WebSocketService.Instance.admins = data.admins;
this.setState(this.state);
}
}

25
ui/src/components/password_change.tsx vendored
View File

@ -6,6 +6,7 @@ import {
LoginResponse,
PasswordChangeForm,
WebSocketJsonResponse,
GetSiteResponse,
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
@ -40,18 +41,13 @@ export class PasswordChange extends Component<any, State> {
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
componentDidMount() {
document.title = `${i18n.t('password_change')} - ${
WebSocketService.Instance.site.name
}`;
}
render() {
return (
<div class="container">
@ -138,14 +134,15 @@ export class PasswordChange extends Component<any, State> {
this.state.loading = false;
this.setState(this.state);
return;
} else {
if (res.op == UserOperation.PasswordChange) {
let data = res.data as LoginResponse;
this.state = this.emptyState;
this.setState(this.state);
UserService.Instance.login(data);
this.props.history.push('/');
}
} else if (res.op == UserOperation.PasswordChange) {
let data = res.data as LoginResponse;
this.state = this.emptyState;
this.setState(this.state);
UserService.Instance.login(data);
this.props.history.push('/');
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
document.title = `${i18n.t('password_change')} - ${data.site.name}`;
}
}
}

25
ui/src/components/post-form.tsx vendored
View File

@ -16,7 +16,6 @@ import {
SearchForm,
SearchType,
SearchResponse,
GetSiteResponse,
WebSocketJsonResponse,
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
@ -52,6 +51,8 @@ interface PostFormProps {
onCancel?(): any;
onCreate?(id: number): any;
onEdit?(post: Post): any;
enableNsfw: boolean;
enableDownvotes: boolean;
}
interface PostFormState {
@ -63,7 +64,6 @@ interface PostFormState {
suggestedTitle: string;
suggestedPosts: Array<Post>;
crossPosts: Array<Post>;
enable_nsfw: boolean;
}
export class PostForm extends Component<PostFormProps, PostFormState> {
@ -87,7 +87,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
suggestedTitle: undefined,
suggestedPosts: [],
crossPosts: [],
enable_nsfw: undefined,
};
constructor(props: any, context: any) {
@ -138,7 +137,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
};
WebSocketService.Instance.listCommunities(listCommunitiesForm);
WebSocketService.Instance.getSite();
}
componentDidMount() {
@ -240,7 +238,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div class="my-1 text-muted small font-weight-bold">
{i18n.t('cross_posts')}
</div>
<PostListings showCommunity posts={this.state.crossPosts} />
<PostListings
showCommunity
posts={this.state.crossPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
</>
)}
</div>
@ -265,7 +268,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
<div class="my-1 text-muted small font-weight-bold">
{i18n.t('related_posts')}
</div>
<PostListings posts={this.state.suggestedPosts} />
<PostListings
posts={this.state.suggestedPosts}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
</>
)}
</div>
@ -346,7 +353,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
</div>
</div>
)}
{this.state.enable_nsfw && (
{this.props.enableNsfw && (
<div class="form-group row">
<div class="col-sm-10">
<div class="form-check">
@ -631,10 +638,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
this.state.crossPosts = data.posts;
}
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.enable_nsfw = data.site.enable_nsfw;
this.setState(this.state);
}
}
}

6
ui/src/components/post-listing.tsx vendored
View File

@ -61,6 +61,8 @@ interface PostListingProps {
showBody?: boolean;
moderators?: Array<CommunityUser>;
admins?: Array<UserView>;
enableDownvotes: boolean;
enableNsfw: boolean;
}
export class PostListing extends Component<PostListingProps, PostListingState> {
@ -115,6 +117,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
post={this.props.post}
onEdit={this.handleEditPost}
onCancel={this.handleEditCancel}
enableNsfw={this.props.enableNsfw}
enableDownvotes={this.props.enableDownvotes}
/>
</div>
)}
@ -273,7 +277,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
>
{this.state.score}
</div>
{WebSocketService.Instance.site.enable_downvotes && (
{this.props.enableDownvotes && (
<button
className={`btn-animate btn btn-link p-0 ${
this.state.my_vote == -1 ? 'text-danger' : 'text-muted'

4
ui/src/components/post-listings.tsx vendored
View File

@ -11,6 +11,8 @@ interface PostListingsProps {
showCommunity?: boolean;
removeDuplicates?: boolean;
sort?: SortType;
enableDownvotes: boolean;
enableNsfw: boolean;
}
export class PostListings extends Component<PostListingsProps, any> {
@ -27,6 +29,8 @@ export class PostListings extends Component<PostListingsProps, any> {
<PostListing
post={post}
showCommunity={this.props.showCommunity}
enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw}
/>
<hr class="my-2" />
</>

52
ui/src/components/post.tsx vendored
View File

@ -18,7 +18,6 @@ import {
BanUserResponse,
AddModToCommunityResponse,
AddAdminResponse,
UserView,
SearchType,
SortType,
SearchForm,
@ -52,12 +51,12 @@ interface PostState {
commentSort: CommentSortType;
community: Community;
moderators: Array<CommunityUser>;
admins: Array<UserView>;
online: number;
scrolled?: boolean;
scrolled_comment_id?: number;
loading: boolean;
crossPosts: Array<PostI>;
siteRes: GetSiteResponse;
}
export class Post extends Component<any, PostState> {
@ -68,11 +67,29 @@ export class Post extends Component<any, PostState> {
commentSort: CommentSortType.Hot,
community: null,
moderators: [],
admins: [],
online: null,
scrolled: false,
loading: true,
crossPosts: [],
siteRes: {
admins: [],
banned: [],
site: {
id: undefined,
name: undefined,
creator_id: undefined,
published: undefined,
creator_name: undefined,
number_of_users: undefined,
number_of_posts: undefined,
number_of_comments: undefined,
number_of_communities: undefined,
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
},
online: null,
},
};
constructor(props: any, context: any) {
@ -97,6 +114,7 @@ export class Post extends Component<any, PostState> {
id: postId,
};
WebSocketService.Instance.getPost(form);
WebSocketService.Instance.getSite();
}
componentWillUnmount() {
@ -180,7 +198,9 @@ export class Post extends Component<any, PostState> {
showBody
showCommunity
moderators={this.state.moderators}
admins={this.state.admins}
admins={this.state.siteRes.admins}
enableDownvotes={this.state.siteRes.site.enable_downvotes}
enableNsfw={this.state.siteRes.site.enable_nsfw}
/>
<div className="mb-2" />
<CommentForm
@ -269,9 +289,10 @@ export class Post extends Component<any, PostState> {
noIndent
locked={this.state.post.locked}
moderators={this.state.moderators}
admins={this.state.admins}
admins={this.state.siteRes.admins}
postCreatorId={this.state.post.creator_id}
showContext
enableDownvotes={this.state.siteRes.site.enable_downvotes}
/>
</div>
</div>
@ -284,8 +305,9 @@ export class Post extends Component<any, PostState> {
<Sidebar
community={this.state.community}
moderators={this.state.moderators}
admins={this.state.admins}
admins={this.state.siteRes.admins}
online={this.state.online}
enableNsfw={this.state.siteRes.site.enable_nsfw}
/>
</div>
);
@ -336,9 +358,10 @@ export class Post extends Component<any, PostState> {
nodes={nodes}
locked={this.state.post.locked}
moderators={this.state.moderators}
admins={this.state.admins}
admins={this.state.siteRes.admins}
postCreatorId={this.state.post.creator_id}
sort={this.state.commentSort}
enableDownvotes={this.state.siteRes.site.enable_downvotes}
/>
</div>
);
@ -360,10 +383,10 @@ export class Post extends Component<any, PostState> {
this.state.comments = data.comments;
this.state.community = data.community;
this.state.moderators = data.moderators;
this.state.admins = data.admins;
this.state.siteRes.admins = data.admins;
this.state.online = data.online;
this.state.loading = false;
document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
document.title = `${this.state.post.name} - ${this.state.siteRes.site.name}`;
// Get cross-posts
if (this.state.post.url) {
@ -450,7 +473,7 @@ export class Post extends Component<any, PostState> {
this.setState(this.state);
} else if (res.op == UserOperation.AddAdmin) {
let data = res.data as AddAdminResponse;
this.state.admins = data.admins;
this.state.siteRes.admins = data.admins;
this.setState(this.state);
} else if (res.op == UserOperation.Search) {
let data = res.data as SearchResponse;
@ -461,15 +484,18 @@ export class Post extends Component<any, PostState> {
this.state.post.duplicates = this.state.crossPosts;
}
this.setState(this.state);
} else if (res.op == UserOperation.TransferSite) {
} else if (
res.op == UserOperation.TransferSite ||
res.op == UserOperation.GetSite
) {
let data = res.data as GetSiteResponse;
this.state.admins = data.admins;
this.state.siteRes = data;
this.setState(this.state);
} else if (res.op == UserOperation.TransferCommunity) {
let data = res.data as GetCommunityResponse;
this.state.community = data.community;
this.state.moderators = data.moderators;
this.state.admins = data.admins;
this.state.siteRes.admins = data.admins;
this.setState(this.state);
}
}

1
ui/src/components/private-message-form.tsx vendored
View File

@ -1,6 +1,5 @@
import { Component, linkEvent } from 'inferno';
import { Prompt } from 'inferno-router';
import { Link } from 'inferno-router';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import {

48
ui/src/components/search.tsx vendored
View File

@ -15,6 +15,8 @@ import {
PostResponse,
CommentResponse,
WebSocketJsonResponse,
GetSiteResponse,
Site,
} from '../interfaces';
import { WebSocketService } from '../services';
import {
@ -41,6 +43,7 @@ interface SearchState {
page: number;
searchResponse: SearchResponse;
loading: boolean;
site: Site;
}
export class Search extends Component<any, SearchState> {
@ -58,6 +61,20 @@ export class Search extends Component<any, SearchState> {
users: [],
},
loading: false,
site: {
id: undefined,
name: undefined,
creator_id: undefined,
published: undefined,
creator_name: undefined,
number_of_users: undefined,
number_of_posts: undefined,
number_of_comments: undefined,
number_of_communities: undefined,
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
},
};
getSearchQueryFromProps(props: any): string {
@ -94,6 +111,8 @@ export class Search extends Component<any, SearchState> {
() => console.log('complete')
);
WebSocketService.Instance.getSite();
if (this.state.q) {
this.search();
}
@ -118,12 +137,6 @@ export class Search extends Component<any, SearchState> {
}
}
componentDidMount() {
document.title = `${i18n.t('search')} - ${
WebSocketService.Instance.site.name
}`;
}
render() {
return (
<div class="container">
@ -241,13 +254,19 @@ export class Search extends Component<any, SearchState> {
<div class="row">
<div class="col-12">
{i.type_ == 'posts' && (
<PostListing post={i.data as Post} showCommunity />
<PostListing
post={i.data as Post}
showCommunity
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
)}
{i.type_ == 'comments' && (
<CommentNodes
nodes={[{ comment: i.data as Comment }]}
locked
noIndent
enableDownvotes={this.state.site.enable_downvotes}
/>
)}
{i.type_ == 'communities' && (
@ -281,6 +300,7 @@ export class Search extends Component<any, SearchState> {
nodes={commentsToFlatNodes(this.state.searchResponse.comments)}
locked
noIndent
enableDownvotes={this.state.site.enable_downvotes}
/>
);
}
@ -291,7 +311,12 @@ export class Search extends Component<any, SearchState> {
{this.state.searchResponse.posts.map(post => (
<div class="row">
<div class="col-12">
<PostListing post={post} showCommunity />
<PostListing
post={post}
showCommunity
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
</div>
</div>
))}
@ -455,7 +480,7 @@ export class Search extends Component<any, SearchState> {
this.state.searchResponse = data;
this.state.loading = false;
document.title = `${i18n.t('search')} - ${this.state.q} - ${
WebSocketService.Instance.site.name
this.state.site.name
}`;
window.scrollTo(0, 0);
this.setState(this.state);
@ -467,6 +492,11 @@ export class Search extends Component<any, SearchState> {
let data = res.data as PostResponse;
createPostLikeFindRes(data, this.state.searchResponse.posts);
this.setState(this.state);
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
document.title = `${i18n.t('search')} - ${data.site.name}`;
}
}
}

2
ui/src/components/sidebar.tsx vendored
View File

@ -19,6 +19,7 @@ interface SidebarProps {
moderators: Array<CommunityUser>;
admins: Array<UserView>;
online: number;
enableNsfw: boolean;
}
interface SidebarState {
@ -53,6 +54,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
community={this.props.community}
onEdit={this.handleEditCommunity}
onCancel={this.handleEditCancel}
enableNsfw={this.props.enableNsfw}
/>
)}
</div>

38
ui/src/components/sponsors.tsx vendored
View File

@ -1,8 +1,15 @@
import { Component } from 'inferno';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { WebSocketService } from '../services';
import {
GetSiteResponse,
WebSocketJsonResponse,
UserOperation,
} from '../interfaces';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
import { repoUrl } from '../utils';
import { repoUrl, wsJsonToRes, toast } from '../utils';
interface SilverUser {
name: string;
@ -33,17 +40,28 @@ let silver: Array<SilverUser> = [
// let latinum = [];
export class Sponsors extends Component<any, any> {
private subscription: Subscription;
constructor(props: any, context: any) {
super(props, context);
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
msg => this.parseMessage(msg),
err => console.error(err),
() => console.log('complete')
);
WebSocketService.Instance.getSite();
}
componentDidMount() {
document.title = `${i18n.t('sponsors')} - ${
WebSocketService.Instance.site.name
}`;
window.scrollTo(0, 0);
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
render() {
return (
<div class="container text-center">
@ -153,4 +171,16 @@ export class Sponsors extends Component<any, any> {
</div>
);
}
parseMessage(msg: WebSocketJsonResponse) {
console.log(msg);
let res = wsJsonToRes(msg);
if (msg.error) {
toast(i18n.t(msg.error), 'danger');
return;
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
document.title = `${i18n.t('sponsors')} - ${data.site.name}`;
}
}
}

38
ui/src/components/user.tsx vendored
View File

@ -20,6 +20,8 @@ import {
DeleteAccountForm,
PostResponse,
WebSocketJsonResponse,
GetSiteResponse,
Site,
} from '../interfaces';
import { WebSocketService, UserService } from '../services';
import {
@ -74,6 +76,7 @@ interface UserState {
deleteAccountLoading: boolean;
deleteAccountShowConfirm: boolean;
deleteAccountForm: DeleteAccountForm;
site: Site;
}
export class User extends Component<any, UserState> {
@ -122,6 +125,20 @@ export class User extends Component<any, UserState> {
deleteAccountForm: {
password: null,
},
site: {
id: undefined,
name: undefined,
creator_id: undefined,
published: undefined,
creator_name: undefined,
number_of_users: undefined,
number_of_posts: undefined,
number_of_comments: undefined,
number_of_communities: undefined,
enable_downvotes: undefined,
open_registration: undefined,
enable_nsfw: undefined,
},
};
constructor(props: any, context: any) {
@ -148,6 +165,7 @@ export class User extends Component<any, UserState> {
);
this.refetch();
WebSocketService.Instance.getSite();
}
get isCurrentUser() {
@ -356,6 +374,8 @@ export class User extends Component<any, UserState> {
post={i.data as Post}
admins={this.state.admins}
showCommunity
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
) : (
<CommentNodes
@ -363,6 +383,7 @@ export class User extends Component<any, UserState> {
admins={this.state.admins}
noIndent
showContext
enableDownvotes={this.state.site.enable_downvotes}
/>
)}
</div>
@ -379,6 +400,7 @@ export class User extends Component<any, UserState> {
admins={this.state.admins}
noIndent
showContext
enableDownvotes={this.state.site.enable_downvotes}
/>
</div>
);
@ -388,7 +410,13 @@ export class User extends Component<any, UserState> {
return (
<div>
{this.state.posts.map(post => (
<PostListing post={post} admins={this.state.admins} showCommunity />
<PostListing
post={post}
admins={this.state.admins}
showCommunity
enableDownvotes={this.state.site.enable_downvotes}
enableNsfw={this.state.site.enable_nsfw}
/>
))}
</div>
);
@ -670,7 +698,7 @@ export class User extends Component<any, UserState> {
/>
</div>
</div>
{WebSocketService.Instance.site.enable_nsfw && (
{this.state.site.enable_nsfw && (
<div class="form-group">
<div class="form-check">
<input
@ -1107,7 +1135,7 @@ export class User extends Component<any, UserState> {
UserService.Instance.user.show_avatars;
this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
}
document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
document.title = `/u/${this.state.user.name} - ${this.state.site.name}`;
window.scrollTo(0, 0);
this.setState(this.state);
setupTippy();
@ -1159,6 +1187,10 @@ export class User extends Component<any, UserState> {
this.state.deleteAccountShowConfirm = false;
this.setState(this.state);
this.context.router.history.push('/');
} else if (res.op == UserOperation.GetSite) {
let data = res.data as GetSiteResponse;
this.state.site = data.site;
this.setState(this.state);
}
}
}

2
ui/src/services/WebSocketService.ts vendored
View File

@ -25,7 +25,6 @@ import {
TransferSiteForm,
BanUserForm,
SiteForm,
Site,
UserView,
GetRepliesForm,
GetUserMentionsForm,
@ -57,7 +56,6 @@ export class WebSocketService {
public ws: ReconnectingWebSocket;
public subject: Observable<any>;
public site: Site;
public admins: Array<UserView>;
public banned: Array<UserView>;