edit and delete submission refactor and handle errors

2023-08-04 16:35:15 +02:00 · 2023-08-04 16:35:15 +02:00 · aa1c1c3737
commit aa1c1c3737
parent 00a9a82bcb
9 changed files with 202 additions and 97 deletions
--- a/src/api/challengeSubmissionPost.js
+++ b/src/api/challengeSubmissionPost.js
@ -38,7 +38,12 @@ const challengeSubmission = (
    .then((data) => {
      dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
      const processUrl = API.replace('/api', '');
-      window.location.replace(`${processUrl}/open-view-progress/${data}#form`);
+      if (Number.isInteger(Number(data))) {
+        console.log(`${processUrl}/open-view-progress/${data}#form`);
+        window.location.replace(
+          `${processUrl}/open-view-progress/${data}#form`
+        );
+      }
      // console.log(data);

      // fetch(`${API}/view-progress-with-web-sockets/${data}`)
--- a/src/api/deleteSubmission.js
+++ b/src/api/deleteSubmission.js
@ -1,12 +1,12 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
+import theme from '../utils/theme';

 const deleteSubmission = async (
  item,
  deletedItems,
  setDeletedItems,
-  popUpMessageHandler,
-  theme
+  popUpMessageHandler
 ) => {
  fetch(`${API}/delete-submission/${item.id}`, {
    method: 'POST',
@ -22,6 +22,13 @@ const deleteSubmission = async (
        newDeletedItems.push(item);
        setDeletedItems(newDeletedItems);
        popUpMessageHandler('Complete', `Submission "${item.id}" deleted`);
+      } else if (data.includes('<!doctype html>') && data.includes('Login')) {
+        popUpMessageHandler(
+          'Error',
+          'You have to be login in to edit submission!',
+          null,
+          theme.colors.red
+        );
      } else {
        popUpMessageHandler(
          'Error',
--- a/src/api/editSubmission.js
+++ b/src/api/editSubmission.js
@ -1,25 +1,47 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
+import theme from '../utils/theme';

-const editSubmission = (
+const editSubmission = async (
  submisssion,
  tags,
-  description
+  description,
+  popUpMessageHandler
 ) => {
-  // tags = tags.map((tag) => tag.name).join(',');
  tags = tags.replaceAll(',', '%2C');
  fetch(`${API}/edit-submission/${submisssion}/${tags}/${description}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
      Authorization: `Bearer ${KeyCloakService.getToken()}`,
-    }
+    },
  })
    .then((resp) => resp.text())
    .then((data) => {
      console.log(data);
+      if (data === 'Submission changed') {
+        popUpMessageHandler(
+          'Submission changed!',
+          `Submission ${submisssion} edited`,
+          null,
+          theme.colors.green
+        );
+      } else if (data === 'Only owner can edit a submission!') {
+        popUpMessageHandler('Error', data, null, theme.colors.red);
+      } else if (data.includes('<!doctype html>') && data.includes('Login')) {
+        popUpMessageHandler(
+          'Error',
+          'You have to be login in to edit submission!',
+          null,
+          theme.colors.red
+        );
+      } else {
+        if (data.length > 650) {
+          data = `${data.slice(0, 650)}...`;
+        }
+        popUpMessageHandler('Error', data, null, theme.colors.red);
+      }
    });
 };

 export default editSubmission;
-// http://localhost:3000/api/edit-submission/4/1%2C2/abc
--- a/src/components/generic/Table/Table.js
+++ b/src/components/generic/Table/Table.js
@ -1,15 +1,10 @@
 import React from 'react';
-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 deleteSubmission from '../../../api/deleteSubmission';
-import theme from '../../../utils/theme';
-import DeletePopUp from './components/DeletePopUp';
-import MobileTable from './components/MobileTable';
 import Media from 'react-media';
+import theme from '../../../utils/theme';
+import MobileTable from './components/MobileTable';
+import DesktopTable from './components/DesktopTable';
 import EditPopUp from './components/EditPopUp';
+import DeletePopUp from './components/DeletePopUp';

 const Table = ({
  items,
@ -24,78 +19,58 @@ const Table = ({
  const [deletePopUp, setDeletePopUp] = React.useState(false);
  const [editPopUp, setEditPopUp] = React.useState(false);
  const [itemToHandle, setItemToHandle] = React.useState(null);
-
  const itemsToRender = items.filter((item) => !deletedItems.includes(item));

-  const deleteItem = async (item) => {
-    await deleteSubmission(
-      item,
-      deletedItems,
-      setDeletedItems,
-      popUpMessageHandler,
-      theme
-    );
-  };
-
-  const desktopRender = () => {
-    return (
-      <>
-        <DeletePopUp
-          item={itemToHandle}
-          setDeletePopUp={setDeletePopUp}
-          deletePopUp={deletePopUp}
-          deleteItem={deleteItem}
-        />
-        <EditPopUp
-          item={itemToHandle}
-          setEditPopUp={setEditPopUp}
-          editPopUp={editPopUp}
-        />
-        <TableStyle rowFooter={rowFooter}>
-          <TableHeader
-            orderedKeys={orderedKeys}
-            sortByUpdate={sortByUpdate}
-            tableUpdate={tableUpdate}
-          />
-          {itemsToRender.map((item, i) => {
-            return (
-              <tr key={`table-row-${i}`} className="TableStyle__tr">
-                <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-                <TableRowFooter
-                  deleteItem={() => {
-                    setItemToHandle(item);
-                    setDeletePopUp(true);
-                  }}
-                  editItem={() => {
-                    setItemToHandle(item);
-                    setEditPopUp(true);
-                  }}
-                  rowFooter={rowFooter}
-                  item={item}
-                  i={i}
-                />
-                <RowsBackgroundStyle i={i} />
-              </tr>
-            );
-          })}
-        </TableStyle>
-      </>
-    );
-  };
-
  return (
    <>
+      <DeletePopUp
+        item={itemToHandle}
+        setDeletePopUp={setDeletePopUp}
+        deletePopUp={deletePopUp}
+        setDeletedItems={setDeletedItems}
+        deletedItems={deletedItems}
+        popUpMessageHandler={popUpMessageHandler}
+      />
+      <EditPopUp
+        item={itemToHandle}
+        setEditPopUp={setEditPopUp}
+        editPopUp={editPopUp}
+        popUpMessageHandler={popUpMessageHandler}
+      />
      <Media query={theme.mobile}>
        <MobileTable
          elements={itemsToRender}
-          setDeletePopUp={setDeletePopUp}
          deletePopUp={deletePopUp}
-          deleteItem={deleteItem}
          orderedKeys={orderedKeys}
          rowFooter={rowFooter}
+          deletedItems={deletedItems}
+          popUpMessageHandler={popUpMessageHandler}
+          itemToHandle={itemToHandle}
+          sortByUpdate={sortByUpdate}
+          tableUpdate={tableUpdate}
+          setItemToHandle={setItemToHandle}
+          setEditPopUp={setEditPopUp}
+          setDeletePopUp={setDeletePopUp}
+          setDeletedItems={setDeletedItems}
+        />
+      </Media>
+      <Media query={theme.desktop}>
+        <DesktopTable
+          elements={itemsToRender}
+          deletePopUp={deletePopUp}
+          orderedKeys={orderedKeys}
+          rowFooter={rowFooter}
+          deletedItems={deletedItems}
+          popUpMessageHandler={popUpMessageHandler}
+          itemToHandle={itemToHandle}
+          sortByUpdate={sortByUpdate}
+          tableUpdate={tableUpdate}
+          setItemToHandle={setItemToHandle}
+          setEditPopUp={setEditPopUp}
+          setDeletePopUp={setDeletePopUp}
+          setDeletedItems={setDeletedItems}
        />
      </Media>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
    </>
  );
 };
--- a/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js
+++ b/src/components/generic/Table/components/DeletePopUp/DeletePopUp.js
@ -4,8 +4,32 @@ import Button from '../../../Button';
 import { Medium, H3 } from '../../../../../utils/fonts';
 import { FlexColumn, FlexRow } from '../../../../../utils/containers';
 import theme from '../../../../../utils/theme';
+import deleteSubmission from '../../../../../api/deleteSubmission';

-const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => {
+const deleteItem = async (
+  item,
+  setDeletePopUp,
+  deletedItems,
+  setDeletedItems,
+  popUpMessageHandler
+) => {
+  setDeletePopUp(false);
+  await deleteSubmission(
+    item,
+    deletedItems,
+    setDeletedItems,
+    popUpMessageHandler
+  );
+};
+
+const DeletePopUp = ({
+  deletePopUp,
+  setDeletePopUp,
+  item,
+  deletedItems,
+  setDeletedItems,
+  popUpMessageHandler,
+}) => {
  if (deletePopUp) {
    return createPortal(
      <PopUp
@ -22,10 +46,14 @@ const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => {
          </Medium>
          <FlexRow gap="48px">
            <Button
-              handler={() => {
-                setDeletePopUp(false);
-                deleteItem(item);
-              }}
+              handler={() =>
+                deleteItem(
+                  item,
+                  deletedItems,
+                  setDeletedItems,
+                  popUpMessageHandler
+                )
+              }
            >
              Yes
            </Button>
--- a/src/components/generic/Table/components/DesktopTable/DesktopTable.js
+++ b/src/components/generic/Table/components/DesktopTable/DesktopTable.js
@ -0,0 +1,41 @@
+import React from 'react';
+import TableStyle from '../../styles/TableStyle';
+import TableHeader from '../TableHeader/TableHeader';
+import TableRowItems from '../TableRowItems/TableRowItems';
+import TableRowFooter from '../TableRowFooter/TableRowFooter';
+import RowsBackgroundStyle from '../../styles/RowsBackgroundStyle';
+
+const DesktopTable = (props) => {
+  return (
+    <TableStyle rowFooter={props.rowFooter}>
+      <TableHeader
+        orderedKeys={props.orderedKeys}
+        sortByUpdate={props.sortByUpdate}
+        tableUpdate={props.tableUpdate}
+      />
+      {props.elements.map((item, i) => {
+        return (
+          <tr key={`table-row-${i}`} className="TableStyle__tr">
+            <TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
+            <TableRowFooter
+              deleteItem={() => {
+                props.setItemToHandle(item);
+                props.setDeletePopUp(true);
+              }}
+              editItem={() => {
+                props.setItemToHandle(item);
+                props.setEditPopUp(true);
+              }}
+              rowFooter={props.rowFooter}
+              item={item}
+              i={i}
+            />
+            <RowsBackgroundStyle i={i} />
+          </tr>
+        );
+      })}
+    </TableStyle>
+  );
+};
+
+export default DesktopTable;
--- a/src/components/generic/Table/components/DesktopTable/index.js
+++ b/src/components/generic/Table/components/DesktopTable/index.js
@ -0,0 +1 @@
+export { default } from './DesktopTable';
--- a/src/components/generic/Table/components/EditPopUp/EditPopUp.js
+++ b/src/components/generic/Table/components/EditPopUp/EditPopUp.js
@ -10,10 +10,31 @@ import editSubmission from '../../../../../api/editSubmission';
 import getTags from '../../../../../api/getTags';
 import React from 'react';

-const EditPopUp = ({ editPopUp, setEditPopUp, item }) => {
+const editSubmissionHandler = async (
+  item,
+  setEditPopUp,
+  tagsToEdit,
+  description,
+  popUpMessageHandler
+) => {
+  setEditPopUp(false);
+  let tags = '';
+  if (tagsToEdit) {
+    tags = tagsToEdit.join(',');
+  } else {
+    if (item?.tags) {
+      tags = item.tags.map((tag) => tag.name).join(',');
+    }
+  }
+  await editSubmission(item.id, tags, description, popUpMessageHandler);
+};
+
+const EditPopUp = ({ editPopUp, setEditPopUp, item, popUpMessageHandler }) => {
  const [tags, setTags] = React.useState([]);
  const [tagsToEdit, setTagsToEdit] = React.useState(item?.tags?.slice());
-  const [description, setDescription] = React.useState(item?.description?.slice());
+  const [description, setDescription] = React.useState(
+    item?.description?.slice()
+  );

  React.useMemo(() => {
    getTags(setTags);
@ -50,10 +71,15 @@ const EditPopUp = ({ editPopUp, setEditPopUp, item }) => {
            <Button
              width="100px"
              height="32px"
-              handler={() => {
-                setEditPopUp(false);
-                editSubmission(item.id, tagsToEdit.join(','), description);
-              }}
+              handler={() =>
+                editSubmissionHandler(
+                  item,
+                  setEditPopUp,
+                  tagsToEdit,
+                  description,
+                  popUpMessageHandler
+                )
+              }
            >
              Confirm
            </Button>
@ -61,7 +87,7 @@ const EditPopUp = ({ editPopUp, setEditPopUp, item }) => {
              width="100px"
              height="32px"
              handler={() => {
-                setTagsToEdit([]); 
+                setTagsToEdit([]);
                setEditPopUp(false);
              }}
              backgroundColor={theme.colors.dark}
--- a/src/components/generic/Table/components/MobileTable/MobileTable.js
+++ b/src/components/generic/Table/components/MobileTable/MobileTable.js
@ -1,5 +1,4 @@
 import React from 'react';
-import DeletePopUp from '../DeletePopUp/DeletePopUp';
 import TableRowItems from '../TableRowItems/TableRowItems';
 import TableRowFooter from '../TableRowFooter/TableRowFooter';
 import MobileTableStyle from './MobileTableStyle';
@ -10,15 +9,16 @@ const MobileTable = (props) => {
      {props.elements.map((item, i) => {
        return (
          <tr key={`table-row-${i}`} className="TableStyle__tr">
-            <DeletePopUp
-              item={item}
-              setDeletePopUp={props.setDeletePopUp}
-              deletePopUp={props.deletePopUp}
-              deleteItem={props.deleteItem}
-            />
            <TableRowItems orderedKeys={props.orderedKeys} item={item} i={i} />
            <TableRowFooter
-              deleteItem={() => props.setDeletePopUp(true)}
+              deleteItem={() => {
+                props.setItemToHandle(item);
+                props.setDeletePopUp(true);
+              }}
+              editItem={() => {
+                props.setItemToHandle(item);
+                props.setEditPopUp(true);
+              }}
              rowFooter={props.rowFooter}
              item={item}
              i={i}