grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Second front end pass.

Browse source
This commit is contained in:
Dessalines 2019-08-09 15:52:32 -07:00
parent 91a3d14393
commit 3060608a45
16 changed files with 36 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/src/components/comment-form.tsx
View file

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

7
ui/src/components/comment-node.tsx
View file

@ -195,10 +195,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* TODO hold off on expires until later */} {/* TODO hold off on expires until later */}
{/* <div class="form-group row"> */} {/* <div class="form-group row"> */}
{/* <label class="col-form-label">Expires</label> */} {/* <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> */}
<div class="form-group row"> <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> </div>
</form> </form>
} }
@ -389,9 +389,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
handleModBanBothSubmit(i: CommentNode) { handleModBanBothSubmit(i: CommentNode) {
event.preventDefault(); event.preventDefault();
console.log(BanType[i.state.banType]);
console.log(i.props.node.comment.banned);
if (i.state.banType == BanType.Community) { if (i.state.banType == BanType.Community) {
let form: BanFromCommunityForm = { let form: BanFromCommunityForm = {
user_id: i.props.node.comment.creator_id, user_id: i.props.node.comment.creator_id,

2
ui/src/components/comment-nodes.tsx
View file

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

11
ui/src/components/communities.tsx
View file

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

3
ui/src/components/community-form.tsx
View file

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

0
ui/src/components/home.tsx
View file

2
ui/src/components/inbox.tsx
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"> <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 disabled><T i18nKey="sort_type">#</T></option>
<option value={SortType.New}><T i18nKey="new">#</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.TopWeek}><T i18nKey="week">#</T></option>
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option> <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
<option value={SortType.TopYear}><T i18nKey="year">#</T></option> <option value={SortType.TopYear}><T i18nKey="year">#</T></option>

2
ui/src/components/login.tsx
View file

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

25
ui/src/components/main.tsx
View file

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

3
ui/src/components/moment-time.tsx
View file

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

1
ui/src/components/navbar.tsx
View file

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

4
ui/src/components/post-listing.tsx
View file

@ -76,7 +76,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<h5 className="mb-0 d-inline"> <h5 className="mb-0 d-inline">
{post.url ? {post.url ?
<a className="text-white" href={post.url} target="_blank" title={post.url}>{post.name}</a> : <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> </h5>
{post.url && {post.url &&
@ -176,7 +176,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
} }
{this.state.showRemoveDialog && {this.state.showRemoveDialog &&
<form class="form-inline" onSubmit={linkEvent(this, this.handleModRemoveSubmit)}> <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> <button type="submit" class="btn btn-secondary"><T i18nKey="remove_post">#</T></button>
</form> </form>
} }

6
ui/src/components/search.tsx
View file

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

2
ui/src/components/sidebar.tsx
View file

@ -97,7 +97,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
{/* TODO hold off on expires for now */} {/* TODO hold off on expires for now */}
{/* <div class="form-group row"> */} {/* <div class="form-group row"> */}
{/* <label class="col-form-label">Expires</label> */} {/* <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> */}
<div class="form-group row"> <div class="form-group row">
<button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button> <button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>

2
ui/src/components/sponsors.tsx
View file

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

2
ui/src/components/user.tsx
View file

@ -219,7 +219,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
<h5>{user.name}</h5> <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"> <table class="table table-bordered table-sm mt-2">
<tr> <tr>
<td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td> <td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>