From 5a997fb8850b508c5d6f49a4528563359f1d51ca Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sat, 8 Feb 2020 13:32:35 +0100
Subject: [PATCH] get images from backend
---
src/actions/home.js | 16 ++++++++++++++++
src/actions/types.js | 2 ++
src/components/pages/Home.js | 23 ++++++++++-------------
src/reducers/ImagesReducer.js | 12 ++++++++++++
src/reducers/index.js | 2 ++
5 files changed, 42 insertions(+), 13 deletions(-)
create mode 100644 src/actions/home.js
create mode 100644 src/reducers/ImagesReducer.js
diff --git a/src/actions/home.js b/src/actions/home.js
new file mode 100644
index 0000000..fcfb35a
--- /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 ab60f1f..7f9a815 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 ea10f34..6ca2bb3 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 0000000..d8bc50a
--- /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 bc0e1d0..773566a 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;
--
GitLab