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

Added command prompt, images list and image viewer components

Browse Source
This commit is contained in:
vaasu
2019-11-01 13:10:37 +05:30
parent 8206b0367e
commit a3c377c18a
149 changed files with 2027 additions and 2924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.component.scss Normal file
View File

@@ -0,0 +1,4 @@
.c-Image {
margin: 2rem;
width: 250px;
}

75
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.js Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'
import {updateBackground} from './../../../../../pages/Home/actions'
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardHeader from '@material-ui/core/CardHeader'
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import ImageHeader from './ImageHeader/ImageHeader';
const useStyles = makeStyles({
card: {
maxWidth: 345,
},
media: {
height: 140,
},
});
const Image = props => {
const image = props.image
const classes = useStyles()
return (
<Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(image.imageUrl)}>
<CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} />
<CardActionArea>
<CardMedia
className={classes.media}
image={image.imageUrl}
title={image.imageTitle}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{image.imageTitle}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{image.imageDescription}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Like
</Button>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
More
</Button>
</CardActions>
</Card>
);
};
Image.propTypes = {
image: PropTypes.object,
updateBackgroundDispatcher: PropTypes.func
};
const mapDispatchToProps = {
updateBackgroundDispatcher: updateBackground
}
export default connect(
null,
mapDispatchToProps
)(Image)

8
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.test.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import Image from './Image';
describe('Image', () => {
it('renders without error', () => {
});
});

12
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.component.scss Normal file
View File

@@ -0,0 +1,12 @@
.c-ImageHeader {
// padding: 10px;
.avatar {
background-size: cover;
border-radius: 50%;
flex-shrink: 0;
height: 40px;
line-height: 24px;
object-fit: cover;
width: 40px;
}
}

17
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
const ImageHeader = props => {
const image = props.image
return (
<div className="c-ImageHeader">
<div className="avatar" style={{backgroundImage: `url(${image.imageUrl})`}} />
</div>
);
};
ImageHeader.propTypes = {
image: PropTypes.object
};
export default ImageHeader

8
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.test.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import ImageHeader from './ImageHeader';
describe('ImageHeader', () => {
it('renders without error', () => {
});
});

3
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/index.js Normal file
View File

@@ -0,0 +1,3 @@
import ImageHeader from './ImageHeader';
export default ImageHeader;

3
client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/index.js Normal file
View File

@@ -0,0 +1,3 @@
import Image from './Image';
export default Image;

3
client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.component.scss Normal file
View File

@@ -0,0 +1,3 @@
.c-ImageContainer {
}

44
client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.js Normal file
View File

@@ -0,0 +1,44 @@
import React from 'react';
import PropTypes from 'prop-types';
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 imageRenders = images.map((image) => {
return <ImageCard image={image}/>
})
return (
<div class="container-fluid">
<div class="row" style={{justifyContent: 'space-between'}}>
{imageRenders}
</div>
</div>
);
}
}
ImageContainer.propTypes = {
images: PropTypes.array
};
export default ImageContainer;

8
client/src/app/components/molecules/PrincipalContent/ImageContainer/ImageContainer.test.js Normal file
View File

@@ -0,0 +1,8 @@
import React from 'react';
import ImageContainer from './ImageContainer';
describe('ImageContainer', () => {
it('renders without error', () => {
});
});

3
client/src/app/components/molecules/PrincipalContent/ImageContainer/index.js Normal file
View File

@@ -0,0 +1,3 @@
import ImageContainer from './ImageContainer';
export default ImageContainer;