From 00a9a82bcb42515c6262fc2177b02181b2f8e68d Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Mon, 31 Jul 2023 19:21:20 +0200
Subject: [PATCH] edit submission handle

---
 src/api/getTags.js                            |  5 +-
 src/components/generic/SubmitInput.js         |  1 +
 src/components/generic/Table/Table.js         | 79 ++++++++++---------
 .../Table/components/EditPopUp/EditPopUp.js   | 32 ++++++--
 .../TableRowFooter/TableRowFooter.js          |  4 +-
 src/pages/AllEntries/AllEntries.js            |  3 +-
 src/pages/Submit/Submit.js                    |  2 +-
 7 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/src/api/getTags.js b/src/api/getTags.js
index fc1f959..ca564a8 100644
--- a/src/api/getTags.js
+++ b/src/api/getTags.js
@@ -1,11 +1,10 @@
-import SUBMIT_ACTION from '../pages/Submit/model/SubmitActionEnum';
 import { API } from '../utils/globals';
 
-const getTags = (dispatch) => {
+const getTags = (setState) => {
   fetch(`${API}/list-tags`)
     .then((response) => response.json())
     .then((data) => {
-      dispatch({ type: SUBMIT_ACTION.LOAD_TAGS, payload: data });
+      setState(data);
     });
 };
 
diff --git a/src/components/generic/SubmitInput.js b/src/components/generic/SubmitInput.js
index 6e73e9c..1533dc5 100644
--- a/src/components/generic/SubmitInput.js
+++ b/src/components/generic/SubmitInput.js
@@ -18,6 +18,7 @@ const SubmitInput = (props) => {
         height="36px"
         border={`1px solid ${theme.colors.dark}`}
         shadow={theme.shadow}
+        defaultValue={props.defaultValue}
         onChange={(e) => props.handler(e.target.value)}
         padding="4px"
       />
diff --git a/src/components/generic/Table/Table.js b/src/components/generic/Table/Table.js
index 6913752..cb0658f 100644
--- a/src/components/generic/Table/Table.js
+++ b/src/components/generic/Table/Table.js
@@ -9,7 +9,6 @@ import theme from '../../../utils/theme';
 import DeletePopUp from './components/DeletePopUp';
 import MobileTable from './components/MobileTable';
 import Media from 'react-media';
-import editSubmission from '../../../api/editSubmission';
 import EditPopUp from './components/EditPopUp';
 
 const Table = ({
@@ -24,6 +23,7 @@ const Table = ({
   const [deletedItems, setDeletedItems] = React.useState([]);
   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));
 
@@ -37,46 +37,49 @@ const Table = ({
     );
   };
 
-  const editItem = async (item) => {
-    editSubmission(7355, '1,2,3', 'ssiema siema');
-  };
-
   const desktopRender = () => {
     return (
-      <TableStyle rowFooter={rowFooter}>
-        <TableHeader
-          orderedKeys={orderedKeys}
-          sortByUpdate={sortByUpdate}
-          tableUpdate={tableUpdate}
+      <>
+        <DeletePopUp
+          item={itemToHandle}
+          setDeletePopUp={setDeletePopUp}
+          deletePopUp={deletePopUp}
+          deleteItem={deleteItem}
         />
-        {itemsToRender.map((item, i) => {
-          return (
-            <tr key={`table-row-${i}`} className="TableStyle__tr">
-              <DeletePopUp
-                item={item}
-                setDeletePopUp={setDeletePopUp}
-                deletePopUp={deletePopUp}
-                deleteItem={deleteItem}
-              />
-              <EditPopUp
-                item={item}
-                setEditPopUp={setEditPopUp}
-                editPopUp={editPopUp}
-                editItem={editItem}
-              />
-              <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-              <TableRowFooter
-                deleteItem={() => setDeletePopUp(true)}
-                editItem={() => setEditPopUp(true)}
-                rowFooter={rowFooter}
-                item={item}
-                i={i}
-              />
-              <RowsBackgroundStyle i={i} />
-            </tr>
-          );
-        })}
-      </TableStyle>
+        <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>
+      </>
     );
   };
 
diff --git a/src/components/generic/Table/components/EditPopUp/EditPopUp.js b/src/components/generic/Table/components/EditPopUp/EditPopUp.js
index 01bade3..c7b154e 100644
--- a/src/components/generic/Table/components/EditPopUp/EditPopUp.js
+++ b/src/components/generic/Table/components/EditPopUp/EditPopUp.js
@@ -6,8 +6,19 @@ import { FlexColumn, FlexRow } from '../../../../../utils/containers';
 import theme from '../../../../../utils/theme';
 import SubmitInput from '../../../SubmitInput';
 import TagsChoose from '../../../../../pages/Submit/components/TagsChoose/TagsChoose';
+import editSubmission from '../../../../../api/editSubmission';
+import getTags from '../../../../../api/getTags';
+import React from 'react';
+
+const EditPopUp = ({ editPopUp, setEditPopUp, item }) => {
+  const [tags, setTags] = React.useState([]);
+  const [tagsToEdit, setTagsToEdit] = React.useState(item?.tags?.slice());
+  const [description, setDescription] = React.useState(item?.description?.slice());
+
+  React.useMemo(() => {
+    getTags(setTags);
+  }, []);
 
-const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
   if (editPopUp) {
     return createPortal(
       <PopUp
@@ -21,15 +32,19 @@ const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
           <H3>Editing submission</H3>
           <SubmitInput
             label="Description"
+            defaultValue={item.description}
             handler={(value) => {
-              console.log(value);
+              setDescription(value);
             }}
           />
           <TagsChoose
             label="Submission tags"
-            updateTags={() => console.log('siema')}
-            tags={[]}
-            submissionTags={[]}
+            updateTags={(submissionTags, globalTags) => {
+              setTagsToEdit(submissionTags);
+              setTags(globalTags);
+            }}
+            tags={tags ? tags : []}
+            submissionTags={tagsToEdit?.length ? tagsToEdit : item.tags}
           />
           <FlexRow gap="48px">
             <Button
@@ -37,7 +52,7 @@ const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
               height="32px"
               handler={() => {
                 setEditPopUp(false);
-                editItem(item);
+                editSubmission(item.id, tagsToEdit.join(','), description);
               }}
             >
               Confirm
@@ -45,7 +60,10 @@ const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
             <Button
               width="100px"
               height="32px"
-              handler={() => setEditPopUp(false)}
+              handler={() => {
+                setTagsToEdit([]); 
+                setEditPopUp(false);
+              }}
               backgroundColor={theme.colors.dark}
             >
               Cancel
diff --git a/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js
index 168d152..f4e1d7c 100644
--- a/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js
+++ b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js
@@ -12,8 +12,8 @@ const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
         <TableRowTags item={item} i={i} />
         <TableRowButtons
           buttons={[
-            { icon: pensilIco, handler: () => editItem(item) },
-            { icon: deleteIco, handler: () => deleteItem(item) },
+            { icon: pensilIco, handler: () => editItem() },
+            { icon: deleteIco, handler: () => deleteItem() },
           ]}
         />
       </FlexRow>
diff --git a/src/pages/AllEntries/AllEntries.js b/src/pages/AllEntries/AllEntries.js
index 34d3213..145c528 100644
--- a/src/pages/AllEntries/AllEntries.js
+++ b/src/pages/AllEntries/AllEntries.js
@@ -111,13 +111,12 @@ const AllEntries = (props) => {
 
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
   let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
-  console.log(elements);
 
   return (
     <FlexColumn
+      as="section"
       padding="24px"
       gap="32px"
-      as="section"
       width="100%"
       maxWidth="1600px"
     >
diff --git a/src/pages/Submit/Submit.js b/src/pages/Submit/Submit.js
index 55f4e9f..bc09d19 100644
--- a/src/pages/Submit/Submit.js
+++ b/src/pages/Submit/Submit.js
@@ -24,7 +24,7 @@ const Submit = (props) => {
   });
 
   React.useMemo(() => {
-    getTags(dispatch);
+    getTags((data) => dispatch({ type: SUBMIT_ACTION.LOAD_TAGS, payload: data }));
   }, []);
 
   const challengeSubmissionSubmit = React.useCallback(() => {