refactor Leaderboard and new Table component structure

src/api/getChallengeLeaderboard.js

@@ -47,6 +47,8 @@ const getChallengeLeaderboard = (
           id: submission.id,
           submitter: submission.submitter,
           when: submission.when,
+          description: submission.description,
+          entries: submission.times,
           tags: submission.tags,
         };
         result.push(item);

src/components/generic/Table/Table.js

@@ -1,20 +1,16 @@
 import React from 'react';
-import pensilIco from '../../../assets/pencil_ico.svg';
-import deleteIco from '../../../assets/delete_ico.svg';
 import TableStyle from './styles/TableStyle';
 import TableHeader from './components/TableHeader';
-import TableRowTags from './components/TableRowTags';
 import TableRowItems from './components/TableRowItems';
-import TableRowButtons from './components/TableRowButtons';
 import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
-import { FlexRow } from '../../../utils/containers';
+import TableRowFooter from './components/TableRowFooter';
 
-const Table = ({ items, orderedKeys, sortByUpdate }) => {
+const Table = ({ items, orderedKeys, sortByUpdate, rowFooter = true }) => {
   const [, updateState] = React.useState();
   const tableUpdate = React.useCallback(() => updateState({}), []);
 
   return (
-    <TableStyle>
+    <TableStyle rowFooter={rowFooter}>
       <TableHeader
         orderedKeys={orderedKeys}
         sortByUpdate={sortByUpdate}
@@ -24,15 +20,7 @@ const Table = ({ items, orderedKeys, sortByUpdate }) => {
         return (
           <tr key={`table-row-${i}`} className="TableStyle__tr">
             <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-            <FlexRow className="TableStyle__row-footer">
+            <TableRowFooter rowFooter={rowFooter} item={item} i={i} />
-              <TableRowTags item={item} i={i} />
-              <TableRowButtons
-                buttons={[
-                  { icon: pensilIco, handler: () => console.log('edit') },
-                  { icon: deleteIco, handler: () => console.log('delete') },
-                ]}
-              />
-            </FlexRow>
             <RowsBackgroundStyle i={i} />
           </tr>
         );

src/components/generic/Table/components/TableRowFooter/TableRowFooter.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FlexRow } from '../../../../../utils/containers';
+import TableRowTags from '../TableRowTags/TableRowTags';
+import TableRowButtons from '../TableRowButtons/TableRowButtons';
+import pensilIco from '../../../../../assets/pencil_ico.svg';
+import deleteIco from '../../../../../assets/delete_ico.svg';
+
+const TableRowFooter = ({ rowFooter, item, i }) => {
+  if (rowFooter) {
+    return (
+      <FlexRow className="TableStyle__row-footer">
+        <TableRowTags item={item} i={i} />
+        <TableRowButtons
+          buttons={[
+            { icon: pensilIco, handler: () => console.log('edit') },
+            { icon: deleteIco, handler: () => console.log('delete') },
+          ]}
+        />
+      </FlexRow>
+    );
+  }
+};
+
+export default TableRowFooter;

src/components/generic/Table/components/TableRowFooter/index.js

@@ -0,0 +1 @@
+export { default } from './TableRowFooter';

src/components/generic/Table/components/TableRowTags/renderTags.js

@@ -1,7 +1,7 @@
 import { FlexRow } from '../../../../../utils/containers';
 
 const renderTags = (tags, i) => {
-  if (tags.length > 0) {
+  if (tags && tags.length > 0) {
     return tags.map((tag, j) => {
       return (
         <FlexRow className="TableStyle__tag" key={`submissionTag-${i}-${j}`}>

src/components/generic/Table/styles/TableStyle.js

@@ -19,12 +19,13 @@ const TableStyle = styled.table`
 
   .TableStyle__tr {
     position: relative;
-    height: 72px;
+    height: ${({ rowFooter }) => (rowFooter ? '72px' : 'auto')};
   }
 
   .TableStyle__td {
-    padding: 0 0 32px 0;
+    padding: ${({ rowFooter }) => (rowFooter ? '0 0 32px 0' : '12px 0')};
     margin: 0 0 0 2px;
+    min-width: 80px;
   }
 
   .TableStyle_line {

src/pages/Leaderboard/Leaderboard.js

@@ -17,8 +17,8 @@ const Leaderboard = (props) => {
   const [pageNr, setPageNr] = React.useState(1);
   const [loading, setLoading] = React.useState(true);
   const [submitterSorted, setSubmitterSorted] = React.useState(false);
-  // const [descriptionSorted, setDescriptionSorted] = React.useState(false);
+  const [descriptionSorted, setDescriptionSorted] = React.useState(false);
-  // const [entriesSorted, setEntriesSorted] = React.useState(false);
+  const [entriesSorted, setEntriesSorted] = React.useState(false);
   const [whenSorted, setWhenSorted] = React.useState(false);
   const [scoresSorted, setScoresSorted] = React.useState([]);
   const [idSorted, setIdSorted] = React.useState([]);
@@ -80,6 +80,40 @@ const Leaderboard = (props) => {
             );
           }
           break;
+        case 'description':
+          if (descriptionSorted) {
+            newEntries = newEntries.sort((a, b) =>
+              a.description.toLowerCase() < b.description.toLowerCase()
+                ? 1
+                : b.description.toLowerCase() < a.description.toLowerCase()
+                ? -1
+                : 0
+            );
+            setDescriptionSorted(false);
+          } else {
+            newEntries = newEntries.sort((a, b) =>
+              a.description.toLowerCase() > b.description.toLowerCase()
+                ? 1
+                : b.description.toLowerCase() > a.description.toLowerCase()
+                ? -1
+                : 0
+            );
+            setDescriptionSorted(true);
+          }
+          break;
+        case 'times':
+          if (entriesSorted) {
+            newEntries = newEntries.sort((a, b) =>
+              a.times > b.times ? 1 : b.times > a.times ? -1 : 0
+            );
+            setEntriesSorted(false);
+          } else {
+            newEntries = newEntries.sort((a, b) =>
+              a.times < b.times ? 1 : b.times < a.times ? -1 : 0
+            );
+            setEntriesSorted(true);
+          }
+          break;
         case 'when':
           if (whenSorted) {
             setWhenSorted(false);
@@ -111,11 +145,19 @@ const Leaderboard = (props) => {
       }
       setEntries(newEntries);
     },
-    [entries, idSorted, scoresSorted, submitterSorted, whenSorted]
+    [
+      descriptionSorted,
+      entries,
+      entriesSorted,
+      idSorted,
+      scoresSorted,
+      submitterSorted,
+      whenSorted,
+    ]
   );
 
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
-  let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
+  const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
 
   return (
     <FlexColumn
@@ -138,11 +180,12 @@ const Leaderboard = (props) => {
               items={elements}
               orderedKeys={orderKeys(entries[0])}
               sortByUpdate={sortByUpdate}
+              rowFooter={false}
             />
           )}
           <Pager
             pageNr={pageNr}
-            elements={entries}
+            elements={elements}
             setPageNr={setPageNr}
             width="72px"
             borderRadius="64px"
@@ -158,34 +201,3 @@ const Leaderboard = (props) => {
 };
 
 export default Leaderboard;
-
-// case 'description':
-//   if (descriptionSorted) {
-//     newEntries = newEntries.sort((a, b) =>
-//       a.description.toLowerCase() < b.description.toLowerCase()
-//         ? 1
-//         : b.description.toLowerCase() < a.description.toLowerCase()
-//         ? -1
-//         : 0
-//     );
-//     setDescriptionSorted(false);
-//   } else {
-//     newEntries = newEntries.sort((a, b) =>
-//       a.description.toLowerCase() > b.description.toLowerCase()
-//         ? 1
-//         : b.description.toLowerCase() > a.description.toLowerCase()
-//         ? -1
-//         : 0
-//     );
-//     setDescriptionSorted(true);
-//   }
-//   break;
-// case 'entries':
-//   if (entriesSorted) {
-//     newEntries = newEntries.sort((a, b) => b.times - a.times);
-//     setEntriesSorted(false);
-//   } else {
-//     newEntries = newEntries.sort((a, b) => a.times - b.times);
-//     setEntriesSorted(true);
-//   }
-//   break;

src/pages/Leaderboard/orderKeys.js

@@ -1,6 +1,6 @@
 const orderKeys = (elem) => {
   if (elem) {
-    let result = ['id'];
+    let result = ['id', 'submitter', 'description'];
     const elemKeys = Object.keys(elem);
     const dev0keys = elemKeys
       .filter((key) => key.split('.')[1] === 'dev-0')
@@ -14,7 +14,7 @@ const orderKeys = (elem) => {
     result = result.concat(dev0keys);
     result = result.concat(dev1keys);
     result = result.concat(testAkeys);
-    result.push('when');
+    result.push('entries', 'when');
     return result;
   }
   return null;