reza adde some thing

master
RezaAshrafi77 3 years ago
parent d481fdd9da
commit 5cfa1c519f
  1. 83
      src/Redux/reducers/book.js
  2. 39
      src/views/Home/SingleBlog/index.js
  3. 20
      src/views/Products/Product/index.js
  4. 9
      src/views/Products/Product/index.scss
  5. 6
      src/views/Products/Select/index.js
  6. 42
      src/views/Products/index.js

@ -5,14 +5,47 @@ const initialState = {
info: null, info: null,
searchResult: [], searchResult: [],
filterResult: [], filterResult: [],
subjects: [],
levels: [],
sortFilters: ["مرتب سازی", "محبوب ترین", "جدیدترین"],
}; };
const grades = [
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
export default function book(state = initialState, action) { export default function book(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "book/list": case "book/list":
return { ...state, loading: false, list: data, error: null }; let itemsSubject = data.map((item, index) => item.name);
if (window.innerWidth < 1000) {
itemsSubject.unshift("نام کتاب");
}
let itemsLevel = data.map((item) => grades[item.gradeId]);
if (window.innerWidth < 1000) {
itemsLevel.unshift("پایه تحصیلی");
}
return {
...state,
loading: false,
list: data,
subjects: [...new Set(itemsSubject)],
levels: [...new Set(itemsLevel)],
error: null,
};
case "book/info": case "book/info":
return { ...state, loading: false, list: null, info: data, error: null }; return { ...state, loading: false, info: data, error: null };
case "book/update": case "book/update":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "book/add": case "book/add":
@ -22,8 +55,7 @@ export default function book(state = initialState, action) {
case "book/search": case "book/search":
return { ...state }; return { ...state };
case "book/filter": case "book/filter":
const realList = const realList = state.list;
state.searchResult.length > 0 ? state.searchResult : state.list;
const level = data.level; const level = data.level;
const subject = data.subject; const subject = data.subject;
const sort = data.sort; const sort = data.sort;
@ -32,21 +64,38 @@ export default function book(state = initialState, action) {
localStorage.setItem("filter", "ON"); localStorage.setItem("filter", "ON");
} }
let finalSort; let finalSort;
const byLevelFilter = let byLevelFilter = [];
level.length > 0 if (level.length > 0) {
? realList.filter( level.map((item1) => {
(item) => item.name.indexOf(level.map((item) => item)) !== -1 for (let i = 0; i < realList.length; i++) {
) if (grades[realList[i].gradeId] === item1) {
: realList; byLevelFilter.push(realList[i]);
const bySubjectFilter = }
subject.length > 0 }
? byLevelFilter.filter( });
(item) => item.name.indexOf(subject.map((item) => item)) !== -1 } else {
) byLevelFilter = realList;
: byLevelFilter; }
let bySubjectFilter = [];
if (subject.length > 0) {
subject.map((item1) => {
for (let i = 0; i < byLevelFilter.length; i++) {
if (byLevelFilter[i].name === item1) {
bySubjectFilter.push(byLevelFilter[i]);
}
}
});
} else {
bySubjectFilter = byLevelFilter;
}
const bySearchFilter = search const bySearchFilter = search
? bySubjectFilter.filter((item) => item.name.indexOf(search) !== -1) ? bySubjectFilter.filter((item1) => item1.name.indexOf(search) !== -1)
: bySubjectFilter; : bySubjectFilter;
console.log(bySearchFilter);
if (sort === "گران ترین") { if (sort === "گران ترین") {
finalSort = bySearchFilter.sort((item1, item2) => { finalSort = bySearchFilter.sort((item1, item2) => {
return item1.product[0].price - item2.product[0].price; return item1.product[0].price - item2.product[0].price;

@ -1,5 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import VideoBox from "../../QR/VideoBox/index.js";
import VoiceBox from "../../QR/VoiceBox/index.js";
import "./index.scss"; import "./index.scss";
@ -10,6 +12,11 @@ const fontSize = {
h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45, h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, a: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
content: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
}, },
}; };
@ -23,21 +30,37 @@ export default class SingleBlog extends Component {
<p style={{ fontSize: fontSize.desktop.p }}>{data.text}</p> <p style={{ fontSize: fontSize.desktop.p }}>{data.text}</p>
<Link <Link
style={{ fontSize: fontSize.desktop.a }} style={{ fontSize: fontSize.desktop.a }}
to={"/blogs" + data.id} to={"/blogs/" + data.id}
> >
بیشتر بیشتر
</Link> </Link>
</div> </div>
<div className="single-blog__left d-flex"> <div className="single-blog__left d-flex justify-content-center align-items-center">
{data.id ? ( {data.id ? <Identifier data={data} fontSize={fontSize} /> : null}
<img
src={`https://dnvn.ir/api/v1/file/${data.id}`}
alt={data.title}
/>
) : null}
{data.video ? <video sourcce={data.video} /> : null} {data.video ? <video sourcce={data.video} /> : null}
</div> </div>
</div> </div>
); );
} }
} }
const Identifier = (props) => {
const { data } = props;
console.log(data);
return (
<>
{data.type === "audio" ? (
<VoiceBox fontSize={props.fontSize} data={data} />
) : null}
{data.type === "video" ? (
<VideoBox fontSize={props.fontSize} data={data} />
) : null}
{data.type === "image" ? (
<img
src={"https://dnvn.ir/api/v1/file/" + data.fileIds}
alt={data.fileIds}
/>
) : null}
</>
);
};

@ -40,22 +40,22 @@ export default class Product extends Component {
<Link <Link
to={`/products/physical/${product.id}`} to={`/products/physical/${product.id}`}
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
className="mobile-products-product__links--physical" className="mobile-products-product__links--physical d-flex justify-content-between align-items-center"
> >
کتاب <h2 style={{ fontSize: fontSize.mobile.h2 }}>کتاب</h2>
{/* {!product.status.digital ? ( <span style={{ fontSize: fontSize.mobile.h2 }}>
<img src={basket} alt="افزودن به سبد خرید" /> {product.product[1].price} تومان
) : null} */} </span>
</Link> </Link>
<Link <Link
to={`/products/digital/${product.id}`} to={`/products/digital/${product.id}`}
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
className="mobile-products-product__links--ar" className="mobile-products-product__links--ar d-flex justify-content-between align-items-center"
> >
نسخه دیجیتال <h2 style={{ fontSize: fontSize.mobile.h2 }}>دیجیتال</h2>
{/* {!product.status.digital ? ( <span style={{ fontSize: fontSize.mobile.h2 }}>
<img src={basket} alt="افزودن به سبد خرید" /> {product.product[0].price} تومان
) : null} */} </span>
</Link> </Link>
</div> </div>
</div> </div>

@ -57,6 +57,9 @@
} }
@media screen and (max-width: 350px) { @media screen and (max-width: 350px) {
.mobile-products-product { .mobile-products-product {
h2 {
margin: 0px;
}
width: 100%; width: 100%;
background-color: #fafafa; background-color: #fafafa;
margin: 20px; margin: 20px;
@ -116,6 +119,9 @@
@media screen and (min-width: 350px) { @media screen and (min-width: 350px) {
.mobile-products-product { .mobile-products-product {
h2 {
margin: 0px;
}
width: calc(50% - 20px); width: calc(50% - 20px);
background-color: #fafafa; background-color: #fafafa;
margin: 10px; margin: 10px;
@ -177,6 +183,9 @@
@media screen and (min-width: 550px) { @media screen and (min-width: 550px) {
.mobile-products-product { .mobile-products-product {
h2 {
margin: 0px;
}
width: calc(33% - 20px); width: calc(33% - 20px);
background-color: #fafafa; background-color: #fafafa;
margin: 10px; margin: 10px;

@ -69,9 +69,9 @@ export default function CustomizedSelects(props) {
} }
input={<BootstrapInput />} input={<BootstrapInput />}
> >
{props.options.map((item) => ( {props.options.map((item, i) => (
<option key={item.id} value={item.value}> <option key={i} value={item}>
{item.value} {item}
</option> </option>
))} ))}
</NativeSelect> </NativeSelect>

@ -32,27 +32,6 @@ class Products extends Component {
subject: [], subject: [],
sort: null, sort: null,
}, },
sortFilters: [
{ id: 0, value: "مرتب سازی" },
{ id: 1, value: "محبوب ترین" },
{ id: 2, value: "جدیدترین" },
{ id: 3, value: "ارزان ترین" },
],
subjectFilters: [
{ id: 0, value: "نام کتاب" },
{ id: 1, value: "ریاضی" },
{ id: 2, value: "شیمی" },
{ id: 3, value: "علوم" },
],
levelFilters: [
{ id: 0, value: "پایه تحصیلی" },
{ id: 1, value: "اول" },
{ id: 2, value: "دوم" },
{ id: 3, value: "سوم" },
{ id: 4, value: "چهارم" },
{ id: 5, value: "دهم" },
{ id: 6, value: "هفتم" },
],
}; };
handleProductSearch = (val) => { handleProductSearch = (val) => {
@ -79,7 +58,7 @@ class Products extends Component {
} }
render() { render() {
const { levelFilters, subjectFilters, sortFilters } = this.state; const { sortFilters, levels, subjects } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -88,7 +67,9 @@ class Products extends Component {
<Navbar page={"products"} /> <Navbar page={"products"} />
<Breadcrumbs /> <Breadcrumbs />
<div className="products__body d-flex"> <div className="products__body d-flex">
{this.props.subjects.length > 0 ? (
<Filters parent={this} /> <Filters parent={this} />
) : null}
<div className="products__body--left d-flex flex-column"> <div className="products__body--left d-flex flex-column">
<Sort <Sort
parent={this} parent={this}
@ -117,8 +98,8 @@ class Products extends Component {
<div className="mobile-products__filters d-flex"> <div className="mobile-products__filters d-flex">
<div className="d-flex"> <div className="d-flex">
<Select name="sort" options={sortFilters} parent={this} /> <Select name="sort" options={sortFilters} parent={this} />
<Select name="level" options={subjectFilters} parent={this} /> <Select name="subject" options={subjects} parent={this} />
<Select name="subject" options={levelFilters} parent={this} /> <Select name="level" options={levels} parent={this} />
</div> </div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
@ -131,13 +112,18 @@ class Products extends Component {
} }
} }
export default connect((state) => ({}), { export default connect(
(state) => ({
subjects: state.book.subjects,
levels: state.book.levels,
sortFilters: state.book.sortFilters,
}),
{
searchBook: book.searchBook, searchBook: book.searchBook,
filterBook: book.filterBook, filterBook: book.filterBook,
})(Products); }
)(Products);
Products.defaultProps = { Products.defaultProps = {
sortItems: ["پرفروش ترین", "جدیدترین"], sortItems: ["پرفروش ترین", "جدیدترین"],
subjects: ["فیزیک", "زیست", "شیمی", "روانشناسی", "علوم", "دین و زندگی"],
levels: ["اول", "دوم", "سوم", "دهم"],
}; };

Loading…
Cancel
Save