From 7649d38a05acc94615a478585be00027a95f5a50 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Thu, 7 Oct 2021 10:51:00 -0400 Subject: [PATCH] updated folder structure --- .eslintignore | 3 - .eslintrc.json | 25 ------ .prettierrc | 4 +- src/AppRouter.js | 20 +++++ .../DisplayMovieRow.js | 0 src/{containers => components}/MainContent.js | 89 +++++++++---------- src/{containers => components}/Navbar.js | 0 src/containers/App.js | 5 -- src/containers/AppRouter.js | 22 ----- src/index.js | 7 +- src/{containers => pages}/Home.js | 17 ++-- src/{containers => pages}/NotFound.js | 0 src/{containers => pages}/Search.js | 0 .../sass/components/_movieShowcase.scss | 4 - 14 files changed, 79 insertions(+), 117 deletions(-) delete mode 100644 .eslintignore delete mode 100644 .eslintrc.json create mode 100644 src/AppRouter.js rename src/{containers => components}/DisplayMovieRow.js (100%) rename src/{containers => components}/MainContent.js (69%) rename src/{containers => components}/Navbar.js (100%) delete mode 100644 src/containers/App.js delete mode 100644 src/containers/AppRouter.js rename src/{containers => pages}/Home.js (82%) rename src/{containers => pages}/NotFound.js (100%) rename src/{containers => pages}/Search.js (100%) diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index e391487..0000000 --- a/.eslintignore +++ /dev/null @@ -1,3 +0,0 @@ -client/dist/ -node_modules/ -webpack.config.js diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index d3548c9..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "env": { - "browser": true, - "commonjs": true, - "es6": true, - "node": true - }, - "plugins": [ - "react", - "react-hooks" - ], - "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"], - "parserOptions": { - "sourceType": "module", - "ecmaVersion": 2018 - }, - "settings": { - "react": { - "version": "detect" - } - }, - "rules": { - "linebreak-style": ["error", "unix"] - } -} \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 92cde39..ab83765 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,5 @@ { + "jsxSingleQuote": true, + "semi": false, "singleQuote": true -} \ No newline at end of file +} diff --git a/src/AppRouter.js b/src/AppRouter.js new file mode 100644 index 0000000..dea4dae --- /dev/null +++ b/src/AppRouter.js @@ -0,0 +1,20 @@ +import React from 'react' +import { BrowserRouter, Route, Switch } from 'react-router-dom' + +import Home from './pages/Home' +import NotFound from './pages/NotFound' +import Search from './pages/Search' +import Navbar from './components/Navbar' + +const AppRouter = () => ( + + + + + + + + +) + +export default AppRouter diff --git a/src/containers/DisplayMovieRow.js b/src/components/DisplayMovieRow.js similarity index 100% rename from src/containers/DisplayMovieRow.js rename to src/components/DisplayMovieRow.js diff --git a/src/containers/MainContent.js b/src/components/MainContent.js similarity index 69% rename from src/containers/MainContent.js rename to src/components/MainContent.js index 75ab2a9..cfbb27c 100644 --- a/src/containers/MainContent.js +++ b/src/components/MainContent.js @@ -3,8 +3,8 @@ import axios from 'axios'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import Header from '../components/Header'; -import Footer from '../components/Footer'; +import Header from './Header'; +import Footer from './Footer'; import { fetchNetflixOriginals, fetchTrending, @@ -12,13 +12,11 @@ import { fetchActionMovies, fetchComedyMovies, fetchDocumentaries, - fetchHorrorMovies + fetchHorrorMovies, } from '../store/actions/index'; import DisplayMovieRow from './DisplayMovieRow'; - class MainContent extends Component { - state = { /** Will hold our chosen movie to display on the header */ selectedMovie: {}, @@ -73,29 +71,29 @@ class MainContent extends Component { const newMoviesArray = this.state.movieInfo.map((movie) => { if (movie.title === 'Netflix Originals') { - movie.movies.push(...this.props.netflixOriginals.data) + movie.movies.push(...this.props.netflixOriginals.data); } if (movie.title === 'Trending Now') { - movie.movies.push(...this.props.trending.data) + movie.movies.push(...this.props.trending.data); } if (movie.title === 'Top Rated') { - movie.movies.push(...this.props.topRated.data) + movie.movies.push(...this.props.topRated.data); } if (movie.title === 'Action Movies') { - movie.movies.push(...this.props.actionMovies.data) + movie.movies.push(...this.props.actionMovies.data); } if (movie.title === 'Comedy Movies') { - movie.movies.push(...this.props.comedyMovies.data) + movie.movies.push(...this.props.comedyMovies.data); } if (movie.title === 'Documentaries') { - movie.movies.push(...this.props.documentaries.data) + movie.movies.push(...this.props.documentaries.data); } if (movie.title === 'Horror Movies') { - movie.movies.push(...this.props.horrorMovies.data) + movie.movies.push(...this.props.horrorMovies.data); } - return movie - }) - await this.setState({ movieInfo: newMoviesArray }) + return movie; + }); + await this.setState({ movieInfo: newMoviesArray }); }; getMovie = () => { @@ -105,11 +103,11 @@ class MainContent extends Component { const url = `https://api.themoviedb.org/3/tv/${movieId}?api_key=${process.env.API_KEY}`; axios .get(url) - .then(res => { + .then((res) => { const movieData = res.data; this.setState({ selectedMovie: movieData }); }) - .catch(error => { + .catch((error) => { console.log(error); }); }; @@ -119,20 +117,19 @@ class MainContent extends Component {
- { - this.state.movieInfo.map((info) => { - if (info.movies.length > 0) { - return ( - ) - } - }) - } + {this.state.movieInfo.map((info) => { + if (info.movies.length > 0) { + return ( + + ); + } + })}
@@ -148,23 +145,23 @@ const mapStateToProps = (state) => { actionMovies: state.action, comedyMovies: state.comedy, documentaries: state.documentary, - horrorMovies: state.horror + horrorMovies: state.horror, }; }; const mapDispatchToProps = (dispatch) => { - return bindActionCreators({ - fetchNetflixOriginals, - fetchTrending, - fetchTopRated, - fetchActionMovies, - fetchComedyMovies, - fetchDocumentaries, - fetchHorrorMovies - }, dispatch); -} + return bindActionCreators( + { + fetchNetflixOriginals, + fetchTrending, + fetchTopRated, + fetchActionMovies, + fetchComedyMovies, + fetchDocumentaries, + fetchHorrorMovies, + }, + dispatch + ); +}; -export default connect( - mapStateToProps, - mapDispatchToProps -)(MainContent); \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(MainContent); diff --git a/src/containers/Navbar.js b/src/components/Navbar.js similarity index 100% rename from src/containers/Navbar.js rename to src/components/Navbar.js diff --git a/src/containers/App.js b/src/containers/App.js deleted file mode 100644 index a3d275a..0000000 --- a/src/containers/App.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import AppRouter from './AppRouter'; - -const App = () => ; -export default App; diff --git a/src/containers/AppRouter.js b/src/containers/AppRouter.js deleted file mode 100644 index 0c37b94..0000000 --- a/src/containers/AppRouter.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; -import { BrowserRouter, Route, Switch } from 'react-router-dom'; - -import Home from './Home'; -import NotFound from './NotFound'; -import Search from './Search'; -import Navbar from './Navbar'; - -const AppRouter = () => ( - - <> - - - - - - - - -); - -export default AppRouter; diff --git a/src/index.js b/src/index.js index 020e3ab..07d5f11 100644 --- a/src/index.js +++ b/src/index.js @@ -2,11 +2,12 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; -import reducers from './store/reducers'; import promise from 'redux-promise'; import '@babel/polyfill'; -import App from './containers/App'; +import reducers from './store/reducers'; +import AppRouter from './AppRouter'; + // Import Swiper styles import 'swiper/css'; import 'swiper/css/navigation'; @@ -18,7 +19,7 @@ const createStoreWithMiddleware = applyMiddleware(promise)(createStore); const app = ( - + ); diff --git a/src/containers/Home.js b/src/pages/Home.js similarity index 82% rename from src/containers/Home.js rename to src/pages/Home.js index 152b20a..9de16bf 100644 --- a/src/containers/Home.js +++ b/src/pages/Home.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; -import MainContent from './MainContent'; +import MainContent from '../components/MainContent'; import Modal from '../components/UI/Modal'; import MovieDetails from '../components/Movie/MovieDetails'; @@ -10,18 +10,17 @@ class Home extends Component { toggleModal: false, /** Holds the movie information for a single movie. */ movieOverview: {}, - } - + }; /* Get the appropriate details for a specific movie that was clicked */ selectMovieHandler = async (movie) => { this.setState({ toggleModal: true }); await this.setState({ movieOverview: movie }); - } + }; closeModal = () => { this.setState({ toggleModal: false }); - } + }; render() { return ( @@ -29,9 +28,11 @@ class Home extends Component {
- + movie={this.state.movieOverview} + > @@ -39,4 +40,4 @@ class Home extends Component { } } -export default Home; \ No newline at end of file +export default Home; diff --git a/src/containers/NotFound.js b/src/pages/NotFound.js similarity index 100% rename from src/containers/NotFound.js rename to src/pages/NotFound.js diff --git a/src/containers/Search.js b/src/pages/Search.js similarity index 100% rename from src/containers/Search.js rename to src/pages/Search.js diff --git a/src/static/sass/components/_movieShowcase.scss b/src/static/sass/components/_movieShowcase.scss index 6f262fc..b7ea288 100644 --- a/src/static/sass/components/_movieShowcase.scss +++ b/src/static/sass/components/_movieShowcase.scss @@ -3,10 +3,6 @@ top: 0 !important; height: 2rem !important; text-align: right !important; - // padding-right: 24rem !important; - // margin-right: 12rem !important; - // right: 3rem; - // position: relative; } .swiper-pagination-bullet {