diff --git a/web/app/common/api.js b/web/app/common/api.js index 109c2d9f..34d1a70c 100644 --- a/web/app/common/api.js +++ b/web/app/common/api.js @@ -10,7 +10,7 @@ export const logOut = () => fetcher.get({ url: `/auth/logout`, overriddenApiBase export const getConfig = () => fetcher.get(`/config`); -export const find = ({ url }) => fetcher.get(`/find?url=${url}&sort=-score&format=tree`); +export const find = ({ sort, url }) => fetcher.get(`/find?url=${url}&sort=${sort}&format=tree`); export const last = ({ siteId, max }) => fetcher.get(`/last/${max}?site=${siteId}`); diff --git a/web/app/common/fetcher.js b/web/app/common/fetcher.js index 95733d54..5f5b9e26 100644 --- a/web/app/common/fetcher.js +++ b/web/app/common/fetcher.js @@ -1,5 +1,3 @@ -import 'common/promises'; - // TODO: i've tried to rewrite it to unfetch but it wasn't easy to make it work // we need to try again later import axios from 'axios'; diff --git a/web/app/components/auth-panel/__column/auth-panel__column.scss b/web/app/components/auth-panel/__column/auth-panel__column.scss index ef121b47..3dadbf14 100644 --- a/web/app/components/auth-panel/__column/auth-panel__column.scss +++ b/web/app/components/auth-panel/__column/auth-panel__column.scss @@ -1,5 +1,11 @@ .auth-panel__column { + &:nth-child(1) { + overflow: hidden; + text-overflow: ellipsis; + } + &:nth-child(2) { margin-left: 8px; + text-align: right; } } diff --git a/web/app/components/auth-panel/__sort/auth-panel__sort.scss b/web/app/components/auth-panel/__sort/auth-panel__sort.scss new file mode 100644 index 00000000..98c89e91 --- /dev/null +++ b/web/app/components/auth-panel/__sort/auth-panel__sort.scss @@ -0,0 +1,3 @@ +.auth-panel__sort { + white-space: nowrap; +} diff --git a/web/app/components/auth-panel/auth-panel.jsx b/web/app/components/auth-panel/auth-panel.jsx index 0883ec38..5895f65f 100644 --- a/web/app/components/auth-panel/auth-panel.jsx +++ b/web/app/components/auth-panel/auth-panel.jsx @@ -6,6 +6,13 @@ export default class AuthPanel extends Component { this.toggleUserId = this.toggleUserId.bind(this); this.toggleBlockedVisibility = this.toggleBlockedVisibility.bind(this); + this.onSortChange = this.onSortChange.bind(this); + } + + onSortChange(e) { + if (this.props.onSortChange) { + this.props.onSortChange(e.target.value); + } } toggleUserId() { @@ -23,7 +30,9 @@ export default class AuthPanel extends Component { } render(props, { isUserIdVisible, isBlockedVisible }) { - const { user, providers = [] } = props; + const { user, providers = [], sort } = props; + + const sortArray = getSortArray(sort); return (
@@ -65,17 +74,64 @@ export default class AuthPanel extends Component { ) } - { - user.admin && ( -
+
+ { + user.admin && ( {isBlockedVisible ? 'hide' : 'show'} blocked -
- ) - } + >{isBlockedVisible ? 'Hide' : 'Show'} blocked + ) + } + + {user.admin && ' • '} + + { + !!user.name && ( + + Sort by + {' '} + + + ) + } +
); } } + +function getSortArray(currentSort) { + const sortArray = [ + { + value: '-score', + label: 'Best', + }, + { + value: '+score', + label: 'Worst', + }, + { + value: '-time', + label: 'Newest', + }, + { + value: '+time', + label: 'Oldest', + }, + ]; + + return sortArray.map(sort => { + if (sort.value === currentSort) { + sort.selected = true; + } + + return sort; + }); +} diff --git a/web/app/components/auth-panel/index.js b/web/app/components/auth-panel/index.js index a5718048..2bc0ac08 100644 --- a/web/app/components/auth-panel/index.js +++ b/web/app/components/auth-panel/index.js @@ -2,6 +2,8 @@ export { default } from './auth-panel'; require('./auth-panel.scss'); +require('./__column/auth-panel__column.scss'); require('./__pseudo-link/auth-panel__pseudo-link.scss'); +require('./__sort/auth-panel__sort.scss'); require('./__username/auth-panel__username.scss'); require('./__user-id/auth-panel__user-id.scss'); diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index 0b05288c..4dbe89ef 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -20,6 +20,7 @@ export default class Root extends Component { loaded: false, user: {}, replyingCommentId: null, + sort: '-score', }; this.addComment = this.addComment.bind(this); @@ -28,6 +29,7 @@ export default class Root extends Component { this.onBlockedUsersShow = this.onBlockedUsersShow.bind(this); this.onBlockedUsersHide = this.onBlockedUsersHide.bind(this); this.onReplyClick = this.onReplyClick.bind(this); + this.onSortChange = this.onSortChange.bind(this); this.onUnblockSomeone = this.onUnblockSomeone.bind(this); this.checkUrlHash = this.checkUrlHash.bind(this); } @@ -38,11 +40,13 @@ export default class Root extends Component { } componentDidMount() { + const { sort } = this.state; + api.getUser() .then(data => store.set('user', data)) .catch(() => store.set('user', {})) .finally(() => { - api.find({ url }) + api.find({ sort, url }) .then(({ comments = [] } = {}) => store.set('comments', comments)) .catch(() => store.set('comments', [])) .finally(() => { @@ -111,9 +115,11 @@ export default class Root extends Component { } onBlockedUsersHide() { + const { wasSomeoneUnblocked, sort } = this.state; + // if someone was unblocked let's reload comments - if (this.state.wasSomeoneUnblocked) { - api.find({ url }).then(({ comments } = {}) => store.set('comments', comments)); + if (wasSomeoneUnblocked) { + api.find({ sort, url }).then(({ comments } = {}) => store.set('comments', comments)); } this.setState({ @@ -130,6 +136,14 @@ export default class Root extends Component { this.onPrevReplyClickCallback = cb; } + onSortChange(sort) { + if (sort === this.state.sort) return; + + this.setState({ sort }); + + api.find({ sort, url }).then(({ comments } = {}) => store.set('comments', comments)); + } + onUnblockSomeone() { this.setState({ wasSomeoneUnblocked: true }); } @@ -170,6 +184,7 @@ export default class Root extends Component { onSignOut={this.onSignOut} onBlockedUsersShow={this.onBlockedUsersShow} onBlockedUsersHide={this.onBlockedUsersHide} + onSortChange={this.onSortChange} /> { diff --git a/web/app/remark.js b/web/app/remark.js index e93616c4..2b059dbd 100644 --- a/web/app/remark.js +++ b/web/app/remark.js @@ -1,4 +1,5 @@ import 'babel-polyfill'; // TODO: remove it +import 'common/promises'; import 'common/polyfills'; // TODO: check it import { h, render } from 'preact';