From 56efcb3c23f40bed68bcd21180fb50f419caf2fb Mon Sep 17 00:00:00 2001 From: Albin Henriksson <albhe428@student.liu.se> Date: Tue, 6 Apr 2021 08:58:49 +0200 Subject: [PATCH] Fix: Handle new format from api in client --- client/src/actions/cities.ts | 10 +++- client/src/actions/competitions.ts | 4 +- client/src/actions/types.ts | 2 + .../admin/components/AddCompetition.test.tsx | 52 +++++++++++++++++++ .../pages/admin/components/AddCompetition.tsx | 2 +- .../admin/components/CompetitionManager.tsx | 2 +- client/src/reducers/citiesReducer.ts | 23 +++++++- 7 files changed, 88 insertions(+), 7 deletions(-) create mode 100644 client/src/pages/admin/components/AddCompetition.test.tsx diff --git a/client/src/actions/cities.ts b/client/src/actions/cities.ts index 381d0a04..a54475c7 100644 --- a/client/src/actions/cities.ts +++ b/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)) diff --git a/client/src/actions/competitions.ts b/client/src/actions/competitions.ts index 35f12d31..a758fd63 100644 --- a/client/src/actions/competitions.ts +++ b/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, diff --git a/client/src/actions/types.ts b/client/src/actions/types.ts index d265a692..40e94303 100644 --- a/client/src/actions/types.ts +++ b/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', diff --git a/client/src/pages/admin/components/AddCompetition.test.tsx b/client/src/pages/admin/components/AddCompetition.test.tsx new file mode 100644 index 00000000..3455447b --- /dev/null +++ b/client/src/pages/admin/components/AddCompetition.test.tsx @@ -0,0 +1,52 @@ +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 +}) diff --git a/client/src/pages/admin/components/AddCompetition.tsx b/client/src/pages/admin/components/AddCompetition.tsx index 3bb54db0..bc06fdb2 100644 --- a/client/src/pages/admin/components/AddCompetition.tsx +++ b/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) } diff --git a/client/src/pages/admin/components/CompetitionManager.tsx b/client/src/pages/admin/components/CompetitionManager.tsx index c6803b03..2acce64b 100644 --- a/client/src/pages/admin/components/CompetitionManager.tsx +++ b/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() diff --git a/client/src/reducers/citiesReducer.ts b/client/src/reducers/citiesReducer.ts index 871123d8..1c9542ff 100644 --- a/client/src/reducers/citiesReducer.ts +++ b/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 } -- GitLab