fix popUpMessageHandler, and popUp message when delete submission impossible
This commit is contained in:
parent
74e0ef19db
commit
69f65846c2
@ -16,13 +16,14 @@ const App = () => {
|
||||
const renderApp = React.useCallback(() => {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<PopUpMessageManager>
|
||||
<BrowserRouter>
|
||||
<PopUpMessageManager>
|
||||
|
||||
<NavigationManager>
|
||||
<RoutingManager />
|
||||
</NavigationManager>
|
||||
</PopUpMessageManager>
|
||||
</BrowserRouter>
|
||||
</PopUpMessageManager>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}, []);
|
||||
|
@ -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 })}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
@ -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 element={<Challenges />} />
|
||||
<Route exact path="/" element={<Challenges popUpMessageHandler={props.popUpMessageHandler} />} />
|
||||
<Route element={<Challenges popUpMessageHandler={props.popUpMessageHandler} />} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
@ -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);
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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 (
|
||||
|
@ -10,7 +10,6 @@ const renderTags = (tags, i) => {
|
||||
);
|
||||
});
|
||||
}
|
||||
return <FlexRow className="TableStyle__tag">submission without tags</FlexRow>;
|
||||
};
|
||||
|
||||
export default renderTags;
|
||||
|
@ -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;
|
||||
|
@ -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:
|
||||
|
@ -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>
|
||||
|
@ -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)',
|
||||
|
Loading…
Reference in New Issue
Block a user