├── src
    ├── App.css
    ├── setupTests.js
    ├── index.js
    ├── routes
    │   ├── About.js
    │   ├── Detail.js
    │   ├── About.css
    │   ├── Home.css
    │   └── Home.js
    ├── components
    │   ├── Navigation.js
    │   ├── Navigation.css
    │   ├── Movie.js
    │   └── Movie.css
    ├── reportWebVitals.js
    └── App.js
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── .eslintcache
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 |     background-color:#2f2f2f;
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/easthobb/movie_app_2020/master/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/easthobb/movie_app_2020/master/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/easthobb/movie_app_2020/master/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # movie app 2020
2 |  
3 | 
4 | Deploy LINK : https://easthobb.github.io/movie_app_2020/
5 | 
6 | Study for REACT Fundamental
7 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import Potato from "./"
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/src/routes/About.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./About.css";
 3 | 
 4 | function About(props){
 5 |     console.log(props);
 6 | 
 7 |     return (<div className="about__container">
 8 |          <span>About this page </span> 
 9 |          </div>);
10 | }
11 | 
12 | export default About;
13 | 


--------------------------------------------------------------------------------
/src/components/Navigation.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | import "./Navigation.css";
 4 | 
 5 | function Navigation(){
 6 |     return (
 7 |     <div className = "nav">
 8 |         <Link to ="/"> Home</Link>
 9 |         <Link to ="/about">About</Link>
10 |     </div>);
11 | 
12 | }
13 | 
14 | export default Navigation;


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/routes/Detail.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | class Detail extends React.Component{
 4 |     componentDidMount(){
 5 |         const {location ,history} = this.props;
 6 |         if(location.state === undefined){
 7 |             history.push("/");
 8 |         }
 9 |     }
10 |     render() {
11 |         const{location} = this.props;
12 |         if(location.state){
13 |             return <span>{location.state.title}</span>
14 |         }
15 |         else{
16 |             return null;
17 |         }
18 |         }
19 | }
20 | 
21 | export default Detail;


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import About from "./routes/About";
 3 | import Home from "./routes/Home";
 4 | import Detail from "./routes/Detail";
 5 | import { HashRouter,Route } from "react-router-dom";
 6 | import Navigation from "./components/Navigation";
 7 | import "./App.css"
 8 | 
 9 | function App() {
10 |   return <HashRouter>
11 |     <Navigation />
12 |     <Route path="/" exact={true} component={Home} />
13 |     <Route path="/about" component={About} />
14 |     <Route path="/movie-detail" component={Detail} />
15 |   </HashRouter>
16 | }
17 | 
18 | export default App;


--------------------------------------------------------------------------------
/src/routes/About.css:
--------------------------------------------------------------------------------
 1 | .about__container {
 2 |     box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
 3 |       0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
 4 |     padding: 20px;
 5 |     border-radius: 5px;
 6 |     background-color: white;
 7 |     margin: 0 auto;
 8 |     margin-top: 100px;
 9 |     width: 100%;
10 |     max-width: 400px;
11 |     font-weight: 300;
12 |   }
13 |   
14 |   .about__container span:first-child {
15 |     font-size: 20px;
16 |   }
17 |   
18 |   .about__container span:last-child {
19 |     display: block;
20 |     margin-top: 10px;
21 |   }


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/routes/Home.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     height: 100%;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |   }
 6 |   
 7 |   .loader {
 8 |     width: 100%;
 9 |     height: 100vh;
10 |     display: flex;
11 |     justify-content: center;
12 |     align-items: center;
13 |     font-weight: 300;
14 |   }
15 |   
16 |   .movies {
17 |     display: grid;
18 |     grid-template-columns: repeat(2, minmax(400px, 1fr));
19 |     grid-gap: 100px;
20 |     padding: 50px;
21 |     width: 80%;
22 |     padding-top: 70px;
23 |   }
24 |   
25 |   @media screen and (max-width: 1090px) {
26 |     .movies {
27 |       grid-template-columns: 1fr;
28 |       width: 100%;
29 |     }
30 |   }


--------------------------------------------------------------------------------
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"/Users/hobbes/movie_app_2020/src/index.js":"1","/Users/hobbes/movie_app_2020/src/reportWebVitals.js":"2","/Users/hobbes/movie_app_2020/src/App.js":"3"},{"size":500,"mtime":1608623215621,"results":"4","hashOfConfig":"5"},{"size":362,"mtime":1608623215622,"results":"6","hashOfConfig":"5"},{"size":528,"mtime":1608623215619,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1sggb8t",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/hobbes/movie_app_2020/src/index.js",[],"/Users/hobbes/movie_app_2020/src/reportWebVitals.js",[],"/Users/hobbes/movie_app_2020/src/App.js",[]]


--------------------------------------------------------------------------------
/src/components/Navigation.css:
--------------------------------------------------------------------------------
 1 | .nav {
 2 |     z-index: 1;
 3 |     position: fixed;
 4 |     top: 50px;
 5 |     left: 10px;
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     background-color: white;
 9 |     padding: 10px 20px;
10 |     box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
11 |       0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
12 |     border-radius: 5px;
13 |   }
14 |   
15 |   @media screen and (max-width: 1090px) {
16 |     .nav {
17 |       left: initial;
18 |       top: initial;
19 |       bottom: 0px;
20 |       width: 100%;
21 |     }
22 |   }
23 |   
24 |   .nav a {
25 |     text-decoration: none;
26 |     color: #0008fc;
27 |     text-transform: uppercase;
28 |     font-size: 12px;
29 |     text-align: center;
30 |     font-weight: 600;
31 |   }
32 |   
33 |   .nav a:not(:last-child) {
34 |     margin-bottom: 20px;
35 |   }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "movie_app_2020",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.2.2",
 8 |     "@testing-library/user-event": "^12.6.0",
 9 |     "axios": "^0.21.1",
10 |     "gh-pages": "^3.1.0",
11 |     "prop-types": "^15.7.2",
12 |     "react": "^17.0.1",
13 |     "react-dom": "^17.0.1",
14 |     "react-router-dom": "^5.2.0",
15 |     "react-scripts": "4.0.1",
16 |     "web-vitals": "^0.2.4"
17 |   },
18 |   "scripts": {
19 |     "start": "react-scripts start",
20 |     "build": "react-scripts build",
21 |     "deploy": "gh-pages -d build",
22 |     "predeploy": "npm run build"
23 |   },
24 |   "eslintConfig": {
25 |     "extends": [
26 |       "react-app",
27 |       "react-app/jest"
28 |     ]
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   },
42 |   "homepage": "https://easthobb.github.io/movie_app_2020/"
43 | }
44 | 


--------------------------------------------------------------------------------
/src/routes/Home.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | import axios from "axios";
 4 | import Movie from "../components/Movie";
 5 | import "./Home.css";
 6 | 
 7 | class App extends React.Component{
 8 |   
 9 |   state = {
10 |     isLoading : true,
11 |     movies: [],
12 |   };
13 |   getMovies = async() =>{
14 |     const {data:{data:{movies}}} = await axios.get('https://yts-proxy.now.sh/list_movies.json?sort_by=rating');
15 |     this.setState({movies,isLoading:false});
16 |   }
17 |   componentDidMount(){
18 |      this.getMovies();
19 |       
20 |   }
21 |   render(){
22 |     const {isLoading,movies} = this.state;
23 |     return (
24 |     <section className="container">
25 |       {isLoading ? (
26 |         <div className = "loader">
27 |           <span className ="loader__text">Loading...</span>
28 |         </div>
29 |       ):( 
30 |         <div className ="movies">
31 |         { movies.map(movie => (
32 |           <Movie key={movie.id} id={movie.id} 
33 |           year={movie.year}
34 |           title={movie.title} 
35 |           summary={movie.summary} 
36 |           poster={movie.medium_cover_image} 
37 |           genres={movie.genres}/>
38 |         ))}
39 |         </div>
40 |       )}
41 |     </section>
42 |     )
43 |   }
44 | }
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/src/components/Movie.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Link} from "react-router-dom"
 3 | import PropTypes from "prop-types";
 4 | import "./Movie.css"
 5 | // 
 6 | function Movie({year,title,summary,poster,genres}){
 7 |     return (
 8 |     <Link to={{
 9 |         pathname :"/movie-detail",
10 |         state : {
11 |             year,
12 |             title,
13 |             summary,
14 |             poster,
15 |             genres
16 |         }
17 |     }}>
18 |     <div className="movie">
19 |         <img src={poster} alt={title}/>
20 |         
21 |     <div className="movie__date">
22 |         <h3 className="movie__title" >{title} </h3>
23 |         <h5 className="movie__year">{year}</h5>
24 |         <ul className = "genres">
25 |             {genres.map((genre,index) =>( 
26 |                 <li key={index} className="geres__genre">{genre}</li>
27 |                 ))}
28 |         </ul>
29 |         <p className="movie__summary">{summary.slice(0,180)}...</p>
30 |          
31 |     </div>
32 |     </div>
33 |     </Link>
34 |     );
35 | }
36 | 
37 | Movie.propTypes ={
38 |     id: PropTypes.number.isRequired,
39 |     year : PropTypes.number.isRequired,
40 |     title : PropTypes.string.isRequired,
41 |     summary : PropTypes.string.isRequired,
42 |     poster : PropTypes.string.isRequired,
43 |     genres : PropTypes.arrayOf(PropTypes.string).isRequired,
44 | };
45 | 
46 | export default Movie;


--------------------------------------------------------------------------------
/src/components/Movie.css:
--------------------------------------------------------------------------------
 1 | .movies .movie {
 2 |     background-color: white;
 3 |     margin-bottom: 70px;
 4 |     font-weight: 300;
 5 |     padding: 20px;
 6 |     border-radius: 5px;
 7 |     color: #adaeb9;
 8 |     box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25),
 9 |       0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
10 |   }
11 |   
12 |   .movies .movie a {
13 |     display: grid;
14 |     grid-template-columns: minmax(150px, 1fr) 2fr;
15 |     grid-gap: 20px;
16 |     text-decoration: none;
17 |     color: inherit;
18 |   }
19 |   
20 |   .movie img {
21 |     position: relative;
22 |     top: -50px;
23 |     max-width: 150px;
24 |     width: 100%;
25 |     margin-right: 30px;
26 |     box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
27 |       0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
28 |   }
29 |   
30 |   .movie .movie__title,
31 |   .movie .movie__year {
32 |     margin: 0;
33 |     font-weight: 300;
34 |   }
35 |   
36 |   .movie .movie__title {
37 |     margin-bottom: 5px;
38 |     font-size: 24px;
39 |     color: #2c2c2c;
40 |   }
41 |   
42 |   .movie .movie__genres {
43 |     list-style: none;
44 |     padding: 0;
45 |     margin: 0;
46 |     display: flex;
47 |     flex-wrap: wrap;
48 |     margin: 5px 0px;
49 |   }
50 |   
51 |   .movie__genres li,
52 |   .movie .movie__year {
53 |     margin-right: 10px;
54 |     font-size: 14px;
55 |   }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Movie App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------