Add modal

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`.
     -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   </body>
 </html>

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 {
                     <p>{show.summary}</p>
                   </div>
                   <div className="card-action">
-                    <a href="www.google.com">Similar Shows</a>
+                    <Link
+                      to="/similar"
+                      className="waves-effect waves-light btn-large right"
+                    >
+                      <i className="material-icons left">live_tv</i>Similar
+                      Shows
+                    </Link>
                   </div>
                 </div>
               </div>

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 (
+    <MuiDialogTitle disableTypography className={classes.root}>
+      <Typography variant="h6">{children}</Typography>
+      {onClose ? (
+        <IconButton
+          aria-label="Close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  );
+});
+
+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 (
+      <div>
+        <button
+          className="btn-small waves-effect waves-light center-align"
+          onClick={this.handleClickOpen}
+          name="action"
+        >
+          <i className="material-icons right">info</i>
+          Info
+        </button>
+        <Dialog
+          onClose={this.handleClose}
+          aria-labelledby="customized-dialog-title"
+          open={this.state.open}
+        >
+          <DialogTitle id="customized-dialog-title" onClose={this.handleClose}>
+            What do we do with this info?
+          </DialogTitle>
+          <DialogContent>
+            <Typography gutterBottom>
+              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&nbsp;
+              <a href="https://github.com/mjrode/recommend"> here.</a>
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Ok
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+export default CustomizedDialogDemo;

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 {
       <div>
         <ImportPlexLibrary />
         <MediaList />
+        
       </div>
     );
   }

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 {
             <div className={classes.heroContentSmall}>
               <div className="section center-align">
                 <div className="center right">
-                  <Modal />
+                  <InfoModal />
                 </div>
                 <div className={classes.shrinkTopMargin}>
                   <TextHeader text="Fetch Plex Token" />

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 (
+        <div className="row" key={show.title}>
+          <MediaCard media={show} />
+        </div>
+      );
+    });
+    return <div>{mediaList}</div>;
+  }
+}
+
+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));