fix popUpMessageHandler, and popUp message when delete submission impossible

src/App/App.js

@@ -16,13 +16,14 @@ const App = () => {
   const renderApp = React.useCallback(() => {
     return (
       <ThemeProvider theme={theme}>
-        <PopUpMessageManager>
           <BrowserRouter>
+        <PopUpMessageManager>
+
             <NavigationManager>
               <RoutingManager />
             </NavigationManager>
-          </BrowserRouter>
             </PopUpMessageManager>
+          </BrowserRouter>
       </ThemeProvider>
     );
   }, []);

src/App/components/NavigationManager.js

@@ -4,7 +4,7 @@ import LoggedBar from '../../components/navigation/LoggedBar';
 import KeyCloakService from '../../services/KeyCloakService';
 import { CHILDREN_WITH_PROPS, IS_MOBILE } from '../../utils/globals';
 
-const NavigationManager = (props) => {
+const NavigationManager = ({children, popUpMessageHandler}) => {
   const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
   const [loggedBarHover, setLoggedBarHover] = React.useState(false);
   const [navOptions, setNavOptions] = React.useState(true);
@@ -27,7 +27,7 @@ const NavigationManager = (props) => {
     <>
       <NavBar
         loggedBarVisibleHandler={loggedBarVisibleHandler}
-        popUpMessageHandler={props.popUpMessageHandler}
+        popUpMessageHandler={popUpMessageHandler}
         navOptions={navOptions}
       />
       {!IS_MOBILE() && (
@@ -39,7 +39,7 @@ const NavigationManager = (props) => {
           username={KeyCloakService.getUsername()}
         />
       )}
-      {CHILDREN_WITH_PROPS(props.children, { hideNavOptions, showNavOptions })}
+      {CHILDREN_WITH_PROPS(children, { hideNavOptions, showNavOptions, popUpMessageHandler })}
     </>
   );
 };

src/App/components/PopUpMessageManager.js

@@ -5,11 +5,13 @@ import { CHILDREN_WITH_PROPS } from '../../utils/globals';
 const PopUpMessageManager = (props) => {
   const [popUpHeader, setPopUpHeader] = React.useState('');
   const [popUpMessage, setPopUpMessage] = React.useState('');
+  const [borderColor, setBorderColor] = React.useState(null);
   const [confirmPopUpHandler, setConfirmPopUpHandler] = React.useState(null);
 
-  const popUpMessageHandler = (header, message, confirmHandler) => {
+  const popUpMessageHandler = (header, message, confirmHandler=null, borderColor=null) => {
     setPopUpHeader(header);
     setPopUpMessage(message);
+    setBorderColor(borderColor);
     if (confirmHandler !== null && confirmHandler !== undefined) {
       setConfirmPopUpHandler(() => confirmHandler());
     } else {
@@ -24,6 +26,7 @@ const PopUpMessageManager = (props) => {
           header={popUpHeader}
           message={popUpMessage}
           confirmHandler={confirmPopUpHandler}
+          borderColor={borderColor}
           popUpMessageHandler={popUpMessageHandler}
         />
       );

src/App/components/RoutingManager.js

@@ -24,7 +24,7 @@ const RoutingManager = (props) => {
       />
       <Route
         path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
-        element={<Challenge section={CHALLENGE_SECTIONS.ALL_ENTRIES} />}
+        element={<Challenge section={CHALLENGE_SECTIONS.ALL_ENTRIES} popUpMessageHandler={props.popUpMessageHandler} />}
       />
       <Route
         path={`${CHALLENGE_PAGE}/:challengeId/readme`}
@@ -41,13 +41,13 @@ const RoutingManager = (props) => {
       />
       <Route
         path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
-        element={<Challenge section={CHALLENGE_SECTIONS.MY_ENTRIES} />}
+        element={<Challenge section={CHALLENGE_SECTIONS.MY_ENTRIES} popUpMessageHandler={props.popUpMessageHandler} />}
       />
       <Route
         path={`${CHALLENGE_PAGE}/:challengeId/submit`}
         element={<Challenge section={CHALLENGE_SECTIONS.SUBMIT} />}
       />
-      <Route path={CHALLENGES_PAGE} element={<Challenges />} />
+      <Route path={CHALLENGES_PAGE} element={<Challenges popUpMessageHandler={props.popUpMessageHandler} />} />
       <Route
         path={POLICY_PRIVACY_PAGE}
         element={
@@ -74,8 +74,8 @@ const RoutingManager = (props) => {
       />
       {KeyCloakService.isLoggedIn() ? (
         <>
-          <Route exact path="/" element={<Challenges />} />
+          <Route exact path="/" element={<Challenges popUpMessageHandler={props.popUpMessageHandler} />} />
-          <Route element={<Challenges />} />
+          <Route element={<Challenges popUpMessageHandler={props.popUpMessageHandler} />} />
         </>
       ) : (
         <>

src/api/deleteSubmission.js

@@ -9,7 +9,7 @@ const deleteSubmission = async (submissionId) => {
       Authorization: `Bearer ${KeyCloakService.getToken()}`,
     },
   })
-    .then((resp) => resp.json())
+    .then((resp) => resp.text())
     .then((data) => {
       console.log(data);
     });

src/components/generic/PopupMessage.js

@@ -28,13 +28,13 @@ const PopupMessage = (props) => {
         borderRadius="12px"
         backgroundColor={theme.colors.white}
         padding="56px"
-        border={`4px solid ${theme.colors.green}`}
+        border={`4px solid ${props.borderColor ? props.borderColor : theme.colors.green}`}
       >
         <FlexColumn gap="48px" margin="0 0 48px 0">
           <H3>{props.header}</H3>
           <Body>{props.message}</Body>
         </FlexColumn>
-        <Button handler={confirmPopUp}>Ok</Button>
+        <Button backgroundColor={props.borderColor ? props.borderColor : theme.colors.green} handler={confirmPopUp}>Ok</Button>
       </FlexColumn>
     </FlexColumn>
   );

src/components/generic/Table/Table.js

@@ -4,19 +4,35 @@ 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';
 
-const Table = ({ items, orderedKeys, 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 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
+      );
+    }
   };
 
   return (

src/components/generic/Table/components/TableRowTags/renderTags.js

@@ -10,7 +10,6 @@ const renderTags = (tags, i) => {
       );
     });
   }
-  return <FlexRow className="TableStyle__tag">submission without tags</FlexRow>;
 };
 
 export default renderTags;

src/pages/AllEntries/AllEntries.js

@@ -10,7 +10,7 @@ import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
 import searchQueryHandler from './searchHandler';
 import orderKeys from './orderKeys';
 
-const NewTablePageTest = (props) => {
+const AllEntries = (props) => {
   const [entriesAll, setEntriesAll] = React.useState([]);
   const [entries, setEntries] = React.useState([]);
   const [pageNr, setPageNr] = React.useState(1);
@@ -134,6 +134,7 @@ const NewTablePageTest = (props) => {
               items={elements}
               orderedKeys={orderKeys(entries[0])}
               sortByUpdate={sortByUpdate}
+              popUpMessageHandler={props.popUpMessageHandler}
             />
             // </div>
           )}
@@ -154,4 +155,4 @@ const NewTablePageTest = (props) => {
   );
 };
 
-export default NewTablePageTest;
+export default AllEntries;

src/pages/Challenge/Challenge.js

@@ -15,18 +15,15 @@ import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
 import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
 import Loading from '../../components/generic/Loading';
-import getUser from '../../api/getUser';
 import AllEntries from '../AllEntries/AllEntries';
 
 const Challenge = (props) => {
   const challengeName = useParams().challengeId;
   const [challenge, setChallenge] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
-  const [user, setUser] = React.useState('');
 
   React.useEffect(() => {
     getChallengeInfo(setChallenge, setLoading, challengeName);
-    getUser(setUser);
   }, [challengeName]);
 
   const sectionRender = () => {
@@ -36,12 +33,11 @@ const Challenge = (props) => {
           <Leaderboard
             challengeName={challengeName}
             mainMetric={challenge.mainMetric}
-            user={user}
           />
         );
       case CHALLENGE_SECTIONS.ALL_ENTRIES:
         return (
-          <AllEntries challengeName={challengeName} setLoading={setLoading} />
+          <AllEntries challengeName={challengeName}  setLoading={setLoading} popUpMessageHandler={props.popUpMessageHandler} />
         );
       case CHALLENGE_SECTIONS.README:
         return (
@@ -57,11 +53,10 @@ const Challenge = (props) => {
           <HowTo
             popUpMessageHandler={props.popUpMessageHandler}
             challengeName={challengeName}
-            user={user}
           />
         );
       case CHALLENGE_SECTIONS.MY_ENTRIES:
-        return <MyEntries challengeName={challengeName} />;
+        return <MyEntries challengeName={challengeName} popUpMessageHandler={props.popUpMessageHandler} />;
       case CHALLENGE_SECTIONS.SUBMIT:
         return <Submit challengeName={challengeName} setLoading={setLoading} />;
       default:

src/pages/HowTo/HowTo.js

@@ -7,6 +7,7 @@ import HowToContent from './components/HowToContent';
 
 const HowTo = (props) => {
   const [userFullInfo, setUserFullInfo] = React.useState(null);
+  const username = KeyCloakService.getUsername();
 
   React.useEffect(() => {
     getFullUser(setUserFullInfo);
@@ -31,7 +32,7 @@ const HowTo = (props) => {
       <FlexColumn maxWidth="680px" alignmentX="flex-start" gap="48px">
         <HowToContent
           userFullInfo={userFullInfo}
-          user={props.user ? props.user : 'yourID'}
+          user={username ? username : 'yourID'}
           challengeName={props.challengeName}
         />
       </FlexColumn>

src/utils/colors.js

@@ -2,6 +2,7 @@ const colors = {
   white: '#FCFCFC',
   green: '#1B998B',
   blue: '#4B8FF0',
+  red: '#FF1B1C',
   green03: 'rgba(27, 153, 139, 0.3)',
   green05: 'rgba(27, 153, 139, 0.5)',
   green08: 'rgba(27, 153, 139, 0.8)',