add respnsivity and error handling

Author: reutg

src/App.js

@@ -3,7 +3,7 @@ import { observer, inject } from 'mobx-react'
 import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
 import Navbar from './components/Navbar'
 import SearchInput from './components/SearchInput'
-import Images from './components/Images'
+import Images from './components/Images/Images'
 import Favorites from './components/Favorites/Favorites'
 import { withStyles } from '@material-ui/styles'
 
@@ -25,11 +25,16 @@ const theme = createMuiTheme({
 const styles = {
   container: {
     display: 'flex',
-    margin: '2% 3%',
     justifyContent: 'space-between',
+    '@media (max-width:1000px)': {
+      flexDirection: 'column-reverse',
+    },
   },
   search: {
     width: '65%',
+    '@media (max-width:1000px)': {
+      width: '100%',
+    },
   },
 }
 @inject('imagesStore')

src/components/Favorites/EditDescriptionInput.js

@@ -8,7 +8,7 @@ const styles = {
     display: 'flex',
   },
   input: {
-    fontSize: '0.7em',
+    fontSize: '0.8em',
   },
 }
 class EditDescriptionInput extends Component {

src/components/Favorites/Favorite.js

@@ -10,8 +10,9 @@ const styles = {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    margin: '3% 0',
+    marginTop: '3%',
     overflow: 'hidden',
+    width: '90%',
   },
   image: {
     width: '10vh',

src/components/Favorites/FavoriteActions.js

@@ -10,7 +10,8 @@ const styles = {
   container: {
     display: 'flex',
     justifyContent: 'space-between',
-    width: '70%',
+    width: '100%',
+    padding: '0 3%',
   },
   description: {
     width: '70%',

src/components/Favorites/FavoriteDialog.js

@@ -1,49 +1,39 @@
 import React, { Component } from 'react'
-import { Dialog } from '@material-ui/core'
-import FavoriteActions from './FavoriteActions'
+import { Dialog, Fab } from '@material-ui/core'
 import { withStyles } from '@material-ui/styles'
 
+import CloseIcon from '@material-ui/icons/Close'
+
 const styles = {
   image: {
-    width: '100%',
-    height: '100%',
-  },
-  actions: {
-    margin: '3% 0',
+    width: '70vh',
+    height: '70vh',
     display: 'flex',
-    justifyContent: 'center',
+    flexDirection: 'column',
+    justifyContent: 'end',
+    alignItems: 'flex-end',
+    backgroundSize: '100% 100%',
+  },
+  icon: {
+    margin: '1%',
+    width: '35px',
+    height: '30px',
+    backgroundColor: 'rgba(52, 70, 93, 0.3)',
   },
 }
 
 class FavoriteDialog extends Component {
   render() {
-    const {
-      classes,
-      favorite,
-      closeDialog,
-      isDialogOpen,
-      descriptionInput,
-      editFavorite,
-      handleInput,
-      isEditModeOn,
-      removeFavorite,
-      showEditFavorite,
-    } = this.props
+    const { classes, favorite, closeDialog, isDialogOpen } = this.props
     return (
       <Dialog onClose={closeDialog} open={isDialogOpen}>
-        <div>
-          <img className={classes.image} src={favorite.imageURL} alt={favorite.description} />
-        </div>
-        <div className={classes.actions}>
-          <FavoriteActions
-            favorite={favorite}
-            handleInput={handleInput}
-            descriptionInput={descriptionInput}
-            isEditModeOn={isEditModeOn}
-            editFavorite={editFavorite}
-            showEditFavorite={showEditFavorite}
-            removeFavorite={removeFavorite}
-          />
+        <div
+          className={classes.image}
+          style={{ backgroundImage: `url('${favorite.imageURL}')` }}
+        >
+          <Fab size='small' className={classes.icon} onClick={closeDialog}>
+            <CloseIcon />
+          </Fab>
         </div>
       </Dialog>
     )

src/components/Favorites/Favorites.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import { observer, inject } from 'mobx-react'
-import { toJS } from 'mobx'
 
 import { Typography } from '@material-ui/core'
 import { withStyles } from '@material-ui/styles'
@@ -9,13 +8,20 @@ import EmptyFavorites from './EmptyFavorites'
 
 const styles = {
   container: {
-    width: '30%',
+    paddingTop: '2%',
+    width: '35%',
+    '@media (max-width:1000px)': {
+      width: '100%',
+    },
   },
   header: {
     textAlign: 'center',
   },
   favorites: {
-    marginTop: '10.5%',
+    marginTop: '5%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
   },
 }
 
@@ -32,7 +38,6 @@ class Favorites extends Component {
 
   render() {
     const { classes, imagesStore } = this.props
-    console.log(toJS(imagesStore.favorites))
     return (
       <div className={classes.container}>
         <Typography color='secondary' className={classes.header} variant='h6'>
@@ -42,7 +47,7 @@ class Favorites extends Component {
           {imagesStore.favoritesLength <= 0 ? (
             <EmptyFavorites />
           ) : (
-            imagesStore.favorites.map(favorite => (
+            imagesStore.favoritesToArray.map(favorite => (
               <Favorite
                 key={favorite.id}
                 favorite={favorite}

src/components/Images.js

@@ -8,8 +8,8 @@ const styles = {
     display: 'flex',
     justifyContent: 'flex-end',
     alignItems: 'flex-end',
-    width: '25vh',
-    height: '25vh',
+    width: '20vh',
+    height: '20vh',
     margin: '1.5%',
     backgroundSize: 'cover',
     borderRadius: '1%',
@@ -24,9 +24,8 @@ const styles = {
 }
 
 class Image extends Component {
- 
   render() {
-    const { classes, image,saveToFavorites } = this.props
+    const { classes, image, saveToFavorites } = this.props
 
     if (image) {
       return (

src/components/Image.js renamed to src/components/Images/Image.js

@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+import { observer, inject } from 'mobx-react'
+import { toJS } from 'mobx'
+import { Snackbar, Slide } from '@material-ui/core'
+import { withStyles } from '@material-ui/styles'
+
+import Image from './Image'
+import NoImagesMessage from './NoImagesMessage'
+
+const styles = {
+  images: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    margin: '3% 4%',
+  },
+  infiniteScroll: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}
+
+@inject('imagesStore')
+@observer
+class Images extends Component {
+  constructor() {
+    super()
+    this.state = {
+      isSnackbarOpen: false,
+    }
+  }
+
+  saveToFavorites = image => {
+    const favorites = toJS(this.props.imagesStore.favorites)
+    const favorite = favorites[image.id]
+
+    if (!favorite) {
+      this.props.imagesStore.saveToFavorites(image)
+    } else {
+      this.setState({ isSnackbarOpen: true })
+    }
+  }
+
+  handleClose = () => {
+    this.setState({ isSnackbarOpen: false })
+  }
+
+  render() {
+    const { classes } = this.props
+    const images = toJS(this.props.imagesStore.images)
+    const { isSnackbarOpen } = this.state
+    const { noResults } = this.props.imagesStore
+    return (
+      <div className={classes.images}>
+        {noResults ? (
+          <NoImagesMessage />
+        ) : (
+          images.map(image => (
+            <Image key={image.id} image={image} saveToFavorites={this.saveToFavorites} />
+          ))
+        )}
+
+        <Snackbar
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          open={isSnackbarOpen}
+          autoHideDuration={2000}
+          onClose={this.handleClose}
+          TransitionComponent={Slide}
+          message={<span>Image already saved to favorites</span>}
+        />
+      </div>
+    )
+  }
+}
+export default withStyles(styles)(Images)

src/components/Images/Images.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+class NoImagesMessage extends Component {
+  render() {
+    return (
+      <div>
+        <h6>No images were found</h6>
+      </div>
+    )
+  }
+}
+
+export default NoImagesMessage