diff --git a/src/actions/home.js b/src/actions/home.js new file mode 100644 index 0000000000000000000000000000000000000000..fcfb35a6b6dde6a410671d6dc840914307a4808e --- /dev/null +++ b/src/actions/home.js @@ -0,0 +1,16 @@ +import axios from './session'; +import { GET_IMAGES } from './types'; + +export const getImages = () => ( + async (dispatch) => { + try { + const response = await axios.get('/api/v1/images'); + dispatch({ + type: GET_IMAGES, + payload: response.data, + }); + } catch (e) { + console.log(e); + } + } +); \ No newline at end of file diff --git a/src/actions/types.js b/src/actions/types.js index ab60f1fb95ec24e4e6c0cf8f7b494caaae8ab87a..7f9a8152d7547cbfb62b94b328f4df50819c23cc 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -16,6 +16,8 @@ export const SELECT_NEWS = 'select_news'; export const GET_MENTORS = 'get_mentors'; +export const GET_IMAGES = 'get_images'; + export const GET_TASKS = 'get_homeworks'; export const ADD_TASK = 'add_task'; export const DELETE_TASK = 'delete_task'; diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index ea10f34d85164a5bd5e57c4049d64494118665fc..6ca2bb363c9a4e82dfa78056ac42ed2cdfd34653 100644 --- a/src/components/pages/Home.js +++ b/src/components/pages/Home.js @@ -13,6 +13,7 @@ import Slider from 'react-slick'; import { Link } from 'react-router-dom'; import './Home.css'; import KSZKbiglogo from '../images/kszk_big_logo.png'; +import { getImages } from '../../actions/home' const settings = { dots: false, @@ -28,26 +29,22 @@ const settings = { initialSlide: Math.floor((Math.random() * 32) + 1), }; -const range = (count) => { - const newArray = []; - for (let i = 1; i < count; i += 1) { - newArray.push(i); +class Home extends Component { + UNSAFE_componentWillMount() { + this.props.getImages(); } - return newArray; -}; - -class Home extends Component { render() { const kszk_age = new Date().getFullYear() - 1976 + console.log(this.props.images) return ( <div> <div className='car-image-kszk'> <Slider {...settings}> { - range(32).map(image => ( + this.props.images.map(image => ( <div key={image}> - <img src={`images/${image}.jpg`} width='100%' alt='' /> + <img src={image.image} width='100%' alt='' /> </div> )) } @@ -209,8 +206,8 @@ class Home extends Component { } } -const mapStateToProps = ({ user }) => ({ - user, +const mapStateToProps = ({ user, images }) => ({ + user, images }); -export default connect(mapStateToProps, {})(Home); +export default connect(mapStateToProps, { getImages })(Home); diff --git a/src/reducers/ImagesReducer.js b/src/reducers/ImagesReducer.js new file mode 100644 index 0000000000000000000000000000000000000000..d8bc50a7543a6890f48e190f3140aa4ec3452080 --- /dev/null +++ b/src/reducers/ImagesReducer.js @@ -0,0 +1,12 @@ +import { GET_IMAGES } from '../actions/types'; + +const INITIAL_STATE = []; + +export default (state = INITIAL_STATE, action) => { + switch (action.type) { + case GET_IMAGES: + return action.payload; + default: + return state; + } +}; diff --git a/src/reducers/index.js b/src/reducers/index.js index bc0e1d057673610fe4f737e774bdcf6a438ba9bf..773566a59eb4f4cb32c1b76f1adae76d26969b97 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -13,6 +13,7 @@ import CorrectSolutionReducer from './CorrectSolutionReducer'; import EditTaskReducer from './EditTaskReducer'; import GroupsReducer from './GroupsReducer'; import MentorsReducer from './MentorsReducer'; +import ImagesReducer from './ImagesReducer'; const rootReducer = combineReducers({ user: UserReducer, @@ -29,6 +30,7 @@ const rootReducer = combineReducers({ notes: NoteReducer, groups: GroupsReducer, mentors: MentorsReducer, + images: ImagesReducer, }); export default rootReducer;