Fix: Handle new format from api in client

client/src/actions/cities.ts

@@ -8,7 +8,15 @@ export const getCities = () => async (dispatch: AppDispatch) => {
     .then((res) => {
       dispatch({
         type: Types.SET_CITIES,
-        payload: res.data,
+        payload: res.data.items,
+      })
+      dispatch({
+        type: Types.SET_COMPETITIONS_TOTAL,
+        payload: res.data.total_count,
+      })
+      dispatch({
+        type: Types.SET_COMPETITIONS_COUNT,
+        payload: res.data.count,
       })
     })
     .catch((err) => console.log(err))

client/src/actions/competitions.ts

@@ -19,11 +19,11 @@ export const getCompetitions = () => async (dispatch: AppDispatch, getState: ()
     .then((res) => {
       dispatch({
         type: Types.SET_COMPETITIONS,
-        payload: res.data.competitions,
+        payload: res.data.items,
       })
       dispatch({
         type: Types.SET_COMPETITIONS_TOTAL,
-        payload: res.data.total,
+        payload: res.data.total_count,
       })
       dispatch({
         type: Types.SET_COMPETITIONS_COUNT,

client/src/actions/types.ts

@@ -11,6 +11,8 @@ export default {
   SET_COMPETITIONS_TOTAL: 'SET_COMPETITIONS_TOTAL',
   SET_COMPETITIONS_COUNT: 'SET_COMPETITIONS_COUNT',
   SET_CITIES: 'SET_CITIES',
+  SET_CITIES_TOTAL: 'SET_CITIES_TOTAL',
+  SET_CITIES_COUNT: 'SET_CITIES_COUNT',
   AXIOS_GET: 'AXIOS_GET',
   AXIOS_GET_SUCCESS: 'AXIOS_GET_SUCCESS',
   AXIOS_GET_ERROR: 'AXIOS_GET_ERROR',

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

+import { fireEvent, render, screen } from '@testing-library/react'
+import { mount } from 'enzyme'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import store from '../../../store'
+import AddCompetition from './AddCompetition'
+
+const middlewares = [thunk]
+const mockStore = configureMockStore(middlewares)
+
+fit('renders add competition', () => {
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <AddCompetition />
+      </Provider>
+    </BrowserRouter>
+  )
+})
+
+fit('it adds competitions', () => {
+  const cities = [
+    {
+      id: 1,
+      name: 'Link\u00f6ping',
+    },
+    {
+      id: 2,
+      name: 'Stockholm',
+    },
+  ]
+  const store = mockStore({ cities })
+  // console.log(store.getState())
+  const wrapper = mount(
+    <Provider store={store}>
+      <AddCompetition />
+    </Provider>
+  )
+  const newCompetitionButton = wrapper.find('button')
+  newCompetitionButton.simulate('click')
+  const nameField = screen.getByRole('textbox')
+  // const nameField = textFields.children().first()
+
+  // nameField.simulate('focus')
+  // nameField.simulate('change', { target: { value: 'Changed' } })
+  console.log(nameField)
+  fireEvent.click(nameField)
+  expect(wrapper.text().includes('2')).toBe(true) //TODO: check that SlideSettings exists
+})

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

@@ -38,7 +38,7 @@ const competitionSchema: Yup.SchemaOf<AddCompetitionFormModel> = Yup.object({
 const AddCompetition: React.FC = (props: any) => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const [selectedCity, setSelectedCity] = React.useState<City | undefined>()
-  const cities = useAppSelector((state) => state.cities)
+  const cities = useAppSelector((state) => state.cities.cities)
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget)
   }

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

@@ -40,7 +40,7 @@ const CompetitionManager: React.FC = (props: any) => {
   const competitions = useAppSelector((state) => state.competitions.competitions)
   const filterParams = useAppSelector((state) => state.competitions.filterParams)
   const competitionTotal = useAppSelector((state) => state.competitions.total)
-  const cities = useAppSelector((state) => state.cities)
+  const cities = useAppSelector((state) => state.cities.cities)
   const classes = useStyles()
   const noFilterText = 'Alla'
   const dispatch = useAppDispatch()

client/src/reducers/citiesReducer.ts

@@ -2,12 +2,31 @@ import { AnyAction } from 'redux'
 import Types from '../actions/types'
 import { City } from '../interfaces/City'
 
-const initialState: City[] = []
+interface CityState {
+  cities: City[]
+  total: number
+  count: number
+}
+const initialState: CityState = {
+  cities: [],
+  total: 0,
+  count: 0,
+}
 
 export default function (state = initialState, action: AnyAction) {
   switch (action.type) {
     case Types.SET_CITIES:
-      return action.payload as City[]
+      return { ...state, cities: action.payload as City[] }
+    case Types.SET_CITIES_TOTAL:
+      return {
+        ...state,
+        total: action.payload as number,
+      }
+    case Types.SET_CITIES_COUNT:
+      return {
+        ...state,
+        count: action.payload as number,
+      }
     default:
       return state
   }