most of it refactored

lnxfsf · Jan 16, 2024 · cf6d5ef · cf6d5ef
1 parent c660661
commit cf6d5ef
Show file tree

Hide file tree

Showing 23 changed files with 360 additions and 487 deletions.
diff --git a/backend/db.sqlite3 b/backend/db.sqlite3
diff --git a/frontend/src/components/Anime/BrowseAnime.jsx b/frontend/src/components/Anime/BrowseAnime.jsx
diff --git a/...end/src/components/Anime/FilterSearch.jsx → ...rc/components/Anime/FilterSearchAnime.jsx b/...end/src/components/Anime/FilterSearch.jsx → ...rc/components/Anime/FilterSearchAnime.jsx
@@ -1,17 +1,18 @@
-import "../../styles/Anime.scoped.scss";
+
+import "../../styles/FilterSearch.scoped.scss";
 
 import { anime_data, genres, year, studio, season, episodes } from "../../data";
 
-const FilterSearch = () => {
+const FilterSearchAnime = () => {
   return <>
 
 
-    <div className="filter1 grid grid-cols-6 p-6 ">
+    <div className="filter grid grid-cols-6 p-6 ">
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Search:</p>
+            <p className="filter_txt">Search:</p>
 
             <div className="search-container">
-              <div className="input-container1">
+              <div className="input-container">
                 <input type="text" placeholder="Search" />
                 <button className="search-icon">
                   <i className="bx bx-search-alt-2"></i>
@@ -21,7 +22,7 @@ const FilterSearch = () => {
           </div>
 
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Genres:</p>
+            <p className="filter_txt">Genres:</p>
 
             <select className="dropdown-select_g1" multiple>
               {/* all genres possible */}
@@ -35,9 +36,9 @@ const FilterSearch = () => {
           </div>
 
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Year:</p>
+            <p className="filter_txt">Year:</p>
 
-            <select className="dropdown-select1">
+            <select className="dropdown-select">
               <option disabled selected>
                 Year
               </option>
@@ -52,9 +53,9 @@ const FilterSearch = () => {
           </div>
 
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Studio:</p>
+            <p className="filter_txt">Studio:</p>
 
-            <select className="dropdown-select1">
+            <select className="dropdown-select">
               <option selected disabled>
                 Studio
               </option>
@@ -70,9 +71,9 @@ const FilterSearch = () => {
           </div>
 
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Seasons:</p>
+            <p className="filter_txt">Seasons:</p>
 
-            <select className="dropdown-select1">
+            <select className="dropdown-select">
               <option selected disabled>
                 Seasons
               </option>
@@ -88,9 +89,9 @@ const FilterSearch = () => {
           </div>
 
           <div className="flex flex-col  justify-start ml-3 mt-3">
-            <p className="filter_txt1">Episodes:</p>
+            <p className="filter_txt">Episodes:</p>
 
-            <select className="dropdown-select1">
+            <select className="dropdown-select">
               <option selected disabled>
                 Episodes
               </option>
@@ -110,4 +111,4 @@ const FilterSearch = () => {
   </>;
 };
 
-export { FilterSearch };
+export { FilterSearchAnime };
diff --git a/frontend/src/components/Browse/BrowseAniMan.jsx b/frontend/src/components/Browse/BrowseAniMan.jsx
@@ -0,0 +1,75 @@
+import "../../styles/BrowseAniMan.scoped.scss";
+
+import {
+  anime_data,
+  genres,
+  year,
+  studio,
+  season,
+  episodes,
+  manga_data,
+  publishing,
+  country_origin,
+} from "../../data";
+
+import { Link } from "react-router-dom";
+
+const BrowseAniMan = ({ isanime }) => {
+  return (
+    <>
+      {isanime ? (
+        <div className=" cards_container grid grid-cols-6 gap-x-6 gap-y-6 p-6  ">
+          {anime_data.map((item) => (
+            <Link
+              to="/detailspage"
+              state={{ id: item.anime_id, anime: true }}
+              key={item.anime_id}
+            >
+              <div className="card">
+                <div className="card_img">
+                  <img src={item.image} />
+                </div>
+
+                <div className="flex flex-row gap-x-2 mt-3">
+                  {/* check index.css, for global use, vertical rectangle.. */}
+                  <div className="rectangle_smaller"></div>
+
+                  <p className="title">{item.title}</p>
+
+                  {/*TODO you add favorite button, and for it to work properly */}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <div className=" cards_container grid grid-cols-6 gap-x-6 gap-y-6 p-6  ">
+          {manga_data.map((item) => (
+            <Link
+              to="/detailspage"
+              state={{ id: item.manga_id, anime: false }}
+              key={item.manga_id}
+            >
+              <div className="card">
+                <div className="card_img">
+                  <img src={item.image} />
+                </div>
+
+                <div className="flex flex-row gap-x-2 mt-3">
+                  {/* check index.css, for global use, vertical rectangle.. */}
+                  <div className="rectangle_smaller"></div>
+
+                  <p className="title">{item.title}</p>
+
+                  {/*TODO you add favorite button, and for it to work properly */}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
+
+export { BrowseAniMan };
diff --git a/frontend/src/components/DetailsPage/DetailsPage.jsx b/frontend/src/components/DetailsPage/DetailsPage.jsx
@@ -13,11 +13,11 @@ const DetailsPage = () => {
   const { id, anime } = location.state;
 
   // we get all variables from external function (imported .js)
-  var dataObject = getDataObject(anime, id);
+  var dataObject = getDataObject(id, anime);
 
   return (
     <>
-      <div className="main4">
+      <div className="main">
         {/* upper part. header */}
         <Header data={dataObject} />
 

diff --git a/frontend/src/components/DetailsPage/LeftBox.jsx b/frontend/src/components/DetailsPage/LeftBox.jsx
@@ -1,7 +1,7 @@
 import "../../styles/DetailsPage.scoped.scss";
 import { GenreBullet } from "./GenreBullet";
 
-const LeftBox = ({ anime, data }) => {
+const LeftBox = ({ data , anime  }) => {
   return (
     <>
       <div className="basis-1/3 flex items-start justify-center ">

diff --git a/frontend/src/components/Explore/FilterSearchExplore.jsx b/frontend/src/components/Explore/FilterSearchExplore.jsx
@@ -0,0 +1,64 @@
+
+
+import "../../styles/FilterSearch.scoped.scss";
+
+import { anime_data, manga_data, genres, year } from "../../data";
+
+const FilterSearchExplore = () => {
+  return <>
+
+
+
+   {/*TODO apply this filter. should react 'onChange'. and results should be displayed on whole page (without these sections..)  */}
+        <div className="filter grid grid-cols-6 p-6 ">
+          <div className="flex flex-col  justify-start ml-3 mt-3">
+            <p className="filter_txt">Search:</p>
+
+            <div className="search-container">
+              <div className="input-container">
+                <input type="text" placeholder="Search" />
+                <button className="search-icon">
+                  <i className="bx bx-search-alt-2"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  justify-start ml-3 mt-3">
+            <p className="filter_txt">Genres:</p>
+
+            <select className="dropdown-select_g1" multiple>
+              {/* all genres possible */}
+
+              {genres.map((item, index) => (
+                <option value={item} key={index}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex flex-col  justify-start ml-3 mt-3">
+            <p className="filter_txt">Year:</p>
+
+            <select className="dropdown-select">
+              <option disabled selected>
+                Year
+              </option>
+              {/*  years from 1940 to 2023 */}
+
+              {year.map((item, index) => (
+                <option value={item} key={index}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+
+
+  </>;
+};
+
+export { FilterSearchExplore };
diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
@@ -12,7 +12,7 @@ const BrowseHome = () => {
 
   return (
     <>
-      <div className="main2 flex justify-center items-center ">
+      <div className="main flex justify-center items-center ">
 
         <div className="basis-1/4">
 

diff --git a/frontend/src/components/Home/BrowseHome/Items.jsx b/frontend/src/components/Home/BrowseHome/Items.jsx
@@ -27,7 +27,7 @@ const Items = () => {
                   <div className="flex flex-row gap-x-2 mt-3">
                     {/* check index.css, for global use, vertical rectangle.. */}
 
-                    <p className="title8 secondary-left-line">{item.title}</p>
+                    <p className="title secondary-left-line">{item.title}</p>
 
                     {/*TODO you add favorite button, and for it to work properly */}
                   </div>

diff --git a/frontend/src/components/Home/UpcomingCarousel.jsx b/frontend/src/components/Home/UpcomingCarousel.jsx
@@ -8,11 +8,11 @@ var top10UpcomingAnime;
 
 export const UpcomingCarousel = () => {
   useEffect(() => {
-    let main1 = document.querySelector(".main1");
+    let main = document.querySelector(".main");
 
     // don't put it in a variable, then it won't work!
     //https://asif-jalil.github.io/scroll-carousel-website/#api
-    new ScrollCarousel(main1, {
+    new ScrollCarousel(main, {
       slideSelector: ".carousel-container",
       direction: "rtl", // ltr
       speed: 5,
@@ -45,9 +45,9 @@ export const UpcomingCarousel = () => {
     <>
       <div className="line"> </div>
 
-      <div className="main1 flex flex-col 	">
+      <div className="main flex flex-col 	">
         {/* this is just container for showing title and then carousel */}
-        <div className="small_header1 ml-10 mt-6 ">
+        <div className="small_header ml-10 mt-6 ">
           {/* check index.css, for global use, vertical rectangle.. */}
 
           <div className="secondary-left-line">