reza completed products

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/helper-compilation-targets": "^7.16.3",
     "@craco/craco": "^6.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/components/BG/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { connect } from "react-redux";
+
+export const BG = ({ isDark }) => {
+  return (
+    <div
+      className={`w-screen h-screen bg-dark fixed top-0 left-0 lg:hidden ${isDark ? 'bg-dark' : 'bg-white'}`}
+      style={{ zIndex: -1 }}
+    ></div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BG);

src/components/JolPlayer/index.js

@@ -3,37 +3,6 @@ import JoLPlayer from "jol-player";
 
 function Video({ fileIds, posterId, autoPlay }) {
   const videoRef = useRef(null);
-  const [flag, setFlag] = useState(false);
-  // useEffect(() => {
-  //   window.addEventListener("scroll", () => {
-  //     if (window.scrollY > 500) {
-  //       if (!localStorage.getItem("joiRect")) {
-  //         const jolRect = document
-  //           .getElementById("video-joi")
-  //           .getBoundingClientRect();
-  //         localStorage.setItem("joiRect", JSON.stringify(jolRect));
-  //       }
-  //     }
-  //   });
-  // }, []);
-
-  // const videoMethod = (status) => {
-  //   if (status === "play") {
-  //     videoRef.current.play();
-  //     setFlag(() => true);
-  //   }
-  // };
-  // useEffect(() => {
-  //   console.log(`videoRef.current`, videoRef.current);
-  // }, [videoRef.current]);
-
-  // useEffect(() => {
-  //   if (window.scrollY > 3 * window.innerHeight) {
-  //     if (autoPlay && !flag) {
-  //       videoMethod("play");
-  //     }
-  //   }
-  // }, [autoPlay]);
 
   
   return (

src/components/Navbar/index.js

@@ -31,10 +31,10 @@ function Navbar({ pages, isDark, isLogin }) {
       className={_.join(
         [
           "z-50 flex flex-1 flex-row fixed left-0 top-0 justify-between w-full lg:bg-opacity-20 lg:bg-transparent lg:shadow-sm lg:backdrop-filter lg:backdrop-blur-md lg:px-5 xl:px-10 transition-all duration-300",
-          !top ? (isDark ? "bg-dark" :"bg-white") : "",
         ],
         " "
       )}
+      style={{ backgroundColor: !top ? (isDark ? "#061B30" : "white") : "" }}
     >
       {/* landscape start */}
       <div className="flex-row items-center hidden lg:flex">
@@ -87,9 +87,7 @@ function Navbar({ pages, isDark, isLogin }) {
               className={_.join(
                 [
                   "rounded-sm p-1.5",
-                  isDark
+                  isDark ? "bg-gray36  ml-2" : "bg-blueFF1 ml-3 shadow-sm",
-                    ? "bg-gray36  ml-2"
-                    : "bg-blueFF1 ml-3 shadow-sm",
                 ],
                 " "
               )}
@@ -119,7 +117,7 @@ function Navbar({ pages, isDark, isLogin }) {
               <img
                 src={isDark ? arIcon : arBlueIcon}
                 alt=""
-                className={_.join(['w-6'], " ")}
+                className={_.join(["w-6"], " ")}
               />
             </Link>
           </div>

src/components/Select/index.js

@@ -2,13 +2,12 @@ import React from "react";
 
 function Select({
   options,
-  icon,
   fill,
   hoverFill,
   margin,
   borderColor,
   backgroundColor,
-  onChane,
+  onChange,
   name,
 }) {
   return (
@@ -17,7 +16,7 @@ function Select({
     >
       <select
         className={`text-gray70 text-xs block appearance-none bg-transparent w-full border border-solid px-4 py-3 pr-3 rounded-md leading-tight focus:outline-none focus:border-blueC0 focus:text-blueC0 ${borderColor}`}
-        onChane={(e) => onChane(name, e.target.value)}
+        onChange={(e) => onChange(name, e.target.value)}
       >
         {options.map((option, index) => (
           <option key={index} className="">

src/index.css

@@ -3,7 +3,27 @@
 @tailwind utilities;
 
 .bg-dark {
-  background: #2C2C2C;
+  background: hsla(209, 39%, 28%, 1);
+
+  background: radial-gradient(
+    circle,
+    hsla(209, 39%, 28%, 1) 0%,
+    hsla(210, 78%, 11%, 1) 100%
+  );
+
+  background: -moz-radial-gradient(
+    circle,
+    hsla(209, 39%, 28%, 1) 0%,
+    hsla(210, 78%, 11%, 1) 100%
+  );
+
+  background: -webkit-radial-gradient(
+    circle,
+    hsla(209, 39%, 28%, 1) 0%,
+    hsla(210, 78%, 11%, 1) 100%
+  );
+
+  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#2C4964", endColorstr="#061B30", GradientType=1 );
 }
 
 .rtl {

src/redux/reducers/book.js

@@ -72,7 +72,7 @@ export default function book(state = initialState, action) {
         return {
           ...state,
           gradeFilterBooks: state.list.filter(
-            (item, i) => item.gradeId === data
+            (item, i) => grades[item.gradeId] === data
           ),
           selectedGrade: data,
         };

src/redux/reducers/public.js

@@ -1,7 +1,7 @@
 import location from "../../utils/location";
 
 const initialState = {
-  isDark: localStorage.getItem("isDark") || true,
+  isDark: localStorage.getItem("isDark") || false,
   homeData: [],
   newProducts: [],
   levels: [],

src/router.js

@@ -2,6 +2,7 @@ import React from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { connect } from "react-redux";
 import Navbar from "./components/Navbar";
+import BG from "./components/BG";
 
 import _ from "lodash";
 import Home from "./views/Home";
@@ -14,14 +15,15 @@ function Router({ isDark }) {
       <div
         className={_.join(
           [
-            "min-h-screen min-w-screen rtl overflow-x-hidden",
+            "min-h-screen min-w-screen rtl overflow-x-hidden pt-20 lg:pt-0",
-            isDark ? "bg-dark" : "bg-white",
+            isDark ? "" : "bg-white",
           ],
           " "
         )}
       >
         <BrowserRouter>
           <Navbar />
+          <BG />
           <Routes>
             <Route path="/" exact element={<Home />} />
             <Route path="/products" exact element={<Products />} />

src/views/Home/Landscape/Page1/index.js

@@ -21,7 +21,6 @@ import sheffImage from "../../../../assets/images/sheff.svg";
 import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg";
 
 function Page1({ list, top }) {
-  const height = window.innerHeight;
   const [show, setShow] = useState(null);
 
   useEffect(() => {

src/views/Home/Landscape/Page2/Mobile/index.js

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import QrResult from "./QrResult";

src/views/Home/Landscape/Page2/index.js

@@ -1,7 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
 import { connect } from "react-redux";
 import _ from "lodash";
-import scroll from "../../../../utils/scroll";
 import Mobile from "./Mobile";
 import qrImage from "../../../../assets/images/qrImage.png";
 import rightBg from "../../../../assets/images/page-bg.png";

src/views/Home/Landscape/Page3/index.js

@@ -1,4 +1,3 @@
-import React, { useState, useEffect, useCallback } from "react";
 import {connect} from 'react-redux';
 import _ from "lodash";
 import testResultImage from "../../../../assets/images/test-result.png";

src/views/Home/Landscape/Page4/index.js

@@ -1,6 +1,5 @@
 import {connect} from 'react-redux';
 import _ from "lodash";
-import scroll from "../../../../utils/scroll";
 import bgImage from "../../../../assets/images/page5-bg.svg";
 import bazarImage from "../../../../assets/images/bazar.svg";
 import appStoreImage from "../../../../assets/images/app-store.svg";

src/views/Home/Landscape/Test/index.js

@@ -1,9 +1,7 @@
-import React, { useEffect, useState, useCallback } from "react";
 import {connect} from 'react-redux';
 import _ from "lodash";
 import timerIcon from "../../../../assets/icons/timer.svg";
 import QuestionBox from "./Question";
-import scroll from "../../../../utils/scroll";
 
 function Test({ title, duration, questions, translateY }) {
   return (

src/views/Home/Landscape/VideoTube/AddComment/index.js

@@ -3,7 +3,6 @@ import React from "react";
 // import user3 from "../../../assets/images/user3.png";
 
 export default function AddComment(props) {
-  const { theme } = props;
   return (
     <>
       {/* <Avatar style={{ width: 60, height: 60, marginLeft: 10 }} /> */}

src/views/Home/Landscape/VideoTube/LessonPlayList/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../../../../redux/actions";
-import { Link } from "react-router-dom";
 import _ from "lodash";
 
 function LessonPlayList({

src/views/Home/Landscape/VideoTube/index.js

@@ -1,24 +1,19 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
-import Navbar from "../../../../components/Navbar";
 import LessonPlayList from "./LessonPlayList";
 import Attachments from "./Attachments";
 import Book from "./Book";
-import Comment from "./Comment";
 import AddComment from "./AddComment";
 import Video from "../../../../components/JolPlayer";
 import Test from "../Test";
 import listIcon from "../../../../assets/icons/list.png";
 import { connect } from "react-redux";
 import _ from "lodash";
-import scroll from "../../../../utils/scroll.js";
-import location from "../../../../utils/location.js";
 import { book, publicApi } from "../../../../redux/actions";
 // import Loader from "../../components/Loader";
 
 function VodTube({
   top,
   autoPlay,
-  page,
   selectedVideo,
   info,
   getInfo,
@@ -31,7 +26,6 @@ function VodTube({
     });
   }, []);
 
-  const light = theme === "light";
   return (
     <div
       onClick={(e) => e.stopPropagation()}

src/views/Home/Landscape/index.js

@@ -6,7 +6,6 @@ import Page1 from "./Page1";
 import Page2 from "./Page2";
 import Page3 from "./Page3";
 import Page4 from "./Page4";
-import Dots from "../../../components/Dots";
 import VideoTube from "./VideoTube";
 
 function Home({
@@ -26,7 +25,6 @@ function Home({
   handlePage4TopPosition,
 }) {
   const height = window.innerHeight;
-  const [mouseFlag, setMouseFlag] = useState(true);
   // initialState
 
   useEffect(() => {

src/views/Home/Portrait/Private/MyBooks/index.js

@@ -10,7 +10,7 @@ function MyBooks({ list, getList, grades }) {
   }, []);
   return (
     <div className="w-full px-4 mb-5">
-      <div className="w-full flex flex-col rounded-md pt-4  px-2 bg-blueFF1 dark:bg-gray20 overflow-hidden">
+      <div className="w-full flex flex-col rounded-md pt-4  px-2 bg-blueFF1 dark:bg-gray2077 overflow-hidden">
         <strong className="text-blueC0 dark:text-white font-bold text-lg">کتابهای من</strong>
         <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row">
           {list.map((book, index) => (

src/views/Home/Portrait/Private/index.js

@@ -6,7 +6,7 @@ import Blogs from './Blogs';
 
 function Private() {
   return (
-    <div className="w-full flex-1 pt-20 pb-6">
+    <div className="w-full flex-1 pb-6">
       <MyBooks />
       <Shop />
       <Videos />

src/views/Home/Portrait/index.js

@@ -6,7 +6,7 @@ import Private from "./Private";
 
 function Portrait({ isLogin }) {
   return (
-    <div className="w-full min-h-screen lg:hidden">
+    <div className="w-full min-h-screen lg:hidden z-10">
       {isLogin ? <Private /> : <Public />}
     </div>
   );

src/views/Products/index.js

@@ -11,7 +11,7 @@ import searchLight from "../../assets/icons/search-light.svg";
 const Product = ({ productsType, product, index, grades }) => {
   return (
     <>
-      {productsType === "book" && (
+      {productsType === "کتاب" && (
         <Link
           to={"/products" + product?.name}
           className={`w-1/2 flex flex-col border-t border-grayDB dark:border-gray45 p-3 border-solid ${
@@ -22,13 +22,33 @@ const Product = ({ productsType, product, index, grades }) => {
             src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
             className="w-full rounded-md mb-2"
           />
-          <strong className="text-blue5F dark:text-white text-md font-bold mb-1">
+          <strong className="text-blue5F dark:text-white text-sm font-bold mb-1">
             {product?.name}
           </strong>
           <span className="text-xs text-blueC0 dark:text-white font-light mb-4">
             {"پایه" + " " + grades[product?.gradeId]}
           </span>
-          <div className="w-full flex flex-row justify-center font-semibold text-md text-blue5F dark:text-white">
+          <div className="w-full flex flex-row justify-center font-medium text-sm text-blue5F dark:text-white">
+            {1399 + " " + "تومان"}
+          </div>
+        </Link>
+      )}
+      {productsType === "ویديو" && (
+        <Link
+          to={"/products" + product?.name}
+          className={`w-full flex flex-col border-grayDB dark:border-gray45 p-3 border-solid mb-2 shadow-md`}
+        >
+          <img
+            src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+            className="w-full rounded-md mb-2"
+          />
+          <strong className="text-blue5F dark:text-white text-sm font-bold mb-1">
+            {product?.name}
+          </strong>
+          <span className="text-xs text-blueC0 dark:text-white font-light mb-4">
+            {"پایه" + " " + grades[product?.gradeId]}
+          </span>
+          <div className="w-full flex flex-row justify-center font-medium text-sm text-blue5F dark:text-white">
             {1399 + " " + "تومان"}
           </div>
         </Link>
@@ -37,11 +57,19 @@ const Product = ({ productsType, product, index, grades }) => {
   );
 };
 
-export const Products = ({ isDark, books, getList, grades }) => {
+export const Products = ({
+  isDark,
+  books,
+  getList,
+  grades,
+  gradeFilter,
+  selectedGrade,
+  gradeFilterBooks,
+}) => {
   const [filter, setFilter] = useState({
     search: "",
     grade: "",
-    productsType: "book",
+    productsType: "کتاب",
   });
 
   const onChange = (name, value) => {
@@ -51,13 +79,17 @@ export const Products = ({ isDark, books, getList, grades }) => {
   useEffect(() => {
     getList();
   }, []);
+
+  useEffect(() => {
+    gradeFilter(filter.grade);
+  }, [filter]);
   return (
     <>
       {/* Portrait  */}
-      <div className="w-full flex flex-col bg-transparent pt-20">
+      <div className="w-full flex flex-col bg-transparent">
         <header className="w-full px-4">
           <Search
-            backgroundColor="bg-grayF9 dark:bg-gray36"
+            backgroundColor="bg-grayF9 dark:bg-gray2077"
             borderColor="border-grayDB dark:border-gray45"
             textColor="text-blueC0 dark:text-white"
             icon={searchLight}
@@ -67,7 +99,7 @@ export const Products = ({ isDark, books, getList, grades }) => {
               margin="ml-1"
               fill="fill-blueC0 dark:fill-white"
               borderColor="border-grayDB dark:border-gray45"
-              backgroundColor="bg-grayF9 dark:bg-gray36"
+              backgroundColor="bg-grayF9 dark:bg-gray2077"
               onChange={onChange}
               name="productsType"
               options={["کتاب", "ویديو", "اشتراک"]}
@@ -77,7 +109,7 @@ export const Products = ({ isDark, books, getList, grades }) => {
               margin="mr-1"
               fill="fill-blueC0 dark:fill-white"
               borderColor="border-grayDB dark:border-gray45"
-              backgroundColor="bg-grayF9 dark:bg-gray36"
+              backgroundColor="bg-grayF9 dark:bg-gray2077"
               onChange={onChange}
               name="grade"
               options={Object.values(grades)}
@@ -86,15 +118,25 @@ export const Products = ({ isDark, books, getList, grades }) => {
           </div>
         </header>
         <div className="w-full flex flex-row flex-wrap mt-3">
-          {books?.map((product, index) => (
+          {selectedGrade
-            <Product
+            ? gradeFilterBooks?.map((product, index) => (
-              key={index}
+                <Product
-              productsType={filter.productsType}
+                  key={index}
-              product={product}
+                  productsType={filter.productsType}
-              index={Number(index)}
+                  product={product}
-              grades={grades}
+                  index={Number(index)}
-            />
+                  grades={grades}
-          ))}
+                />
+              ))
+            : books?.map((product, index) => (
+                <Product
+                  key={index}
+                  productsType={filter.productsType}
+                  product={product}
+                  index={Number(index)}
+                  grades={grades}
+                />
+              ))}
         </div>
       </div>
     </>
@@ -105,8 +147,13 @@ const mapStateToProps = (state) => ({
   isDark: state.publicApi.isDark,
   books: state.book.list,
   grades: state.publicApi.grades,
+  gradeFilterBooks: state.book.gradeFilterBooks,
+  selectedGrade: state.book.selectedGrade,
 });
 
-const mapDispatchToProps = { getList: book.list };
+const mapDispatchToProps = {
+  getList: book.list,
+  gradeFilter: book.gradeFilter,
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Products);

tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
       orange1: "#FF6600",
       green1: "#00FF80",
       gray20: "#202020",
+      gray2077 : "#20202077",
       gray2C: "#2C2C2C",
       gray36: "#363636",
       grayDB: "#DBDBDB",