Second front end pass.

This commit is contained in:
Dessalines 2019-08-09 15:52:32 -07:00
parent 093bc00ff7
commit 6304417b3b
16 changed files with 36 additions and 38 deletions

View file

@ -88,7 +88,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
if (i.props.node) {
i.props.onReplyCancel();
}
autosize.update(document.querySelector('textarea'));
}

View file

@ -195,10 +195,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* TODO hold off on expires until later */}
{/* <div class="form-group row"> */}
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.banExpires} onInput={linkEvent(this, this.handleModBanExpiresChange)} /> */}
{/* </div> */}
<div class="form-group row">
<button type="submit" class="btn btn-secondary">Ban {this.props.node.comment.creator_name}</button>
<button type="submit" class="btn btn-secondary">{i18n.t('ban')} {this.props.node.comment.creator_name}</button>
</div>
</form>
}
@ -389,9 +389,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
handleModBanBothSubmit(i: CommentNode) {
event.preventDefault();
console.log(BanType[i.state.banType]);
console.log(i.props.node.comment.banned);
if (i.state.banType == BanType.Community) {
let form: BanFromCommunityForm = {
user_id: i.props.node.comment.creator_id,

View file

@ -32,7 +32,7 @@ export class CommentNodes extends Component<CommentNodesProps, CommentNodesState
moderators={this.props.moderators}
admins={this.props.admins}
markable={this.props.markable}
/>
/>
)}
</div>
)

View file

@ -5,6 +5,7 @@ import { retryWhen, delay, take } from 'rxjs/operators';
import { UserOperation, Community, ListCommunitiesResponse, CommunityResponse, FollowCommunityForm, ListCommunitiesForm, SortType } from '../interfaces';
import { WebSocketService } from '../services';
import { msgOp } from '../utils';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
declare const Sortable: any;
@ -27,12 +28,12 @@ export class Communities extends Component<any, CommunitiesState> {
super(props, context);
this.state = this.emptyState;
this.subscription = WebSocketService.Instance.subject
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
(msg) => this.parseMessage(msg),
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
.subscribe(
(msg) => this.parseMessage(msg),
(err) => console.error(err),
() => console.log('complete')
);
);
this.refetch();
@ -47,7 +48,7 @@ export class Communities extends Component<any, CommunitiesState> {
}
componentDidMount() {
document.title = `Communities - ${WebSocketService.Instance.site.name}`;
document.title = `${i18n.t('communities')} - ${WebSocketService.Instance.site.name}`;
}
// Necessary for back button for some reason

View file

@ -171,8 +171,7 @@ export class CommunityForm extends Component<CommunityFormProps, CommunityFormSt
this.state.loading = false;
this.props.onCreate(res.community);
}
// TODO is this necessary?
// TODO is ths necessary
else if (op == UserOperation.EditCommunity) {
let res: CommunityResponse = msg;
this.state.loading = false;

View file

@ -90,7 +90,7 @@ export class Inbox extends Component<any, InboxState> {
<select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="custom-select custom-select-sm w-auto ml-2">
<option disabled><T i18nKey="sort_type">#</T></option>
<option value={SortType.New}><T i18nKey="new">#</T></option>
<option value={SortType.TopDay}><T i18nKey="top_day">top_day</T></option>
<option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
<option value={SortType.TopYear}><T i18nKey="year">#</T></option>

View file

@ -52,7 +52,7 @@ export class Login extends Component<any, State> {
}
componentDidMount() {
document.title = `Login - ${WebSocketService.Instance.site.name}`;
document.title = `${i18n.t('login')} - ${WebSocketService.Instance.site.name}`;
}
render() {

View file

@ -7,6 +7,7 @@ import { WebSocketService, UserService } from '../services';
import { PostListings } from './post-listings';
import { SiteForm } from './site-form';
import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum } from '../utils';
import { i18n } from '../i18next';
import { T } from 'inferno-i18next';
interface MainState {
@ -286,7 +287,7 @@ export class Main extends Component<any, MainState> {
onChange={linkEvent(this, this.handleTypeChange)}
disabled={UserService.Instance.user == undefined}
/>
Subscribed
{i18n.t('subscribed')}
</label>
<label className={`pointer btn btn-sm btn-secondary ${this.state.type_ == ListingType.All && 'active'}`}>
<input type="radio"
@ -294,19 +295,19 @@ export class Main extends Component<any, MainState> {
checked={this.state.type_ == ListingType.All}
onChange={linkEvent(this, this.handleTypeChange)}
/>
All
{i18n.t('all')}
</label>
</div>
<select value={this.state.sort} onChange={linkEvent(this, this.handleSortChange)} class="ml-2 custom-select custom-select-sm w-auto">
<option disabled>Sort Type</option>
<option value={SortType.Hot}>Hot</option>
<option value={SortType.New}>New</option>
<option disabled><T i18nKey="sort_type">#</T></option>
<option value={SortType.Hot}><T i18nKey="hot">#</T></option>
<option value={SortType.New}><T i18nKey="new">#</T></option>
<option disabled></option>
<option value={SortType.TopDay}>Top Day</option>
<option value={SortType.TopWeek}>Week</option>
<option value={SortType.TopMonth}>Month</option>
<option value={SortType.TopYear}>Year</option>
<option value={SortType.TopAll}>All</option>
<option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
<option value={SortType.TopYear}><T i18nKey="year">#</T></option>
<option value={SortType.TopAll}><T i18nKey="all">#</T></option>
</select>
</div>
)
@ -316,9 +317,9 @@ export class Main extends Component<any, MainState> {
return (
<div class="mt-2">
{this.state.page > 1 &&
<button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}>Prev</button>
<button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
}
<button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}>Next</button>
<button class="btn btn-sm btn-secondary" onClick={linkEvent(this, this.nextPage)}><T i18nKey="next">#</T></button>
</div>
);
}

View file

@ -1,6 +1,6 @@
import { Component } from 'inferno';
import * as moment from 'moment';
import 'moment/locale/de.js';
// import 'moment/locale/de.js';
import { getLanguage } from '../utils';
import { i18n } from '../i18next';
@ -16,7 +16,6 @@ export class MomentTime extends Component<MomentTimeProps, any> {
constructor(props: any, context: any) {
super(props, context);
// console.log(moment.locales());
moment.locale(getLanguage());
}

View file

@ -155,6 +155,7 @@ export class Navbar extends Component<any, NavbarState> {
parseMessage(msg: any) {
let op: UserOperation = msgOp(msg);
if (msg.error) {
// TODO
if (msg.error == "Not logged in.") {
UserService.Instance.logout();
location.reload();

View file

@ -76,7 +76,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<h5 className="mb-0 d-inline">
{post.url ?
<a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> :
<Link className="text-white" to={`/post/${post.id}`} title="Comments">{post.name}</Link>
<Link className="text-white" to={`/post/${post.id}`} title={i18n.t('comments')}>{post.name}</Link>
}
</h5>
{post.url &&
@ -176,7 +176,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
}
{this.state.showRemoveDialog &&
<form class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
<input type="text" class="form-control mr-2" placeholder="Reason" value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
<input type="text" class="form-control mr-2" placeholder={i18n.t('reason')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
<button type="submit" class="btn btn-secondary"><T i18nKey="remove_post">#</T></button>
</form>
}

View file

@ -54,7 +54,7 @@ export class Search extends Component<any, SearchState> {
}
componentDidMount() {
document.title = `Search - ${WebSocketService.Instance.site.name}`;
document.title = `${i18n.t('search')} - ${WebSocketService.Instance.site.name}`;
}
render() {
@ -62,7 +62,7 @@ export class Search extends Component<any, SearchState> {
<div class="container">
<div class="row">
<div class="col-12">
<h5>Search</h5>
<h5><T i18nKey="search">#</T></h5>
{this.selects()}
{this.searchForm()}
{this.state.type_ == SearchType.Both &&
@ -85,7 +85,7 @@ export class Search extends Component<any, SearchState> {
searchForm() {
return (
<form class="form-inline" onSubmit={linkEvent(this, this.handleSearchSubmit)}>
<input type="text" class="form-control mr-2" value={this.state.q} placeholder="Search..." onInput={linkEvent(this, this.handleQChange)} required minLength={3} />
<input type="text" class="form-control mr-2" value={this.state.q} placeholder={`${i18n.t('search')}...`} onInput={linkEvent(this, this.handleQChange)} required minLength={3} />
<button type="submit" class="btn btn-secondary mr-2">
{this.state.loading ?
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :

View file

@ -97,7 +97,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{/* TODO hold off on expires for now */}
{/* <div class="form-group row"> */}
{/* <label class="col-form-label">Expires</label> */}
{/* <input type="date" class="form-control mr-2" placeholder="Expires" value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
{/* </div> */}
<div class="form-group row">
<button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>

View file

@ -65,7 +65,7 @@ export class Sponsors extends Component<any, any> {
bitcoin() {
return (
<div>
<h5>Crypto</h5>
<h5><T i18nKey="crypto">#</T></h5>
<div class="table-responsive">
<table class="table table-hover text-center">
<tbody>

View file

@ -219,7 +219,7 @@ export class User extends Component<any, UserState> {
return (
<div>
<h5>{user.name}</h5>
<div>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>