From cd5edbe2e8292cabec6d33602e65e1c166a8cf7f Mon Sep 17 00:00:00 2001 From: mjrode Date: Sun, 7 Apr 2019 09:44:12 -0500 Subject: [PATCH] Add modal --- client/public/index.html | 1 + .../src/components/{Modal.js => InfoModal.js} | 0 client/src/components/MediaCard.js | 9 +- client/src/components/MediaModal.js | 111 ++++++++++++++++++ client/src/components/plex/Plex.js | 3 + client/src/components/plex/PlexTokenForm.js | 4 +- client/src/components/plex/Similar.js | 47 ++++++++ 7 files changed, 172 insertions(+), 3 deletions(-) rename client/src/components/{Modal.js => InfoModal.js} (100%) create mode 100644 client/src/components/MediaModal.js create mode 100644 client/src/components/plex/Similar.js diff --git a/client/public/index.html b/client/public/index.html index d36d337..22c29b4 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -47,5 +47,6 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/client/src/components/Modal.js b/client/src/components/InfoModal.js similarity index 100% rename from client/src/components/Modal.js rename to client/src/components/InfoModal.js diff --git a/client/src/components/MediaCard.js b/client/src/components/MediaCard.js index 4855cb5..81108ef 100644 --- a/client/src/components/MediaCard.js +++ b/client/src/components/MediaCard.js @@ -4,6 +4,7 @@ import {withStyles} from '@material-ui/core/styles'; import {connect} from 'react-redux'; import Header from './helpers/Header'; import styles from '../css/materialize.css'; +import {Link} from 'react-router-dom'; class MediaCard extends Component { render() { @@ -30,7 +31,13 @@ class MediaCard extends Component {

{show.summary}

- Similar Shows + + live_tvSimilar + Shows +
diff --git a/client/src/components/MediaModal.js b/client/src/components/MediaModal.js new file mode 100644 index 0000000..75e87e1 --- /dev/null +++ b/client/src/components/MediaModal.js @@ -0,0 +1,111 @@ +import React from 'react'; +import {withStyles} from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; +import Dialog from '@material-ui/core/Dialog'; +import MuiDialogTitle from '@material-ui/core/DialogTitle'; +import MuiDialogContent from '@material-ui/core/DialogContent'; +import MuiDialogActions from '@material-ui/core/DialogActions'; +import IconButton from '@material-ui/core/IconButton'; +import CloseIcon from '@material-ui/icons/Close'; +import Typography from '@material-ui/core/Typography'; + +const DialogTitle = withStyles(theme => ({ + root: { + borderBottom: `1px solid ${theme.palette.divider}`, + margin: 0, + padding: theme.spacing.unit * 2, + }, + closeButton: { + position: 'absolute', + right: theme.spacing.unit, + top: theme.spacing.unit, + color: theme.palette.grey[500], + }, +}))(props => { + const {children, classes, onClose} = props; + return ( + + {children} + {onClose ? ( + + + + ) : null} + + ); +}); + +const DialogContent = withStyles(theme => ({ + root: { + margin: 0, + padding: theme.spacing.unit * 2, + }, +}))(MuiDialogContent); + +const DialogActions = withStyles(theme => ({ + root: { + borderTop: `1px solid ${theme.palette.divider}`, + margin: 0, + padding: theme.spacing.unit, + }, +}))(MuiDialogActions); + +class CustomizedDialogDemo extends React.Component { + state = { + open: false, + }; + + handleClickOpen = () => { + this.setState({ + open: true, + }); + }; + + handleClose = () => { + this.setState({open: false}); + }; + + render() { + return ( +
+ + + + What do we do with this info? + + + + We need to make a request to fetch a token which will allow us to + get a list of your most watched media. We will never store your + Plex password or make any changes to your Plex server. This is an + open source project and you can view the code  + here. + + + + + + +
+ ); + } +} + +export default CustomizedDialogDemo; diff --git a/client/src/components/plex/Plex.js b/client/src/components/plex/Plex.js index bbcaa2e..3b5a696 100644 --- a/client/src/components/plex/Plex.js +++ b/client/src/components/plex/Plex.js @@ -1,9 +1,11 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import PlexTokenForm from './PlexTokenForm'; +import {BrowserRouter, Route} from 'react-router-dom'; import ImportPlexLibrary from './ImportPlexLibrary'; import MediaList from '../MediaList'; + class Plex extends Component { render() { if (!this.props.auth.plexToken) { @@ -17,6 +19,7 @@ class Plex extends Component {
+
); } diff --git a/client/src/components/plex/PlexTokenForm.js b/client/src/components/plex/PlexTokenForm.js index 9b7e133..e0737b0 100644 --- a/client/src/components/plex/PlexTokenForm.js +++ b/client/src/components/plex/PlexTokenForm.js @@ -5,7 +5,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'; import {connect} from 'react-redux'; import {withStyles} from '@material-ui/core/styles'; import '../../css/materialize.css'; -import Modal from '../Modal'; +import InfoModal from '../InfoModal'; import TextHeader from '../helpers/Header'; import styles from '../../css/materialize.css'; @@ -40,7 +40,7 @@ class PlexTokenForm extends React.Component {
- +
diff --git a/client/src/components/plex/Similar.js b/client/src/components/plex/Similar.js new file mode 100644 index 0000000..d7a922f --- /dev/null +++ b/client/src/components/plex/Similar.js @@ -0,0 +1,47 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {withStyles} from '@material-ui/core/styles'; +import {connect} from 'react-redux'; +import styles from '../css/materialize.css.js'; +import axios from 'axios'; +import MediaCard from './MediaCard'; +import * as actions from '../actions'; + +class Similar extends Component { + state = {tvShow: [], loading: false}; + + componentDidMount() { + this.getMostWatched(); + } + + getSimilar = async () => { + const params = {mediaName: this.props.show.name, mediaType: 'show'}; + const res = await axios.get('/api/tdaw/similar', {params}); + }; + + render() { + console.log('My state--', this.state); + const mediaList = this.state.tvShowList.map(show => { + return ( +
+ +
+ ); + }); + return
{mediaList}
; + } +} + +Similar.propTypes = { + classes: PropTypes.object.isRequired, +}; + +function mapStateToProps({plex}) { + console.log('plex props', plex); + return {loading: plex.loading}; +} + +export default connect( + mapStateToProps, + actions, +)(withStyles(styles)(Similar));