s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix popUpMessageHandler, and popUp message when delete submission impossible

Browse Source
This commit is contained in:
Mateusz Tylka 2023-06-28 19:12:06 +02:00
parent 74e0ef19db
commit 69f65846c2
12 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App/App.js
View File

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

6
src/App/components/NavigationManager.js
View File

@ -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
src/App/components/PopUpMessageManager.js
View File

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

10
src/App/components/RoutingManager.js
View File

@ -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} />} />
</>
) : (
<>

2
src/api/deleteSubmission.js
View File

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

4
src/components/generic/PopupMessage.js
View File

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

18
src/components/generic/Table/Table.js
View File

@ -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 (

1
src/components/generic/Table/components/TableRowTags/renderTags.js
View File

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

5
src/pages/AllEntries/AllEntries.js
View File

@ -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;

9
src/pages/Challenge/Challenge.js
View File

@ -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:

3
src/pages/HowTo/HowTo.js
View File

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

1
src/utils/colors.js
View File

@ -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)',