Skip to content

Commit

Permalink
Stripe implementations and test movie in database
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonizak
jonizak committed Aug 3, 2018
2 parents 03b640e + 56fae4e commit 1b32bcf
Show file tree
Hide file tree
Showing 13 changed files with 389 additions and 141 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ bundle.js
config.js
youtube.js
imdb.js
stripe.js
stripe.js
*.pem
100 changes: 48 additions & 52 deletions client/components/GlobalSearch.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@
import React from "react";
import Results from "./Results.jsx";
import MovieCard from "./MovieCard.jsx";
import GoogleMaps from './GoogleMapsComponent.jsx'
import React from 'react';
import Results from './Results.jsx';
import MovieCard from './MovieCard.jsx';
import GoogleMaps from './GoogleMapsComponent.jsx';

import axios from "axios";
import axios from 'axios';

class GlobalSearch extends React.Component {
constructor(props) {
super(props);

this.state = {
dbMoods: [
"whimsical",
"intense",
"thriller",
"heartfelt",
"gripping",
"boring",
"thought provoking",
"uplifting",
"light",
"tear jerker",
"challenging",
"mind screw",
"nostalgic",
"powerful",
"despair",
"exhausting",
"paranoid",
"motivated",
"uncomfortable"
'whimsical',
'intense',
'thriller',
'heartfelt',
'gripping',
'boring',
'thought provoking',
'uplifting',
'light',
'tear jerker',
'challenging',
'mind screw',
'nostalgic',
'powerful',
'despair',
'exhausting',
'paranoid',
'motivated',
'uncomfortable'
],
moods: [],
movies: [],
nowPlaying: [],
active: "Now Playing",
active: 'Now Playing',
long: '',
lat: ''
};
Expand All @@ -47,20 +47,20 @@ class GlobalSearch extends React.Component {
}

componentDidMount() {
this.getLocation()
this.getLocation();
}

getLocation() {
navigator.geolocation.getCurrentPosition((pos) => {
navigator.geolocation.getCurrentPosition(pos => {
var crd = pos.coords;

let long = crd.longitude
let lat = crd.latitude
let long = crd.longitude;
let lat = crd.latitude;
this.setState({
long: long,
lat: lat
})
})
});
});
}

//event handler for the addition of each mood to the global search
Expand All @@ -85,7 +85,7 @@ class GlobalSearch extends React.Component {
if (this.state.moods.length > 0) {
//send moods array to server and eventually query DB
axios
.get("/results/", { params })
.get('/results/', { params })
.then(response => {
this.setState({ movies: response.data });
})
Expand All @@ -105,22 +105,21 @@ class GlobalSearch extends React.Component {
}

handleClick(e) {
console.log(e.target.text);
this.setState({
active: e.target.text
});
}

componentDidMount() {
axios
.get("/nowPlaying")
.get('/nowPlaying')
.then(response => {
this.setState({
nowPlaying: response.data
});
})
.catch(err => {
console.error("Error with endpoint of server", err);
console.error('Error with endpoint of server', err);
})
.then(() => {
console.log(this.state.nowPlaying);
Expand All @@ -133,14 +132,14 @@ class GlobalSearch extends React.Component {
<div className="tabs is-centered">
<ul>
<li
className={this.state.active === "Now Playing" ? "is-active" : ""}
className={this.state.active === 'Now Playing' ? 'is-active' : ''}
onClick={this.handleClick}
>
<a>Now Playing</a>
</li>
<li
className={
this.state.active === "Find Moodvie" ? "is-active" : ""
this.state.active === 'Find Moodvie' ? 'is-active' : ''
}
onClick={this.handleClick}
>
Expand All @@ -151,17 +150,16 @@ class GlobalSearch extends React.Component {

<div
style={
this.state.active === "Now Playing"
? { display: "inline" }
: { display: "none" }
this.state.active === 'Now Playing'
? { display: 'inline' }
: { display: 'none' }
}
>
<div className="container is-fluid">
<div>
<GoogleMaps long={this.state.long}
lat={this.state.lat}/>
<GoogleMaps long={this.state.long} lat={this.state.lat} />
</div>
<br/>
<br />
<div className="columns is-multiline">
{this.state.nowPlaying.map((movie, index) => {
return (
Expand All @@ -176,9 +174,9 @@ class GlobalSearch extends React.Component {

<div
style={
this.state.active === "Find Moodvie"
? { display: "inline" }
: { display: "none" }
this.state.active === 'Find Moodvie'
? { display: 'inline' }
: { display: 'none' }
}
>
<div className="section">
Expand All @@ -205,17 +203,17 @@ class GlobalSearch extends React.Component {
</div>
</div>
</div>
<div className="container" style={{ margin: "15px" }}>
<div className="container" style={{ margin: '15px' }}>
{this.state.moods.length > 0 ? (
<span className="subtitle">
Our users found these movies to be{" "}
Our users found these movies to be{' '}
</span>
) : null}

{this.state.moods.map((mood, index) => (
<span
className="tag is-primary is-large"
style={{ margin: "7px" }}
style={{ margin: '7px' }}
key={index}
>
{mood}
Expand All @@ -237,10 +235,8 @@ class GlobalSearch extends React.Component {
</div>
</div>
</div>


</div>
)
);
}
}

Expand Down
40 changes: 38 additions & 2 deletions client/components/MovieCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ class MovieCard extends React.Component {
recommendations: [],
trailer_key: "dQw4w9WgXcQ",
open: false,
loading: true
loading: true,
renderCard: true
};

this.setIMDBdata = this.setIMDBdata.bind(this);
Expand Down Expand Up @@ -55,7 +56,42 @@ class MovieCard extends React.Component {

render() {
//defensive check to make sure a movie was passed as props before rendering a card
if (this.props.movie === null) return <div />;
if (this.props.movie === null || this.state.renderCard === false) {
return <div />;
} else {

return (
<div className="card">
<div className="card-image">
<figure className="image is-2by3">
<img
onClick={() => {
this.setIMDBdata();
this.onOpenModal();
}}
src={
"https://image.tmdb.org/t/p/w500" + this.props.movie.poster_path
}
alt="Placeholder image"
/>
<a className="delete" onClick = {(e) => this.props.deleteMovie(this.props.id)}></a>
<Popup
trailer_key={this.state.trailer_key}
onCloseModal={this.onCloseModal}
imdb={this.state.imdb}
open={this.state.open}
loading={this.state.loading}
movie={this.props.movie}
/>
</figure>
</div>
<div className="card-content">
<p className="is-size-7">{this.props.movie.original_title}</p>
<p className="is-size-7">{this.props.movie.release_date}</p>
</div>
</div>
);
}

return (
<div className="card">
Expand Down
44 changes: 42 additions & 2 deletions client/components/Nav.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,59 @@
import React from 'react';
import { Link } from 'react-router-dom';

var Nav = (props) => {
var Nav = props => {
if (props.loggedIn === true) {
return (
<div className="tabs">
<ul>
<span>
<b>Moodvie</b>
<b
style={
props.theme === 'Light'
? { display: 'inline', marginLeft: 'auto' }
: { display: 'none', marginLeft: 'auto' }
}
>
Moodvie
</b>

<b
style={
props.theme === 'Dark'
? { display: 'inline', marginLeft: 'auto' }
: { display: 'none', marginLeft: 'auto' }
}
>
Lewdvie
</b>
</span>
<Link to="/global">Mood Search</Link>
<Link to="/profile">Profile</Link>
<Link onClick={props.handleLogout} to="/logout">
Logout
</Link>

<a
style={
props.theme === 'Light'
? { display: 'inline', marginLeft: 'auto' }
: { display: 'none', marginLeft: 'auto' }
}
onClick={props.handleTheme}
>
Dark
</a>

<a
style={
props.theme === 'Dark'
? { display: 'inline', marginLeft: 'auto' }
: { display: 'none', marginLeft: 'auto' }
}
onClick={props.handleTheme}
>
Light
</a>
</ul>
</div>
);
Expand Down
Loading

0 comments on commit 1b32bcf

Please sign in to comment.