Added stateful URL parameters for opening project tasks's and individual task details

app/static/app/js/Dashboard.jsx

@@ -39,7 +39,7 @@ class Dashboard extends React.Component {
   render() {
     const projectList = ({ location, history }) => {
       let q = Utils.queryParams(location),
-          page = parseInt(q.page);
+          page = parseInt(q.page !== undefined ? q.page : 1);
 
       return <ProjectList
                 source={`/api/projects/?ordering=-created_at&page=${page}`}

app/static/app/js/classes/HistoryNav.js

@@ -1,16 +1,54 @@
 import Utils from './Utils';
 
+const SEP = ",";
+
 class HistoryNav{
   constructor(history){
     this.history = history;
   }
 
-  changeQueryString(param, value){
+  changeQS(param, value){
     this.history.replace(
       this.history.location.pathname + 
       Utils.replaceSearchQueryParam(this.history.location, param, value) + 
       this.history.location.hash);
   }
+
+  isValueInQSList(param, value){
+    let q = Utils.queryParams(this.history.location);
+    if (q[param]){
+      return q[param].split(SEP).find(v => v == value);
+    }else return false;
+  }
+
+  addToQSList(param, value){
+  	let q = Utils.queryParams(this.history.location);
+  	if (q[param]){
+      if (!this.isValueInQSList(param, value)){
+  		  this.changeQS(param, q[param] + SEP + value);
+      }
+  	}else{
+  		this.changeQS(param, value);
+  	}
+  }
+
+  removeFromQSList(param, value){
+  	let q = Utils.queryParams(this.history.location);
+  	if (q[param]){
+  		let parts = q[param].split(SEP);
+  		this.changeQS(param,
+  				parts.filter(p => p != value).join(SEP)
+  			);
+  	}
+  }
+
+  toggleQSListItem(param, value, add){
+    if (add){
+      this.addToQSList(param, value);
+    }else{
+      this.removeFromQSList(param, value);
+    }
+  }
 }
 
 export default HistoryNav;

app/static/app/js/classes/Utils.js

@@ -39,7 +39,7 @@ export default {
     toSearchQuery: function(params){
       let parts = [];
       for (let k in params){
-        parts.push(encodeURIComponent(k) + "=" + encodeURIComponent(params[k]));
+        parts.push(k + "=" + params[k]);
       }
       if (parts.length > 0) return "?" + parts.join("&");
       else return "";

app/static/app/js/components/Paginated.jsx

@@ -51,7 +51,7 @@ class Paginated extends React.Component{
 
     if (currentPage > pagesAfter) currentPage = pagesAfter;
 
-    this.historyNav.changeQueryString('page', currentPage);
+    this.historyNav.changeQS('page', currentPage);
 
     this.setPaginationState({
       totalItems: this.state.pagination.totalItems + delta

app/static/app/js/components/ProjectList.jsx

@@ -89,7 +89,11 @@ class ProjectList extends Paginated {
                 <Paginator className="text-right" {...this.state.pagination} {...this.props}>
                     <ul className={"list-group project-list " + (this.state.refreshing ? "refreshing" : "")}>
                         {this.state.projects.map(p => (
-                            <ProjectListItem key={p.id} data={p} onDelete={this.handleDelete} /> 
+                            <ProjectListItem 
+                                key={p.id} 
+                                data={p} 
+                                onDelete={this.handleDelete} 
+                                history={this.props.history} /> 
                         ))}
                     </ul>
                 </Paginator>

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

@@ -8,14 +8,17 @@ import ErrorMessage from './ErrorMessage';
 import EditProjectDialog from './EditProjectDialog';
 import Dropzone from '../vendor/dropzone';
 import csrf from '../django/csrf';
+import HistoryNav from '../classes/HistoryNav';
 import $ from 'jquery';
 
 class ProjectListItem extends React.Component {
   constructor(props){
     super(props);
 
+    this.historyNav = new HistoryNav(props.history);
+
     this.state = {
-      showTaskList: false,
+      showTaskList: this.historyNav.isValueInQSList("project_task_open", props.data.id),
       updatingTask: false,
       upload: this.getDefaultUploadState(),
       error: "",
@@ -201,8 +204,12 @@ class ProjectListItem extends React.Component {
   }
 
   toggleTaskList(){
+    const showTaskList = !this.state.showTaskList;
+
+    this.historyNav.toggleQSListItem("project_task_open", this.state.data.id, showTaskList);
+    
     this.setState({
-      showTaskList: !this.state.showTaskList
+      showTaskList: showTaskList
     });
   }
 
@@ -358,6 +365,7 @@ class ProjectListItem extends React.Component {
                 ref={this.setRef("taskList")} 
                 source={`/api/projects/${data.id}/tasks/?ordering=-created_at`}
                 onDelete={this.taskDeleted}
+                history={this.props.history}
             /> : ""}
 
         </div>

app/static/app/js/components/TaskList.jsx

@@ -3,8 +3,8 @@ import '../css/TaskList.scss';
 import TaskListItem from './TaskListItem';
 
 class TaskList extends React.Component {
-  constructor(){
+  constructor(props){
-    super();
+    super(props);
 
     this.state = {
       tasks: [],
@@ -75,7 +75,12 @@ class TaskList extends React.Component {
         {message}
 
         {this.state.tasks.map(task => (
-          <TaskListItem data={task} key={task.id} refreshInterval={3000} onDelete={this.deleteTask} />
+          <TaskListItem 
+            data={task} 
+            key={task.id} 
+            refreshInterval={3000} 
+            onDelete={this.deleteTask} 
+            history={this.props.history} />
         ))}
       </div>
     );

app/static/app/js/components/TaskListItem.jsx

@@ -6,13 +6,16 @@ import pendingActions from '../classes/PendingActions';
 import ErrorMessage from './ErrorMessage';
 import EditTaskDialog from './EditTaskDialog';
 import AssetDownloadButtons from './AssetDownloadButtons';
+import HistoryNav from '../classes/HistoryNav';
 
 class TaskListItem extends React.Component {
   constructor(props){
     super();
 
+    this.historyNav = new HistoryNav(props.history);
+
     this.state = {
-      expanded: false,
+      expanded: this.historyNav.isValueInQSList("project_task_expanded", props.data.id),
       task: {},
       time: props.data.processing_time,
       actionError: "",
@@ -111,8 +114,12 @@ class TaskListItem extends React.Component {
   }
 
   toggleExpanded(){
+    const expanded = !this.state.expanded;
+
+    this.historyNav.toggleQSListItem("project_task_expanded", this.props.data.id, expanded);
+    
     this.setState({
-      expanded: !this.state.expanded
+      expanded: expanded
     });
   }