Sorting tables remember the selected sorting column in the local storage.

Author: krulis-martin

src/components/Groups/ResultsTable/ResultsTable.js

@@ -423,7 +423,7 @@ class ResultsTable extends Component {
         total: userStats && userStats.points,
         passed: userStats,
         buttons: renderActions && hasPermissions(group, 'update') ? renderActions(user.id) : '',
-        // actually 'update' is not the right premission, but its sufficiently close :)
+        // actually 'update' is not the right permission, but its sufficiently close :)
       };
 
       assignments.forEach(assignment => {
@@ -470,6 +470,7 @@ class ResultsTable extends Component {
     return (
       <>
         <SortableTable
+          id="ResultsTable"
           hover
           columns={this.prepareColumnDescriptors(
             assignments,

src/components/SystemMessages/MessagesList/MessagesList.js

@@ -105,6 +105,7 @@ class MessagesList extends Component {
         />
         <hr className="m-0" />
         <SortableTable
+          id="MessageList"
           hover
           columns={this.prepareColumnDescriptors(locale)}
           defaultOrder="visibleTo"

src/components/widgets/SortableTable/SortableTable.js

@@ -7,14 +7,37 @@ import { lruMemoize } from 'reselect';
 import { UserUIDataContext } from '../../../helpers/contexts.js';
 import { CloseIcon, SortedIcon } from '../../icons';
 import withRouter, { withRouterProps } from '../../../helpers/withRouter.js';
+import { storageGetItem, storageSetItem } from '../../../helpers/localStorage.js';
+
+const localStorageKeyPrefix = 'SortableTable';
 
 class SortableTable extends Component {
   constructor(props) {
     super(props);
     this.state = { sortColumn: props.defaultOrder || null, ascendant: true };
   }
 
-  // Default row rendering fucntion (if the user does not provide custom function)
+  setSortColumnFromLocalStorage = () => {
+    const key = `${localStorageKeyPrefix}[${this.props.id}].order`;
+    const order = storageGetItem(key, null);
+    if (order) {
+      const ascendant = order[0] === '+';
+      const sortColumn = order.substring(1);
+      this.setState({ sortColumn, ascendant });
+    }
+  };
+
+  componentDidMount() {
+    this.setSortColumnFromLocalStorage();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.setSortColumnFromLocalStorage();
+    }
+  }
+
+  // Default row rendering function (if the user does not provide custom function)
   defaultRowRenderer = (row, idx, columns, openLinkGenerator = null) => {
     const { navigate } = this.props;
     const doubleClickLink = openLinkGenerator && openLinkGenerator(row, idx);
@@ -44,17 +67,24 @@ class SortableTable extends Component {
 
   // Change internal state that holds sorting parameters.
   orderBy = colId => {
-    const { columns } = this.props;
-    const { sortColumn, ascendant } = this.state;
+    const { id, columns } = this.props;
+    let { sortColumn, ascendant } = this.state;
     const column = columns && columns.find(({ id }) => id === colId);
+    const key = `${localStorageKeyPrefix}[${id}].order`;
 
     if (!colId || !column) {
-      this.setState({ sortColumn: null, ascendant: true });
+      sortColumn = null;
+      ascendant = true;
     } else if (colId === sortColumn) {
-      this.setState({ ascendant: !ascendant });
+      ascendant = !ascendant;
     } else {
-      this.setState({ sortColumn: colId, ascendant: true });
+      sortColumn = colId;
+      ascendant = true;
     }
+
+    const order = sortColumn ? `${ascendant ? '+' : '-'}${sortColumn}` : null;
+    storageSetItem(key, order);
+    this.setState({ sortColumn, ascendant });
   };
 
   // Helper function that actually sorts the data according to internal state
@@ -158,6 +188,7 @@ class SortableTable extends Component {
 }
 
 SortableTable.propTypes = {
+  id: PropTypes.string.isRequired,
   columns: PropTypes.array.isRequired,
   defaultOrder: PropTypes.string,
   data: PropTypes.array,

src/locales/cs.json

@@ -811,7 +811,7 @@
   "app.exercise.runtimes": "Běhová prostředí",
   "app.exercise.solutionFilesLimitExplanation": "Maximální počet odevzdaných souborů v řešení. Uživatelům není dovoleno odevzdávat řešení, která překračují tento limit. Limit se neaplikuje pokud není vyplněn.",
   "app.exercise.solutionSizeLimitExplanation": "Maximální celková velikost všech souborů v řešení. Uživatelům není dovoleno odevzdávat řešení, která překračují tento limit. Limit se neaplikuje pokud není vyplněn.",
-  "app.exercise.submitReferenceSoution": "Nové referenční řešení",
+  "app.exercise.submitReferenceSolution": "Nové referenční řešení",
   "app.exercise.title": "Podrobnosti úlohy",
   "app.exercise.validationErrors.config": "Konfigurace testů není kompletní, což se typicky stane, pokud přidáte test nebo smažete soubor",
   "app.exercise.validationErrors.limits": "Paměťové nebo časové limity nejsou správně nastaveny",

src/locales/en.json

@@ -811,7 +811,7 @@
   "app.exercise.runtimes": "Runtime environments",
   "app.exercise.solutionFilesLimitExplanation": "Maximal number of files submitted in a solution. The users are not allowed to submit solutions that exceed this limit. If empty, no limit is applied.",
   "app.exercise.solutionSizeLimitExplanation": "Maximal total size of all files submitted in a solution. The users are not allowed to submit solutions that exceed this limit. If empty, no limit is applied.",
-  "app.exercise.submitReferenceSoution": "New Reference Solution",
+  "app.exercise.submitReferenceSolution": "New Reference Solution",
   "app.exercise.title": "Exercise Detail",
   "app.exercise.validationErrors.config": "Configuration of some tests is incomplete; this typically happens when you add a test or delete a file",
   "app.exercise.validationErrors.limits": "Memory or time limits are not properly set",
@@ -1554,7 +1554,7 @@
   "app.referenceSolution.exerciseNoLongerHasEnvironment": "The exercise no longer supports the environment for which this solution was evaluated. Resubmission is not possible.",
   "app.referenceSolution.title": "Reference Solution Detail",
   "app.referenceSolution.visibility.private": "The solution is visible only to you.",
-  "app.referenceSolution.visibility.promoted": "The solution is promoted by the auhor of the exercise (recommended for reading to other supervisors)",
+  "app.referenceSolution.visibility.promoted": "The solution is promoted by the author of the exercise (recommended for reading to other supervisors)",
   "app.referenceSolution.visibility.public": "The solution is visible to all supervisors who can access this exercise.",
   "app.referenceSolutionDetail.comments.additionalSwitchNote": "(teachers who can see this reference solution)",
   "app.referenceSolutionDetail.title.details": "Reference Solution Detail",
@@ -2200,4 +2200,4 @@
   "recodex-judge-shuffle-all": "Unordered-tokens-and-rows judge",
   "recodex-judge-shuffle-newline": "Unordered-tokens judge (ignoring ends of lines)",
   "recodex-judge-shuffle-rows": "Unordered-rows judge"
-}
+}

src/pages/AssignmentSolutions/AssignmentSolutions.js

@@ -668,6 +668,7 @@ class AssignmentSolutions extends Component {
                         unlimitedHeight
                         noPadding>
                         <SortableTable
+                          id={`AssignmentSolutions.${this.state.viewMode}`}
                           hover
                           columns={prepareTableColumnDescriptors(
                             loggedUserId,

src/pages/Exercise/Exercise.js

@@ -192,7 +192,7 @@ class Exercise extends Component {
                                   />
                                 ) : (
                                   <FormattedMessage
-                                    id="app.exercise.submitReferenceSoution"
+                                    id="app.exercise.submitReferenceSolution"
                                     defaultMessage="New Reference Solution"
                                   />
                                 )}

src/pages/ExerciseReferenceSolutions/ExerciseReferenceSolutions.js

@@ -71,7 +71,7 @@ const prepareTableColumnDescriptors = lruMemoize((loggedUserId, locale, links, d
             tooltip={
               <FormattedMessage
                 id="app.referenceSolution.visibility.promoted"
-                defaultMessage="The solution is promoted by the auhor of the exercise (recommended for reading to other supervisors)"
+                defaultMessage="The solution is promoted by the author of the exercise (recommended for reading to other supervisors)"
               />
             }
           />
@@ -389,7 +389,7 @@ class ExerciseReferenceSolutions extends Component {
                         />
                       ) : (
                         <FormattedMessage
-                          id="app.exercise.submitReferenceSoution"
+                          id="app.exercise.submitReferenceSolution"
                           defaultMessage="New Reference Solution"
                         />
                       )}
@@ -446,6 +446,7 @@ class ExerciseReferenceSolutions extends Component {
                           unlimitedHeight>
                           <>
                             <SortableTable
+                              id="ReferenceSolutions"
                               hover
                               columns={prepareTableColumnDescriptors(userId, locale, links, deleteReferenceSolution)}
                               defaultOrder="createdAt"

src/pages/GroupUserSolutions/GroupUserSolutions.js

@@ -541,6 +541,7 @@ class GroupUserSolutions extends Component {
                             unlimitedHeight
                             noPadding>
                             <SortableTable
+                              id="GroupUserSolutions"
                               hover
                               columns={prepareTableColumnDescriptors(assignments, groupId, locale, links)}
                               defaultOrder="date"