prototype delete worked

src/api/deleteSubmission.js

@@ -1,7 +1,7 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
 
-const deleteSubmission = (submissionId) => {
+const deleteSubmission = async (submissionId) => {
   fetch(`${API}/delete-submission/${submissionId}`, {
     method: 'POST',
     headers: {

src/api/getChallengeLeaderboard.js

@@ -44,12 +44,7 @@ const getChallengeLeaderboard = (
         }
         item = {
           ...item.evaluations,
-          id: submission.id,
+          ...submission,
-          submitter: submission.submitter,
-          when: submission.when,
-          description: submission.description,
-          entries: submission.times,
-          tags: submission.tags,
         };
         result.push(item);
         item = {};

src/api/getEntries.js

@@ -44,14 +44,12 @@ const getEntries = (
         }
         item = {
           ...item.evaluations,
-          id: submission.id,
+          ...submission,
-          submitter: submission.submitter,
-          when: submission.when,
-          tags: submission.tags,
         };
         result.push(item);
         item = {};
       }
+      result = result.filter((item) => !item.deleted);
       // eslint-disable-next-line no-unused-vars
       for (let _ of tests) {
         initSetScoreSorted.push(false);

src/api/getMyEntries.js

@@ -1,64 +0,0 @@
-import { API } from '../utils/globals';
-import KeyCloakService from '../services/KeyCloakService';
-
-const getMyEntries = (
-  challengeName,
-  setDataStates,
-  setLoadingState,
-  setScoreSorted
-) => {
-  fetch(`${API}/challenge-my-submissions/${challengeName}`, {
-    headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      let item = {};
-      let result = [];
-      let initSetScoreSorted = [];
-      let tests = data.tests;
-      for (let submission of data.submissions) {
-        for (let evaluation of submission.evaluations) {
-          item = {
-            ...item,
-            evaluations: {
-              ...item.evaluations,
-              [`${evaluation.test.metric}.${evaluation.test.name}`]:
-                evaluation.score,
-            },
-          };
-        }
-        for (let test of tests) {
-          if (!item.evaluations) {
-            item.evaluations = {};
-          }
-          if (!Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)) {
-            item = {
-              ...item,
-              evaluations: {
-                ...item.evaluations,
-                [`${test.metric}.${test.name}`]: -999999999,
-              },
-            };
-          }
-        }
-        item = {
-          ...item.evaluations,
-          id: submission.id,
-          submitter: submission.submitter,
-          when: submission.when,
-          tags: submission.tags,
-        };
-        result.push(item);
-        item = {};
-      }
-      // eslint-disable-next-line no-unused-vars
-      for (let _ of tests) {
-        initSetScoreSorted.push(false);
-      }
-      for (let setDataState of setDataStates) setDataState(result);
-      if (setScoreSorted) setScoreSorted(initSetScoreSorted);
-      if (setLoadingState) setLoadingState(false);
-    });
-};
-
-export default getMyEntries;

src/components/generic/Table/Table.js

@@ -4,10 +4,20 @@ import TableHeader from './components/TableHeader';
 import TableRowItems from './components/TableRowItems';
 import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
 import TableRowFooter from './components/TableRowFooter';
+import deleteSubmission from '../../../api/deleteSubmission';
 
 const Table = ({ items, orderedKeys, sortByUpdate, rowFooter = true }) => {
   const [, updateState] = React.useState();
   const tableUpdate = React.useCallback(() => updateState({}), []);
+  const [deletedItems, setDeletedItems] = React.useState([]);
+  const itemsToRender = items.filter((item) => !deletedItems.includes(item));
+
+  const deleteItem = async (item) => {
+    await deleteSubmission(item.id);
+    let newDeletedItems = deletedItems.slice();
+    newDeletedItems.push(item);
+    setDeletedItems(newDeletedItems);
+  };
 
   return (
     <TableStyle rowFooter={rowFooter}>
@@ -16,11 +26,16 @@ const Table = ({ items, orderedKeys, sortByUpdate, rowFooter = true }) => {
         sortByUpdate={sortByUpdate}
         tableUpdate={tableUpdate}
       />
-      {items.map((item, i) => {
+      {itemsToRender.map((item, i) => {
         return (
           <tr key={`table-row-${i}`} className="TableStyle__tr">
             <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-            <TableRowFooter rowFooter={rowFooter} item={item} i={i} />
+            <TableRowFooter
+              deleteItem={deleteItem}
+              rowFooter={rowFooter}
+              item={item}
+              i={i}
+            />
             <RowsBackgroundStyle i={i} />
           </tr>
         );

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

@@ -5,7 +5,7 @@ import TableRowButtons from '../TableRowButtons/TableRowButtons';
 import pensilIco from '../../../../../assets/pencil_ico.svg';
 import deleteIco from '../../../../../assets/delete_ico.svg';
 
-const TableRowFooter = ({ rowFooter, item, i }) => {
+const TableRowFooter = ({ rowFooter, item, i, deleteItem }) => {
   if (rowFooter) {
     return (
       <FlexRow className="TableStyle__row-footer">
@@ -13,7 +13,7 @@ const TableRowFooter = ({ rowFooter, item, i }) => {
         <TableRowButtons
           buttons={[
             { icon: pensilIco, handler: () => console.log('edit') },
-            { icon: deleteIco, handler: () => console.log('delete') },
+            { icon: deleteIco, handler: () => deleteItem(item) },
           ]}
         />
       </FlexRow>

src/components/generic/Table/components/TableRowItems/TableRowItems.js

@@ -2,14 +2,20 @@ import React from 'react';
 import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../../utils/globals';
 
 const TableRowItems = ({ orderedKeys, item, i }) => {
+  const renderValue = (keyValue) => {
+    if (keyValue === 'when') {
+      return RENDER_WHEN(item[keyValue]);
+    } else {
+      return RENDER_METRIC_VALUE(item[keyValue]);
+    }
+  };
+
   return (
     <>
       {orderedKeys.map((keyValue, j) => {
         return (
           <td key={`table-item-${i}-${j}`} className="TableStyle__td">
-            {keyValue === 'when'
+            {renderValue(keyValue)}
-              ? RENDER_WHEN(item[keyValue])
-              : RENDER_METRIC_VALUE(item[keyValue])}
           </td>
         );
       })}

src/pages/AllEntries/AllEntries.js

@@ -129,11 +129,13 @@ const NewTablePageTest = (props) => {
             }
           />
           {elements.length > 0 && entries[0] && (
+            // <div style={{ width: '100%', overflowX: 'scroll' }}>
             <Table
               items={elements}
               orderedKeys={orderKeys(entries[0])}
               sortByUpdate={sortByUpdate}
             />
+            // </div>
           )}
           <Pager
             pageNr={pageNr}

src/pages/Leaderboard/Leaderboard.js

@@ -23,7 +23,7 @@ const Leaderboard = (props) => {
   const [scoresSorted, setScoresSorted] = React.useState([]);
   const [idSorted, setIdSorted] = React.useState([]);
 
-  React.useEffect(() => {
+  React.useMemo(() => {
     getChallengeLeaderboard(
       'leaderboard',
       props.challengeName,
@@ -41,7 +41,8 @@ const Leaderboard = (props) => {
     (elem) => {
       let newEntries = entries.slice();
       const possibleMetrics = orderKeys(entries[0]).filter(
-        (key) => !['id', 'submitter', 'when'].includes(key)
+        (key) =>
+          !['id', 'submitter', 'when', 'description', 'times'].includes(key)
       );
       let metricIndex = possibleMetrics.indexOf(elem);
       let newScoresSorted = scoresSorted.slice();

src/pages/Leaderboard/orderKeys.js

@@ -14,7 +14,7 @@ const orderKeys = (elem) => {
     result = result.concat(dev0keys);
     result = result.concat(dev1keys);
     result = result.concat(testAkeys);
-    result.push('entries', 'when');
+    result.push('times', 'when');
     return result;
   }
   return null;