sort columns in New Table complete

src/api/getAllEntries.js

@@ -38,7 +38,7 @@ const getAllEntries = (
               ...item,
               evaluations: {
                 ...item.evaluations,
-                [`${test.metric}.${test.name}`]: 'N/A',
+                [`${test.metric}.${test.name}`]: -999999999,
               },
             };
           }

src/pages/NewTable/NewTable.js

@@ -9,10 +9,17 @@ import TableRowTags from './components/TableRowTags';
 import TableRowItems from './components/TableRowItems';
 import TableRowButtons from './components/TableRowButtons';
 
-const NewTable = ({ items, orderedKeys }) => {
+const NewTable = ({ items, orderedKeys, sortByUpdate }) => {
+  const [, updateState] = React.useState();
+  const tableUpdate = React.useCallback(() => updateState({}), []);
+
   return (
     <NewTableStyle>
-      <TableHeader orderedKeys={orderedKeys} />
+      <TableHeader
+        orderedKeys={orderedKeys}
+        sortByUpdate={sortByUpdate}
+        tableUpdate={tableUpdate}
+      />
       {items.map((item, i) => {
         return (
           <tr key={`table-row-${i}`} className="NewTableStyle__tr">

src/pages/NewTable/NewTablePageTest.js

@@ -16,11 +16,9 @@ const NewTablePageTest = (props) => {
   const [entries, setEntries] = React.useState([]);
   const [pageNr, setPageNr] = React.useState(1);
   const [loading, setLoading] = React.useState(true);
-  // eslint-disable-next-line
+  const [idSorted, setIdSorted] = React.useState([]);
   const [scoresSorted, setScoresSorted] = React.useState([]);
-  // eslint-disable-next-line
   const [submitterSorted, setSubmitterSorted] = React.useState(false);
-  // eslint-disable-next-line
   const [whenSorted, setWhenSorted] = React.useState(false);
 
   React.useEffect(() => {
@@ -38,6 +36,80 @@ const NewTablePageTest = (props) => {
     );
   };
 
+  const sortByUpdate = (elem) => {
+    let newEntries = entries.slice();
+    const possibleMetrics = orderKeys(entries[0]).filter(
+      (key) => !['id', 'submitter', 'when'].includes(key)
+    );
+    let metricIndex = possibleMetrics.indexOf(elem);
+    let newScoresSorted = scoresSorted.slice();
+    switch (elem) {
+      case 'id':
+        if (idSorted) {
+          setIdSorted(false);
+          newEntries = newEntries.sort((a, b) =>
+            a.id > b.id ? 1 : b.id > a.id ? -1 : 0
+          );
+        } else {
+          setIdSorted(true);
+          newEntries = newEntries.sort((a, b) =>
+            a.id < b.id ? 1 : b.id < a.id ? -1 : 0
+          );
+        }
+        break;
+      case 'submitter':
+        if (submitterSorted) {
+          setSubmitterSorted(false);
+          newEntries = newEntries.sort((a, b) =>
+            a.submitter.toLowerCase() < b.submitter.toLowerCase()
+              ? 1
+              : b.submitter.toLowerCase() < a.submitter.toLowerCase()
+              ? -1
+              : 0
+          );
+        } else {
+          setSubmitterSorted(true);
+          newEntries = newEntries.sort((a, b) =>
+            a.submitter.toLowerCase() > b.submitter.toLowerCase()
+              ? 1
+              : b.submitter.toLowerCase() > a.submitter.toLowerCase()
+              ? -1
+              : 0
+          );
+        }
+        break;
+      case 'when':
+        if (whenSorted) {
+          setWhenSorted(false);
+          newEntries = newEntries.sort((a, b) =>
+            a.when < b.when ? 1 : b.when < a.when ? -1 : 0
+          );
+        } else {
+          setWhenSorted(true);
+          newEntries = newEntries.sort((a, b) =>
+            a.when > b.when ? 1 : b.when > a.when ? -1 : 0
+          );
+        }
+        break;
+      default:
+        if (scoresSorted[metricIndex]) {
+          newEntries = newEntries.sort(
+            (a, b) => (b ? b[elem] : -1) - (a ? a[elem] : -1)
+          );
+          newScoresSorted[metricIndex] = false;
+          setScoresSorted(newScoresSorted);
+        } else {
+          newEntries = newEntries.sort(
+            (a, b) => (a ? a[elem] : -1) - (b ? b[elem] : -1)
+          );
+          newScoresSorted[metricIndex] = true;
+          setScoresSorted(newScoresSorted);
+        }
+        break;
+    }
+    setEntries(newEntries);
+  };
+
   const orderKeys = (elem) => {
     if (elem) {
       let result = ['id', 'submitter'];
@@ -79,7 +151,11 @@ const NewTablePageTest = (props) => {
           }
         />
         {elements.length > 0 && entries[0] && (
-          <NewTable items={elements} orderedKeys={orderKeys(entries[0])} />
+          <NewTable
+            items={elements}
+            orderedKeys={orderKeys(entries[0])}
+            sortByUpdate={sortByUpdate}
+          />
         )}
         <Pager
           pageNr={pageNr}

src/pages/NewTable/components/TableHeader/TableHeader.js

@@ -4,14 +4,35 @@ import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon';
 import { FlexRow } from '../../../../utils/containers';
 
 const TableHeader = (props) => {
+  const [activeIcon, setActiveIcon] = React.useState(null);
+  const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
+
   return (
     <tr className="NewTableStyle__tr-header">
       {props.orderedKeys.map((keyValue, i) => {
         return (
-          <th key={`table-header-${i}`} className="NewTableStyle__th">
+          <th
+            key={`table-header-${i}`}
+            className="NewTableStyle__th"
+            onClick={() => {
+              if (activeIcon === i) {
+                let newRotateActiveIcon = !rotateActiveIcon;
+                setRotateActiveIcon(newRotateActiveIcon);
+              } else {
+                setRotateActiveIcon(false);
+              }
+              setActiveIcon(i);
+              props.sortByUpdate(keyValue);
+              props.tableUpdate();
+            }}
+          >
             {keyValue}
             <SortButtonContainerStyle as="span" column={keyValue}>
-              <ColumnFilterIcon index={1} active={2} rotateIcon={false} />
+              <ColumnFilterIcon
+                index={i}
+                active={activeIcon}
+                rotateIcon={rotateActiveIcon}
+              />
             </SortButtonContainerStyle>
           </th>
         );

src/pages/NewTable/components/TableRowItems/TableRowItems.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RENDER_WHEN } from '../../../../utils/globals';
+import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../utils/globals';
 
 const TableRowItems = ({ orderedKeys, item, i }) => {
   return (
@@ -7,7 +7,9 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
       {orderedKeys.map((keyValue, j) => {
         return (
           <td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
-            {keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]}
+            {keyValue === 'when'
+              ? RENDER_WHEN(item[keyValue])
+              : RENDER_METRIC_VALUE(item[keyValue])}
           </td>
         );
       })}

src/pages/NewTable/styles/SortButtonContainerStyle.js

@@ -1,16 +1,10 @@
 import styled from 'styled-components';
 import { FlexRow } from '../../../utils/containers';
 
-const getRightAttribute = (column) => {
-  const staticColumns = ['id', 'when'];
-  if (staticColumns.includes(column)) return '32%';
-  return '16%';
-};
-
 const SortButtonContainerStyle = styled(FlexRow)`
   position: absolute;
   top: 15px;
-  right: ${({ column }) => getRightAttribute(column)};
+  right: 16%;
 `;
 
 export default SortButtonContainerStyle;

src/utils/globals.js

@@ -111,6 +111,11 @@ const RENDER_WHEN = (when) => {
   return `${when.slice(0, 10)} ${when.slice(11, 16)}`;
 };
 
+const RENDER_METRIC_VALUE = (value) => {
+  if (value <= -999999999) return 'N/A';
+  else return value;
+};
+
 const EVALUATIONS_FORMAT = (evaluate) => {
   if (Object.hasOwn(evaluate, 'score')) return evaluate.score.slice(0, 7);
   return evaluate.slice(0, 7);
@@ -146,6 +151,7 @@ export {
   RENDER_ICO,
   CALC_PAGES,
   RENDER_DEADLINE_TIME,
+  RENDER_METRIC_VALUE,
   IS_MOBILE,
   RENDER_WHEN,
   EVALUATIONS_FORMAT,