add sort switcher

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}`);
 

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

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

web/app/components/auth-panel/__sort/auth-panel__sort.scss

@@ -0,0 +1,3 @@
+.auth-panel__sort {
+  white-space: nowrap;
+}

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 (
       <div className={b('auth-panel', props)}>
@@ -65,17 +74,64 @@ export default class AuthPanel extends Component {
           )
         }
 
-        {
-          user.admin && (
-            <div className="auth-panel__column">
+        <div className="auth-panel__column">
+          {
+            user.admin && (
               <span
-                className="auth-panel__pseudo-link"
+                className="auth-panel__pseudo-link auth-panel__admin-action"
                 onClick={this.toggleBlockedVisibility}
-              >{isBlockedVisible ? 'hide' : 'show'} blocked</span>
-            </div>
-          )
-        }
+              >{isBlockedVisible ? 'Hide' : 'Show'} blocked</span>
+            )
+          }
+
+          {user.admin && ' • '}
+
+          {
+            !!user.name && (
+              <span className="auth-panel__sort">
+                Sort by
+                {' '}
+                <select className="auth-panel__select" onChange={this.onSortChange}>
+                  {
+                    sortArray.map(sort => (
+                      <option value={sort.value} selected={sort.selected}>{sort.label}</option>
+                    ))
+                  }
+                </select>
+              </span>
+            )
+          }
+        </div>
       </div>
     );
   }
 }
+
+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;
+  });
+}

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

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}
           />
 
           {

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