Sort panel URL persistency

app/static/app/js/components/Paginator.jsx

@@ -9,15 +9,16 @@ class Paginator extends React.Component {
     constructor(props){
         super(props);
 
+        const q = Utils.queryParams(props.location);
+
         this.state = {
             showSearch: false,
-            sortKey: "-created_at"
+            sortKey: q.ordering
         }
 
         this.sortItems = [{
             key: "created_at",
-            label: _("Created on"),
-            selected: "desc"
+            label: _("Created on")
           },{
             key: "name",
             label: _("Name")
@@ -54,7 +55,7 @@ class Paginator extends React.Component {
                 <li><a href="javascript:void(0);"><i className="fa fa-filter" title={_("Filter")}></i></a></li>
                 <li className="btn-group">
                     <a href="javascript:void(0);" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i className="fa fa-sort-alpha-down" title={_("Sort")}></i></a>
-                    <SortPanel items={this.sortItems} onChange={this.sortChanged} />
+                    <SortPanel selected={this.state.sortKey} items={this.sortItems} onChange={this.sortChanged} />
                 </li>
             </ul>
         );

app/static/app/js/components/ProjectListItem.jsx

@@ -45,8 +45,7 @@ class ProjectListItem extends React.Component {
 
     this.sortItems = [{
         key: "created_at",
-        label: _("Created on"),
-        selected: "desc"
+        label: _("Created on")
       },{
         key: "name",
         label: _("Name")
@@ -583,7 +582,7 @@ class ProjectListItem extends React.Component {
                   <a href="javascript:void(0);" className="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     {_("Sort")}
                   </a>
-                  <SortPanel items={this.sortItems} onChange={this.sortChanged} />
+                  <SortPanel selected="-created_at" items={this.sortItems} onChange={this.sortChanged} />
                 </div>
               </div> : ""}
 

app/static/app/js/components/SortPanel.jsx

@@ -6,12 +6,14 @@ import { _ } from '../classes/gettext';
 class SortPanel extends React.Component {
   static defaultProps = {
     items: [],
-    onChange: () => {}
+    onChange: () => {},
+    selected: null
   };
 
   static propTypes = {
     items: PropTypes.arrayOf(PropTypes.object),
-    onChange: PropTypes.func
+    onChange: PropTypes.func,
+    selected: PropTypes.string
   };
 
   constructor(props){
@@ -20,6 +22,13 @@ class SortPanel extends React.Component {
     this.state = {
       items: props.items
     }
+
+    if (props.selected){
+      let normSortKey = props.selected.replace("-", "");
+      this.state.items.forEach(s => {
+          if (s.key === normSortKey) s.selected = props.selected[0] === "-" ? "desc" : "asc";
+      });
+    }
   }
 
   handleClick = (key, order) => {