reza completed products

temp
Reza_ashrafi 3 years ago
parent fc6d4c4132
commit afbf0cb2b4
  1. 36644
      package-lock.json
  2. 1
      package.json
  3. 19
      src/components/BG/index.js
  4. 31
      src/components/JolPlayer/index.js
  5. 8
      src/components/Navbar/index.js
  6. 5
      src/components/Select/index.js
  7. 22
      src/index.css
  8. 2
      src/redux/reducers/book.js
  9. 2
      src/redux/reducers/public.js
  10. 6
      src/router.js
  11. 1
      src/views/Home/Landscape/Page1/index.js
  12. 1
      src/views/Home/Landscape/Page2/Mobile/index.js
  13. 2
      src/views/Home/Landscape/Page2/index.js
  14. 1
      src/views/Home/Landscape/Page3/index.js
  15. 1
      src/views/Home/Landscape/Page4/index.js
  16. 2
      src/views/Home/Landscape/Test/index.js
  17. 1
      src/views/Home/Landscape/VideoTube/AddComment/index.js
  18. 1
      src/views/Home/Landscape/VideoTube/LessonPlayList/index.js
  19. 8
      src/views/Home/Landscape/VideoTube/index.js
  20. 2
      src/views/Home/Landscape/index.js
  21. 2
      src/views/Home/Portrait/Private/MyBooks/index.js
  22. 2
      src/views/Home/Portrait/Private/index.js
  23. 2
      src/views/Home/Portrait/index.js
  24. 85
      src/views/Products/index.js
  25. 1
      tailwind.config.js
  26. 6988
      yarn.lock

36644
package-lock.json generated

File diff suppressed because it is too large Load Diff

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

@ -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);

@ -3,37 +3,6 @@ import JoLPlayer from "jol-player";
function Video({ fileIds, posterId, autoPlay }) { function Video({ fileIds, posterId, autoPlay }) {
const videoRef = useRef(null); 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 ( return (

@ -31,10 +31,10 @@ function Navbar({ pages, isDark, isLogin }) {
className={_.join( 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", "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 */} {/* landscape start */}
<div className="flex-row items-center hidden lg:flex"> <div className="flex-row items-center hidden lg:flex">
@ -87,9 +87,7 @@ function Navbar({ pages, isDark, isLogin }) {
className={_.join( className={_.join(
[ [
"rounded-sm p-1.5", "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 <img
src={isDark ? arIcon : arBlueIcon} src={isDark ? arIcon : arBlueIcon}
alt="" alt=""
className={_.join(['w-6'], " ")} className={_.join(["w-6"], " ")}
/> />
</Link> </Link>
</div> </div>

@ -2,13 +2,12 @@ import React from "react";
function Select({ function Select({
options, options,
icon,
fill, fill,
hoverFill, hoverFill,
margin, margin,
borderColor, borderColor,
backgroundColor, backgroundColor,
onChane, onChange,
name, name,
}) { }) {
return ( return (
@ -17,7 +16,7 @@ function Select({
> >
<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}`} 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) => ( {options.map((option, index) => (
<option key={index} className=""> <option key={index} className="">

@ -3,7 +3,27 @@
@tailwind utilities; @tailwind utilities;
.bg-dark { .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 { .rtl {

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

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

@ -2,6 +2,7 @@ import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Navbar from "./components/Navbar"; import Navbar from "./components/Navbar";
import BG from "./components/BG";
import _ from "lodash"; import _ from "lodash";
import Home from "./views/Home"; import Home from "./views/Home";
@ -14,14 +15,15 @@ function Router({ isDark }) {
<div <div
className={_.join( 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> <BrowserRouter>
<Navbar /> <Navbar />
<BG />
<Routes> <Routes>
<Route path="/" exact element={<Home />} /> <Route path="/" exact element={<Home />} />
<Route path="/products" exact element={<Products />} /> <Route path="/products" exact element={<Products />} />

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

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

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

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

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

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

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

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

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

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

@ -10,7 +10,7 @@ function MyBooks({ list, getList, grades }) {
}, []); }, []);
return ( return (
<div className="w-full px-4 mb-5"> <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> <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"> <ul className="list-none w-full overflow-x-scroll pt-2 flex flex-row">
{list.map((book, index) => ( {list.map((book, index) => (

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

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

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

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

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save