From 69f65846c2677fc1467764765daf62a27d7f272e Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 28 Jun 2023 19:12:06 +0200 Subject: [PATCH] fix popUpMessageHandler, and popUp message when delete submission impossible --- src/App/App.js | 5 ++-- src/App/components/NavigationManager.js | 6 ++--- src/App/components/PopUpMessageManager.js | 5 +++- src/App/components/RoutingManager.js | 10 +++---- src/api/deleteSubmission.js | 2 +- src/components/generic/PopupMessage.js | 4 +-- src/components/generic/Table/Table.js | 26 +++++++++++++++---- .../components/TableRowTags/renderTags.js | 1 - src/pages/AllEntries/AllEntries.js | 5 ++-- src/pages/Challenge/Challenge.js | 9 ++----- src/pages/HowTo/HowTo.js | 3 ++- src/utils/colors.js | 1 + 12 files changed, 47 insertions(+), 30 deletions(-) diff --git a/src/App/App.js b/src/App/App.js index 76873fc..1bf3790 100644 --- a/src/App/App.js +++ b/src/App/App.js @@ -16,13 +16,14 @@ const App = () => { const renderApp = React.useCallback(() => { return ( - + + + - ); }, []); diff --git a/src/App/components/NavigationManager.js b/src/App/components/NavigationManager.js index fd70a49..bf5ce73 100644 --- a/src/App/components/NavigationManager.js +++ b/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) => { <> {!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 })} ); }; diff --git a/src/App/components/PopUpMessageManager.js b/src/App/components/PopUpMessageManager.js index e8f3ed8..c954409 100644 --- a/src/App/components/PopUpMessageManager.js +++ b/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} /> ); diff --git a/src/App/components/RoutingManager.js b/src/App/components/RoutingManager.js index 6d4d942..8d65b44 100644 --- a/src/App/components/RoutingManager.js +++ b/src/App/components/RoutingManager.js @@ -24,7 +24,7 @@ const RoutingManager = (props) => { /> } + element={} /> { /> } + element={} /> } /> - } /> + } /> { /> {KeyCloakService.isLoggedIn() ? ( <> - } /> - } /> + } /> + } /> ) : ( <> diff --git a/src/api/deleteSubmission.js b/src/api/deleteSubmission.js index 7fe4dbb..389b315 100644 --- a/src/api/deleteSubmission.js +++ b/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); }); diff --git a/src/components/generic/PopupMessage.js b/src/components/generic/PopupMessage.js index 70afe87..3757973 100644 --- a/src/components/generic/PopupMessage.js +++ b/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}`} >

{props.header}

{props.message} - + ); diff --git a/src/components/generic/Table/Table.js b/src/components/generic/Table/Table.js index ad307a3..42fcd74 100644 --- a/src/components/generic/Table/Table.js +++ b/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) => { - await deleteSubmission(item.id); - let newDeletedItems = deletedItems.slice(); - newDeletedItems.push(item); - setDeletedItems(newDeletedItems); + 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 ( diff --git a/src/components/generic/Table/components/TableRowTags/renderTags.js b/src/components/generic/Table/components/TableRowTags/renderTags.js index f7dcd16..3d4daff 100644 --- a/src/components/generic/Table/components/TableRowTags/renderTags.js +++ b/src/components/generic/Table/components/TableRowTags/renderTags.js @@ -10,7 +10,6 @@ const renderTags = (tags, i) => { ); }); } - return submission without tags; }; export default renderTags; diff --git a/src/pages/AllEntries/AllEntries.js b/src/pages/AllEntries/AllEntries.js index 5acfd83..19ef0b7 100644 --- a/src/pages/AllEntries/AllEntries.js +++ b/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} /> // )} @@ -154,4 +155,4 @@ const NewTablePageTest = (props) => { ); }; -export default NewTablePageTest; +export default AllEntries; diff --git a/src/pages/Challenge/Challenge.js b/src/pages/Challenge/Challenge.js index 5f58272..038a4c0 100644 --- a/src/pages/Challenge/Challenge.js +++ b/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) => { ); case CHALLENGE_SECTIONS.ALL_ENTRIES: return ( - + ); case CHALLENGE_SECTIONS.README: return ( @@ -57,11 +53,10 @@ const Challenge = (props) => { ); case CHALLENGE_SECTIONS.MY_ENTRIES: - return ; + return ; case CHALLENGE_SECTIONS.SUBMIT: return ; default: diff --git a/src/pages/HowTo/HowTo.js b/src/pages/HowTo/HowTo.js index 07b50ae..b4f4d0b 100644 --- a/src/pages/HowTo/HowTo.js +++ b/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) => { diff --git a/src/utils/colors.js b/src/utils/colors.js index a98a3aa..6507da4 100644 --- a/src/utils/colors.js +++ b/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)',