Image retrieval and saving from/to mongo completed

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux'
 
@@ -26,22 +26,39 @@ const useStyles = makeStyles({
 const Image = props => {
   const image = props.image
   const classes = useStyles()
+  const [img, setImg] = useState('')
 
+  useEffect(() => {
+      var base64Flag = 'data:image/jpeg;base64,';
+      var imageStr = arrayBufferToBase64(image.img.data.data);
+      const img = base64Flag + imageStr
+      image.img.imageUrl = img
+      setImg(img)
+  })
+
+  const arrayBufferToBase64 = (buffer) => {
+    var binary = '';
+    var bytes = [].slice.call(new Uint8Array(buffer));
+    bytes.forEach((b) => binary += String.fromCharCode(b));
+    return window.btoa(binary);
+  };
+  
+  console.log(img)
   return (
-    <Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(image.imageUrl)}>
-      <CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} style={{textTransform: 'capitalize'}} />
+    <Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(img)}>
+      <CardHeader avatar={<ImageHeader image={image.img} />} title={image.img.name} style={{textTransform: 'capitalize'}} />
       <CardActionArea>
         <CardMedia
           className={classes.media}
-          image={image.imageUrl}
-          title={image.imageTitle}
+          image={img}
+          title={image.img.name}
         />
         <CardContent>
           <Typography gutterBottom variant="h5" component="h2">
-            {image.imageTitle}
+            {image.img.name}
           </Typography>
           <Typography variant="body2" color="textSecondary" component="p">
-            {image.imageDescription}
+            {image.img.description}
           </Typography>
         </CardContent>
       </CardActionArea>

client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux'
-import {createGetSelector} from 'reselect-immutable-helpers'
+import {createPropsSelector} from 'reselect-immutable-helpers'
 import {getImages} from './../../../../pages/Home/selectors'
 import ImageCard from './Image'
 import Image from './../../../../models/image.model'
@@ -9,26 +9,8 @@ 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} = this.props
-    const imageRenders = images.map((image, index) => {
+    const imageRenders = images && images.map((image, index) => {
       return <ImageCard image={image} key={index} />
     })
     return (
@@ -45,7 +27,7 @@ ImageContainer.propTypes = {
   images: PropTypes.array
 };
 
-const mapStateToProps = createGetSelector({
+const mapStateToProps = createPropsSelector({
   images: getImages
 })
 

client/src/app/components/molecules/common/Uploader/Uploader.js

@@ -95,9 +95,7 @@ class Uploader extends React.Component {
     this.state.files.forEach((file) => {
       this.compress(file).then((result) => {
         this.setState({ uploadProgress: {}, uploading: true });
-        // result.forEach((file) => {
           this.upload(result)
-        // })
       })
     })
   }
@@ -143,9 +141,7 @@ class Uploader extends React.Component {
   async upload(files) {
     this.setState({ uploadProgress: {}, uploading: true });
     const promises = [];
-    // this.state.files.forEach(file => {
     promises.push(this.sendRequest(files));
-    // });
     try {
       await Promise.all(promises).then(result => console.log('result === ' + result)).catch(err => console.log('error === ' + err));
       this.setState({ successfullUploaded: true, uploading: false });

client/src/app/pages/Home/Home.jsx

@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 import {createPropsSelector} from 'reselect-immutable-helpers'
 
 import * as actions from './actions'
-import {getBackgroundImage, getHome} from './selectors'
+import {getBackgroundImage} from './selectors'
 
 import Sidebar from '../../components/molecules/SideBar'
 import CommandPrompt from '../../components/molecules/common/CommandPrompt'
@@ -37,13 +37,11 @@ class Home extends React.Component {
 
 Home.propTypes = {
     backgroundImage: PropTypes.string,
-    initializeHome: PropTypes.func,
-    dataState: PropTypes.object
+    initializeHome: PropTypes.func
 }
 
 const mapStateToProps = createPropsSelector({
-    backgroundImage: getBackgroundImage,
-    dataState: getHome
+    backgroundImage: getBackgroundImage
 })
 
 const mapDispatchToProps = {

client/src/app/pages/Home/actions.js

@@ -17,8 +17,9 @@ export const initializeHome = () => (dispatch) => {
     // .then(() => ({statusCode: 200}))
     // .catch((err) => ({statusCode: err.statusCode || 500}))
     ds.getFeaturedImages().then(res => {
+        // console.log(res)
         dispatch(saveRetrievedImages(res))
-    })
+    }).catch(err => console.log(err))
 }
 
 export const saveRetrievedImages = (images) => {

client/src/app/services/data.service.ts

@@ -3,8 +3,12 @@ export default class DataService {
   constructor() { }
 
   getFeaturedImages() {
-    fetch('/images/featured')
-    .then(res => res.json())
+    return fetch('/images/nature')
+    .then(res => {
+      // console.log(res)
+      // console.log(res.json())
+      return res.json()
+    })
     .catch(err => console.log(err))
   }
 }