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';