edit submission handle

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);
     });
 };
 

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"
       />

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
+        <DeletePopUp
-          orderedKeys={orderedKeys}
+          item={itemToHandle}
-          sortByUpdate={sortByUpdate}
+          setDeletePopUp={setDeletePopUp}
-          tableUpdate={tableUpdate}
+          deletePopUp={deletePopUp}
+          deleteItem={deleteItem}
         />
-        {itemsToRender.map((item, i) => {
+        <EditPopUp
-          return (
+          item={itemToHandle}
-            <tr key={`table-row-${i}`} className="TableStyle__tr">
+          setEditPopUp={setEditPopUp}
-              <DeletePopUp
+          editPopUp={editPopUp}
-                item={item}
+        />
-                setDeletePopUp={setDeletePopUp}
+        <TableStyle rowFooter={rowFooter}>
-                deletePopUp={deletePopUp}
+          <TableHeader
-                deleteItem={deleteItem}
+            orderedKeys={orderedKeys}
-              />
+            sortByUpdate={sortByUpdate}
-              <EditPopUp
+            tableUpdate={tableUpdate}
-                item={item}
+          />
-                setEditPopUp={setEditPopUp}
+          {itemsToRender.map((item, i) => {
-                editPopUp={editPopUp}
+            return (
-                editItem={editItem}
+              <tr key={`table-row-${i}`} className="TableStyle__tr">
-              />
+                <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
-              <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
+                <TableRowFooter
-              <TableRowFooter
+                  deleteItem={() => {
-                deleteItem={() => setDeletePopUp(true)}
+                    setItemToHandle(item);
-                editItem={() => setEditPopUp(true)}
+                    setDeletePopUp(true);
-                rowFooter={rowFooter}
+                  }}
-                item={item}
+                  editItem={() => {
-                i={i}
+                    setItemToHandle(item);
-              />
+                    setEditPopUp(true);
-              <RowsBackgroundStyle i={i} />
+                  }}
-            </tr>
+                  rowFooter={rowFooter}
-          );
+                  item={item}
-        })}
+                  i={i}
-      </TableStyle>
+                />
+                <RowsBackgroundStyle i={i} />
+              </tr>
+            );
+          })}
+        </TableStyle>
+      </>
     );
   };
 

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')}
+            updateTags={(submissionTags, globalTags) => {
-            tags={[]}
+              setTagsToEdit(submissionTags);
-            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

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: pensilIco, handler: () => editItem() },
-            { icon: deleteIco, handler: () => deleteItem(item) },
+            { icon: deleteIco, handler: () => deleteItem() },
           ]}
         />
       </FlexRow>

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"
     >

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(() => {