diff --git a/client/src/interfaces/ApiModels.ts b/client/src/interfaces/ApiModels.ts index a154a0c832e837a852e029d469bd277eafa9742e..d423d424820401297b93a679a2099221a8c4ee36 100644 --- a/client/src/interfaces/ApiModels.ts +++ b/client/src/interfaces/ApiModels.ts @@ -2,18 +2,11 @@ interface NameID { id: number name: string } -export interface City extends NameID { - users: User[] - competitions: Competition[] -} +export interface City extends NameID {} -export interface Role extends NameID { - users: User[] -} +export interface Role extends NameID {} -export interface QuestionType extends NameID { - questions: Question[] -} +export interface QuestionType extends NameID {} export interface Media { id: number @@ -22,9 +15,7 @@ export interface Media { user_id: number } -export interface MediaType extends NameID { - media: Media[] -} +export interface MediaType extends NameID {} export interface User extends NameID { email: string diff --git a/client/src/interfaces/ApiRichModels.ts b/client/src/interfaces/ApiRichModels.ts index 779dbd8a4fe91d7386b96bd4a3c105561dc3be96..e21ae5fa14f709892b4d98c1685b690cd14e8284 100644 --- a/client/src/interfaces/ApiRichModels.ts +++ b/client/src/interfaces/ApiRichModels.ts @@ -1,4 +1,5 @@ -import { QuestionAlternative, QuestionAnswer } from './ApiModels' +import { Component } from 'react' +import { Media, QuestionAlternative, QuestionAnswer, QuestionType } from './ApiModels' export interface RichCompetition { name: string @@ -15,9 +16,9 @@ export interface RichSlide { timer: number title: string competition_id: number + components: Component[] + medias: Media[] questions: RichQuestion[] - body: string - settings: string } export interface RichTeam { @@ -33,7 +34,7 @@ export interface RichQuestion { name: string title: string total_score: number + question_type: QuestionType type_id: number - question_answers: QuestionAnswer[] - alternatives: QuestionAlternative[] + question_alternatives: QuestionAlternative[] } diff --git a/client/src/interfaces/Competition.ts b/client/src/interfaces/Competition.ts deleted file mode 100644 index c7c4d3096eae69b77c644988304605df70c31236..0000000000000000000000000000000000000000 --- a/client/src/interfaces/Competition.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { City } from './ApiModels' -import { RichSlide } from './ApiRichModels' - -export interface Competition { - name: string - id: number - city: City - year: number - slides: RichSlide[] -} diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.test.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.test.tsx index 67e38b99b38cdbbfafc8532a8e26e2cc8ec9b42f..ebc96d73452aff066c29856c4756573d28435bb2 100644 --- a/client/src/pages/presentationEditor/PresentationEditorPage.test.tsx +++ b/client/src/pages/presentationEditor/PresentationEditorPage.test.tsx @@ -1,12 +1,41 @@ 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 PresentationEditorPage from './PresentationEditorPage' it('renders presentation editor', () => { + const competitionRes: any = { + data: { + name: '', + id: 0, + year: 0, + city_id: 0, + slides: [], + teams: [], + }, + } + const citiesRes: any = { + data: { + items: [ + { + name: '', + city_id: 0, + }, + ], + }, + } + ;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => { + if (path.startsWith('/competitions')) return Promise.resolve(competitionRes) + return Promise.resolve(citiesRes) + }) render( - <BrowserRouter> - <PresentationEditorPage /> - </BrowserRouter> + <Provider store={store}> + <BrowserRouter> + <PresentationEditorPage /> + </BrowserRouter> + </Provider> ) }) diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx index e31aaabb5cc2681c9e478518d686ae991127a137..2993b12b78e9e532e71ab4573248bf1b51bcc4e8 100644 --- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx +++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx @@ -7,6 +7,7 @@ import ListItemText from '@material-ui/core/ListItemText' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import React, { useEffect } from 'react' import { useParams } from 'react-router-dom' +import { getCities } from '../../actions/cities' import { getEditorCompetition } from '../../actions/editor' import { useAppDispatch, useAppSelector } from '../../hooks' import { Content } from '../views/styled' @@ -67,6 +68,7 @@ const PresentationEditorPage: React.FC = () => { // TODO: wait for dispatch to finish useEffect(() => { dispatch(getEditorCompetition(id)) + dispatch(getCities()) }, []) return ( <PresentationEditorContainer> diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx index 592581d4f8b3eaa884b7e0b409f39ee5ae8e5344..a655a30f0763524c61e81185065ab4974a15ae91 100644 --- a/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx +++ b/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx @@ -1,7 +1,10 @@ import { render } from '@testing-library/react' import React from 'react' +import { BrowserRouter } from 'react-router-dom' import ImageComponentDisplay from './ImageComponentDisplay' it('renders image component display', () => { - render(<ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, type: 0, media_id: 0 }} />) + render( + <ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, type: 0, media_id: 0 }} /> + ) }) diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx index e5e1bc6a72416eae2f3064b20f3ce319581c90a7..2c61633f04a7aaba595e293a8f8ed9670d5c46c3 100644 --- a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx +++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx @@ -13,9 +13,8 @@ import { import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import CloseIcon from '@material-ui/icons/Close' import axios from 'axios' -import React, { useEffect } from 'react' +import React from 'react' import { useParams } from 'react-router-dom' -import { getCities } from '../../../actions/cities' import { getEditorCompetition } from '../../../actions/editor' import { useAppDispatch, useAppSelector } from '../../../hooks' import { City } from '../../../interfaces/ApiModels' @@ -65,10 +64,6 @@ const CompetitionSettings: React.FC = () => { const { id }: CompetitionParams = useParams() const dispatch = useAppDispatch() const competition = useAppSelector((state) => state.editor.competition) - useEffect(() => { - dispatch(getEditorCompetition(id)) - dispatch(getCities()) - }, []) const updateCompetitionName = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { await axios @@ -122,7 +117,7 @@ const CompetitionSettings: React.FC = () => { <InputLabel id="region-selection-label">Region</InputLabel> {/*TODO: fixa så cities laddar in i statet likt i CompetitionManager*/} <Select - value={cities[competition.city_id - 1] ? cities[0].name : ''} + value={cities.find((city) => city.id === competition.city_id)?.name || ''} label="RegionSelect" onChange={handleChange} > diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx index b4daa57be6bc6574d2b2617e986f50348e345246..a7a71e25921deb276cbaca2089d2ecbf58c8493c 100644 --- a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx +++ b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx @@ -1,15 +1,30 @@ import { render } from '@testing-library/react' import { mount } from 'enzyme' import React from 'react' +import { Provider } from 'react-redux' +import { BrowserRouter } from 'react-router-dom' +import store from '../../../store' import CompetitionSettings from './CompetitionSettings' import SettingsPanel from './SettingsPanel' it('renders settings panel', () => { - render(<SettingsPanel />) + render( + <Provider store={store}> + <BrowserRouter> + <SettingsPanel /> + </BrowserRouter> + </Provider> + ) }) it('renders slide settings tab', () => { - const wrapper = mount(<SettingsPanel />) + const wrapper = mount( + <Provider store={store}> + <BrowserRouter> + <SettingsPanel /> + </BrowserRouter> + </Provider> + ) const tabs = wrapper.find('.MuiTabs-flexContainer') expect(wrapper.find(CompetitionSettings).length).toEqual(1) tabs.children().at(1).simulate('click') diff --git a/client/src/pages/presentationEditor/components/SlideSettings.test.tsx b/client/src/pages/presentationEditor/components/SlideSettings.test.tsx index 4099e13080f660c88c00c7884c1603e62b41db64..a271fcf5286361804d073fa345abebe1212eb6f2 100644 --- a/client/src/pages/presentationEditor/components/SlideSettings.test.tsx +++ b/client/src/pages/presentationEditor/components/SlideSettings.test.tsx @@ -1,7 +1,16 @@ import { render } from '@testing-library/react' import React from 'react' +import { Provider } from 'react-redux' +import { BrowserRouter } from 'react-router-dom' +import store from '../../../store' import SlideSettings from './SlideSettings' it('renders slide settings', () => { - render(<SlideSettings />) + render( + <Provider store={store}> + <BrowserRouter> + <SlideSettings /> + </BrowserRouter> + </Provider> + ) }) diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx index d5ab4912c26655ed7b6a1112674d84e6c657f13d..cd611060bf16fd2e3e7d6b959cb1e0610a2fa931 100644 --- a/client/src/pages/presentationEditor/components/SlideSettings.tsx +++ b/client/src/pages/presentationEditor/components/SlideSettings.tsx @@ -114,7 +114,7 @@ const SlideSettings: React.FC = () => { const updateSlideType = async (event: React.ChangeEvent<{ value: unknown }>) => { await axios // TODO: implementera API för att kunna ändra i questions->type_id - .put(`/competitions/${id}/slides/${currentSlide.id}`, { type_id: event.target.value }) + .put(`/competitions/${id}/slides/${currentSlide?.id}`, { type_id: event.target.value }) .then(() => { dispatch(getEditorCompetition(id)) }) @@ -125,7 +125,7 @@ const SlideSettings: React.FC = () => { // Wheter the alternative is true or false await axios // TODO: implementera API för att kunna ändra i alternatives->value - .put(`/competitions/${id}/slides/${currentSlide.id}`, { value: event.target.value }) + .put(`/competitions/${id}/slides/${currentSlide?.id}`, { value: event.target.value }) .then(() => { dispatch(getEditorCompetition(id)) }) @@ -169,7 +169,7 @@ const SlideSettings: React.FC = () => { <div className={classes.whiteBackground}> <FormControl variant="outlined" className={classes.dropDown}> <InputLabel id="slide-type-selection-label">Sidtyp</InputLabel> - <Select value={currentSlide.questions[0].type_id} label="Sidtyp" onChange={updateSlideType}> + <Select value={currentSlide?.questions[0].type_id || 0} label="Sidtyp" onChange={updateSlideType}> <MenuItem value={0}> <Button>Informationssida</Button> </MenuItem> @@ -194,7 +194,7 @@ const SlideSettings: React.FC = () => { helperText="Lämna blank för att inte använda timerfunktionen" label="Timer" type="number" - value={currentSlide.timer} + value={currentSlide?.timer} /> </ListItem> @@ -206,7 +206,7 @@ const SlideSettings: React.FC = () => { secondary="(Fyll i rutan höger om textfältet för att markera korrekt svar)" /> </ListItem> - {currentSlide.questions[0].alternatives.map((alt) => ( + {(currentSlide?.questions[0].question_alternatives || []).map((alt) => ( <div key={alt.id}> <ListItem divider> <TextField diff --git a/client/src/reducers/presentationReducer.test.ts b/client/src/reducers/presentationReducer.test.ts index cf4ded4132b1fa1cb1490a89584791032746385b..15bcd3376110f565db2ed73bc4e2d848c8063f61 100644 --- a/client/src/reducers/presentationReducer.test.ts +++ b/client/src/reducers/presentationReducer.test.ts @@ -7,10 +7,7 @@ const initialState = { competition: { name: '', id: 0, - city: { - id: 0, - name: '', - }, + city_id: 0, slides: [], year: 0, teams: [],