adding watchStatus

react/src/pages/Movie.js

@@ -5,9 +5,37 @@ import styled from "styled-components";
 function Movie(props) {
 	const [movie, setMovie] = useState({});
 	const [error, setError] = useState("");
+	const [rating, setRating] = useState("");
+	const [watchStatus, setWatchStatus] = useState("");
 
 	const movieId = props.movieId;
 
+	const handleRating = async e => {
+		e.preventDefault();
+		setRating(e.target.value);
+		setWatchStatus(e.target.value);
+		const Token = window.localStorage.getItem("Token");
+
+		try {
+			const response = await fetch("https://mkr.thefeathers.in/movie/" + movieId, {
+				method: "POST",
+				headers: new Headers({ "content-type": "application/json", Authentication: Token }),
+				body: JSON.stringify({
+					watchStatus: watchStatus,
+					rating: rating,
+				}),
+			});
+			const data = await response.json();
+
+			console.log(rating);
+			console.log(watchStatus);
+
+		} catch (e) {
+			setError(e.message);
+		}
+	};
+	
+
 	useEffect(() => {
 		const main = async () => {
 			try {
@@ -51,7 +79,8 @@ function Movie(props) {
 			})}
 			<div>
 				Rating 
-				<select>
+				<select defaultValue={rating}
+                    onChange={handleRating}>
 					{["Select",1,2,3,4,5,6,7,8,9,10].map(r=> (
 						<option value={String(r)} 
 						selected={
@@ -62,6 +91,20 @@ function Movie(props) {
 						))}
 				</select>
 			</div>
+			<div>
+				Watch Status 
+				<select defaultValue={watchStatus}
+                    onChange={handleRating}>
+					{["Select","PLANNED","IN_PROGRESS","COMPLETED"].map(r=> (
+						<option value={String(r)} 
+						selected={
+							movie.watchStatus === String(r) ? true : false
+						}>
+							{r}
+						</option>
+						))}
+				</select>
+			</div>
 		</div>
 	);
 }