Skip to content

Commit c2a0d45

Browse files
khushi-purwarkhushi-purwar
committed
added components
1 parent 78ace4e commit c2a0d45

File tree

7 files changed

+393
-3
lines changed

7 files changed

+393
-3
lines changed

‎react-movie-app/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
2728
<title>React App</title>
2829
</head>
2930
<body>

‎react-movie-app/public/movie-icon.svg

Lines changed: 63 additions & 0 deletions
Loading

‎react-movie-app/public/search-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎react-movie-app/src/App.js

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,142 @@
1+
import React, {useState} from 'react';
2+
import styled from 'styled-components';
3+
import Axios from 'axios';
4+
5+
// components
6+
import MovieComponent from './Components/MovieComponent';
7+
import MovieInfoComponent from './Components/MovieInfoComponent';
8+
9+
10+
export const API_KEY = "50659391"
11+
12+
const Container = styled.div`
13+
display: flex;
14+
flex-direction:column;
15+
`
16+
const Header = styled.div`
17+
background-color: black;
18+
color: white;
19+
display: flex;
20+
justify-content: space-between;
21+
flex-direction: row;
22+
align-items: center;
23+
padding: 5px;
24+
font-size: 25px;
25+
font-weight: bold;
26+
box-shadow: 0 3px 6px 0 #555;
27+
`;
28+
29+
const MovieImage = styled.img`
30+
width: 48px;
31+
height: 48px;
32+
margin: 15px;
33+
`;
34+
35+
const AppName = styled.div`
36+
display: flex;
37+
flex-direction: row;
38+
align-items: center;
39+
`;
40+
41+
const SearchBox = styled.div`
42+
display: flex;
43+
flex-direction: row;
44+
padding: 5px 5px;
45+
border-radius: 6px;
46+
margin-left: 20px;
47+
width: 50%;
48+
background-color: white;
49+
`;
50+
51+
const SearchInput = styled.input`
52+
color: black;
53+
font-size: 16px;
54+
font-weight: bold;
55+
border: none;
56+
outline: none;
57+
margin-left: 15px;
58+
`;
59+
60+
const SearchIcon = styled.img`
61+
width: 32px;
62+
height: 32px;
63+
`;
64+
65+
const MovieListContainer = styled.div`
66+
display: flex;
67+
flex-direction: row;
68+
flex-wrap: wrap;
69+
padding: 30px;
70+
gap: 25px;
71+
justify-content: space-evenly;;
72+
`;
73+
74+
const Placeholder = styled.img`
75+
width: 120px;
76+
height: 120px;
77+
margin: 150px;
78+
opacity: 50%;
79+
`;
80+
181

282
function App() {
83+
84+
const [searchQuery, updateSearchQuery] = useState("");
85+
const [timeoutId, updateTimeoutId] = useState();
86+
const [movieList, updateMovieList] = useState([]);
87+
const [selectedMovie, onMovieSelect] = useState();
88+
89+
const fetchData = async (searchString) => {
90+
const response = await Axios.get(
91+
`https://www.omdbapi.com/?s=${searchString}&apikey=${API_KEY}`,
92+
);
93+
// console.log(response.data);
94+
updateMovieList(response.data.Search);
95+
};
96+
97+
const onTextChange = (e) => {
98+
// onMovieSelect("")
99+
clearTimeout(timeoutId);
100+
updateSearchQuery(e.target.value);
101+
const timeout = setTimeout(() => fetchData(e.target.value), 500);
102+
updateTimeoutId(timeout);
103+
};
104+
3105
return (
4-
<div>
106+
<Container>
107+
<Header>
108+
<AppName>
109+
<MovieImage src="/movie-icon.svg" />
110+
React Movie App
111+
</AppName>
112+
<SearchBox>
113+
<SearchIcon src="/search-icon.svg" />
114+
<SearchInput
115+
placeholder="Search Movie"
116+
value={searchQuery}
117+
onChange={onTextChange}
118+
/>
119+
</SearchBox>
120+
</Header>
121+
122+
{selectedMovie && <MovieInfoComponent
123+
selectedMovie={selectedMovie}
124+
onMovieSelect={onMovieSelect}/>}
125+
126+
<MovieListContainer>
127+
{
128+
movieList.length
129+
? movieList.map( (movie, index)=>
130+
<MovieComponent
131+
key={index}
132+
movie={movie}
133+
onMovieSelect = {onMovieSelect}
134+
/>)
135+
: <Placeholder src="/movie-icon.svg" alt="placeholder" />
136+
}
5137

6-
</div>
138+
</MovieListContainer>
139+
</Container>
7140
);
8141
}
9142

‎react-movie-app/src/Components/MovieComponent.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react'
2+
import styled from "styled-components";
3+
4+
const MovieContainer = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
padding: 10px;
8+
width: 280px;
9+
box-shadow: 0 3px 10px 0 #aaa;
10+
cursor: pointer;
11+
`;
12+
13+
const CoverImage = styled.img`
14+
object-fit: cover;
15+
height: 362px;
16+
`;
17+
18+
const MovieName = styled.span`
19+
font-size: 18px;
20+
font-weight: 600;
21+
color: black;
22+
margin: 15px 0;
23+
white-space: nowrap;
24+
overflow: hidden;
25+
text-overflow: ellipsis;
26+
`;
27+
28+
const InfoColumn = styled.div`
29+
display: flex;
30+
flex-direction: row;
31+
justify-content: space-between;
32+
`;
33+
34+
const MovieInfo = styled.span`
35+
font-size: 16px;
36+
font-weight: 500;
37+
color: black;
38+
white-space: nowrap;
39+
overflow: hidden;
40+
text-transform: capitalize;
41+
text-overflow: ellipsis;
42+
`;
43+
44+
const MovieComponent = (props) => {
45+
46+
const { Title, Year, imdbID, Type, Poster } = props.movie;
47+
48+
return (
49+
<MovieContainer onClick={()=>props.onMovieSelect(imdbID)}>
50+
<CoverImage src={Poster} />
51+
<MovieName>
52+
{Title}
53+
</MovieName>
54+
<InfoColumn>
55+
<MovieInfo>Year:{Year}</MovieInfo>
56+
<MovieInfo>Type:{Type}</MovieInfo>
57+
</InfoColumn>
58+
</MovieContainer>
59+
)
60+
}
61+
62+
export default MovieComponent

0 commit comments

Comments
 (0)