From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../app/components/SocialMedia/Comment.js | 135 +++++++++++++ .../odiparpack/app/components/SocialMedia/Cover.js | 103 ++++++++++ .../app/components/SocialMedia/SideSection.js | 209 +++++++++++++++++++++ .../app/components/SocialMedia/Timeline.js | 177 +++++++++++++++++ .../app/components/SocialMedia/WritePost.js | 169 +++++++++++++++++ .../app/components/SocialMedia/jss/cover-jss.js | 55 ++++++ .../components/SocialMedia/jss/socialMedia-jss.js | 89 +++++++++ .../app/components/SocialMedia/jss/timeline-jss.js | 95 ++++++++++ .../components/SocialMedia/jss/writePost-jss.js | 73 +++++++ 9 files changed, 1105 insertions(+) create mode 100644 front/odiparpack/app/components/SocialMedia/Comment.js create mode 100644 front/odiparpack/app/components/SocialMedia/Cover.js create mode 100644 front/odiparpack/app/components/SocialMedia/SideSection.js create mode 100644 front/odiparpack/app/components/SocialMedia/Timeline.js create mode 100644 front/odiparpack/app/components/SocialMedia/WritePost.js create mode 100644 front/odiparpack/app/components/SocialMedia/jss/cover-jss.js create mode 100644 front/odiparpack/app/components/SocialMedia/jss/socialMedia-jss.js create mode 100644 front/odiparpack/app/components/SocialMedia/jss/timeline-jss.js create mode 100644 front/odiparpack/app/components/SocialMedia/jss/writePost-jss.js (limited to 'front/odiparpack/app/components/SocialMedia') diff --git a/front/odiparpack/app/components/SocialMedia/Comment.js b/front/odiparpack/app/components/SocialMedia/Comment.js new file mode 100644 index 0000000..9ead6e7 --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/Comment.js @@ -0,0 +1,135 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Type from 'ba-styles/Typography.scss'; +import { withStyles } from '@material-ui/core/styles'; +import Send from '@material-ui/icons/Send'; +import CommentIcon from '@material-ui/icons/Comment'; +import CloseIcon from '@material-ui/icons/Close'; +import dummy from 'ba-api/dummyContents'; +import { + Typography, + List, + ListItem, + Avatar, + Input, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + IconButton, + Fab, + Slide, + Divider, + withMobileDialog, +} from '@material-ui/core'; +import styles from './jss/socialMedia-jss'; + +const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line + return ; +}); + +class Comment extends React.Component { + state = { + comment: '' + }; + + handleChange = event => { + this.setState({ comment: event.target.value }); + }; + + handleSubmit = comment => { + this.props.submitComment(comment); + this.setState({ comment: '' }); + } + + render() { + const { + open, + handleClose, + classes, + dataComment, + fullScreen + } = this.props; + const { comment } = this.state; + const getItem = dataArray => dataArray.map(data => ( + + +
+
+ +
+ {data.get('from')} + {data.get('date')} +
+
+ {data.get('message')} +
+ + + + )); + + return ( +
+ + + + {' '} + {dataComment !== undefined && dataComment.size} +  Comment + {dataComment !== undefined && dataComment.size > 1 ? 's' : ''} + + + + + + + {dataComment !== undefined && getItem(dataComment)} + + + +
+ + + this.handleSubmit(comment)} color="secondary" aria-label="send" className={classes.button}> + + +
+ + +
+ ); + } +} + +Comment.propTypes = { + open: PropTypes.bool.isRequired, + handleClose: PropTypes.func.isRequired, + submitComment: PropTypes.func.isRequired, + classes: PropTypes.object.isRequired, + dataComment: PropTypes.object, + fullScreen: PropTypes.bool.isRequired, +}; + +Comment.defaultProps = { + dataComment: undefined +}; + +const CommentResponsive = withMobileDialog()(Comment); +export default withStyles(styles)(CommentResponsive); diff --git a/front/odiparpack/app/components/SocialMedia/Cover.js b/front/odiparpack/app/components/SocialMedia/Cover.js new file mode 100644 index 0000000..4823f13 --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/Cover.js @@ -0,0 +1,103 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import VerifiedUser from '@material-ui/icons/VerifiedUser'; +import Info from '@material-ui/icons/Info'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { withStyles } from '@material-ui/core/styles'; +import { Avatar, Typography, Menu, MenuItem, Button, IconButton } from '@material-ui/core'; +import styles from './jss/cover-jss'; + + +const optionsOpt = [ + 'Edit Profile', + 'Change Cover', + 'Option 1', + 'Option 2', + 'Option 3', +]; + +const ITEM_HEIGHT = 48; + +class Cover extends React.Component { + state = { + anchorElOpt: null, + }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + render() { + const { + classes, + avatar, + name, + desc, + coverImg, + } = this.props; + const { anchorElOpt } = this.state; + return ( +
+
+ + + + + + + + {optionsOpt.map(option => ( + + {option} + + ))} + +
+
+ + + {name} + + + + {desc} + + +
+
+ ); + } +} + +Cover.propTypes = { + classes: PropTypes.object.isRequired, + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + desc: PropTypes.string.isRequired, + coverImg: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(Cover); diff --git a/front/odiparpack/app/components/SocialMedia/SideSection.js b/front/odiparpack/app/components/SocialMedia/SideSection.js new file mode 100644 index 0000000..1fe8d9c --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/SideSection.js @@ -0,0 +1,209 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'; +import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'; +import SwipeableViews from 'react-swipeable-views'; +import imgApi from 'ba-api/images'; +import avatarApi from 'ba-api/avatars'; +import { + Grid, + Typography, + MobileStepper, + Paper, + Avatar, + Button, + Divider, + List, + ListItem, + ListItemText, +} from '@material-ui/core'; +import PapperBlock from '../PapperBlock/PapperBlock'; +import NewsCard from '../CardPaper/NewsCard'; +import ProfileCard from '../CardPaper/ProfileCard'; +import styles from './jss/socialMedia-jss'; + + +const slideData = [ + { + label: 'How to be happy :)', + imgPath: imgApi[49], + }, + { + label: '1. Work with something that you like, like…', + imgPath: imgApi[17], + }, + { + label: '2. Keep your friends close to you and hangout with them', + imgPath: imgApi[34], + }, + { + label: '3. Travel everytime that you have a chance', + imgPath: imgApi[10], + }, + { + label: '4. And contribute to Material-UI :D', + imgPath: imgApi[40] + }, +]; + +class SideSection extends React.Component { + state = { + activeStepSwipe: 0, + }; + + handleNextSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe + 1, + })); + }; + + handleBackSwipe = () => { + this.setState(prevState => ({ + activeStepSwipe: prevState.activeStepSwipe - 1, + })); + }; + + handleStepChangeSwipe = activeStepSwipe => { + this.setState({ activeStepSwipe }); + }; + + render() { + const { classes, theme } = this.props; + const { activeStepSwipe } = this.state; + + const maxStepsSwipe = slideData.length; + return ( +
+ {/* Profile */} + + + {/* ----------------------------------------------------------------------*/} + {/* News Or Ads Block */} + + + {slideData.map((slide, index) => ( +
+ + + {slide.label} + + +
+ ))} + + + Next + {theme.direction === 'rtl' ? : } + + )} + backButton={( + + )} + /> + + {/* ----------------------------------------------------------------------*/} + {/* People */} + + + + H + + + + + J + + + + + V + + + + + H + + + + + + + + + + {/* ----------------------------------------------------------------------*/} + {/* Trending */} + + + + #Lorem ipsum dolor + + + + #Aliquam venenatis + + + + #Nam sollicitudin + + + + #Cras convallis + + + + #Aenean sit amet + + + + #Quisque + + + + #Lorem ipusm dolor + + + + +
+ ); + } +} + +SideSection.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(SideSection); diff --git a/front/odiparpack/app/components/SocialMedia/Timeline.js b/front/odiparpack/app/components/SocialMedia/Timeline.js new file mode 100644 index 0000000..e46826b --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/Timeline.js @@ -0,0 +1,177 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import CommentIcon from '@material-ui/icons/Comment'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { + Typography, + Card, + Menu, + MenuItem, + CardHeader, + CardMedia, + CardContent, + CardActions, + IconButton, + Icon, + Avatar, + Tooltip, +} from '@material-ui/core'; +import Comment from './Comment'; +import styles from './jss/timeline-jss'; + + +const optionsOpt = [ + 'Option 1', + 'Option 2', + 'Option 3', +]; + +const ITEM_HEIGHT = 48; + +class Timeline extends React.Component { + state = { + anchorElOpt: null, + openComment: false, + }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + handleOpenComment = (data) => { + this.props.fetchComment(data); + this.setState({ openComment: true }); + }; + + handleCloseComment = () => { + this.setState({ openComment: false }); + }; + + render() { + const { + classes, + dataTimeline, + onlike, + commentIndex, + submitComment, + } = this.props; + const { anchorElOpt, openComment } = this.state; + const getItem = dataArray => dataArray.map(data => ( +
  • +
    + + + {data.get('icon')} + + +
    + + + } + action={( + + + + )} + title={data.get('name')} + subheader={data.get('date')} + /> + { data.get('image') !== '' + && ( + + ) + } + + + {data.get('content')} + + + + onlike(data)}> + + + + + +
    + + {data.get('comments') !== undefined ? data.get('comments').size : 0} + + this.handleOpenComment(data)}> + + +
    +     +     +
    • + )); + return ( + + + {optionsOpt.map(option => ( + + {option} + + ))} + + +
      + {getItem(dataTimeline)} +
    +     + ); + } +} + +Timeline.propTypes = { + classes: PropTypes.object.isRequired, + onlike: PropTypes.func, + dataTimeline: PropTypes.object.isRequired, + fetchComment: PropTypes.func, + submitComment: PropTypes.func, + commentIndex: PropTypes.number, +}; + +Timeline.defaultProps = { + onlike: () => (false), + fetchComment: () => {}, + submitComment: () => {}, + commentIndex: 0, +}; + +export default withStyles(styles)(Timeline); diff --git a/front/odiparpack/app/components/SocialMedia/WritePost.js b/front/odiparpack/app/components/SocialMedia/WritePost.js new file mode 100644 index 0000000..3452aea --- /dev/null +++ b/front/odiparpack/app/components/SocialMedia/WritePost.js @@ -0,0 +1,169 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import Dropzone from 'react-dropzone'; +import { withStyles } from '@material-ui/core/styles'; +import PhotoCamera from '@material-ui/icons/PhotoCamera'; +import Send from '@material-ui/icons/Send'; +import ActionDelete from '@material-ui/icons/Delete'; +import dummy from 'ba-api/dummyContents'; +import { IconButton, Fab, MenuItem, FormControl, Avatar, Paper, Select, Tooltip } from '@material-ui/core'; +import styles from './jss/writePost-jss'; + + +function isImage(file) { + const fileName = file.name || file.path; + const suffix = fileName.substr(fileName.indexOf('.') + 1).toLowerCase(); + if (suffix === 'jpg' || suffix === 'jpeg' || suffix === 'bmp' || suffix === 'png') { + return true; + } + return false; +} + +class WritePost extends React.Component { + constructor(props) { + super(props); + this.state = { + privacy: 'public', + files: [], + message: '' + }; + this.onDrop = this.onDrop.bind(this); + } + + onDrop(filesVal) { + const { files } = this.state; + let oldFiles = files; + const filesLimit = 2; + oldFiles = oldFiles.concat(filesVal); + if (oldFiles.length > filesLimit) { + console.log('Cannot upload more than ' + filesLimit + ' items.'); + } else { + this.setState({ files: filesVal }); + } + } + + handleRemove(file, fileIndex) { + const thisFiles = this.state.files; + // This is to prevent memory leaks. + window.URL.revokeObjectURL(file.preview); + + thisFiles.splice(fileIndex, 1); + this.setState({ files: thisFiles }); + } + + handleChange = event => { + this.setState({ privacy: event.target.value }); + }; + + handleWrite = event => { + this.setState({ message: event.target.value }); + }; + + handlePost = (message, files, privacy) => { + // Submit Post to reducer + this.props.submitPost(message, files, privacy); + // Reset all fields + this.setState({ + privacy: 'public', + files: [], + message: '' + }); + } + + render() { + const { classes } = this.props; + let dropzoneRef; + const { privacy, files, message } = this.state; + const acceptedFiles = ['image/jpeg', 'image/png', 'image/bmp']; + const fileSizeLimit = 3000000; + const deleteBtn = (file, index) => ( +
    + this.handleRemove(file, index)}> + + +
    + ); + const previews = filesArray => filesArray.map((file, index) => { + const path = URL.createObjectURL(file) || '/pic' + file.path; + if (isImage(file)) { + return ( +
    +
    preview
    + {deleteBtn(file, index)} +
    + ); + } + return false; + }); + return ( +
    + + +