mohiit1502/PictureStory-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Image retrieval from server

Browse Source
This commit is contained in:
vaasu
2019-11-06 12:40:22 +05:30
parent f875c16df4
commit 9a4b8d0c36
51 changed files with 263 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.js
View File

@@ -1,29 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'
import {createGetSelector} from 'reselect-immutable-helpers'
import {getImages} from './../../../../pages/Home/selectors'
import ImageCard from './Image'
import Image from './../../../../models/image.model'
class ImageContainer extends React.Component {
render() {
const images = [
new Image('dragonfly1', '/images/GUD_1.JPG', 'Guddu 1'),
new Image('dragonfly2', '/images/GUD_2.JPG', 'sampleDesc2'),
new Image('dragonfly3', '/images/GUD_3.JPG', 'sampleDesc3'),
new Image('dragonfly4', '/images/GUD_4.JPG', 'sampleDesc4'),
new Image('dragonfly1', '/images/GUD_5.JPG', 'sampleDesc1'),
new Image('dragonfly2', '/images/GUD_6.JPG', 'sampleDesc2'),
new Image('dragonfly3', '/images/GUD_7.JPG', 'sampleDesc3'),
new Image('dragonfly4', '/images/GUD_8.JPG', 'sampleDesc4'),
new Image('dragonfly1', '/images/GUD_9.JPG', 'sampleDesc1'),
new Image('dragonfly2', '/images/GUD_10.JPG', 'sampleDesc2'),
new Image('dragonfly3', '/images/GUD_11.JPG', 'sampleDesc3'),
new Image('dragonfly4', '/images/GUD_12.JPG', 'sampleDesc4'),
new Image('dragonfly1', '/images/GUD_4.JPG', 'sampleDesc1'),
new Image('dragonfly2', '/images/GUD_3.JPG', 'sampleDesc2'),
new Image('dragonfly3', '/images/GUD_2.JPG', 'sampleDesc3'),
new Image('dragonfly4', '/images/GUD_1.JPG', 'sampleDesc4')
]
// const images = [
// new Image('dragonfly1', '/images/GUD_1.JPG', 'Guddu 1'),
// new Image('dragonfly2', '/images/GUD_2.JPG', 'sampleDesc2'),
// new Image('dragonfly3', '/images/GUD_3.JPG', 'sampleDesc3'),
// new Image('dragonfly4', '/images/GUD_4.JPG', 'sampleDesc4'),
// new Image('dragonfly1', '/images/GUD_5.JPG', 'sampleDesc1'),
// new Image('dragonfly2', '/images/GUD_6.JPG', 'sampleDesc2'),
// new Image('dragonfly3', '/images/GUD_7.JPG', 'sampleDesc3'),
// new Image('dragonfly4', '/images/GUD_8.JPG', 'sampleDesc4'),
// new Image('dragonfly1', '/images/GUD_9.JPG', 'sampleDesc1'),
// new Image('dragonfly2', '/images/GUD_10.JPG', 'sampleDesc2'),
// new Image('dragonfly3', '/images/GUD_11.JPG', 'sampleDesc3'),
// new Image('dragonfly4', '/images/GUD_12.JPG', 'sampleDesc4'),
// new Image('dragonfly1', '/images/GUD_4.JPG', 'sampleDesc1'),
// new Image('dragonfly2', '/images/GUD_3.JPG', 'sampleDesc2'),
// new Image('dragonfly3', '/images/GUD_2.JPG', 'sampleDesc3'),
// new Image('dragonfly4', '/images/GUD_1.JPG', 'sampleDesc4')
// ]
const {images} = this.props
const imageRenders = images.map((image, index) => {
return <ImageCard image={image} key={index} />
})
@@ -41,4 +45,11 @@ ImageContainer.propTypes = {
images: PropTypes.array
};
export default ImageContainer;
const mapStateToProps = createGetSelector({
images: getImages
})
export default connect(
mapStateToProps,
null
)(ImageContainer)

1
client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss
View File

@@ -31,6 +31,7 @@
border: none;
border-radius: 0 5px 5px 0;
// margin-bottom: 40px;
width: 97%;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

3
client/src/app/components/molecules/common/Dropzone/Dropzone.js
View File

@@ -20,9 +20,6 @@ class Dropzone extends React.Component {
onFilesAdded(evt) {
if (this.props.disabled) return;
console.log(evt.target.files)
console.log(evt.target.result)
const files = evt.target.files;
if (this.props.onFilesAdded) {
const array = this.fileListToArray(files);

13
client/src/app/components/molecules/common/Uploader/Uploader.js
View File

@@ -113,6 +113,7 @@ class Uploader extends React.Component {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
fileVariants.push(file)
const elem = document.createElement('canvas');
elem.width = width;
elem.height = height;
@@ -156,15 +157,17 @@ class Uploader extends React.Component {
sendRequest(files) {
return new Promise((resolve, reject) => {
const req = new XMLHttpRequest();
const formData = new FormData();
files.forEach((file) => {
formData.append("file", file, file.name);
})
req.open("POST", "http://localhost:3001/upload");
req.send(formData);
fetch('http://localhost:3001/upload', {
method: 'post',
body: formData
})
.then(response => response.json())
.then(jsonData => resolve(console.log(jsonData)))
.catch(err => reject(err))
});
}

14
client/src/app/pages/Home/actions.js
View File

@@ -1,4 +1,7 @@
import DataService from './../../services/data.service.ts'
export const HOME_DATA_STATE_RECEIVED = 'HOME_DATA_STATE_RECEIVED'
export const SAVE_RETRIEVED_IMAGES = 'SAVE_RETRIEVED_IMAGES'
export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
export const UPDATE_BACKGROUND = 'UPDATE_BACKGROUND'
@@ -6,15 +9,24 @@ export const UPDATE_MODAL_STATE = 'UPDATE_MODAL_STATE'
export const UPDATE_UPLOAD_MODAL_STATE = 'UPDATE_UPLOAD_MODAL_STATE'
export const updateHomeDataState = (payload) => ({type: HOME_DATA_STATE_RECEIVED, payload})
const ds = new DataService()
export const initializeHome = () => (dispatch) => {
// return Promise.all([
// dispatch(initializeApp())
// ])
// .then(() => ({statusCode: 200}))
// .catch((err) => ({statusCode: err.statusCode || 500}))
ds.getFeaturedImages().then(res => {
dispatch(saveRetrievedImages(res))
})
}
export const saveRetrievedImages = (images) => {
return {
type: SAVE_RETRIEVED_IMAGES,
payload: {images}
}
}
export const updateFormValues = (formValues) => {
return {
type: UPDATE_FORM_VALUES,

2
client/src/app/pages/Home/reducer.js
View File

@@ -2,6 +2,7 @@ import Immutable from 'immutable'
import {
HOME_DATA_STATE_RECEIVED,
SAVE_RETRIEVED_IMAGES,
UPDATE_FORM_ERRORS,
UPDATE_FORM_VALUES,
UPDATE_BACKGROUND,
@@ -17,6 +18,7 @@ const initialState = Immutable.Map({
const reducer = (state = initialState, action) => {
switch (action.type) {
case HOME_DATA_STATE_RECEIVED:
case SAVE_RETRIEVED_IMAGES:
case UPDATE_FORM_ERRORS:
case UPDATE_FORM_VALUES:
case UPDATE_BACKGROUND:

1
client/src/app/pages/Home/selectors.js
View File

@@ -15,3 +15,4 @@ export const getModalState = createGetSelector(getHome, 'modalOpened')
export const getUploadModalState = createGetSelector(getHome, 'uploadModalOpened')
export const getFormValues = createGetSelector(getHome, 'formValues')
export const getFormErrors = createGetSelector(getHome, 'formErrors')
export const getImages = createGetSelector(getHome, 'images')

8
client/src/app/services/data.service.ts
View File

@@ -1,4 +1,10 @@
export class DataService {
export default class DataService {
constructor() { }
getFeaturedImages() {
fetch('/images/featured')
.then(res => res.json())
.catch(err => console.log(err))
}
}