client/src/pages/views/components/JudgeScoreDisplay.tsx

+import { Box, Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../hooks'
+import { AnswerContainer, ScoreDisplayContainer, ScoreDisplayHeader, ScoreInput } from './styled'
+
+type ScoreDisplayProps = {
+  teamIndex: number
+}
+const questionMaxScore = 5
+
+const JudgeScoreDisplay = ({ teamIndex }: ScoreDisplayProps) => {
+  const currentTeam = useAppSelector((state) => state.presentation.teams[teamIndex])
+  return (
+    <ScoreDisplayContainer>
+      <ScoreDisplayHeader>
+        <Typography variant="h5">
+          <Box fontWeight="fontWeightBold">{currentTeam.name}</Box>
+        </Typography>
+
+        <ScoreInput
+          label="Poäng"
+          defaultValue={0}
+          inputProps={{ style: { fontSize: 20 } }}
+          InputProps={{ disableUnderline: true, inputProps: { min: 0, max: questionMaxScore } }}
+          type="number"
+        ></ScoreInput>
+      </ScoreDisplayHeader>
+      <Typography variant="h6">Alla poäng: 2 0 0 0 0 0 0 0 0</Typography>
+      <Typography variant="h6">Total poäng: 9</Typography>
+      <AnswerContainer>
+        <Typography variant="body1">
+          Svar: blablablablablablablablablabla blablablablabla blablablablabla blablablablablablablablablabla{' '}
+        </Typography>
+      </AnswerContainer>
+    </ScoreDisplayContainer>
+  )
+}
+
+export default JudgeScoreDisplay

client/src/pages/views/components/SlideDisplay.test.tsx

+import { render } from '@testing-library/react'
+import React from 'react'
+import { Provider } from 'react-redux'
+import store from '../../../store'
+import SlideDisplay from './SlideDisplay'
+
+it('renders slide display', () => {
+  render(
+    <Provider store={store}>
+      <SlideDisplay />
+    </Provider>
+  )
+})

client/src/pages/views/components/SlideDisplay.tsx

+import { Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../hooks'
+import { SlideContainer } from './styled'
+
+const SlideDisplay: React.FC = () => {
+  const currentSlide = useAppSelector((state) => state.presentation.slide)
+  return (
+    <SlideContainer>
+      <Typography variant="h3">{currentSlide.title}</Typography>
+    </SlideContainer>
+  )
+}
+
+export default SlideDisplay

client/src/pages/views/components/styled.tsx

+import { TextField } from '@material-ui/core'
+import styled from 'styled-components'
+
+export const SlideContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+export const ScoreDisplayContainer = styled.div`
+  padding-top: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+`
+
+export const ScoreDisplayHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+export const ScoreInput = styled(TextField)`
+  width: 40px;
+`
+
+export const AnswerContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`

client/src/pages/views/styled.tsx

+import { AppBar, Button, Drawer, Toolbar, Typography } from '@material-ui/core'
 import styled from 'styled-components'
 
+export const JudgeAppBar = styled(AppBar)`
+  z-index: 9000;
+`
+
+export const JudgeToolbar = styled(Toolbar)`
+  display: flex;
+  justify-content: space-between;
+`
+
+export const JudgeQuestionsLabel = styled(Typography)`
+  margin-left: 15px;
+`
+
+export const JudgeAnswersLabel = styled(Typography)`
+  margin-right: 160px;
+`
+
 export const ViewSelectContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -15,4 +33,59 @@ export const ViewSelectButtonGroup = styled.div`
   height: 140px;
   margin-left: auto;
   margin-right: auto;
-`
\ No newline at end of file
+`
+
+export const PresenterHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  width: 100%;
+`
+
+export const PresenterFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+export const PresenterButton = styled(Button)`
+  width: 100px;
+  height: 100px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+`
+
+export const PresenterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+`
+
+interface DrawerProps {
+  width: number
+}
+
+export const LeftDrawer = styled(Drawer)<DrawerProps>`
+  flex-shrink: 0;
+  position: 'relative';
+  z-index: -5;
+  width: ${(props) => (props ? props.width : 150)};
+`
+
+export const RightDrawer = styled(Drawer)<DrawerProps>`
+  width: ${(props) => (props ? props.width : 150)};
+  flex-shrink: 0;
+  z-index: 1;
+`
+
+interface ContentProps {
+  leftDrawerWidth: number
+  rightDrawerWidth: number
+}
+
+export const Content = styled.div<ContentProps>`
+  margin-left: ${(props) => (props ? props.leftDrawerWidth : 0)}px;
+  margin-right: ${(props) => (props ? props.rightDrawerWidth : 0)}px;
+  width: calc(100% - ${(props) => (props ? props.leftDrawerWidth + props.rightDrawerWidth : 0)}px);
+  height: calc(100% - 64px);
+`

client/src/reducers/allReducers.ts

@@ -3,6 +3,7 @@
 import { combineReducers } from 'redux'
 import citiesReducer from './citiesReducer'
 import competitionsReducer from './competitionsReducer'
+import presentationReducer from './presentationReducer'
 import rolesReducer from './rolesReducer'
 import searchUserReducer from './searchUserReducer'
 import uiReducer from './uiReducer'
@@ -14,6 +15,7 @@ const allReducers = combineReducers({
   UI: uiReducer,
   competitions: competitionsReducer,
   cities: citiesReducer,
+  presentation: presentationReducer,
   roles: rolesReducer,
   searchUsers: searchUserReducer,
 })

client/src/reducers/citiesReducer.ts

 import { AnyAction } from 'redux'
 import Types from '../actions/types'
-import { City } from '../interfaces/City'
+import { City } from '../interfaces/ApiModels'
 
 interface CityState {
   cities: City[]

client/src/reducers/competitionsReducer.ts

 import { AnyAction } from 'redux'
 import Types from '../actions/types'
-import { Competition } from '../interfaces/Competition'
-import { CompetitionFilterParams } from './../interfaces/CompetitionFilterParams'
+import { Competition } from '../interfaces/ApiModels'
+import { CompetitionFilterParams } from './../interfaces/FilterParams'
 
 interface CompetitionState {
   competitions: Competition[]

client/src/reducers/presentationReducer.ts

+import { AnyAction } from 'redux'
+import Types from '../actions/types'
+import { RichCompetition } from './../interfaces/ApiRichModels'
+import { Slide } from './../interfaces/Slide'
+import { Team } from './../interfaces/Team'
+
+interface PresentationState {
+  competition: RichCompetition
+  slide: Slide
+  teams: Team[]
+}
+
+const initialState: PresentationState = {
+  competition: {
+    name: '',
+    id: 0,
+    city: {
+      id: 0,
+      name: '',
+    },
+    slides: [],
+    year: 0,
+    teams: [],
+  },
+  slide: {
+    competition_id: 0,
+    id: 0,
+    order: 0,
+    timer: 0,
+    title: '',
+  },
+  teams: [],
+}
+
+export default function (state = initialState, action: AnyAction) {
+  switch (action.type) {
+    case Types.SET_PRESENTATION_COMPETITION:
+      return {
+        ...state,
+        slide: action.payload.slides[0] as Slide,
+        competition: action.payload as RichCompetition,
+      }
+    case Types.SET_PRESENTATION_TEAMS:
+      return {
+        ...state,
+        teams: action.payload as Team[],
+      }
+    case Types.SET_PRESENTATION_SLIDE:
+      return {
+        ...state,
+        slide: action.payload as Slide,
+      }
+    case Types.SET_PRESENTATION_SLIDE_PREVIOUS:
+      if (state.slide.order - 1 >= 0) {
+        return {
+          ...state,
+          slide: state.competition.slides[state.slide.order - 1],
+        }
+      }
+      return state
+    case Types.SET_PRESENTATION_SLIDE_NEXT:
+      if (state.slide.order + 1 < state.competition.slides.length) {
+        return {
+          ...state,
+          slide: state.competition.slides[state.slide.order + 1],
+        }
+      }
+      return state
+    default:
+      return state
+  }
+}

client/src/reducers/rolesReducer.ts

 import { AnyAction } from 'redux'
 import Types from '../actions/types'
-import { Role } from '../interfaces/Role'
+import { Role } from '../interfaces/ApiModels'
 
 interface RoleState {
   roles: Role[]

client/src/reducers/searchUserReducer.ts

 import { AnyAction } from 'redux'
 import Types from '../actions/types'
-import { UserData, UserFilterParams } from '../interfaces/UserData'
+import { User } from '../interfaces/ApiModels'
+import { UserFilterParams } from '../interfaces/FilterParams'
 
 interface SearchUserState {
-  users: UserData[]
+  users: User[]
   total: number
   count: number
   filterParams: UserFilterParams
@@ -21,7 +22,7 @@ export default function (state = initialState, action: AnyAction) {
     case Types.SET_SEARCH_USERS:
       return {
         ...state,
-        users: action.payload as UserData[],
+        users: action.payload as User[],
       }
     case Types.SET_SEARCH_USERS_FILTER_PARAMS:
       return {

client/src/reducers/userReducer.ts

 import { AnyAction } from 'redux'
 import Types from '../actions/types'
-import { City } from '../interfaces/City'
-import { Competition } from './../interfaces/Competition'
+import { City, Role } from '../interfaces/ApiModels'
 
 interface UserInfo {
   name: string
   email: string
-  role: Competition
+  role: Role
   city: City
   id: number
 }

client/src/styled.tsx

 import styled from 'styled-components'
 
 export const Wrapper = styled.div`
-  padding: 10px;
   height: 100%;
 `