warning popUp for delete submission

src/api/deleteSubmission.js

@@ -1,8 +1,14 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
 
-const deleteSubmission = async (submissionId) => {
-  fetch(`${API}/delete-submission/${submissionId}`, {
+const deleteSubmission = async (
+  item,
+  deletedItems,
+  setDeletedItems,
+  popUpMessageHandler,
+  theme
+) => {
+  fetch(`${API}/delete-submission/${item.id}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
@@ -11,7 +17,19 @@ const deleteSubmission = async (submissionId) => {
   })
     .then((resp) => resp.text())
     .then((data) => {
-      console.log(data);
+      if (data === 'deleted') {
+        let newDeletedItems = deletedItems.slice();
+        newDeletedItems.push(item);
+        setDeletedItems(newDeletedItems);
+        popUpMessageHandler('Complete', `Submission "${item.id}" deleted`);
+      } else {
+        popUpMessageHandler(
+          'Error',
+          "You can't delete this submission!",
+          null,
+          theme.colors.red
+        );
+      }
     });
 };
 

src/components/generic/PopUp.js

@@ -14,7 +14,6 @@ const PopUpStyle = styled(FlexColumn)`
   .PopUpStyle__body {
     width: ${({ width }) => (width ? width : '60%')};
     height: ${({ height }) => (height ? height : '50%')};
-    min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')};
     padding: ${({ padding }) => (padding ? padding : '48px')};
     margin: ${({ margin }) => (margin ? margin : '0')};
     border-radius: 12px;

src/components/generic/Table/Table.js

@@ -1,36 +1,61 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import TableStyle from './styles/TableStyle';
 import TableHeader from './components/TableHeader';
 import TableRowItems from './components/TableRowItems';
 import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
 import TableRowFooter from './components/TableRowFooter';
-import KeyCloakService from '../../../services/KeyCloakService';
 import deleteSubmission from '../../../api/deleteSubmission';
 import theme from '../../../utils/theme';
+import PopUp from '../PopUp';
+import Button from '../Button';
+import { Medium, H3 } from '../../../utils/fonts';
 
-const Table = ({ items, orderedKeys, popUpMessageHandler, sortByUpdate, rowFooter = true }) => {
+const Table = ({
+  items,
+  orderedKeys,
+  popUpMessageHandler,
+  sortByUpdate,
+  rowFooter = true,
+}) => {
   const [, updateState] = React.useState();
   const tableUpdate = React.useCallback(() => updateState({}), []);
   const [deletedItems, setDeletedItems] = React.useState([]);
+  const [deletePopUp, setDeletePopUp] = React.useState(false);
   const itemsToRender = items.filter((item) => !deletedItems.includes(item));
 
   const deleteItem = async (item) => {
-    if (item.submitter === KeyCloakService.getUsername()) {
-      await deleteSubmission(item.id);
-      let newDeletedItems = deletedItems.slice();
-      newDeletedItems.push(item);
-      setDeletedItems(newDeletedItems);
-      popUpMessageHandler(
-        'Complete',
-        `Submission "${item.id}" deleted`,
-      );
-    }
-    else {
-      popUpMessageHandler(
-        'Error',
-        "You can't delete this submission!",
-        null,
-        theme.colors.red
+    await deleteSubmission(
+      item,
+      deletedItems,
+      setDeletedItems,
+      popUpMessageHandler,
+      theme
+    );
+  };
+
+  const renderDeletePopUp = (item) => {
+    if (deletePopUp) {
+      return createPortal(
+        <PopUp
+          width="40%"
+          height="35vh"
+          padding="36px 32px 0"
+          closeHandler={() => setDeletePopUp(false)}
+        >
+          <H3>Warning</H3>
+          <Medium>Are you sure to delete submission with id: {item.id}?</Medium>
+          <Button
+            handler={() => {
+              setDeletePopUp(false);
+              deleteItem(item);
+            }}
+          >
+            Yes
+          </Button>
+          <Button handler={() => setDeletePopUp(false)}>No</Button>
+        </PopUp>,
+        document.body
       );
     }
   };
@@ -47,11 +72,12 @@ const Table = ({ items, orderedKeys, popUpMessageHandler, sortByUpdate, rowFoote
           <tr key={`table-row-${i}`} className="TableStyle__tr">
             <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
             <TableRowFooter
-              deleteItem={deleteItem}
+              deleteItem={() => setDeletePopUp(true)}
               rowFooter={rowFooter}
               item={item}
               i={i}
             />
+            {renderDeletePopUp(item)}
             <RowsBackgroundStyle i={i} />
           </tr>
         );

src/pages/AllEntries/AllEntries.js

@@ -112,8 +112,6 @@ const AllEntries = (props) => {
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
   let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
 
-  console.log(CALC_PAGES(entries, 2));
-  console.log(entries);
   return (
     <FlexColumn
       padding="24px"