Skip to content

Commit 49da8b6

Browse files
author
Joseph Akintunde
committed
battling sort
1 parent c4a0d62 commit 49da8b6

18 files changed

+275
-113
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ dist-ssr
2323
*.sln
2424
*.sw?
2525

26-
.env
26+
.env

‎package-lock.json‎

Lines changed: 65 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
"dependencies": {
1313
"prop-types": "^15.8.1",
1414
"react": "^18.2.0",
15-
"react-dom": "^18.2.0"
15+
"react-dom": "^18.2.0",
16+
"react-icons": "^5.5.0",
17+
"react-router-dom": "^7.6.2"
1618
},
1719
"devDependencies": {
1820
"@types/react": "^18.2.66",

‎src/App.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,27 @@
1111
color: white;
1212
padding: 20px;
1313
}
14+
.Nav{
15+
position: fixed;
16+
height: 100%;
17+
z-index: 1000;
18+
width: 200px;
19+
background-color: aquamarine;
20+
padding: 20px;
21+
display: flex;
22+
flex-direction: column;
23+
gap: 10px;
24+
}
25+
.sidebarContainer{
26+
list-style: none;
27+
text-decoration: none;
28+
padding: 20px;
1429

30+
}
31+
.sidebarContainer li{
32+
text-decoration: none;
33+
font-size: 30px;
34+
}
1535
@media (max-width: 600px) {
1636
.movie-card {
1737
width: 100%;

‎src/App.jsx‎

Lines changed: 113 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,129 @@
1-
import { useEffect, useState } from 'react'
2-
import './App.css'
3-
import MovieList from './MovieList'
4-
import SearchComponents from './SearchComponents';
5-
import "./Header.css"
6-
import Sort from "./Sort"
7-
import { MovieModal } from './MovieModal';
8-
import "./footer.css"
1+
import { useEffect, useState } from "react";
2+
import {
3+
BrowserRouter as Router,
4+
Routes,
5+
Route,
6+
Link,
7+
useNavigate,
8+
Outlet,
9+
} from "react-router-dom";
10+
import "./App.css";
11+
import MovieList from "./MovieList";
12+
import SearchComponents from "./SearchComponents";
13+
import "./Header.css";
14+
import Sort from "./Sort";
15+
import { MovieModal } from "./MovieModal";
16+
import "./footer.css";
17+
//import { Sidebar } from './sidebar';
18+
919
// let pageNumber = 1
1020
//const url = `https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNumber}`;
1121
const options = {
12-
method: 'GET',
13-
headers: {
14-
accept: 'application/json',
15-
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2NGM4OGY3ZWI4ZDU2YThkNWYzYjY3MzI4ZjU2YTM2ZSIsIm5iZiI6MTc0OTUzMzI3OC4yMjcsInN1YiI6IjY4NDdjMjVlZWM3MzI5M2NkN2JiMzZhYiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Uhoqn3XL1sDXT-jJhsIbVMI2gzkhF5hzYOgdF9M8zA0'
16-
}
17-
}
18-
function App(){
19-
const [openModal, setOpenModal] = useState(false)
22+
method: "GET",
23+
headers: {
24+
accept: "application/json",
25+
Authorization:
26+
"Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2NGM4OGY3ZWI4ZDU2YThkNWYzYjY3MzI4ZjU2YTM2ZSIsIm5iZiI6MTc0OTUzMzI3OC4yMjcsInN1YiI6IjY4NDdjMjVlZWM3MzI5M2NkN2JiMzZhYiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Uhoqn3XL1sDXT-jJhsIbVMI2gzkhF5hzYOgdF9M8zA0",
27+
},
28+
};
29+
function App() {
30+
const [openModal, setOpenModal] = useState(false);
2031
//const [selectedMovie, setSelectedMovie] = useState(null)
21-
const[movie, setMovie] = useState("Mission Impossible")
22-
const[results, setResults] = useState({})
23-
const[pageNumber, setPageNumber] = useState(1)
24-
function toNextPage(){
25-
setPageNumber(pageNumber+1)
32+
const [movie, setMovie] = useState("Mission Impossible");
33+
const [results, setResults] = useState([]);
34+
const [pageNumber, setPageNumber] = useState(1);
35+
function toNextPage() {
36+
setPageNumber(pageNumber + 1);
2637
}
27-
28-
useEffect(() => {
29-
async function fetchMovies(movie){
30-
console.log("any")
31-
try{
32-
const apiKey = import.meta.env.VITE_APP_API_KEY
33-
const response = await fetch(`https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNumber}`,options)
34-
if(!response.ok){
35-
throw new Error("Can't load movies")
36-
}
37-
const data = await response.json()
38-
console.log(data)
39-
setResults(data)
40-
} catch(error){
41-
console.log(error)
38+
async function fetchMovies() {
39+
console.log("any");
40+
try {
41+
const apiKey = import.meta.env.VITE_APP_API_KEY;
42+
const response = await fetch(
43+
`https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=${pageNumber}`,
44+
options
45+
);
46+
if (!response.ok) {
47+
throw new Error("Can't load movies");
4248
}
43-
};
44-
if(movie){
45-
fetchMovies(movie)
46-
}
47-
},[pageNumber,movie])
49+
const data = await response.json();
50+
console.log(data);
51+
setResults((prev) => [...prev,...data.results])
52+
// setResults(data.results);
53+
console.log(data.results);
54+
} catch (error) {
55+
console.log(error);
56+
}
57+
}
4858
useEffect(() => {
49-
console.log(movie)
50-
},[movie])
51-
//function movieChange(newMovie){
52-
// setMovie(newMovie)
53-
// }
54-
// function resultChange(newResult){
55-
// setResults(newResult)
56-
// }
57-
console.log(movie)
59+
console.log("mess")
60+
fetchMovies();
61+
}, [pageNumber]);
62+
63+
// useEffect(() => {
64+
// console.log(movie);
65+
// }, [movie]);
66+
// console.log(movie);
5867
return (
5968
<div className="App">
6069
<header className="Header">
61-
{/* <a href="App.jsx">NOW PLAYING</a>
70+
{/* <a href="App.jsx">NOW PLAYING</a>
6271
<a href="#">FAVOURITES</a>
6372
<a href="#">WATCHED</a> */}
64-
<h1>🎥 Flixster 🎬</h1>
65-
<SearchComponents setResults={ setResults }/>
66-
<Sort setResults={setResults} movies={results}/>
73+
<h1>🎥 Flixster 🎬</h1>
74+
<SearchComponents setResults={setResults}/>
75+
{<Sort setResults={setResults} movies={results}/>}
6776
</header>
68-
<MovieList onClick = {(movie) => {setMovie(movie); setOpenModal(true)}} results={results} movie = {movie}/>
69-
{openModal && <MovieModal closeModal={setOpenModal} keyId={movie.id} image={movie.image} overview={movie.overview} release_date={movie.release_date} title={movie.title}/>}
70-
<button className = "loadBtn" onClick={toNextPage}>LOAD MORE</button>
71-
<footer className='Footer'>
72-
<p>&copy; the joseph akintunde company llc 2030.
73-
All Rights Reserved
74-
</p>
75-
<a className = "tospp" href="#">Terms of Service and Privacy Policy</a>
76-
<div className='socials'>
77-
<a href="https://www.instagram.com/jausephh/?hl=en">
78-
<img width = "50px" src="src/img/instagram-logo-black-transparent.png" alt="" />
79-
</a>
80-
<a href="https://www.linkedin.com/in/joseph-akintunde-4a1492288/">
81-
<img width = "40px" src="src/img/linkedin-icon-1-logo-png-transparent.png" alt="" />
82-
</a>
83-
<a href="https://github.com/joseph-akintunde/flixster-starter">
84-
<img className = 'git' width = "40px" src="src/img/imagesgit.png"/>
85-
</a>
86-
</div>
87-
</footer>
77+
<MovieList
78+
onClick={(movie) => {
79+
setMovie(movie);
80+
setOpenModal(true);
81+
}}
82+
results={results}
83+
/>
84+
{openModal && (
85+
<MovieModal
86+
closeModal={setOpenModal}
87+
keyId={movie.id}
88+
image={movie.image}
89+
overview={movie.overview}
90+
release_date={movie.release_date}
91+
title={movie.title}
92+
/>
93+
)}
94+
<button className="loadBtn" onClick={toNextPage}>
95+
LOAD MORE
96+
</button>
97+
<footer className="Footer">
98+
<p>
99+
&copy; the joseph akintunde entertainment company llc 2030. All Rights
100+
Reserved
101+
</p>
102+
<a className="tospp" href="#">
103+
Terms of Service and Privacy Policy
104+
</a>
105+
<div className="socials">
106+
<a href="https://www.instagram.com/jausephh/?hl=en">
107+
<img
108+
width="50px"
109+
src="src/img/instagram-logo-black-transparent.png"
110+
alt=""
111+
/>
112+
</a>
113+
<a href="https://www.linkedin.com/in/joseph-akintunde-4a1492288/">
114+
<img
115+
width="40px"
116+
src="src/img/linkedin-icon-1-logo-png-transparent.png"
117+
alt=""
118+
/>
119+
</a>
120+
<a href="https://github.com/joseph-akintunde/flixster-starter">
121+
<img className="git" width="40px" src="src/img/imagesgit.png" />
122+
</a>
123+
</div>
124+
</footer>
88125
</div>
89-
)
126+
);
90127
}
91128

92-
export default App
129+
export default App;

‎src/Header.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
.Header{
2-
background-color: grey;
2+
background-color: lightgrey;
33
height: 10em;
44
display: flex;
55
flex-direction: column;
66
justify-content: space-around;
77
align-items: center;
8+
color: #282c34;
89
}
910
.Header h1{
1011
margin-top: 0;

‎src/MovieCard.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
flex-direction: column;
88
justify-content: space-between;
99
overflow: hidden;
10-
background-color: grey;
10+
background-color: lightgrey;
1111
}
1212
/* .title{
1313
white-space: nowrap;
@@ -18,9 +18,10 @@
1818
.CardContent:hover{
1919
transform: scale(1.1);
2020
transition: .75s ease-in-out;
21+
box-shadow: 10px 10px 10px black;
2122
}
2223
.titleRating{
23-
background-color: grey;
24+
background-color: lightgrey;
2425
display: flex;
2526
flex-direction: column;
2627
justify-content: space-between;

0 commit comments

Comments
 (0)