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

@ -1,5 +1,7 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import VideoBox from "../../QR/VideoBox/index.js";
import VoiceBox from "../../QR/VoiceBox/index.js";
import "./index.scss";
@ -10,6 +12,11 @@ const fontSize = {
h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
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>
<Link
style={{ fontSize: fontSize.desktop.a }}
to={"/blogs" + data.id}
to={"/blogs/" + data.id}
>
بیشتر
</Link>
</div>
<div className="single-blog__left d-flex">
{data.id ? (
<img
src={`https://dnvn.ir/api/v1/file/${data.id}`}
alt={data.title}
/>
) : null}
<div className="single-blog__left d-flex justify-content-center align-items-center">
{data.id ? <Identifier data={data} fontSize={fontSize} /> : null}
{data.video ? <video sourcce={data.video} /> : null}
</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
to={`/products/physical/${product.id}`}
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"
>
کتاب
{/* {!product.status.digital ? (
<img src={basket} alt="افزودن به سبد خرید" />
) : null} */}
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کتاب</h2>
<span style={{ fontSize: fontSize.mobile.h2 }}>
{product.product[1].price} تومان
</span>
</Link>
<Link
to={`/products/digital/${product.id}`}
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"
>
نسخه دیجیتال
{/* {!product.status.digital ? (
<img src={basket} alt="افزودن به سبد خرید" />
) : null} */}
<h2 style={{ fontSize: fontSize.mobile.h2 }}>دیجیتال</h2>
<span style={{ fontSize: fontSize.mobile.h2 }}>
{product.product[0].price} تومان
</span>
</Link>
</div>
</div>

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

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

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

Loading…
Cancel
Save