From f9c0321923b1ec398fab2cb9077eb5318380334a Mon Sep 17 00:00:00 2001
From: Minju25Kim <48757517+minju25kim@users.noreply.github.com>
Date: Thu, 9 Jun 2022 14:05:40 +0100
Subject: [PATCH 1/4] before merge

---
 src/components/search.jsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/search.jsx b/src/components/search.jsx
index 5a5ffaa..a22ff82 100644
--- a/src/components/search.jsx
+++ b/src/components/search.jsx
@@ -27,9 +27,6 @@ function Search({ search }) {
     const release = movie.results[0].release_date;
     console.log(title, release, posterURL);
 
-    // save the user search data to local storage
-    localStorage.setItem(title, [release, posterURL]);
-
     // return (
     //   <div>
     //     <span>{title}</span>

From 7f8724ffa1aed188b08e5b6469c766d700ab7049 Mon Sep 17 00:00:00 2001
From: Minju25Kim <48757517+minju25kim@users.noreply.github.com>
Date: Thu, 9 Jun 2022 14:10:58 +0100
Subject: [PATCH 2/4] added category arr

---
 src/components/CategoryFilter.jsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
index e0e4ff7..c968439 100644
--- a/src/components/CategoryFilter.jsx
+++ b/src/components/CategoryFilter.jsx
@@ -1,5 +1,27 @@
 import React from "react";
 
+const category = [
+  { "Action    ": 28 },
+  { "Adventure  ": 12 },
+  { "Animation  ": 16 },
+  { "Comedy     ": 35 },
+  { "Crime      ": 80 },
+  { "Documentary ": 99 },
+  { "Drama     ": 18 },
+  { "Family    ": 10751 },
+  { "Fantasy   ": 14 },
+  { "History   ": 36 },
+  { "Horror    ": 27 },
+  { "Music     ": 10402 },
+  { "Mystery   ": 9648 },
+  { "Romance   ": 10749 },
+  { "Science Fiction ": 878 },
+  { "TV Movie  ": 10770 },
+  { "Thriller ": 53 },
+  { "War      ": 10752 },
+  { "Western   ": 37 },
+];
+
 function Filter({ category, setCategory }) {
   return (
     <fieldset>

From 00e8a7d4ed51b98d6686e4bdd8799e7f4cc879e0 Mon Sep 17 00:00:00 2001
From: Minju25Kim <48757517+minju25kim@users.noreply.github.com>
Date: Thu, 9 Jun 2022 16:31:46 +0100
Subject: [PATCH 3/4] added filter for category

---
 src/App.jsx                       |   5 +-
 src/components/CategoryFilter.jsx | 322 +++++++++++++++++++++++++++---
 src/components/movies.jsx         |  34 +++-
 src/components/search.jsx         |   5 +-
 4 files changed, 330 insertions(+), 36 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index f8c36ee..3b7b53f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,11 +3,10 @@ import "./App.css";
 import YearFilter from "./components/YearFilter";
 import Search from "./components/search";
 import Movies from "./components/movies";
-import CategoryFilter from "./components/CategoryFilter";
+import { CategoryFilter } from "./components/CategoryFilter";
 
 function App() {
   const [search, setSearch] = React.useState(false);
-
   const [min, setMin] = React.useState(1900);
   const [max, setMax] = React.useState(2025);
   const [category, setCategory] = React.useState("all");
@@ -45,7 +44,7 @@ function App() {
         </fieldset>
       </section>
       <section className="movies">
-        <Movies min={min} max={max} />
+        <Movies min={min} max={max} category={category} />
       </section>
     </main>
   );
diff --git a/src/components/CategoryFilter.jsx b/src/components/CategoryFilter.jsx
index c968439..2d00aef 100644
--- a/src/components/CategoryFilter.jsx
+++ b/src/components/CategoryFilter.jsx
@@ -1,33 +1,57 @@
 import React from "react";
+//import parse from "html-react-parser";
 
-const category = [
-  { "Action    ": 28 },
-  { "Adventure  ": 12 },
-  { "Animation  ": 16 },
-  { "Comedy     ": 35 },
-  { "Crime      ": 80 },
-  { "Documentary ": 99 },
-  { "Drama     ": 18 },
-  { "Family    ": 10751 },
-  { "Fantasy   ": 14 },
-  { "History   ": 36 },
-  { "Horror    ": 27 },
-  { "Music     ": 10402 },
-  { "Mystery   ": 9648 },
-  { "Romance   ": 10749 },
-  { "Science Fiction ": 878 },
-  { "TV Movie  ": 10770 },
-  { "Thriller ": 53 },
-  { "War      ": 10752 },
-  { "Western   ": 37 },
-];
-
-function Filter({ category, setCategory }) {
+const categories = {
+  Action: 28,
+  Adventure: 12,
+  Animation: 16,
+  Comedy: 35,
+  Crime: 80,
+  Documentary: 99,
+  Drama: 18,
+  Family: 10751,
+  Fantasy: 14,
+  History: 36,
+  Horror: 27,
+  Music: 10402,
+  Mystery: 9648,
+  Romance: 10749,
+  "Science Fiction": 878,
+  "TV Movie": 10770,
+  Thriller: 53,
+  War: 10752,
+  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="categories">
+      <label htmlFor="all">
         All
         <input
           checked={category === "all"}
@@ -35,10 +59,258 @@ function Filter({ category, setCategory }) {
           name="categories"
           id="all"
           value="all"
+          onChange={(event) => setCategory(event.target.value)}
+        />
+      </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 />
     </fieldset>
   );
 }
 
-export default Filter;
+export { categories, CategoryFilter };
diff --git a/src/components/movies.jsx b/src/components/movies.jsx
index 4a0d984..d6c2d0e 100644
--- a/src/components/movies.jsx
+++ b/src/components/movies.jsx
@@ -1,20 +1,44 @@
 import React from "react";
 import parse from "html-react-parser";
+import { categories } from "./CategoryFilter";
 
-function Movies({ min, max }) {
+function Movies({ min, max, category }) {
   //to remove the false positive named movie(automatically generated at first)
   localStorage.removeItem("False Positive");
   let title = "";
   let posterURL = "";
   let release = "";
+  let genres = "";
+  let genreId = "";
   let list = "";
 
-  for (let [key, value] of Object.entries(localStorage)) {
-    [release, posterURL] = value.split(",");
+  const categoryList = Object.entries(categories);
+  for (let movieCategory of categoryList) {
+    let [categoryString, categoryId] = movieCategory;
+    if (category === categoryString) {
+      genreId = categoryId;
+    }
+  }
+
+  for (let [movieTitle, movieValue] of Object.entries(localStorage)) {
+    [release, posterURL, ...genres] = movieValue.split(",");
     let [year, month, date] = release.split("-");
     let releaseYear = Number(year);
-    if (releaseYear >= min && releaseYear <= max) {
-      title = key;
+    title = movieTitle;
+
+    if (category === "all" && releaseYear >= min && releaseYear <= max) {
+      list += /*html*/ ` 
+      <li>
+          <span>${title}</span>
+          <img src="${posterURL}" alt="${title}" />
+          <span>${release}</span>
+      </li>
+      `;
+    } else if (
+      genres.includes(`${genreId}`) &&
+      releaseYear >= min &&
+      releaseYear <= max
+    ) {
       list += /*html*/ ` 
           <li>
               <span>${title}</span>
diff --git a/src/components/search.jsx b/src/components/search.jsx
index 5bb189a..8d94fac 100644
--- a/src/components/search.jsx
+++ b/src/components/search.jsx
@@ -17,15 +17,14 @@ function Search({ search }) {
   if (search === false) {
     return <div>Loading...</div>;
   } else {
-    console.log(movie.results[0].original_title, movie.results[0].genre_ids);
+    const genres = movie.results[0].genre_ids;
     const posterPath = movie.results[0].poster_path;
     const posterURL = `https://image.tmdb.org/t/p/w500${posterPath}`;
     const title = movie.results[0].original_title;
     const release = movie.results[0].release_date;
-    // console.log(title, release, posterURL);
 
     // save the user search data to local storage
-    localStorage.setItem(title, `${release},${posterURL}`);
+    localStorage.setItem(title, `${release},${posterURL},${genres}`);
 
     // return (
     //   <div>

From 3fcdf64894619d570a5e7b5b9bdf2473aa43d775 Mon Sep 17 00:00:00 2001
From: Minju25Kim <48757517+minju25kim@users.noreply.github.com>
Date: Thu, 9 Jun 2022 16:40:52 +0100
Subject: [PATCH 4/4] add return in search

---
 src/components/search.jsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/search.jsx b/src/components/search.jsx
index 8d94fac..cc47107 100644
--- a/src/components/search.jsx
+++ b/src/components/search.jsx
@@ -26,13 +26,7 @@ function Search({ search }) {
     // save the user search data to local storage
     localStorage.setItem(title, `${release},${posterURL},${genres}`);
 
-    // return (
-    //   <div>
-    //     <span>{title}</span>
-    //     <img src={posterURL} alt={title} />
-    //     <span>{release}</span>
-    //   </div>
-    // );
+    return <div>{title} is added.</div>;
   }
 }