-🚫 The numbers 1️⃣ through 5️⃣ next to each item represent the week that part of the docs needs to be comepleted by. Make sure to delete the numbers by the end of Labs.
+[You can check out the live demo of Gróa here](http://www.groa.us/).
-🚫 Each student has a required minimum number of meaningful PRs each week per the rubric. Contributing to docs does NOT count as a PR to meet your weekly requirements.
+## Code Climate
-# 1️⃣ Title of project goes here
+
+
+
+[](https://github.com/prettier/prettier)
+[](https://codeclimate.com/github/Lambda-School-Labs/Groa-fe/maintainability)
+[](https://codeclimate.com/github/Lambda-School-Labs/Groa-fe/test_coverage)
-1️⃣ You can find the deployed project at [🚫URL NAME GOES HERE](🚫copy and paste URL here).
+more info on using badges [here](https://github.com/badges/shields)
-## 4️⃣ Contributors
+## Contributors
-🚫Add contributor info below, make sure add images and edit the social links for each member. Add to or delete these place-holders as needed
+### Labs 21
-| [Student 1](https://github.com/) | [Student 2](https://github.com/) | [Student 3](https://github.com/) | [Student 4](https://github.com/) | [Student 5](https://github.com/) |
-| :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------: |
-| [
](https://github.com/) | [
](https://github.com/) | [
](https://www.linkedin.com/) | [ 
](https://github.com/briannakeune) | [
](https://github.com/bensolt) | [
](https://github.com/marielapg) |
+| [
](https://github.com/bgingrich) | [
](https://github.com/robomantis19) | [
](https://github.com/cmruss) |
+| [
](https://github.com/msinnema33) | [
](https://github.com/jvillalp) | [
](https://github.com/Steven-Matos) | [
](https://github.com/azatecas) |
+| [
-
- */}
+// for testing
+import { ifDev } from "./utils/removeAttribute.js";
+import oktaConfig from "./config/oktaConfig";
+
+// config imports
+import reactGAinitialization from "./config/analytics.js";
+
+// creating the store
+import { Provider } from "react-redux";
+import { createStore, compose, applyMiddleware } from "redux";
+import thunk from "redux-thunk";
+import logger from "redux-logger";
+import { reducer } from "./store/reducers";
+import { BrowserRouter as Router } from "react-router-dom";
+import { loadState, saveState } from "./store/localStorage.js";
+
+//for theme color change
+import { createMuiTheme } from "@material-ui/core/styles";
+import { ThemeProvider } from "@material-ui/core/styles";
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const store = createStore(
+ reducer,
+ loadState(),
+ composeEnhancers(applyMiddleware(thunk, logger))
+);
+store.subscribe(() => {
+ saveState({
+ login: store.getState().login,
+ recommendations: store.getState().recommendations,
+ rating: store.getState().rating,
+ watchlist: store.getState().watchlist,
+ });
+});
-
+function App() {
+
+ useEffect(() => reactGAinitialization(), []);
+ const theme = React.useMemo(
+ () =>
+ createMuiTheme({
+ palette: {
+ type: "dark",
+ primary: {
+ main: "#DBE0DF",
+ },
+ secondary: {
+ main: "#6E8B3D",
+ },
+ },
+ typography: {
+ fontFamily: "Mallanna, sans-serif",
+ },
+ }),
+ []
+ );
+ return (
+
+
+
+ {testing === null ?
+ )
+};
+export default Test;
\ No newline at end of file
diff --git a/src/components/LandingMovieSlider.js b/src/components/LandingMovieSlider.js
new file mode 100644
index 0000000..315f124
--- /dev/null
+++ b/src/components/LandingMovieSlider.js
@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+import { makeStyles } from "@material-ui/core";
+import { TileBar } from "./TileBar";
+import ReactLoading from "react-loading";
+import "react-multi-carousel/lib/styles.css";
+import { Link, useHistory } from "react-router-dom";
+//styling for Landing Movie Slider Component
+const useStyles = makeStyles((theme) => ({
+ container: {
+ fontFamily: `"Work Sans", sans-serif`,
+ },
+ btnCont: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transitionDuration: ".5s",
+ position: "relative",
+ ["@media (max-width:500px)"]: {
+ width: "100%",
+ },
+ },
+ recBtn: {
+ fontFamily: `"Work Sans", sans-serif`,
+ margin: "10px 0",
+ width: "300px",
+ height: "5vh",
+ fontSize: "18px",
+ color: "black",
+ backgroundColor: "rgba(65, 236, 176, 1)",
+ borderRadius: "20px",
+ border: "none",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: "pointer",
+ transitionDuration: ".2s",
+ fontWeight: "900",
+ },
+ actionBtn: {
+ fontFamily: `"Work Sans", sans-serif`,
+ margin: "10px 0",
+ width: "300px",
+ height: "5vh",
+ fontSize: "18px",
+ color: "black",
+ backgroundColor: "gold",
+ borderRadius: "20px",
+ border: "none",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: "pointer",
+ transitionDuration: ".2s",
+ fontWeight: "900",
+ ["@media (max-width:800px)"]: {
+ width: "100%",
+ margin: "2vh auto",
+ },
+ },
+ btnClose: {
+ fontFamily: `"Work Sans", sans-serif`,
+ position: "absolute",
+ right: "0",
+ margin: "auto",
+ width: "10%",
+ height: "5vh",
+ fontSize: "18px",
+ color: "white",
+ backgroundColor: "red",
+ borderRadius: "20px",
+ border: "none",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: "pointer",
+ transitionDuration: ".5s",
+ ["@media (max-width:800px)"]: {
+ width: "15%",
+ fontSize: "12px",
+ },
+ },
+ recMovies: {
+ backgroundColor: "rgba(125, 125, 125, 1)",
+ },
+ loading: {
+ margin: "auto",
+ },
+}));
+
+const LandingMovieSlider = ({ moviesRated, moviesRec, heading }) => {
+ const [getRec, setGetRec] = useState(false);
+ const styles = useStyles();
+
+ const toggleRec = () => {
+ setGetRec(!getRec);
+ };
+
+ return (
+ This Hasn't Fetched Anything
:{testing}
} +{heading}
+ + {moviesRated.length > 1 ? ( + <> +
+
+
+ {getRec ? (
+
+ {!getRec ? (
+
+ {getRec ? (
+
+ Show Recommendations
+
+ ) : (
+
+ Get Your Own
+
+ )}
+
+ X Close
+
+ ) : null}
+
+
+ ) : null}
+
+ ) : (
+
+
+
+
+ );
+ };
+
+const mapStateToProps = (state) => {
+ return {
+ registerSuccess: state.register.success,
+ userid: state.login.userid,
+ errorStatus: state.register.error,
+ horrorMovies: state.landingPageReducer.horrorMovies,
+ horrorMoviesRec: state.landingPageReducer.horrorMoviesRec,
+ comedyMovies: state.landingPageReducer.comedyMovies,
+ comedyMoviesRec: state.landingPageReducer.comedyMoviesRec,
+ dramaMovies: state.landingPageReducer.dramaMovies,
+ dramaMoviesRec: state.landingPageReducer.dramaMoviesRec,
+ romanceMovies: state.landingPageReducer.romanceMovies,
+ romanceMoviesRec: state.landingPageReducer.romanceMoviesRec,
+ staffMovies: state.landingPageReducer.staffMovies,
+ staffMoviesRec: state.landingPageReducer.staffMoviesRec,
+ isFetching: state.isFetching,
+ error: state.error,
+ }
+}
+
+export default connect(mapStateToProps, {
+ horrorLandingAction,
+ comedyLandingAction,
+ dramaLandingAction,
+ romanceLandingAction,
+ staffLandingAction,
+ loginAction,
+})(LandingPage);
diff --git a/src/components/TileBar.js b/src/components/TileBar.js
new file mode 100644
index 0000000..b138b99
--- /dev/null
+++ b/src/components/TileBar.js
@@ -0,0 +1,185 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Carousel from 'react-multi-carousel';
+import 'react-multi-carousel/lib/styles.css';
+
+const useStyles = makeStyles((theme) => ({
+ '@global': {
+ '*::-webkit-scrollbar': {
+ width: '0.9em',
+ backgroundColor:"rgba(0, 0, 0, 0.71)"
+ },
+ '*::-webkit-scrollbar-track': {
+ '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)'
+ },
+ '*::-webkit-scrollbar-thumb': {
+ backgroundColor: 'rgba(65, 236, 176, 1)',
+ borderRadius: '10px',
+ }
+ },
+ cont: {
+ display: 'flex',
+ flexWrap: 'nowrap',
+ overflowX: 'auto',
+ backgroundColor: theme.palette.background.paper,
+ height: "500px",
+ },
+ movieList: {
+ minWidth:'15%',
+ margin:'10px',
+ },
+ posterImg: {
+ width:'100%',
+ objectFit:"contain",
+ },
+ movieList: {
+ minWidth:'15%',
+ margin:'10px',
+ },
+ customArrow:{
+ display:"flex",
+ justifyContent:"center",
+ alignItems:"center",
+ backgroundColor: "rgba(65, 236, 176, 1)",
+ color:"black",
+ fontWeight:"900",
+ border: "none",
+ width: "50px",
+ height:"50px",
+ borderRadius:"50%",
+ position: "absolute",
+ right:"0",
+ padding: "0",
+ fontSize:"30px",
+ cursor:"pointer",
+ transitionDuration: ".2s",
+ "&:hover": {
+ backgroundColor:"rgba(65, 236, 176, .5)",
+ color:"white",
+ width: "8%",
+ height:"100%",
+ borderRadius:"50% 0 0 50%",
+ fontSize:"40px",
+ },
+ "&:focus":{
+ outline:"none"
+ }
+ },
+ leftArrow:{
+ display:"flex",
+ justifyContent:"center",
+ alignItems:"center",
+ backgroundColor: "rgba(65, 236, 176, 1)",
+ color:"black",
+ fontWeight:"900",
+ border: "none",
+ width: "50px",
+ height:"50px",
+ borderRadius:"50%",
+ position: "absolute",
+ left:"0",
+ padding: "0",
+ fontSize:"30px",
+ cursor:"pointer",
+ transitionDuration: ".2s",
+ "&:hover": {
+ backgroundColor:"rgba(65, 236, 176, .5)",
+ color:"white",
+ width: "8%",
+ height:"100%",
+ borderRadius:"0 50% 50% 0",
+ fontSize:"40px",
+ },
+ "&:focus":{
+ outline:"none"
+ }
+ },
+ name: {
+ fontSize: "15px",
+ textAlign: "center",
+ paddingBottom: "5%",
+ },
+
+ }));
+
+const responsive = {
+ superLargeDesktop: {
+ // the naming can be any, depends on you.
+ breakpoint: { max: 4000, min: 3000 },
+ items: 6,
+ slidesToSlide: 6,
+ },
+ desktop: {
+ breakpoint: { max: 3000, min: 1024 },
+ items: 6,
+ slidesToSlide: 6,
+ },
+ tablet: {
+ breakpoint: { max: 800, min: 500 },
+ items: 4,
+ slidesToSlide: 4,
+
+ },
+ mobile: {
+ breakpoint: { max: 500, min: 0 },
+ items: 2
+ }
+};
+
+export const TileBar = ({movies}) => {
+ const styles = useStyles();
+
+ return (
+
+
+
+
+
+
+
+
+
+ Welcome to Groa
+The unbiased movie recommendation platform
+for movie fans by movie fans!
+ + + +
+ 
+
+
+ 
+
+ )
+ })}
+
+ )
+}
+
+const CustomRightArrow = ({ onClick, ...rest }) => {
+ const styles = useStyles();
+ const {
+ onMove,
+ carouselState: { currentSlide, deviceType }
+ } = rest;
+ // onMove means if dragging or swiping in progress.
+ return ;
+};
+
+const CustomLeftArrow = ({ onClick, ...rest }) => {
+const styles = useStyles();
+const {
+ onMove,
+ carouselState: { currentSlide, deviceType }
+} = rest;
+// onMove means if dragging or swiping in progress.
+return ;
+};
diff --git a/src/components/auth/AuthCheck.js b/src/components/auth/AuthCheck.js
new file mode 100644
index 0000000..ff8aef8
--- /dev/null
+++ b/src/components/auth/AuthCheck.js
@@ -0,0 +1,42 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { registerAction, loginAction } from "../../store/actions";
+import { useOktaAuth } from '@okta/okta-react';
+import { useHistory } from "react-router-dom";
+
+
+
+
+const AuthCheck = (props) => {
+ const history = useHistory();
+ const { authState, authService } = useOktaAuth();
+
+ useEffect(() => {
+ authService.getUser()
+ .then((info) => {
+ props.loginAction(authState.accessToken, info.sub, history);
+ console.log("checking authentication")
+ })
+ .catch(err => console.log("Error fetching User info in UseEffect", err))
+ }, );
+
+ return(
+
+
+ {movieTitle}
+
+
+ )
+
+}
+
+const mapStateToProps = (state) => {
+ return {
+ registerSuccess: state.register.success,
+ userid: state.login.userid,
+ errorStatus: state.register.error,
+ };
+ };
+
+ export default connect(mapStateToProps, { registerAction, loginAction })(
+ AuthCheck
+ );
+
\ No newline at end of file
diff --git a/src/components/auth/Congratulations.js b/src/components/auth/Congratulations.js
new file mode 100644
index 0000000..27dfeab
--- /dev/null
+++ b/src/components/auth/Congratulations.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import SuccessImg from "../../img/success-man.png";
+
+const Congrats = ({ userid }) => {
+ return (
+ LOADEDING
+
+
+ );
+};
+
+const mapStateToProps = state => {
+ return {
+ userid: state.login.userid,
+ errorStatus: state.login.error
+ };
+};
+export default connect(mapStateToProps, {})(Congrats);
diff --git a/src/components/auth/Congratulations.test.js b/src/components/auth/Congratulations.test.js
new file mode 100644
index 0000000..589e24b
--- /dev/null
+++ b/src/components/auth/Congratulations.test.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId } from "../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+
+// component to be tested
+import Congratulations from "./Congratulations.js";
+
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
+const mockStore = configureStore()
+let store = mockStore({
+ login: {
+ userid: 4
+ },
+})
+
+it("renders Congratulations component", () => {
+ const { container } = render(
+
+
+
+
+
+
+ Congratulations!
+Your ratings have been successfully uploaded.
+
+ 
+
+
+
+
+ // END DataUploadPage
+ );
+};
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ isUploading: state.upload.isUploading,
+ };
+};
+
+export default connect(mapStateToProps, { uploadAction, setFilter })(
+ DataUpload
+);
diff --git a/src/components/auth/DataUpload.test.js b/src/components/auth/DataUpload.test.js
new file mode 100644
index 0000000..0289f2f
--- /dev/null
+++ b/src/components/auth/DataUpload.test.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import { getAllByText } from "@testing-library/dom";
+import { Router, Route } from "react-router-dom";
+import { getAllByTestId, getByTestId } from "../../utils/test-utils.js";
+import { createMemoryHistory } from "history";
+
+// component to be tested.
+import DataUpload from "./DataUpload.js";
+
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+const mockStore = configureStore([]);
+
+it("renders DataUpload component", () => {
+ let history = createMemoryHistory();
+ let store;
+ store = mockStore({
+ login: {
+ userid: 4
+ },
+ upload: {
+ ratings: [],
+ reviews: [],
+ watched: [],
+ watchlist: []
+ }
+ });
+ const { container } = render(
+
+
+
+
+
+ Already rated movies elsewhere?
++ Groa lets you easily upload your ratings from either LetterBoxd or + IMDb: +
+
+
+ {/* END DboxContainer */}
+
+ {/* ///////////////UPLOAD FILE //////////////////// */}
+
+ 
+
+
+
+ {/* END DROPDOWN */}
+
+ {/* RIGHT SIDE DIV - IMDB UPLOAD */}
+ {/*
+
+ {/* END dropdown-content*/}
+ {/* EMPTY DIV - Postions Upload Box to bottom of screen */}
+
+
+
+ {/* END DboxLeft*/}
+
+
+ + 1. Log in to{" "} + + Letterboxd + + . +
++ 2. Click on your username and select + Settings from the dropdown menu. +
++ 3. Navigate to the Import & Export tab + and select Export Your Data. +
+4. Tap to browse and attach the .zip file below.
+
+
+
*/}
+ {/* END DROPDOWN */}
+
+
*/}
+ {/* END dropdown-content*/}
+ {/*
+ 
+
*/}
+ {/* END DboxRight*/}
+ {/*
+
+ 1.Log in to IMDb
++ 2.Click on your username and select your ratings fromthe + dropdown menu. +
++ 3.Click on the icon and select Export. Save the + ratings.csv file somwhere convenient like your desktop or + downloads folder. +
+4.Click to browse or simply drop your .csv file below
+
+
+
+
+
+ + We value your privacy and strive to be transparent. Your data is + kept strictly confidential; only you can view or access it. +
+
+ {/* NAVIGATION */}
+
+
+
+ // END LOGIN PAGE
+ );
+};
+
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ errorStatus: state.login.error,
+ };
+};
+export default connect(mapStateToProps, { loginAction })(LoginPage);
diff --git a/src/components/auth/Login.test.js b/src/components/auth/Login.test.js
new file mode 100644
index 0000000..05677cf
--- /dev/null
+++ b/src/components/auth/Login.test.js
@@ -0,0 +1,58 @@
+import React from "react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { render, fireEvent } from "@testing-library/react";
+import { getAllByText } from "@testing-library/dom";
+import { getAllByTestId, getByTestId } from "../../utils/test-utils";
+
+// component to be tested.
+import Login from "./Login";
+
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+const mockStore = configureStore([]);
+
+let store;
+store = mockStore({
+ login: {
+ userid: null
+ }
+});
+
+it("renders login component", () => {
+ const { container } = render(
+
+
+
+
+ {/* END OF MAIN CONTENT */}
+
+
+
+
+ Welcome
+
+ {" "}
+ Groa makes it easy to find a film you’ll love.
+
+
+ Welcome
back.
+
+
+ {" "}
+ Groa makes it easy to find a film you’ll love.
What new
+ favorite will you discover today?
+
+
+ 
+
+
+
+ IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
+ {!authState.isAuthenticated ?Please Login
:You are Logged in Logout
} +Rate Movies to Get Personalized Recommendations
+
+ {isSearching ? (
+
+ {" "}
+ {queries
+ .filter((movie) =>
+ !ratings.includes(
+ (film) =>
+ film.film.title === movie.title && film.year === movie.year
+ ).length && searchTerm !== ""
+ ? movie.primary_title
+ .toString()
+ .toLowerCase()
+ .includes(searchTerm.toLowerCase())
+ : true
+ )
+ .slice(0, cardAmount)
+ .map((movie, index) => {
+ /* Checks if the film is in ratings */
+ const isRated = (film) => {
+ return film.title === movie.title && film.year === movie.year;
+ };
+ /* Returns the movie object if in ratings */
+ let rated = ratings.find(isRated);
+ let posterURI = movie.poster_url;
+ let unsplashUrl =
+ "https://source.unsplash.com/collection/1736993/500x650";
+ let moviePoster = `https://image.tmdb.org/t/p/w500${posterURI}?api_key=${process.env.REACT_APP_TMDB_API_KEY}`;
+ return (
+
+ ) : (
+
+ {" "}
+ {movies
+ .filter((movie) =>
+ !ratings.includes(
+ (film) =>
+ film.film.title === movie.title && film.year === movie.year
+ ).length && searchTerm !== ""
+ ? movie.primary_title
+ .toString()
+ .toLowerCase()
+ .includes(searchTerm.toLowerCase())
+ : true
+ )
+ .slice(0, cardAmount)
+ .map((movie, index) => {
+ /* Checks if the film is in ratings */
+ const isRated = (film) => {
+ return film.title === movie.title && film.year === movie.year;
+ };
+ /* Returns the movie object if in ratings */
+ let rated = ratings.find(isRated);
+ let posterURI = movie.poster_url;
+ let unsplashUrl =
+ "https://source.unsplash.com/collection/1736993/500x650";
+ let moviePoster = `https://image.tmdb.org/t/p/w500${posterURI}?api_key=${process.env.REACT_APP_TMDB_API_KEY}`;
+ return (
+
+ )}
+
+
+ You have successfully rated this movie!
+
+
+
+
+ );
+}
+
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ isFetching: state.movie.isFetching,
+ movies: state.movie.movies,
+ moviesError: state.movie.error,
+ searchTerm: state.filter.searchTerm,
+ watchlist: state.watchlist.movies,
+ ratings: state.rating.movies,
+ ratingsError: state.rating.error,
+ queries: state.search.queries,
+ isSearching: state.search.isSearching,
+ };
+};
+export default connect(mapStateToProps, {
+ getMoviesAction,
+ setFilter,
+ getRatingAction,
+})(Onboarding);
diff --git a/src/components/auth/OnboardingPlatform.js b/src/components/auth/OnboardingPlatform.js
new file mode 100644
index 0000000..92c3f1a
--- /dev/null
+++ b/src/components/auth/OnboardingPlatform.js
@@ -0,0 +1,119 @@
+import React from "react";
+import { connect } from "react-redux";
+import { setFilter } from "../../store/actions";
+import { Link } from "react-router-dom";
+//img
+import OnboardingImg from "../../img/happy-running-person.png";
+//material-ui
+import { makeStyles } from "@material-ui/core/styles";
+import { Button } from "@material-ui/core";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ margin: '0 auto',
+ display: "flex",
+ background: "#212120",
+ padding: "2%",
+ fontFamily: 'Work Sans',
+ },
+ onboardingPlateformImg: {
+ width: "30%",
+ padding: "3%",
+ },
+ onboardingText: {
+ display: "flex",
+ justifyContent: "center",
+ flexDirection: "column",
+ padding: "3%",
+ color:'white',
+ },
+ onboardingh1: {
+ fontSize: "35px",
+ padding: "2%",
+ },
+ onboardingp1: {
+ color: "#00E6BC",
+ padding: "2%",
+ fontSize: "20px",
+ },
+ onboardingp2: {
+ padding: "2%",
+ fontSize: "20px",
+ },
+ onboardingLink: {
+ textAlign: "center",
+ padding: "2%",
+ textDecoration:'none',
+ },
+ onboardingBut: {
+ width: "100%",
+ height:'7vh',
+ background: '#00B392',
+ color: '#212120',
+ borderRadius: "4px",
+ '&:hover': {
+ boxShadow: '0 0 6px #00B392',
+ color: '#00B392',
+ },
+ },
+ [theme.breakpoints.down("xs")]: {
+ root: {
+ flexDirection: "column-reverse",
+ textAlign:'center',
+ // width:'100%',
+ },
+ onboardingText:{
+ // justifyContent:'center',
+ // width:'90%',
+ },
+ onboardingPlateformImg: {
+ display: "block",
+ marginLeft: "auto",
+ marginRight: "auto",
+ width: "40%",
+ },
+ },
+}));
+
+function OnboardingPlatform({ userid }) {
+ const classes = useStyles();
+
+ return (
+
+
+ );
+ })}
+
+
+ );
+ })}
+
+ 
+
+ );
+}
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ isFetching: state.movie.isFetching,
+ movies: state.movie.movies,
+ moviesError: state.movie.error,
+ searchTerm: state.filter.searchTerm,
+ watchlist: state.watchlist.movies,
+ ratings: state.rating.movies,
+ };
+};
+export default connect(mapStateToProps, {
+ setFilter,
+})(OnboardingPlatform);
diff --git a/src/components/auth/PostLogin.js b/src/components/auth/PostLogin.js
new file mode 100644
index 0000000..95a00ce
--- /dev/null
+++ b/src/components/auth/PostLogin.js
@@ -0,0 +1,71 @@
+import React from "react";
+import { ifDev } from "../../utils/removeAttribute";
+
+export default function PostLogin() {
+ return (
+
+
+ You're Almost There.
++ Help Groa personalize your recommendations! Groa works better when you + tell us what you like. +
++ Rate six movies on a scale from 1 to 5 and we’ll get you your + personalized recommendations in no time! Train Groa to be your + personal movie AI! +
+ + + +
+
+
+
+
+
+ );
+}
diff --git a/src/components/auth/PostLogin.test.js b/src/components/auth/PostLogin.test.js
new file mode 100644
index 0000000..feeec09
--- /dev/null
+++ b/src/components/auth/PostLogin.test.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Router, Route } from "react-router-dom";
+import { getAllByTestId } from "../../utils/test-utils.js";
+import { createMemoryHistory } from "history";
+
+// component to be tested.
+import PostLogin from "./PostLogin";
+
+it("renders PostLogin component on the path '/setup-wizard'", () => {
+ let route = "/setup-wizard";
+ const { container } = render(
+ Groa grows with you.
+
+ The more movies you rate.
+
+ The better your recommendations.
+
Select how you would like to join:
+
+
+
+
+
+
+ + Upload ratings from +
+
+ 
+ 
+
+
+ or
+
+ + For users who already have an account on this popular film rating + site. +
+ +Recommendation setup wizard
+
+ 
+
+
+ For users who want to use Groa without uploading data.
+ +
+ 
+
+ );
+}
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ isFetching: state.movie.isFetching,
+ movies: state.movie.movies,
+ moviesError: state.movie.error,
+ searchTerm: state.filter.searchTerm,
+ watchlist: state.watchlist.movies,
+ ratings: state.rating.movies,
+ };
+};
+export default connect(mapStateToProps, {
+ getMoviesAction,
+ recommendationAction,
+ setFilter,
+})(PostOnboarding);
diff --git a/src/components/auth/Register.js b/src/components/auth/Register.js
new file mode 100644
index 0000000..80d4ec2
--- /dev/null
+++ b/src/components/auth/Register.js
@@ -0,0 +1,320 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+import { registerAction, loginAction } from "../../store/actions";
+import { ifDev } from "../../utils/removeAttribute.js";
+import { Link, useHistory } from "react-router-dom";
+
+// styling imports
+import Picture3 from "../../img/couch-popcorn.png";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import { makeStyles } from "@material-ui/core/styles";
+import { Button } from "@material-ui/core";
+// Navbar Register
+import RegisterNavLinks from "../layout/nav-layouts/RegisterNavLinks";
+//OKTA
+import { useOktaAuth } from "@okta/okta-react";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ fontFamily: 'Work Sans',
+ color: 'white',
+ margin: '0 auto',
+ width: '100%',
+ minHeight: '100vh',
+ backgroundColor: '#212120'
+ },
+ onboardingNav: {
+ color: 'white',
+ display: 'flex',
+ width: '95%',
+ margin: '0 auto',
+ justifyContent: 'flex-end',
+ alignItems: 'center',
+ padding: '1.1% 1%',
+ textAlign: 'center',
+ },
+ boxContainer: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ margin: '0 auto',
+ width: '85%',
+ },
+ boxLeft: {
+ width: '45%',
+ margin: '0 1%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ textAlign: 'left',
+ maxWidth: '100%',
+ boxSizing: 'border-box',
+ },
+ textContainer: {
+ whiteSpace: 'nowrap',
+ },
+ h1: {
+ fontSize: '5vw',
+ },
+ h5: {
+ fontSize: '1.5vw',
+ fontWeight: 'normal',
+ paddingTop: '2rem',
+ },
+ imageWrapper: {
+ width: '75%',
+ padding: '5%, 0'
+ },
+ logo: {
+ width: '100%',
+ },
+ //box right
+ boxRight: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderRadius: '4px',
+ background: '#212120',
+ width: '100%',
+ // height: '550px',
+ },
+ form: {
+ width: '50%',
+ display: 'flex',
+ justifyContent: 'center',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ bottomForm: {
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column-reverse',
+ margin: 0,
+ },
+ btnContainer: {
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ flexDirection: 'column',
+ paddingBottom: '15px',
+ },
+ signupBtn: {
+ width: '100%',
+ maxWidth: '100%',
+ height: '50px',
+ background: '#00B392',
+ color: '#212120',
+ marginBottom: '2%',
+ '&:hover': {
+ boxShadow: '0 0 6px #00B392',
+ color: '#00B392',
+ },
+ },
+ fbBtn: {
+ width: '100%',
+ height: '50px',
+ backgroundColor: '#3A5A97',
+ borderRadius: '4px',
+ boxShadow: '0 3px 4px 0 rgba(0, 0, 0, .25)',
+ marginTop: '2%',
+ '&:hover': {
+ boxShadow: '0 0 6px #4285f4',
+ },
+ '&:active': {
+ backgroundColor: 'white',
+ }
+ },
+ fbIconWrapper: {
+ position: 'absolute',
+ marginTop: '4px',
+ marginLeft: '1px',
+ width: '40px',
+ height: '40px',
+ borderRadius: '2px',
+ },
+ fbIcon: {
+ marginTop: '11px',
+ marginLeft: '11px',
+ width: '18px',
+ height: '18px',
+ },
+ btnText: {
+ margin: '6% 1% 0 30%',
+ color: 'white',
+ fontzsize: '14px',
+ letterSpacing: '0.2px',
+ fontFamily: "Roboto",
+ },
+
+ [theme.breakpoints.down("xs")]: {
+ onboardingNav: {
+ flexDirection: 'column',
+ },
+ boxContainer: {
+ flexDirection: 'column',
+ alignItems: "center",
+ width:'100%'
+ },
+ boxLeft: {
+ width: '80%',
+ margin: 0,
+ padding: 0,
+ },
+ textContainer: {
+ margin: '0 auto',
+ width: '100%',
+ },
+ h1: {
+ display: 'none',
+ },
+ h5: {
+ display: 'none',
+ },
+ imageWrapper: {
+ display: 'none',
+ },
+ logo: {
+ display: 'none',
+ },
+ boxRight: {
+ margin: '10% 0',
+ background: "#212120",
+ height: '100%',
+ },
+ form: {
+ maxWidth: '100%',
+ width:'80%'
+ },
+ btnText: {
+ margin: '4% 2% 0 35%',
+ },
+ },
+}));
+
+function Copyright() {
+ return (
+
+
+ Great Job!
+You've come so far!
++ Check out your personalized Groa recommendations +
+ + + +
+ {/* NAVIGATION */}
+
+ );
+};
+
+const mapStateToProps = (state) => {
+ return {
+ registerSuccess: state.register.success,
+ userid: state.login.userid,
+ errorStatus: state.register.error,
+ };
+};
+
+export default connect(mapStateToProps, { registerAction, loginAction })(
+ Register
+);
diff --git a/src/components/auth/Register.test.js b/src/components/auth/Register.test.js
new file mode 100644
index 0000000..2af20ea
--- /dev/null
+++ b/src/components/auth/Register.test.js
@@ -0,0 +1,61 @@
+import React from "react";
+import { render,fireEvent, } from "@testing-library/react";
+import { getAllByText } from "@testing-library/dom";
+import { getAllByTestId, getByTestId } from "../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+
+// component to be tested.
+import Register from "./Register.js";
+
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+const mockStore = configureStore([]);
+
+let store = mockStore({
+ login: {
+ userid: 4
+ },
+ register: {
+ success: false,
+ error: ""
+ }
+});
+
+it("renders Register component", () => {
+
+ const { container } = render(
+
+
+ {/* MAIN PAGE CONTENT */}
+
+
+
+
+ {/* FORM STARTS */}
+
+
+ Your movies,
+
+ {" "}
+ Groa helps you pick the perfect film... so you
+
+
+ Your movies,
your way.
+
+
+ {" "}
+ Groa helps you pick the perfect film... so you
can save
+ your popcorn for the good stuff.
+
+
+ 
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+ + ----------- OR ----------- +
+
+
+
+ 
+
+
+ + Login with Facebook +
+
+
+ );
+};
+
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ searchTerm: state.filter.searchTerm,
+ };
+};
+export default connect(mapStateToProps, {
+ loginAction,
+ searchAction,
+})(Navigation);
diff --git a/src/components/auth/index.js b/src/components/auth/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/dashboard/Explore.js b/src/components/dashboard/Explore.js
new file mode 100644
index 0000000..3543606
--- /dev/null
+++ b/src/components/dashboard/Explore.js
@@ -0,0 +1,221 @@
+import React, { useEffect } from "react";
+// tools
+import { connect } from "react-redux";
+import {
+ getMoviesAction,
+ setFilter,
+ notWatchListAction,
+} from "../../store/actions/index.js";
+// Screen width util
+import widthFinder from "../../utils/widthFinder.js";
+
+// children components
+import MovieCard from "../movies/MovieCard.js";
+import LoadingScreen from "../layout/LoadingScreen.js";
+//for grid
+import { GridList } from "@material-ui/core/";
+import { makeStyles } from "@material-ui/core/styles";
+import { useOktaAuth } from "@okta/okta-react/dist/OktaContext";
+
+const useStyles = makeStyles((theme) => ({
+ Title: {
+ fontSize: "3rem",
+ textAlign: "center",
+ paddingTop:'2%',
+ },
+ cardGrid: {
+ paddingTop: theme.spacing(0),
+ paddingBottom: theme.spacing(2),
+ paddingRight: theme.spacing(1),
+ paddingLeft: theme.spacing(1),
+ },
+ movieCard: {
+ "&:hover": {
+ transform: 'scale(1.1)',
+ transitionDuration:'.5s'
+ },
+ },
+ [theme.breakpoints.down("xs")]: {
+ Title: {
+ fontSize: '2rem'
+ },
+ },
+}));
+function Explore({
+ isFetching,
+ movies,
+ userid,
+ getMoviesAction,
+ searchTerm,
+ setFilter,
+ ratings,
+ queries,
+ isSearching,
+ notWatchListAction,
+}) {
+ const classes = useStyles();
+ const screenWidth = widthFinder(window.innerWidth);
+
+ const { authState, authService } = useOktaAuth();
+ const { accessToken } = authState;
+
+ useEffect(() => {
+ setFilter("");
+ // Returns the movies
+ getMoviesAction(userid, accessToken);
+ notWatchListAction(userid, accessToken);
+ }, [
+ getMoviesAction,
+ notWatchListAction,
+ userid,
+ ratings,
+ setFilter,
+ accessToken,
+ ]);
+
+ // How many movies render
+ const cardAmount = 40;
+
+ if (isFetching) return
+
+
+
+ Search Your Favorite Movies
+ {isSearching ? ( +
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+ );
+};
+
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ searchTerm: state.filter.searchTerm,
+ search: state.movie.search,
+ };
+};
+export default connect(mapStateToProps, {
+ loginAction,
+ recommendationAction,
+ setFilter,
+})(Navigation);
diff --git a/src/components/dashboard/Navigation.test.js b/src/components/dashboard/Navigation.test.js
new file mode 100644
index 0000000..ce6465c
--- /dev/null
+++ b/src/components/dashboard/Navigation.test.js
@@ -0,0 +1,52 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { getAllByTestId } from "../../utils/test-utils.js";
+
+// component to be tested.
+import Navigation from "./Navigation.js";
+
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+
+it("renders navigation component", () => {
+ const mockStore = configureStore([]);
+ let store;
+ store = mockStore({
+ login: {
+ userid: 4
+ }
+ });
+ const { container } = render(
+
+
+
+
+
+
+ 
+
+ {/* Below commented out code to be used in the future for profile page */}
+ {/*
+ */}
+
+ {search ?
+
+
+
+
+
+
+
+
+
+
+ {theme.direction === "ltr" ? (
+
+
+ -
+ {linkAttributes.map((linkObject, index) => (
+
My Ratings
+
+
+
+ );
+}
+
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ isFetching: state.rating.isFetching,
+ ratings: state.rating.movies,
+ ratingsError: state.rating.error,
+ };
+};
+export default connect(mapStateToProps, { getRatingAction, setFilter })(
+ Ratings
+);
diff --git a/src/components/dashboard/Ratings.test.js b/src/components/dashboard/Ratings.test.js
new file mode 100644
index 0000000..20aaafa
--- /dev/null
+++ b/src/components/dashboard/Ratings.test.js
@@ -0,0 +1,95 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId } from "../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+// component to be tested.
+import Ratings from "./Ratings.js";
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+const mockStore = configureStore([thunk]);
+
+it("renders Ratings with array has length.", async () => {
+ let store = mockStore({
+ login: {
+ userid: 4
+ },
+ rating: {
+ error: ""
+ },
+ register: {
+ success: false,
+ error: ""
+ },
+ rating: {
+ movies: [
+ { Title: "The Godfather", Year: "1972" },
+ { Title: "The Wizard of Oz", Year: "1939" },
+ { Title: "Citizen Kane", Year: "1941" }
+ ],
+ error: ""
+ },
+ upload: {
+ isUploading: true
+ },
+ watchlist: {
+ isFetching: false,
+ movies: []
+ },
+ recommendations: {
+ isFetching: false,
+ movies: []
+ }
+ });
+
+ const { container } = render(
+ {heading}
+ + {movieRatings.length >= 1 ? ( + <> ++ Movie of this star rating have not been rated yet +
+ )} +
+
+ );
+ })}
+
+ );
+};
+
+const CustomRightArrow = ({ onClick, ...rest }) => {
+ const styles = useStyles();
+ const {
+ onMove,
+ carouselState: { currentSlide, deviceType },
+ } = rest;
+ // onMove means if dragging or swiping in progress.
+ return (
+
+ );
+};
+
+const CustomLeftArrow = ({ onClick, ...rest }) => {
+ const styles = useStyles();
+ const {
+ onMove,
+ carouselState: { currentSlide, deviceType },
+ } = rest;
+ // onMove means if dragging or swiping in progress.
+ return (
+
+ );
+};
diff --git a/src/components/dashboard/Recommendations.js b/src/components/dashboard/Recommendations.js
new file mode 100644
index 0000000..4a7be37
--- /dev/null
+++ b/src/components/dashboard/Recommendations.js
@@ -0,0 +1,138 @@
+import React, { useEffect } from "react";
+import { useOktaAuth } from "@okta/okta-react";
+// tools
+import { connect } from "react-redux";
+import {
+ recommendationAction,
+ toggleIsUploaded,
+ setFilter,
+} from "../../store/actions/index.js";
+// children components
+import LoadingScreen from "../layout/LoadingScreen.js";
+import MovieCard from "../movies/MovieCard.js";
+// Screen width util
+import widthFinder from "../../utils/widthFinder.js";
+//for grid
+import { GridList } from "@material-ui/core/";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+ Title: {
+ fontSize: "3rem",
+ textAlign: "center",
+ },
+ [theme.breakpoints.down("xs")]: {
+ Title: {
+ fontSize: "2rem",
+ },
+ },
+ cardGrid: {
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+ paddingRight: theme.spacing(1),
+ paddingLeft: theme.spacing(1),
+ },
+ movieCard: {
+ "&:hover": {
+ transform: "scale(1.1)",
+ transitionDuration: ".5s",
+ },
+ },
+}));
+
+function Recommendations({
+ isFetching,
+ recommendations,
+ userid,
+ recommendationAction,
+ searchTerm,
+ isUploaded,
+ setFilter,
+}) {
+ const { authState } = useOktaAuth();
+ const { accessToken } = authState;
+
+ useEffect(() => {
+ setFilter("");
+ if (isUploaded === true) {
+ recommendationAction(userid);
+ toggleIsUploaded();
+ }
+ recommendationAction(userid, accessToken);
+ // Returns the most recent recommendations from the database
+ }, [userid, isUploaded, recommendationAction, setFilter, accessToken]);
+ const classes = useStyles();
+ const screenWidth = widthFinder(window.innerWidth);
+
+ if (isFetching) return Our Recommendations
+
+
+ );
+ })}
+ My Watchlist
+
+
+ );
+ })}
+ ;
+
-
-
- )
-}
-
-export default Dashboard;
diff --git a/src/components/layout/LoadingScreen.js b/src/components/layout/LoadingScreen.js
new file mode 100644
index 0000000..352d128
--- /dev/null
+++ b/src/components/layout/LoadingScreen.js
@@ -0,0 +1,92 @@
+import React from "react";
+import ReactLoading from "react-loading";
+import { connect } from "react-redux";
+import { ifDev } from "../../utils/removeAttribute.js";
+//material-ui
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ background: '#212120',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ height: '100vh',
+ fontFamily: 'Work Sans',
+ },
+ loadingComponent: {
+ margin: '4.5% auto'
+ },
+ loadingComponenth4:{
+ fontSize: '2.5rem',
+ color: '#ffffff',
+ textAlign: 'center',
+ fontWeight: '700',
+ },
+ loadingComponentp:{
+ fontSize: '1.4rem',
+ textAlign: 'center',
+ lineHeight: '2rem',
+ color: '#ffffff',
+ },
+ [theme.breakpoints.down("xs")]: {
+ loadingComponenth4: {
+ fontSize: '2rem'
+ },
+ loadingComponentp:{
+ fontSize: '1rem'
+ },
+ },
+}));
+
+function LoadingScreen({
+ isUploading,
+ isFetchingRecommendations,
+ isFetchingWatchlist,
+ isFetchingRatings,
+ isFetchingExplore,
+}) {
+ const classes = useStyles();
+ return (
+ Welcome to the dashboard.
-
-
- {/* upload your letterboxd csv file here to get unique movie recommendations
-Container for settings
*/}
-
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
-
-
-
-
-
-
- alskdjflsjadf
-asldkfljsfd
-oweriuoiw
-x,cvn,mncvx
-
-
-
-
-
+ {isUploading ? (
+
+ );
+}
+const mapStateToProps = state => {
+ return {
+ isUploading: state.upload.isUploading,
+ isFetchingWatchlist: state.watchlist.isFetching,
+ isFetchingRecommendations: state.recommendations.isFetching,
+ isFetchingRatings: state.rating.isFetching,
+ isFetchingExplore: state.movie.isFetching
+ };
+};
+
+export default connect(mapStateToProps, {})(LoadingScreen);
diff --git a/src/components/layout/LoadingScreen.test.js b/src/components/layout/LoadingScreen.test.js
new file mode 100644
index 0000000..3188346
--- /dev/null
+++ b/src/components/layout/LoadingScreen.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId } from "../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+// component to be tested.
+import LoadingScreen from "./LoadingScreen.js";
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+const mockStore = configureStore([thunk]);
+
+it("renders loading screen", () => {
+ let store = mockStore({
+ upload: {
+ isUploading: true
+ },
+ watchlist: {
+ isFetching: false
+ },
+ recommendations: {
+ isFetching: false
+ },
+ rating: {
+ isFetching: false
+ }
+ });
+ const { container } = render(
+ Uploading Files...
+ ) : isFetchingWatchlist ? ( +Loading Watchlist...
+ ) : isFetchingRecommendations ? ( +Loading Recommendations...
+ ) : isFetchingRatings ? ( +Loading Ratings...
+ ) : isFetchingExplore ? ( +Loading Movies to Explore...
+ ) : null} +
+ Based on the connection to our server,
+
+ this process could take a few seconds.
+
+
+
+ );
+}
diff --git a/src/components/layout/nav-layouts/LoginNavLinks.js b/src/components/layout/nav-layouts/LoginNavLinks.js
new file mode 100644
index 0000000..a7911e8
--- /dev/null
+++ b/src/components/layout/nav-layouts/LoginNavLinks.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { ifDev } from "../../../utils/removeAttribute.js";
+// styling imports
+import GroaLogo from "../../../img/groa-logo-nav.png";
+
+
+export default function LoginNavLinks() {
+ return (
+ Explore Groa
+
+
+
+ );
+}
+//
\ No newline at end of file
diff --git a/src/components/layout/nav-layouts/LoginNavLinks.test.js b/src/components/layout/nav-layouts/LoginNavLinks.test.js
new file mode 100644
index 0000000..d697d49
--- /dev/null
+++ b/src/components/layout/nav-layouts/LoginNavLinks.test.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId } from "../../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+
+// component to be tested.
+import LoginNavLinks from "./LoginNavLinks.js";
+
+it("renders login-nav-component", () => {
+ const { container } = render(
+ Sign In
+
+
+
+ );
+}
diff --git a/src/components/layout/nav-layouts/RegisterNavLinks.test.js b/src/components/layout/nav-layouts/RegisterNavLinks.test.js
new file mode 100644
index 0000000..7b28d27
--- /dev/null
+++ b/src/components/layout/nav-layouts/RegisterNavLinks.test.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId } from "../../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+
+// component to be tested.
+import RegisterNavLinks from "./RegisterNavLinks.js";
+
+it("renders register-nav-component", () => {
+ const { container } = render(
+ Access Your Account
+
+ Google
+
+ Groa Privacy Policy
+ ++ This privacy policy has been compiled to better serve those who are + concerned with how their 'Personally identifiable information' (PII) is + being used online. PII, as used in US privacy law and information + security, is information that can be used on its own or with other + information to identify, contact, or locate a single person, or to + identify an individual in context. Please read our privacy policy + carefully to get a clear understanding of how we collect, use, protect + or otherwise handle your Personally Identifiable Information in + accordance with our website. +
++ What personal information do we collect from the people that visit our + blog, website or app? +
++ When using or registering on our site, as appropriate, you may be asked + to enter your name, email address, Preferences or other details to help + you with your experience. +
+When do we collect information?
++ We collect information from you when you register on our site, subscribe + to a newsletter, fill out a form or enter information on our site. +
+How do we use your information?
++ We may use the information we collect from you when you register, make a + purchase, sign up for our newsletter, respond to a survey or marketing + communication, surf the website, or use certain other site features in + the following ways: To personalize user's experience and to allow us to + deliver the type of content and product offerings in which you are most + interested To ask for ratings and reviews of services or products To + follow up with them after correspondence (live chat, email or phone + inquiries) +
+How do we protect visitor information?
++ We do not use vulnerability scanning and/or scanning to PCI standards. + We use regular Malware Scanning. Your personal information is contained + behind secured networks and is only accessible by a limited number of + persons who have special access rights to such systems, and are required + to keep the information confidential. In addition, all sensitive/credit + information you supply is encrypted via Secure Socket Layer (SSL) + technology. We implement a variety of security measures when a user + enters, submits, or accesses their information to maintain the safety of + your personal information. All transactions are processed through a + gateway provider and are not stored or processed on our servers. +
+Do we use 'cookies'?
++ Yes. Cookies are small files that a site or its service provider + transfers to your computer's hard drive through your Web browser (if you + allow) that enables the site's or service provider's systems to + recognize your browser and capture and remember certain information. For + instance, we use cookies to help us remember and process the items in + your shopping cart. They are also used to help us understand your + preferences based on previous or current site activity, which enables us + to provide you with improved services. We also use cookies to help us + compile aggregate data about site traffic and site interaction so that + we can offer better site experiences and tools in the future. We use + cookies to: Understand and save user's preferences for future visits + Compile aggregate data about site traffic and site interactions in order + to offer better site experiences and tools in the future. We may also + use trusted third-party services that track this information on our + behalf. You can choose to have your computer warn you each time a cookie + is being sent, or you can choose to turn off all cookies. You do this + through your browser (like Internet Explorer) settings. Each browser is + a little different, so look at your browser's Help menu to learn the + correct way to modify your cookies. If you disable cookies off, some + features will be disabled It won't affect the user's experience that + make your site experience more efficient and some of our services will + not function properly. +
+Third-party disclosure
++ We do not sell, trade, or otherwise transfer to outside parties your + personally identifiable information unless we provide users with advance + notice. This does not include website hosting partners and other parties + who assist us in operating our website, conducting our business, or + serving our users, so long as those parties agree to keep this + information confidential. We may also release information when it's + release is appropriate to comply with the law, enforce our site + policies, or protect ours or others' rights, property or safety. + However, non-personally identifiable visitor information may be provided + to other parties for marketing, advertising, or other uses. +
+Third-party links
++ Occasionally, at our discretion, we may include or offer third-party + products or services on our website. These third-party sites have + separate and independent privacy policies. We therefore have no + responsibility or liability for the content and activities of these + linked sites. Nonetheless, we seek to protect the integrity of our site + and welcome any feedback about these sites. +
++ Google's advertising requirements can be summed up by Google's + Advertising Principles. They are put in place to provide a positive + experience for users. + https://support.google.com/adwordspolicy/answer/1316548?hl=en We have + not enabled Google AdSense on our site but we may do so in the future. +
+California Online Privacy Protection Act
++ CalOPPA is the first state law in the nation to require commercial + websites and online services to post a privacy policy. The law's reach + stretches well beyond California to require a person or company in the + United States (and conceivably the world) that operates websites + collecting personally identifiable information from California consumers + to post a conspicuous privacy policy on its website stating exactly the + information being collected and those individuals with whom it is being + shared, and to comply with this policy. - See more at: + http://consumercal.org/california-online-privacy-protection-act-caloppa/#sthash.0FdRbT51.dpuf + According to CalOPPA we agree to the following: Users can visit our site + anonymously. Once this privacy policy is created, we will add a link to + it on our home page or as a minimum on the first significant page after + entering our website. Our Privacy Policy link includes the word + 'Privacy' and can be easily be found on the page specified above. Users + will be notified of any privacy policy changes: On our Privacy Policy + Page Users are able to change their personal information: By logging in + to their account How does our site handle do not track signals? We honor + do not track signals and do not track, plant cookies, or use advertising + when a Do Not Track (DNT) browser mechanism is in place. Does our site + allow third-party behavioral tracking? It's also important to note that + we do not allow third-party behavioral tracking +
+COPPA (Children Online Privacy Protection Act)
++ When it comes to the collection of personal information from children + under 13, the Children's Online Privacy Protection Act (COPPA) puts + parents in control. The Federal Trade Commission, the nation's consumer + protection agency, enforces the COPPA Rule, which spells out what + operators of websites and online services must do to protect children's + privacy and safety online. We do not specifically market to children + under 13. +
+Fair Information Practices
++ The Fair Information Practices Principles form the backbone of privacy + law in the United States and the concepts they include have played a + significant role in the development of data protection laws around the + globe. Understanding the Fair Information Practice Principles and how + they should be implemented is critical to comply with the various + privacy laws that protect personal information. In order to be in line + with Fair Information Practices we will take the following responsive + action, should a data breach occur, We will notify the users via email + within 14 business days We also agree to the Individual Redress + Principle, which requires that individuals have a right to pursue + legally enforceable rights against data collectors and processors who + fail to adhere to the law. This principle requires not only that + individuals have enforceable rights against data users, but also that + individuals have recourse to courts or government agencies to + investigate and/or prosecute non-compliance by data processors. +
+CAN SPAM Act
++ The CAN-SPAM Act is a law that sets the rules for commercial email, + establishes requirements for commercial messages, gives recipients the + right to have emails stopped from being sent to them, and spells out + tough penalties for violations. We collect your email address in order + to: To be in accordance with CANSPAM we agree to the following: If at + any time you would like to unsubscribe from receiving future emails, you + can email us at contact@groa.us and we will promptly remove you from ALL + correspondence. Contacting Us If there are any questions regarding this + privacy policy you may contact us at contact@groa.us. +
+
+ {children}
+ {onClose ? (
+
+
+ ) : null}
+
+ );
+});
+
+const useStyles = makeStyles((theme) => ({
+ nameModal: {
+ fontSize: "25px",
+ textAlign: "center",
+ },
+ cardContent: {
+ height: "100%",
+ },
+ movieImg: {
+ width: "100%",
+ height: "375px",
+ borderRadius: "11px",
+ objectFit: "contain",
+ },
+ name: {
+ fontSize: "15px",
+ textAlign: "center",
+ color: "#00B392",
+ paddingTop: "1%",
+ },
+ descriptionModal: {
+ color: "white",
+ fontSize: "15px",
+ },
+ span: {
+ fontWeight: "bold",
+ },
+ control: {
+ padding: theme.spacing(2),
+ },
+ cardGrid: {
+ paddingTop: theme.spacing(2),
+ paddingBottom: theme.spacing(2),
+ display: "flex",
+ flexDirection: "row",
+ },
+ card: {
+ display: "flex",
+ flexDirection: "column",
+ width: "100%",
+ padding: "1%",
+ },
+ cardActions: {
+ fontSize: "10px",
+ padding: 0,
+ },
+ stars: {
+ fontSize: "2.5vw",
+ alignContent: "center",
+ },
+ text: {
+ color: "white",
+ fontSize: "16px",
+ opacity: 0,
+ visibility: "hidden",
+ transition: "opacity .2s, visibility .2s",
+ "&:hover": {
+ opacity: 5,
+ },
+ },
+ movieImgModal: {
+ opacity: 1,
+ display: "block",
+ backfaceVisibility: "hidden",
+ borderRadius: "11px",
+ margin: "auto",
+ paddingBottom: "1%",
+ width: "40%",
+ },
+ watchList: {
+ justifyContent: "center",
+ display: "flex",
+ },
+ //modal
+ modal: {
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ overflow: "scroll",
+ },
+ paper: {
+ background: "rgb(23, 23, 23, .96)",
+ margin: "auto",
+ width: "55rem",
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(0, 6, 3),
+ color: "white",
+ overflowY: "scroll",
+ },
+ DeleteMoviefromWatch: {
+ backgroundColor: "white",
+ cursor: "pointer",
+ },
+ movieInfoModal: {
+ display: "flex",
+ },
+ movieContentDiv: {
+ margin: "auto",
+ },
+ yearGenreModal: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding:"2% 0"
+ },
+ year: {
+ fontSize: "18px",
+ },
+ genresModal: {
+ fontStyle: "italic",
+ display:'flex',
+ alignItems:'center',
+ },
+ rateGenreModal: {
+ display: 'flex',
+ },
+ imdbImg: {
+ height: '40%',
+ },
+ avgRatingModal: {
+ fontSize: "1rem",
+ paddingLeft: "3%",
+ display:'flex',
+ alignItems:'center',
+ },
+ actionButtons: {
+ display: "flex",
+ justifyContent: "center",
+ },
+ starRoot: {
+ display: "flex",
+ width: "50%",
+ margin: "auto",
+ justifyContent: "center",
+ },
+ starRootOnboarding: {
+ width: "100%",
+ },
+ watchStarsModal: {
+ display: "flex",
+ justifyContent: "center",
+ },
+ cardActionsModal: {
+ justifyContent: "center",
+ display: "flex",
+ },
+ starsModal: {
+ justifyContent: "center",
+ fontSize: "3vw",
+ },
+ actionBtn: {
+ padding: "1rem",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "space-evenly",
+ },
+ trailerModal: {
+ margin: "3% 0",
+ padding: "0 1.5rem",
+ },
+ ExpansionRoot: {
+ margin: "auto",
+ padding: "2% 25%",
+ },
+ btnsProviders: {
+ backgroundColor: "#212120",
+ color: "white",
+ },
+ expansionPanal: {
+ dislay: "flex",
+ justifyContent: "center",
+ margin: "auto",
+ textAlign: "center",
+ background: "rgb(23, 23, 23, .96)",
+ boxShadow: theme.shadows[5],
+ },
+ expansionPanalSummary: {
+ margin: "auto",
+ },
+ heading: {
+ margin: "auto",
+ },
+ serviceInfo: {
+ textAlign: "center",
+ },
+ Link: {
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "none",
+ },
+ },
+ serviceBtn: {
+ margin: "1%",
+ "&:hover": {
+ color: "#00B392",
+ },
+ },
+ [theme.breakpoints.down("xs")]: {
+ name: {
+ padding: "0",
+ },
+ movieImg: {
+ height: "270px",
+ width: "100%",
+ },
+ movieImgModal: {
+ width: "80%",
+ },
+ paper: {
+ width: "24rem",
+ padding: theme.spacing(0, 1, 3),
+ },
+ trailerModal: {
+ padding: "0",
+ height: "35vh",
+ },
+ movieInfoModal: {
+ flexDirection: "column",
+ },
+ starsModal: {
+ fontSize: "9vw",
+ },
+ },
+}));
+
+// more fields will be appearing according to the Figma file
+function MovieCard({
+ userid,
+ name,
+ year,
+ image,
+ movie_id,
+ ratingAction,
+ watchlist,
+ addToWatchlistAction,
+ rated,
+ ratings,
+ trailer,
+ description,
+ genres,
+ avg_rating,
+ page,
+ handleClickStar,
+ numRatings,
+ setNumRatings,
+ notWatchListAction,
+ notwatchlist,
+ removeWatchListAction,
+ removeRatingAction,
+}) {
+ //OKTA AUTH
+ const { authState, authService } = useOktaAuth();
+ const { accessToken } = authState;
+ const [serviceProvider, setServiceProvider] = useState([]);
+ const [yourRating, setYourRating] = useState(false);
+
+ /* Used for the star rating */
+ const [rating, setRating] = useState(0);
+ /* Used for dynamically rendering the "Add to watchlist" button and if it's disabled */
+ const [added, setAdded] = useState(false);
+ //to remove movie user not interested in
+ const [removed, setRemoved] = useState(false);
+ //to delete from watchist in watchlist page
+ const [deleted, setDeleted] = useState(false);
+ /* This checks if the movie is in the watchlist */
+ const inWatchlist = watchlist.some(
+ (movie) => movie.name === name && movie.year === year
+ );
+ const notInWatchlist = notwatchlist.some(
+ (movie) => movie.name === name && movie.year === year
+ );
+ const removeInWatchlist = watchlist.some(
+ (movie) => movie.name === name && movie.year === year
+ );
+ const inRatings = ratings.some(
+ (movie) => movie.name === name && movie.year === year
+ );
+ //material-ui
+ const classes = useStyles();
+ const [openModal, setOpenModal] = React.useState(false);
+ //for button group
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpenModal(true);
+ };
+
+ const handleClose = () => {
+ setOpenModal(false);
+ };
+ /* Used to format the movie object for action calls */
+ let movie = {
+ movie_id: movie_id,
+ name: name,
+ year: year,
+ description: description,
+ };
+ const handleChange = (event, newValue) => {
+ /* Sets rating for the star value */
+ setRating(newValue);
+ /* Sets rating for the POST request */
+ const newRating = {
+ movie_id: movie.movie_id,
+ rating: newValue,
+ };
+ ratingAction(userid, newRating, accessToken);
+ setYourRating(true);
+ };
+ const handleClick = () => {
+ /* Adds movie to the POST request */
+ addToWatchlistAction(userid, movie, accessToken);
+ setAdded(true);
+ };
+ const deleteRating = (e) => {
+ e.preventDefault();
+ const RatingDeletion = {
+ user_id: userid,
+ movie_id: movie_id,
+ };
+ removeRatingAction(userid, RatingDeletion, accessToken);
+ };
+ const handleClickRemove = () => {
+ const notWatch = { movie_id: movie.movie_id, user_id: userid };
+ notWatchListAction(userid, notWatch, accessToken);
+ setRemoved(true);
+ };
+ const handleClickDeleteFromWatchlist = () => {
+ console.log("thisi sin move", movie_id);
+ removeWatchListAction(userid, movie_id, accessToken);
+ setDeleted(true);
+ handleClose();
+ };
+ const handleClickProviders = () => {
+ axiosWithAuth(accessToken)
+ .get(`${userid}/service-providers/${movie.movie_id}`)
+ .then((res) => {
+ setServiceProvider(res.data);
+ console.log("data", res.data);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ setOpen((prevOpen) => !prevOpen);
+ };
+ const multiFunctions = () => {
+ handleClose();
+ handleClickStar();
+ onboardingRating();
+ };
+ const onboardingRating = () => {
+ setNumRatings({ ...numRatings, num: numRatings.num + 1 });
+ console.log("number of ratings is " + numRatings.num);
+ console.log("openalert");
+ };
+ return (
+
+
+
+
+
+
+ );
+}
+const mapStateToProps = (state) => {
+ return {
+ userid: state.login.userid,
+ ratingError: state.rating.error,
+ watchlist: state.watchlist.movies,
+ watchlistError: state.watchlist.error,
+ ratings: state.rating.movies,
+ notwatchlist: state.notwatchlist.movies,
+ };
+};
+export default connect(mapStateToProps, {
+ ratingAction,
+ addToWatchlistAction,
+ notWatchListAction,
+ removeWatchListAction,
+ removeRatingAction,
+})(MovieCard);
diff --git a/src/components/movies/MovieCard.test.js b/src/components/movies/MovieCard.test.js
new file mode 100644
index 0000000..f286a38
--- /dev/null
+++ b/src/components/movies/MovieCard.test.js
@@ -0,0 +1,44 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { getAllByTestId, getByTestId, getAllByText } from "../../utils/test-utils.js";
+import { BrowserRouter as Router } from "react-router-dom";
+// redux testing
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+const mockStore = configureStore([thunk]);
+
+import MovieCard from "./MovieCard.js";
+
+
+let store = mockStore({
+ login: {
+ userid: 4
+ },
+ rating: {
+ error: ""
+ },
+ watchlist: {
+ movies: []
+ }
+});
+
+it("renders movieCard with array has length", () => {
+
+ const fakemovies =
+ {name:'a', Year: '1000'}
+
+
+
+ const { container } = render(
+
+ 
+
+
+
+ <>
+
+
+
+
+
+
+ {page !== "Onboarding" ? (
+
+ ) : (
+ ""
+ )}
+
+
+
+
+
+
+ ) : (
+ ""
+ )}
+ {page === "Onboarding" ? (
+
+
+ ) : (
+
+
+ )}
+ {page !== "Onboarding" ? (
+
+ {name}
+
+
+ {year}
+{genres}
+{description}
+ {page === "Recommendations" ? ( +
+ 
+
+ ) : (
+ ""
+ )}
+
+ {avg_rating * 2 }/10
+
+ {page !== "Onboarding" && page !== "watchlist" ? (
+
+
+
+ ) : (
+ ""
+ )}
+ {page === "Recommendations" ? (
+
+
+
+ ) : (
+ ""
+ )}
+ {page === "Ratings" ? (
+
+
+
+ ) : (
+ ""
+ )}
+
+ {page === "watchlist" ? (
+
+
+
+ Where to Watch
+
+
+
+
+ ) : (
+ ""
+ )}
+
+ {serviceProvider.map((serviceProviders) => {
+ return (
+
+
+
+
+
+
+ );
+ })}
+