diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx index c206cfdd9c1f206035b0f600da27e5c61adda7be..1b543083da7fbfb1e5c1a48d44a40a2d7fdcc17e 100644 --- a/client/src/pages/admin/AdminPage.tsx +++ b/client/src/pages/admin/AdminPage.tsx @@ -16,7 +16,6 @@ import ExitToAppIcon from '@material-ui/icons/ExitToApp' import LocationCityIcon from '@material-ui/icons/LocationCity' import PeopleIcon from '@material-ui/icons/People' import SettingsOverscanIcon from '@material-ui/icons/SettingsOverscan' -import axios from 'axios' import React, { useEffect } from 'react' import { Link, Route, Switch, useRouteMatch } from 'react-router-dom' import { getCities } from '../../actions/cities' @@ -74,7 +73,6 @@ const AdminView: React.FC = () => { dispatch(getRoles()) dispatch(getTypes()) dispatch(getStatistics()) - axios.get('/api/competitions/1/codes').then((res) => console.log(res.data.items)) }, []) const menuAdminItems = [ diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx index 6d9bc11905e9cca28526bd27ceb0921648ef5ed7..886f8d19a24ea6f8d7469b1481a5a11def854469 100644 --- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx +++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx @@ -1,4 +1,4 @@ -import { Button, CircularProgress, Divider, Menu, MenuItem, Typography } from '@material-ui/core' +import { Button, CircularProgress, Divider, Menu, MenuItem } from '@material-ui/core' import CssBaseline from '@material-ui/core/CssBaseline' import ListItemText from '@material-ui/core/ListItemText' import AddOutlinedIcon from '@material-ui/icons/AddOutlined' @@ -17,21 +17,21 @@ import SlideDisplay from './components/SlideDisplay' import { AppBarEditor, CenteredSpinnerContainer, + CompetitionName, + FillLeftContainer, + FillRightContainer, HomeIcon, LeftDrawer, - RightDrawer, + PositionBottom, PresentationEditorContainer, + RightDrawer, + RightPanelScroll, SlideList, SlideListItem, ToolBarContainer, + ToolbarMargin, ViewButton, ViewButtonGroup, - ToolbarMargin, - FillLeftContainer, - PositionBottom, - FillRightContainer, - CompetitionName, - RightPanelScroll, } from './styled' const initialState = { @@ -113,7 +113,7 @@ const PresentationEditorPage: React.FC = () => { return ( <PresentationEditorContainer> <CssBaseline /> - <AppBarEditor leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth} position="fixed"> + <AppBarEditor $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={rightDrawerWidth} position="fixed"> <ToolBarContainer> <Button component={Link} to="/admin/tävlingshanterare" style={{ padding: 0 }}> <HomeIcon src="/t8.png" /> @@ -142,8 +142,8 @@ const PresentationEditorPage: React.FC = () => { </ViewButtonGroup> </ToolBarContainer> </AppBarEditor> - <LeftDrawer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined} variant="permanent" anchor="left"> - <FillLeftContainer leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={undefined}> + <LeftDrawer $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={undefined} variant="permanent" anchor="left"> + <FillLeftContainer $leftDrawerWidth={leftDrawerWidth} $rightDrawerWidth={undefined}> <ToolbarMargin /> <SlideList> {competition.slides && @@ -166,13 +166,13 @@ const PresentationEditorPage: React.FC = () => { <SlideListItem divider button onClick={() => createNewSlide()}> <ListItemText primary="Ny sida" /> <AddOutlinedIcon /> - </SlideListItem> + </SlideListItem> </PositionBottom> </FillLeftContainer> </LeftDrawer> <ToolbarMargin /> - <RightDrawer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right"> - <FillRightContainer leftDrawerWidth={undefined} rightDrawerWidth={rightDrawerWidth}> + <RightDrawer $leftDrawerWidth={undefined} $rightDrawerWidth={rightDrawerWidth} variant="permanent" anchor="right"> + <FillRightContainer $leftDrawerWidth={undefined} $rightDrawerWidth={rightDrawerWidth}> <RightPanelScroll> {!competitionLoading ? ( <SettingsPanel /> diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx index c02054090f9b597fc32f1cacc03d145f3b77d9fe..4f830687898bd87fbd7c637dfd19706324fe909e 100644 --- a/client/src/pages/presentationEditor/styled.tsx +++ b/client/src/pages/presentationEditor/styled.tsx @@ -6,8 +6,8 @@ interface ViewButtonProps { } interface DrawerSizeProps { - leftDrawerWidth: number | undefined - rightDrawerWidth: number | undefined + $leftDrawerWidth: number | undefined + $rightDrawerWidth: number | undefined } const AppBarHeight = 64 @@ -66,22 +66,22 @@ export const HomeIcon = styled.img` ` export const LeftDrawer = styled(Drawer)<DrawerSizeProps>` - width: ${(props) => (props ? props.leftDrawerWidth : 0)}px; + width: ${(props) => (props ? props.$leftDrawerWidth : 0)}px; flex-shrink: 0; position: relative; z-index: 1; ` export const RightDrawer = styled(Drawer)<DrawerSizeProps>` - width: ${(props) => (props ? props.rightDrawerWidth : 0)}px; + width: ${(props) => (props ? props.$rightDrawerWidth : 0)}px; flex-shrink: 0; ` export const AppBarEditor = styled(AppBar)<DrawerSizeProps>` - width: calc(100% - ${(props) => (props ? props.rightDrawerWidth : 0)}px); + width: calc(100% - ${(props) => (props ? props.$rightDrawerWidth : 0)}px); left: 0; - margin-left: leftDrawerWidth; - margin-right: rightDrawerWidth; + margin-left: $leftDrawerWidth; + margin-right: $rightDrawerWidth; ` // Necessary for content to be below app bar @@ -90,13 +90,13 @@ export const ToolbarMargin = styled.div` ` export const FillLeftContainer = styled.div<DrawerSizeProps>` - width: ${(props) => (props ? props.leftDrawerWidth : 0)}px; + width: ${(props) => (props ? props.$leftDrawerWidth : 0)}px; height: calc(100% - ${SlideListHeight}px); overflow: hidden; ` export const FillRightContainer = styled.div<DrawerSizeProps>` - width: ${(props) => (props ? props.rightDrawerWidth : 0)}px; + width: ${(props) => (props ? props.$rightDrawerWidth : 0)}px; height: 100%; overflow-y: auto; background: #e9e9e9; diff --git a/client/src/pages/views/AudienceViewPage.test.tsx b/client/src/pages/views/AudienceViewPage.test.tsx index d00d4277e8b3a5021088b02a13947fb41f28b9f1..be17ab7428591823718ce2a5451ab594c517c54d 100644 --- a/client/src/pages/views/AudienceViewPage.test.tsx +++ b/client/src/pages/views/AudienceViewPage.test.tsx @@ -1,13 +1,23 @@ import { render } from '@testing-library/react' +import mockedAxios from 'axios' import React from 'react' import { Provider } from 'react-redux' +import { BrowserRouter } from 'react-router-dom' import store from '../../store' import AudienceViewPage from './AudienceViewPage' it('renders audience view page', () => { + const typeRes: any = { + data: { id: 5, slides: [{ id: 2 }] }, + } + ;(mockedAxios.get as jest.Mock).mockImplementation(() => { + return Promise.resolve(typeRes) + }) render( - <Provider store={store}> - <AudienceViewPage /> - </Provider> + <BrowserRouter> + <Provider store={store}> + <AudienceViewPage /> + </Provider> + </BrowserRouter> ) }) diff --git a/client/src/pages/views/JudgeViewPage.tsx b/client/src/pages/views/JudgeViewPage.tsx index c6e1a79dca481c397d5d5801e6b3c5be9c6ef93d..81f70edbc86c72409f2df6ac178d35ac10b8bc72 100644 --- a/client/src/pages/views/JudgeViewPage.tsx +++ b/client/src/pages/views/JudgeViewPage.tsx @@ -57,7 +57,7 @@ const JudgeViewPage: React.FC = () => { } useEffect(() => { socketConnect() - dispatch(getPresentationCompetition(competitionId.toString())) + dispatch(getPresentationCompetition(competitionId)) }, []) return ( diff --git a/client/src/pages/views/OperatorViewPage.test.tsx b/client/src/pages/views/OperatorViewPage.test.tsx index e658fe3b386899b9ab2972243c5d4ceeefc6dec4..3259fcfcf07f7f54a725e01b2ea6fa8b69a89b21 100644 --- a/client/src/pages/views/OperatorViewPage.test.tsx +++ b/client/src/pages/views/OperatorViewPage.test.tsx @@ -1,43 +1,46 @@ import { render } from '@testing-library/react' import mockedAxios from 'axios' import React from 'react' +import { act } from 'react-dom/test-utils' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' import store from '../../store' import OperatorViewPage from './OperatorViewPage' -it('renders presenter view page', () => { - const compRes: any = { - data: { - slides: [{ id: 0, title: '' }], - }, - } - const teamsRes: any = { - data: { - items: [ - { - id: 1, - name: 'team1', - }, - { - id: 2, - name: 'team2', - }, - ], - count: 2, - total_count: 3, - }, - } +it('renders operator view page', async () => { + await act(async () => { + const compRes: any = { + data: { + slides: [{ id: 0, title: '' }], + }, + } + const teamsRes: any = { + data: { + items: [ + { + id: 1, + name: 'team1', + }, + { + id: 2, + name: 'team2', + }, + ], + count: 2, + total_count: 3, + }, + } - ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => { - if (path.endsWith('/teams')) return Promise.resolve(teamsRes) - else return Promise.resolve(compRes) + ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => { + if (path.endsWith('/teams')) return Promise.resolve(teamsRes) + else return Promise.resolve(compRes) + }) + render( + <BrowserRouter> + <Provider store={store}> + <OperatorViewPage /> + </Provider> + </BrowserRouter> + ) }) - render( - <BrowserRouter> - <Provider store={store}> - <OperatorViewPage /> - </Provider> - </BrowserRouter> - ) }) diff --git a/client/src/pages/views/OperatorViewPage.tsx b/client/src/pages/views/OperatorViewPage.tsx index 97e348cd39ab9c1e1cf7499a0ee0550c0020b461..e92dc1b9b470977c563b8bc6b955af7da984b6ea 100644 --- a/client/src/pages/views/OperatorViewPage.tsx +++ b/client/src/pages/views/OperatorViewPage.tsx @@ -15,8 +15,6 @@ import { Theme, Tooltip, Typography, - useMediaQuery, - useTheme, } from '@material-ui/core' import AssignmentIcon from '@material-ui/icons/Assignment' import BackspaceIcon from '@material-ui/icons/Backspace' @@ -25,10 +23,12 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight' import FileCopyIcon from '@material-ui/icons/FileCopy' import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount' import TimerIcon from '@material-ui/icons/Timer' +import axios from 'axios' import React, { useEffect } from 'react' import { useHistory, useParams } from 'react-router-dom' import { getPresentationCompetition } from '../../actions/presentation' import { useAppDispatch, useAppSelector } from '../../hooks' +import { Team } from '../../interfaces/ApiModels' import { ViewParams } from '../../interfaces/ViewParams' import { socketConnect, @@ -51,8 +51,6 @@ import { SlideCounter, ToolBarContainer, } from './styled' -import axios from 'axios' -import { Team } from '../../interfaces/ApiModels' /** * Description: @@ -175,7 +173,6 @@ const OperatorViewPage: React.FC = () => { await axios .get(`/api/competitions/${activeId}/codes`) .then((response) => { - console.log(response.data) setCodes(response.data.items) }) .catch(console.log) @@ -185,7 +182,6 @@ const OperatorViewPage: React.FC = () => { await axios .get(`/api/competitions/${activeId}/teams`) .then((response) => { - console.log(response.data.items) setTeams(response.data.items) }) .catch((err) => { @@ -197,7 +193,6 @@ const OperatorViewPage: React.FC = () => { await axios .get(`/api/competitions/${activeId}`) .then((response) => { - console.log(response.data.name) setCompetitionName(response.data.name) }) .catch((err) => { @@ -247,28 +242,29 @@ const OperatorViewPage: React.FC = () => { </DialogTitle> <DialogContent> {/* <DialogContentText>Här visas tävlingskoderna till den valda tävlingen.</DialogContentText> */} - {codes.map((code) => ( - <ListItem key={code.id} style={{ display: 'flex' }}> - <ListItemText primary={`${getTypeName(code)}: `} /> - <Typography component="div"> - <ListItemText style={{ textAlign: 'right', marginLeft: '10px' }}> - <Box fontFamily="Monospace" fontWeight="fontWeightBold"> - {code.code} - </Box> - </ListItemText> - </Typography> - <Tooltip title="Kopiera kod" arrow> - <Button - margin-right="0px" - onClick={() => { - navigator.clipboard.writeText(code.code) - }} - > - <FileCopyIcon fontSize="small" /> - </Button> - </Tooltip> - </ListItem> - ))} + {codes && + codes.map((code) => ( + <ListItem key={code.id} style={{ display: 'flex' }}> + <ListItemText primary={`${getTypeName(code)}: `} /> + <Typography component="div"> + <ListItemText style={{ textAlign: 'right', marginLeft: '10px' }}> + <Box fontFamily="Monospace" fontWeight="fontWeightBold"> + {code.code} + </Box> + </ListItemText> + </Typography> + <Tooltip title="Kopiera kod" arrow> + <Button + margin-right="0px" + onClick={() => { + navigator.clipboard.writeText(code.code) + }} + > + <FileCopyIcon fontSize="small" /> + </Button> + </Tooltip> + </ListItem> + ))} </DialogContent> <DialogActions> <Button onClick={handleClose} color="primary"> diff --git a/client/src/pages/views/TeamViewPage.test.tsx b/client/src/pages/views/TeamViewPage.test.tsx index 10574f7e51df7dabf9f07754e9d8595d1c489559..33f7014df5d9974f141dd65273af3050062766ed 100644 --- a/client/src/pages/views/TeamViewPage.test.tsx +++ b/client/src/pages/views/TeamViewPage.test.tsx @@ -1,14 +1,14 @@ import { render } from '@testing-library/react' +import mockedAxios from 'axios' import React from 'react' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' import store from '../../store' import TeamViewPage from './TeamViewPage' -import mockedAxios from 'axios' it('renders participant view page', () => { const res = { - data: {}, + data: { slides: [{ id: 5 }] }, } ;(mockedAxios.get as jest.Mock).mockImplementation(() => { return Promise.resolve(res) diff --git a/client/src/sockets.ts b/client/src/sockets.ts index e5addeb8973ee5e346c44e1a3ca40b417e18db4d..97e0b0e318dacfaab24c37e9f1ef806b7a4c0b18 100644 --- a/client/src/sockets.ts +++ b/client/src/sockets.ts @@ -21,7 +21,6 @@ let socket: SocketIOClient.Socket export const socketConnect = () => { if (!socket) { const token = localStorage.competitionToken - console.log(token) socket = io('localhost:5000', { transportOptions: { polling: { diff --git a/client/src/utils/checkAuthenticationAdmin.ts b/client/src/utils/checkAuthenticationAdmin.ts index f8f94e2d0c42fbdbaa46283af6b3e2378d1a69be..3565f8e3b93bb8ff83114e166618a22f823d335e 100644 --- a/client/src/utils/checkAuthenticationAdmin.ts +++ b/client/src/utils/checkAuthenticationAdmin.ts @@ -9,7 +9,6 @@ const UnAuthorized = async () => { } export const CheckAuthenticationAdmin = async () => { - console.log('checkAuthenticationAdmin') const authToken = localStorage.token if (authToken) { const decodedToken: any = jwtDecode(authToken)