Merge pull request #6 from fac24/category-filter

Category filter
fac24 · Jun 9, 2022 · aad84bd · aad84bd
2 parents 177d3b0 + 42ee1db
commit aad84bd
Show file tree

Hide file tree

Showing 4 changed files with 337 additions and 22 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,12 +3,11 @@ 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);
@@ -50,7 +49,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
@@ -1,22 +1,316 @@
 import React from "react";
+//import parse from "html-react-parser";
 
-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"}
           type="radio"
           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
@@ -1,21 +1,48 @@
 import React from "react";
 import parse from "html-react-parser";
+
+import { categories } from "./CategoryFilter";
+
 import styled from "styled-components";
 
-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>