Search page

react/src/pages/Search.js

@@ -0,0 +1,111 @@
+import React, { useState } from "react";
+import { Link } from "@reach/router";
+import styled from "styled-components";
+
+const Page = styled.div`
+	text-align: center;
+`;
+
+const SearchBox = styled.div`
+	input {
+		height: 50px;
+		padding: 10px;
+		border-radius: 25px;
+		width: 800px;
+		outline-width: 0;
+		display: inline-block;
+	}
+
+	button {
+		height: 50px;
+		width: 150px;
+		background: #ffeb3b;
+		border: none;
+		color: #000;
+		border-radius: 25px;
+		outline: 0;
+		cursor: pointer;
+	}
+
+	button:hover,
+	.form-box button:active {
+		background: #43a047;
+	}
+`;
+
+const List = styled.ul`
+	list-style-type: none;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 12px;
+	margin-bottom: 50px;
+`;
+
+const MovieImg = styled.img`
+	height: 250px;
+`;
+
+function Search() {
+	const [search, setSearch] = useState("");
+	const [results, setResults] = useState([]);
+	const [error, setError] = useState("");
+
+	const searchMovies = async e => {
+		e.preventDefault();
+
+		if (!search) return;
+
+		const Token = window.localStorage.getItem("Token");
+
+		try {
+			const response = await fetch(
+				"https://mkr.thefeathers.in/search/" + search,
+				{
+					method: "GET",
+					headers: new Headers({ Authentication: Token }),
+				},
+			);
+
+			const data = await response.json();
+			if (!data.success || !data.results) {
+				return setError("Error occured. " + data.error || "");
+			} else {
+				setError("");
+				setResults(data.results);
+			}
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+
+	return (
+		<Page>
+			{error ? <p>{error}</p> : ""}
+			<SearchBox>
+				<input
+					type="text"
+					onInput={e => setSearch(e.target.value)}
+					placeholder="Search movies"
+				/>
+				<button type="button" onClick={searchMovies}>
+					Search
+				</button>
+			</SearchBox>
+			<List>
+				{results.map(result => {
+					return (
+						<li key={result.movieId}>
+							<Link to={"/movie/" + result.movieId}>
+								<MovieImg src={result.poster}></MovieImg>
+								<h2>{result.title}</h2>
+							</Link>
+						</li>
+					);
+				})}
+			</List>
+		</Page>
+	);
+}
+
+export default Search;