Resolve "Fix client interfaces"

client/src/actions/competitions.ts

 import axios from 'axios'
-import { CompetitionFilterParams } from '../interfaces/CompetitionFilterParams'
+import { CompetitionFilterParams } from '../interfaces/FilterParams'
 import { AppDispatch, RootState } from './../store'
 import Types from './types'
 

client/src/actions/searchUser.ts

 import axios from 'axios'
-import { UserFilterParams } from '../interfaces/UserData'
+import { UserFilterParams } from '../interfaces/FilterParams'
 import { AppDispatch, RootState } from './../store'
 import Types from './types'
 

client/src/actions/user.ts

 import axios from 'axios'
 import { History } from 'history'
 import { AppDispatch } from '../store'
-import { AdminLoginData } from './../interfaces/AdminLoginData'
+import { AccountLoginModel } from './../interfaces/FormModels'
 import Types from './types'
 
-export const loginUser = (userData: AdminLoginData, history: History) => async (dispatch: AppDispatch) => {
+export const loginUser = (userData: AccountLoginModel, history: History) => async (dispatch: AppDispatch) => {
   dispatch({ type: Types.LOADING_UI })
   await axios
     .post('/auth/login', userData)

client/src/interfaces/AdminLoginData.ts

-export interface AdminLoginData {
-  email: string
-  password: string
-}

client/src/interfaces/ApiModels.ts

+interface NameID {
+  id: number
+  name: string
+}
+export interface City extends NameID {}
+export interface Role extends NameID {}
+export interface MediaType extends NameID {}
+export interface QuestionType extends NameID {}
+
+export interface Media {
+  id: number
+  filename: string
+  mediatype_id: number
+  user_id: number
+}
+
+export interface User extends NameID {
+  email: string
+  role_id: number
+  city_id: number
+}
+
+export interface Competition extends NameID {
+  city_id: number
+  year: number
+}
+
+export interface Team extends NameID {
+  competition_id: number
+}
+
+export interface Question extends NameID {
+  slide_id: number
+  title: string
+  total_score: number
+  type_id: number
+}
+
+export interface QuestionAlternative {
+  id: number
+  text: string
+  value: boolean
+  question_id: number
+}
+export interface QuestionAnswer {
+  id: number
+  question_id: number
+  team_id: string
+  data: string
+  score: number
+}
+
+export interface Component {
+  id: number
+  x: number
+  y: number
+  w: number
+  h: number
+  type: number
+}
+
+export interface ImageComponent extends Component {
+  media_id: number
+}
+
+export interface TextComponent extends Component {
+  text: string
+  font: string
+}
+
+export interface QuestionAlternativeComponent extends Component {
+  question_alternative_id: number
+  font: string
+}

client/src/interfaces/ApiRichModels.ts

+import { City, Component, Media, QuestionAnswer, QuestionType } from './ApiModels'
+
+export interface RichCompetition {
+  name: string
+  id: number
+  year: number
+  city: City
+  slides: RichSlide[]
+  teams: RichTeam[]
+}
+
+export interface RichSlide {
+  id: number
+  order: number
+  timer: number
+  title: string
+  competition_id: number
+  question: RichQuestion[]
+  components: Component[]
+  medias: Media[]
+}
+
+export interface RichTeam {
+  id: number
+  name: string
+  question_answers: QuestionAnswer[]
+  competition_id: number
+}
+
+export interface RichQuestion {
+  id: number
+  slide_id: number
+  name: string
+  title: string
+  total_score: number
+  question_type: QuestionType
+}

client/src/interfaces/City.ts

-export interface City {
-  id: number
-  name: string
-}

client/src/interfaces/Competition.ts

-export interface Competition {
-  name: string
-  id: number
-  city_id: number
-  year: number
-}

client/src/interfaces/CompetitionFilterParams.ts

-export interface CompetitionFilterParams {
-  name?: string
-  year?: number
-  cityId?: number
-  styleId?: number
-  page: number
-  pageSize: number
-}

client/src/interfaces/UserData.ts → client/src/interfaces/FilterParams.ts

-export interface UserData {
-  id: number
+export interface CompetitionFilterParams {
   name?: string
-  email: string
-  role_id: number
-  city_id: number
+  year?: number
+  cityId?: number
+  styleId?: number
+  page: number
+  pageSize: number
+}
+
+export interface SearchUserFilterParams {
+  name?: string
+  year?: number
+  cityId?: number
+  styleId?: number
+  page: number
+  pageSize: number
 }
 
 export interface UserFilterParams {

client/src/interfaces/models.ts → client/src/interfaces/FormModels.ts

+export interface ServerResponse {
+  code: number
+  message: string
+}
+export interface FormModel<T> {
+  model: T
+  error?: string
+}
+
+//#region LOGIN
 export interface AccountLoginModel {
   email: string
   password: string
 }
 
+export interface CompetitionLoginModel {
+  code: string
+}
+
+//#endregion
+
+////ADD////
 export interface AddCompetitionModel {
   name: string
   city: string
   year: number
 }
 
-export interface CompetitionLoginModel {
-  code: string
-}
-
 export interface AddUserModel {
   email: string
   password: string
@@ -21,6 +34,11 @@ export interface AddUserModel {
   name?: string
 }
 
+export interface AddCityModel {
+  name: string
+}
+
+////EDIT////
 export interface EditUserModel {
   email: string
   role: string

client/src/interfaces/Role.ts

-export interface Role {
-  id: number
-  name: string
-}

client/src/interfaces/SearchUserFilterParams.ts

-export interface SearchUSerFilterParams {
-  name?: string
-  year?: number
-  cityId?: number
-  styleId?: number
-  page: number
-  pageSize: number
-}

client/src/pages/admin/AdminPage.tsx

@@ -16,8 +16,10 @@ 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 React from 'react'
+import React, { useEffect } from 'react'
 import { Link, Route, Switch, useRouteMatch } from 'react-router-dom'
+import { getCities } from '../../actions/cities'
+import { getRoles } from '../../actions/roles'
 import { logoutUser } from '../../actions/user'
 import { useAppDispatch } from '../../hooks'
 import CompetitionManager from './components/CompetitionManager'
@@ -62,6 +64,12 @@ const AdminView: React.FC = () => {
     dispatch(logoutUser())
   }
   const dispatch = useAppDispatch()
+
+  useEffect(() => {
+    dispatch(getCities())
+    dispatch(getRoles())
+  }, [])
+
   return (
     <div className={classes.root}>
       <CssBaseline />

client/src/pages/admin/components/AddCompetition.tsx

@@ -6,21 +6,15 @@ import React from 'react'
 import * as Yup from 'yup'
 import { getCompetitions } from '../../../actions/competitions'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { City } from '../../../interfaces/City'
-import { AddCompetitionModel } from '../../../interfaces/models'
+import { City } from '../../../interfaces/ApiModels'
+import { AddCompetitionModel, FormModel } from '../../../interfaces/FormModels'
 import { AddButton, AddContent, AddForm } from './styled'
-interface ServerResponse {
-  code: number
-  message: string
-}
 
-interface AddCompetitionFormModel {
-  model: AddCompetitionModel
-  error?: string
-}
+type formType = FormModel<AddCompetitionModel>
+
 const noCitySelected = 'Välj stad'
 
-const competitionSchema: Yup.SchemaOf<AddCompetitionFormModel> = Yup.object({
+const competitionSchema: Yup.SchemaOf<formType> = Yup.object({
   model: Yup.object()
     .shape({
       name: Yup.string().required('Namn krävs'),
@@ -50,17 +44,14 @@ const AddCompetition: React.FC = (props: any) => {
   const dispatch = useAppDispatch()
   const id = open ? 'simple-popover' : undefined
   const currentYear = new Date().getFullYear()
-  const handleCompetitionSubmit = async (
-    values: AddCompetitionFormModel,
-    actions: FormikHelpers<AddCompetitionFormModel>
-  ) => {
+  const handleCompetitionSubmit = async (values: formType, actions: FormikHelpers<formType>) => {
     const params = {
       name: values.model.name,
       year: values.model.year,
       city_id: selectedCity?.id as number,
     }
     await axios
-      .post<ServerResponse>('/competitions', params)
+      .post('/competitions', params)
       .then(() => {
         actions.resetForm()
         setAnchorEl(null)
@@ -78,7 +69,7 @@ const AddCompetition: React.FC = (props: any) => {
       })
   }
 
-  const competitionInitialValues: AddCompetitionFormModel = {
+  const competitionInitialValues: formType = {
     model: { name: '', city: userCity?.name ? userCity.name : noCitySelected, year: currentYear },
   }
   return (

client/src/pages/admin/components/AddRegion.tsx

@@ -9,20 +9,9 @@ import React from 'react'
 import * as Yup from 'yup'
 import { getCities } from '../../../actions/cities'
 import { useAppDispatch } from '../../../hooks'
+import { AddCityModel, FormModel } from '../../../interfaces/FormModels'
 import { AddForm } from './styled'
 
-interface AddRegionModel {
-  city: ''
-}
-interface ServerResponse {
-  code: number
-  message: string
-}
-interface AddRegionFormModel {
-  model: AddRegionModel
-  error?: string
-}
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     table: {
@@ -39,7 +28,9 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-const schema: Yup.SchemaOf<AddRegionFormModel> = Yup.object({
+type formType = FormModel<AddCityModel>
+
+const schema: Yup.SchemaOf<formType> = Yup.object({
   model: Yup.object()
     .shape({
       city: Yup.string()
@@ -55,12 +46,12 @@ const AddRegion: React.FC = (props: any) => {
   const classes = useStyles()
   const dispatch = useAppDispatch()
 
-  const handleSubmit = async (values: AddRegionFormModel, actions: FormikHelpers<AddRegionFormModel>) => {
+  const handleSubmit = async (values: formType, actions: FormikHelpers<formType>) => {
     const params = {
-      name: values.model.city,
+      name: values.model.name,
     }
     await axios
-      .post<ServerResponse>('/misc/cities', params)
+      .post('/misc/cities', params)
       .then(() => {
         actions.resetForm()
         dispatch(getCities())
@@ -76,8 +67,8 @@ const AddRegion: React.FC = (props: any) => {
       })
   }
 
-  const initValues: AddRegionFormModel = {
-    model: { city: '' },
+  const initValues: formType = {
+    model: { name: '' },
   }
 
   return (
@@ -88,8 +79,8 @@ const AddRegion: React.FC = (props: any) => {
             <Grid container={true}>
               <TextField
                 className={classes.margin}
-                helperText={formik.touched.model?.city ? formik.errors.model?.city : ''}
-                error={Boolean(formik.touched.model?.city && formik.errors.model?.city)}
+                helperText={formik.touched.model?.name ? formik.errors.model?.name : ''}
+                error={Boolean(formik.touched.model?.name && formik.errors.model?.name)}
                 onChange={formik.handleChange}
                 onBlur={formik.handleBlur}
                 name="model.city"

client/src/pages/admin/components/AddUser.tsx

@@ -7,24 +7,16 @@ import React from 'react'
 import * as Yup from 'yup'
 import { getSearchUsers } from '../../../actions/searchUser'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { City } from '../../../interfaces/City'
-import { AddUserModel } from '../../../interfaces/models'
-import { Role } from '../../../interfaces/Role'
+import { City, Role } from '../../../interfaces/ApiModels'
+import { AddUserModel, FormModel } from '../../../interfaces/FormModels'
 import { AddButton, AddContent, AddForm } from './styled'
-interface ServerResponse {
-  code: number
-  message: string
-}
 
-interface AddUserFormModel {
-  model: AddUserModel
-  error?: string
-}
+type formType = FormModel<AddUserModel>
 
 const noRoleSelected = 'Välj roll'
 const noCitySelected = 'Välj stad'
 
-const userSchema: Yup.SchemaOf<AddUserFormModel> = Yup.object({
+const userSchema: Yup.SchemaOf<formType> = Yup.object({
   model: Yup.object()
     .shape({
       name: Yup.string(), //.required('Namn krävs'),
@@ -58,7 +50,7 @@ const AddUser: React.FC = (props: any) => {
   const open = Boolean(anchorEl)
   const dispatch = useAppDispatch()
   const id = open ? 'simple-popover' : undefined
-  const handleCompetitionSubmit = async (values: AddUserFormModel, actions: FormikHelpers<AddUserFormModel>) => {
+  const handleCompetitionSubmit = async (values: formType, actions: FormikHelpers<formType>) => {
     const params = {
       email: values.model.email,
       password: values.model.password,
@@ -67,7 +59,7 @@ const AddUser: React.FC = (props: any) => {
       role_id: selectedRole?.id as number,
     }
     await axios
-      .post<ServerResponse>('/auth/signup', params)
+      .post('/auth/signup', params)
       .then(() => {
         actions.resetForm()
         setAnchorEl(null)
@@ -86,7 +78,7 @@ const AddUser: React.FC = (props: any) => {
       })
   }
 
-  const userInitialValues: AddUserFormModel = {
+  const userInitialValues: formType = {
     model: { email: '', password: '', name: '', city: noCitySelected, role: noRoleSelected },
   }
   return (

client/src/pages/admin/components/CompetitionManager.tsx

@@ -15,10 +15,9 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
 import axios from 'axios'
 import React, { useEffect } from 'react'
 import { Link } from 'react-router-dom'
-import { getCities } from '../../../actions/cities'
 import { getCompetitions, setFilterParams } from '../../../actions/competitions'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { CompetitionFilterParams } from '../../../interfaces/CompetitionFilterParams'
+import { CompetitionFilterParams } from '../../../interfaces/FilterParams'
 import AddCompetition from './AddCompetition'
 import { FilterContainer, RemoveMenuItem, TopBar, YearFilterTextField } from './styled'
 
@@ -55,7 +54,6 @@ const CompetitionManager: React.FC = (props: any) => {
   }
 
   useEffect(() => {
-    dispatch(getCities())
     dispatch(getCompetitions())
   }, [])
 

client/src/pages/admin/components/UserManager.tsx

@@ -14,11 +14,9 @@ import TableRow from '@material-ui/core/TableRow'
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
 import axios from 'axios'
 import React, { useEffect } from 'react'
-import { getCities } from '../../../actions/cities'
-import { getRoles } from '../../../actions/roles'
 import { getSearchUsers, setFilterParams } from '../../../actions/searchUser'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { UserFilterParams } from '../../../interfaces/UserData'
+import { UserFilterParams } from '../../../interfaces/FilterParams'
 import AddUser from './AddUser'
 import { FilterContainer, RemoveMenuItem, TopBar } from './styled'
 
@@ -56,8 +54,6 @@ const UserManager: React.FC = (props: any) => {
   }
 
   useEffect(() => {
-    dispatch(getCities())
-    dispatch(getRoles())
     dispatch(getSearchUsers())
   }, [])
 

client/src/pages/login/components/AdminLogin.tsx

@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom'
 import * as Yup from 'yup'
 import { loginUser } from '../../../actions/user'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { AccountLoginModel } from '../../../interfaces/models'
+import { AccountLoginModel } from '../../../interfaces/FormModels'
 import { CenteredCircularProgress, LoginForm } from './styled'
 
 interface AccountLoginFormModel {