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",
"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",

@ -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 }) {
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 (

@ -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
? "bg-gray36 ml-2"
: "bg-blueFF1 ml-3 shadow-sm",
isDark ? "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>

@ -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="">

@ -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 {

@ -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,
};

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

@ -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",
isDark ? "bg-dark" : "bg-white",
"min-h-screen min-w-screen rtl overflow-x-hidden pt-20 lg:pt-0",
isDark ? "" : "bg-white",
],
" "
)}
>
<BrowserRouter>
<Navbar />
<BG />
<Routes>
<Route path="/" exact element={<Home />} />
<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";
function Page1({ list, top }) {
const height = window.innerHeight;
const [show, setShow] = useState(null);
useEffect(() => {

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

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

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

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

@ -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 (

@ -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 }} /> */}

@ -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({

@ -1,24 +1,19 @@
import React, { useState, useEffect, useRef } from "react";
import Navbar from "../../../../components/Navbar";
import React, { useEffect, useRef } from "react";
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()}

@ -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(() => {

@ -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) => (

@ -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 />

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

@ -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) => (
<Product
key={index}
productsType={filter.productsType}
product={product}
index={Number(index)}
grades={grades}
/>
))}
{selectedGrade
? gradeFilterBooks?.map((product, index) => (
<Product
key={index}
productsType={filter.productsType}
product={product}
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);

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

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