From 72d3fdf9142f8539d231753c33eaab4359c0213e Mon Sep 17 00:00:00 2001
From: Minju25Kim <48757517+minju25kim@users.noreply.github.com>
Date: Fri, 10 Jun 2022 11:11:31 +0100
Subject: [PATCH] add object key inside return Relates #15

---
 src/components/CategoryFilter.jsx | 290 ++----------------------------
 src/components/search.jsx         |   1 -
 2 files changed, 19 insertions(+), 272 deletions(-)

diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
index 2d00aef..a669eb4 100644
--- a/src/components/CategoryFilter.jsx
+++ b/src/components/CategoryFilter.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-//import parse from "html-react-parser";
 
 const categories = {
   Action: 28,
@@ -23,37 +22,15 @@ const categories = {
   Western: 37,
 };
 
-// try to use this list -> html parse for loop
-// but has some problem with checked value,
-// so created html and copy and paste it.
-
-// const categoryList = Object.keys(categories);
-// let list = "";
-// for (let category of categoryList) {
-//   list += /*html*/ `
-// <label htmlFor="${category}">
-// ${category}
-// <input
-// checked={category === "${category}"}
-//   type="radio"
-//   name="categories"
-//   id="${category}"
-//   value="${category}"
-//   onChange={(event) => setCategory(event.target.value)}
-// />
-// </label>
-// <br />
-// `;
-// }
-
 function CategoryFilter({ category, setCategory }) {
   return (
     <fieldset>
       <legend>Movie Category</legend>
       <br />
-      <label htmlFor="all">
+      <label htmlFor="all" key="all">
         All
         <input
+          key="all"
           checked={category === "all"}
           type="radio"
           name="categories"
@@ -63,252 +40,23 @@ function CategoryFilter({ category, setCategory }) {
         />
       </label>
       <br />
-      <label htmlFor="Action">
-        Action
-        <input
-          checked={category === "Action"}
-          type="radio"
-          name="categories"
-          id="Action"
-          value="Action"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Adventure">
-        Adventure
-        <input
-          checked={category === "Adventure"}
-          type="radio"
-          name="categories"
-          id="Adventure"
-          value="Adventure"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Animation">
-        Animation
-        <input
-          checked={category === "Animation"}
-          type="radio"
-          name="categories"
-          id="Animation"
-          value="Animation"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Comedy">
-        Comedy
-        <input
-          checked={category === "Comedy"}
-          type="radio"
-          name="categories"
-          id="Comedy"
-          value="Comedy"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Crime">
-        Crime
-        <input
-          checked={category === "Crime"}
-          type="radio"
-          name="categories"
-          id="Crime"
-          value="Crime"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Documentary">
-        Documentary
-        <input
-          checked={category === "Documentary"}
-          type="radio"
-          name="categories"
-          id="Documentary"
-          value="Documentary"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Drama">
-        Drama
-        <input
-          checked={category === "Drama"}
-          type="radio"
-          name="categories"
-          id="Drama"
-          value="Drama"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Family">
-        Family
-        <input
-          checked={category === "Family"}
-          type="radio"
-          name="categories"
-          id="Family"
-          value="Family"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Fantasy">
-        Fantasy
-        <input
-          checked={category === "Fantasy"}
-          type="radio"
-          name="categories"
-          id="Fantasy"
-          value="Fantasy"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="History">
-        History
-        <input
-          checked={category === "History"}
-          type="radio"
-          name="categories"
-          id="History"
-          value="History"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Horror">
-        Horror
-        <input
-          checked={category === "Horror"}
-          type="radio"
-          name="categories"
-          id="Horror"
-          value="Horror"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Music">
-        Music
-        <input
-          checked={category === "Music"}
-          type="radio"
-          name="categories"
-          id="Music"
-          value="Music"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Mystery">
-        Mystery
-        <input
-          checked={category === "Mystery"}
-          type="radio"
-          name="categories"
-          id="Mystery"
-          value="Mystery"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Romance">
-        Romance
-        <input
-          checked={category === "Romance"}
-          type="radio"
-          name="categories"
-          id="Romance"
-          value="Romance"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Science Fiction">
-        Science Fiction
-        <input
-          checked={category === "Science Fiction"}
-          type="radio"
-          name="categories"
-          id="Science Fiction"
-          value="Science Fiction"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="TV Movie">
-        TV Movie
-        <input
-          checked={category === "TV Movie"}
-          type="radio"
-          name="categories"
-          id="TV Movie"
-          value="TV Movie"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Thriller">
-        Thriller
-        <input
-          checked={category === "Thriller"}
-          type="radio"
-          name="categories"
-          id="Thriller"
-          value="Thriller"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="War">
-        War
-        <input
-          checked={category === "War"}
-          type="radio"
-          name="categories"
-          id="War"
-          value="War"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
-
-      <label htmlFor="Western">
-        Western
-        <input
-          checked={category === "Western"}
-          type="radio"
-          name="categories"
-          id="Western"
-          value="Western"
-          onChange={(event) => setCategory(event.target.value)}
-        />
-      </label>
-      <br />
+      {Object.keys(categories).map((key) => (
+        <>
+          <label htmlFor={key} key={key}>
+            {key}
+            <input
+              key={key}
+              checked={category === key}
+              type="radio"
+              name="categories"
+              id={key}
+              value={key}
+              onChange={(event) => setCategory(event.target.value)}
+            />
+          </label>
+          <br />
+        </>
+      ))}
     </fieldset>
   );
 }
diff --git a/src/components/search.jsx b/src/components/search.jsx
index ce2a0a0..e10d4dc 100644
--- a/src/components/search.jsx
+++ b/src/components/search.jsx
@@ -5,7 +5,6 @@ function Search({ search }) {
   const [movie, setMovie] = React.useState([]);
 
   const URL = "https://api.themoviedb.org/3/search/movie";
-  console.log(URL);
   const api_key = import.meta.env.VITE_TMDB_API_KEY;
   const searchURL = `${URL}?api_key=${api_key}&query=${search}`;