reza added faq and desktop products api

master
RezaAshrafi77 3 years ago
parent 1e1842d4fe
commit 3cd90d8e03
  1. 6
      src/Redux/actions/public.js
  2. 2
      src/Redux/reducers/book.js
  3. 27
      src/Redux/reducers/public.js
  4. 30
      src/views/Faq/Collapse/index.js
  5. 156
      src/views/Faq/index.js
  6. 72
      src/views/Products/List/index.js
  7. 51
      src/views/Products/Product/index.js
  8. 42
      src/views/Products/Product/index.scss
  9. 151
      src/views/Products/index.js

@ -2,6 +2,12 @@ import proxy from "../proxy";
const publicApi = { const publicApi = {
getHomeData: (data, history) => async (dispatch) => getHomeData: (data, history) => async (dispatch) =>
await proxy.get("public/homePage", data, { history, dispatch }), await proxy.get("public/homePage", data, { history, dispatch }),
getFaqList: (data, history) => async (dispatch) =>
await proxy.get("public/faq", data, { history, dispatch }),
setFaqActive: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/activate", data: data }),
searchFaq: (data) => async (dispatch) =>
await dispatch({ type: "public/faq/search", data: data }),
}; };
export default publicApi; export default publicApi;

@ -1,5 +1,5 @@
const initialState = { const initialState = {
loading: false, loading: true,
error: null, error: null,
list: null, list: null,
info: null, info: null,

@ -1,13 +1,40 @@
const initialState = { const initialState = {
homeData: [], homeData: [],
faqList: [],
loading: false, loading: false,
error: null, error: null,
searchResult: [],
}; };
export default function publicApi(state = initialState, action) { export default function publicApi(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/homePage": case "public/homePage":
return { ...state, loading: false, error: null, homeData: data }; return { ...state, loading: false, error: null, homeData: data };
case "public/faq":
return { ...state, loading: false, error: null, faqList: data };
case "public/faq/activate":
return {
...state,
loading: false,
error: null,
faqList: state.faqList.map((item) =>
item.id === data
? { ...item, active: !item.active }
: { ...item, active: false }
),
};
case "public/faq/search":
console.log(data);
return {
...state,
loading: false,
error: null,
searchResult: state.faqList.filter(
(item) =>
item.title.indexOf(data) !== -1 ||
item.description.indexOf(data) !== -1
),
};
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -1,4 +1,7 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
@ -17,9 +20,10 @@ const fontSize = {
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95, div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
}, },
}; };
export default class Collapse extends Component {
class Collapse extends Component {
render() { render() {
const { message, setMessageActive } = this.props; const { message, setFaqActive } = this.props;
return ( return (
<div className="collapse d-flex flex-column"> <div className="collapse d-flex flex-column">
<div <div
@ -30,18 +34,16 @@ export default class Collapse extends Component {
borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)", borderColor: message.active ? "#7dc241" : "rgb(223, 223, 223)",
borderBottom: message.active ? 0 : "1px solid rgb(223, 223, 223)", borderBottom: message.active ? 0 : "1px solid rgb(223, 223, 223)",
}} }}
onClick={() => setMessageActive(message.id, message.active)} onClick={() => setFaqActive(message.id)}
> >
<h2 <h2
style={ style={{
{ color: message.active ? "#7dc241" : "#666",
color: message.active ? "#7dc241" : "#666", fontSize:
fontSize: window.innerWidth > 1000
window.innerWidth > 1000 ? fontSize.desktop.h2
? fontSize.desktop.h2 : fontSize.mobile.h2,
: fontSize.mobile.h2, }}
}
}
> >
{message.title} {message.title}
</h2> </h2>
@ -80,3 +82,7 @@ export default class Collapse extends Component {
); );
} }
} }
export default connect(() => ({}), {
setFaqActive: publicApi.setFaqActive,
})(Collapse);

@ -1,7 +1,11 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Collapse from "./Collapse/index"; import Collapse from "./Collapse/index";
import Loader from "~/components/Loader/index";
import "./index.scss"; import "./index.scss";
@ -24,49 +28,17 @@ const fontSize = {
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
}, },
}; };
export default class Faq extends Component {
class Faq extends Component {
state = { state = {
search: "", search: "",
searchedMessages: null, searchedMessages: null,
messages: [
{
id: 0,
title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 1,
title: "نحوه سفارش برای خارج از کشور چگونه است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 2,
title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 3,
title: "در صورت فراموشی رمزعبور باید چکار کنیم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 4,
title: "امکان بازگشت وجه تا چند روز ممکن است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
],
}; };
componentDidMount() {
this.props.getFaqList();
}
setMessageActive = (id, status) => { setMessageActive = (id, status) => {
if (this.state.searchedMessages) { if (this.state.searchedMessages) {
if (status) { if (status) {
@ -105,61 +77,66 @@ export default class Faq extends Component {
handleSearch = (val) => { handleSearch = (val) => {
this.setState({ this.setState({
search: "",
});
this.setState((prevState) => ({
searchedMessages: prevState.messages.filter(
(item) => item.title.search(val) !== -1
),
search: val, search: val,
})); });
this.props.searchFaq(val);
}; };
render() { render() {
const { faqList, searchResult, loading } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> !loading ? (
<div className="faq d-flex flex-column align-items-center"> <>
<Navbar page={"faq"} /> <div className="faq d-flex flex-column align-items-center">
<header className="faq__header d-flex flex-column align-items-center"> <Navbar page={"faq"} />
<h1 style={{ fontSize: fontSize.desktop.h1 }}> <header className="faq__header d-flex flex-column align-items-center">
سلام چطوری میتونم کمکتون کنم؟ <h1 style={{ fontSize: fontSize.desktop.h1 }}>
</h1> سلام چطوری میتونم کمکتون کنم؟
<div className="faq__header--search d-flex align-items-center"> </h1>
<input <div className="faq__header--search d-flex align-items-center">
type="search" <input
placeholder="دنبال چه چیزی برات باشیم؟" type="search"
onChange={(e) => this.handleSearch(e.target.value)} placeholder="دنبال چه چیزی برات باشیم؟"
/> onChange={(e) => this.handleSearch(e.target.value)}
<button />
type="submit" <button
style={{ fontSize: fontSize.mobile.button }} type="submit"
> style={{ fontSize: fontSize.mobile.button }}
جستجو >
</button> جستجو
</button>
</div>
</header>
<div className="faq__list d-flex flex-column">
{this.state.search === ""
? faqList.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))
: searchResult.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))}
</div> </div>
</header>
<div className="faq__list d-flex flex-column">
{this.state.search === ""
? this.state.messages.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))
: this.state.searchedMessages.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))}
</div> </div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div> </div>
<Footer /> )
</>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="mobile-faq d-flex flex-column align-items-center"> <div className="mobile-faq d-flex flex-column align-items-center">
@ -177,14 +154,14 @@ export default class Faq extends Component {
</header> </header>
<div className="mobile-faq__list d-flex flex-column"> <div className="mobile-faq__list d-flex flex-column">
{!this.state.search {!this.state.search
? this.state.messages.map((item, i) => ( ? faqList.map((item, i) => (
<Collapse <Collapse
setMessageActive={this.setMessageActive} setMessageActive={this.setMessageActive}
message={item} message={item}
key={i} key={i}
/> />
)) ))
: this.state.searchedMessages.map((item, i) => ( : searchResult.map((item, i) => (
<Collapse <Collapse
setMessageActive={this.setMessageActive} setMessageActive={this.setMessageActive}
message={item} message={item}
@ -198,3 +175,12 @@ export default class Faq extends Component {
); );
} }
} }
export default connect(
(state) => ({
faqList: state.publicApi.faqList,
loading: state.publicApi.loading,
searchResult: state.publicApi.searchResult,
}),
{ getFaqList: publicApi.getFaqList, searchFaq: publicApi.searchFaq }
)(Faq);

@ -4,48 +4,60 @@ import Product from "../Product/index";
import "./index.scss"; import "./index.scss";
export default class List extends React.Component { export default class List extends React.Component {
state = { state = {
sortList: this.props.parent.props.products, sortList: this.props.parent.props.list,
}; };
render() { render() {
const { parent } = this.props; const { parent } = this.props;
var sortList = parent.props.products; var sortList = parent.props.list;
if(parent.state.selectedSort === 'گران ترین') { if (parent.state.selectedSort === "گران ترین") {
sortList = sortList.sort((a, b) => (a.price > b.price ? -1 : 1)); sortList = sortList.sort((a, b) => (a.price > b.price ? -1 : 1));
}else if(parent.state.selectedSort === 'ارزان ترین'){ } else if (parent.state.selectedSort === "ارزان ترین") {
sortList = sortList.sort((a, b) => (a.price < b.price && ( a.price !== '' || b.price !== '' ) ? -1 : 1)); sortList = sortList.sort((a, b) =>
a.price < b.price && (a.price !== "" || b.price !== "") ? -1 : 1
);
} }
var filterList; var filterList = [];
if(parent.state.selectedFilters.subject.length > 0 && parent.state.selectedFilters.level.length > 0){ if (
console.log(parent.state.selectedFilters.subject.length, parent.state.selectedFilters.level.length); parent.state.selectedFilters.subject.length > 0 &&
for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) { parent.state.selectedFilters.level.length > 0
filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1); ) {
}; for (let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
for(let j = 0; j < parent.state.selectedFilters.level.length; j++) { filterList = sortList.filter(
filterList = filterList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1); (item) =>
}; item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1
}else if(parent.state.selectedFilters.level.length > 0){ );
for(let j = 0; j < parent.state.selectedFilters.level.length; j++) { }
filterList = sortList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1); for (let j = 0; j < parent.state.selectedFilters.level.length; j++) {
}; filterList = filterList.filter(
}else if(parent.state.selectedFilters.subject.length > 0){ (item) =>
for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) { item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1
filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1); );
}; }
}else{ } else if (parent.state.selectedFilters.level.length > 0) {
for (let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = sortList.filter(
(item) =>
item.subTitle.indexOf(parent.state.selectedFilters.level[j]) !== -1
);
}
} else if (parent.state.selectedFilters.subject.length > 0) {
for (let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(
(item) =>
item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1
);
}
} else {
filterList = sortList; filterList = sortList;
} }
return ( return (
<div className="products-list d-flex flex-wrap"> <div className="products-list d-flex flex-wrap">
{filterList.length > 0 {filterList.length > 0
? filterList.map((item, i) => ( ? filterList.map((item, i) => <Product product={item} key={i} />)
<Product product={item} key={i} />
))
: null} : null}
</div> </div>
); );
} }
} }

@ -16,7 +16,7 @@ const fontSize = {
a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 26, a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 26,
}, },
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 65,
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120,
}, },
@ -50,40 +50,23 @@ export default class Product extends Component {
</div> </div>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<article className="products-product d-flex flex-column align-items"> <article className="products-product d-flex flex-column align-items-center">
<Link to={`/products/${product.id}`}> <Link to={`/products/${product.id}`}>
<img src={product.image} alt={product.name} /> <img
<h1 style={{ fontSize: fontSize.desktop.h1 }}> src={`https://dnvn.ir/api/v1/file/${product.fileIds}`}
{product.title + " " + product.subTitle} alt={product.name}
</h1> />
{product.price ? ( <h1 style={{ fontSize: fontSize.desktop.h1 }}>{product.name}</h1>
<div className="products-product__price d-flex justify-content-center align-items-center"> <Link
{product.oldPrice ? ( to={`/products/${product.id}`}
<div> style={{ fontSize: fontSize.mobile.a }}
<div className="products-product--physical"
style={{ fontSize: fontSize.desktop.old }} >
className="products-product__price--old d-flex" اطلاعات بیشتر
> {/* {!product.status.digital ? (
{product.oldPrice} تومان <img src={basket} alt="افزودن به سبد خرید" />
<span></span> ) : null} */}
</div> </Link>
</div>
) : null}
<div
style={{ fontSize: fontSize.desktop.div }}
className="products-product__price--price"
>
{product.price} تومان
</div>
</div>
) : (
<div
style={{ fontSize: fontSize.desktop.div }}
className="products-product__notAvailabe"
>
ناموجود
</div>
)}
</Link> </Link>
</article> </article>
) : null} ) : null}

@ -1,10 +1,8 @@
.mobile-products-product {
}
.products-product { .products-product {
width: calc(100% / 4); width: calc(100% / 4);
padding: 10px; padding: 10px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: center;
a { a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
@ -21,38 +19,16 @@
color: #02a1a6; color: #02a1a6;
letter-spacing: -1px; letter-spacing: -1px;
text-align: center; text-align: center;
margin-bottom: 15px;
} }
} }
&__notAvailabe { &--physical {
font-family: numeralBold; background-color: #7fc75d;
width: 100%; color: white;
text-align: center; padding: 5px 3px;
color: #6f7074; border-radius: 7px;
margin-top: 15px; font-family: numeralMedium;
} text-decoration: none;
&__price {
width: 100%;
margin-top: 15px;
text-align: center;
&--old {
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items: center;
span {
position: absolute;
left: 0px;
width: 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
}
}
&--price {
color: #4d4d4d;
font-family: numeralBold;
}
} }
} }

@ -13,11 +13,6 @@ import List from "./List/index";
import Sort from "./Sort/index"; import Sort from "./Sort/index";
import Filters from "./Filters/index"; import Filters from "./Filters/index";
import sciense_6 from "../../assets/images/sciense-6.png";
import sciense_7 from "../../assets/images/sciense-7.png";
import sciense_8 from "../../assets/images/sciense-8.png";
import sciense_9 from "../../assets/images/sciense-9.png";
import zist_10 from "../../assets/images/zist-10.png";
import navbarSearch from "../../assets/icons/navbarSearch.png"; import navbarSearch from "../../assets/icons/navbarSearch.png";
import "./index.scss"; import "./index.scss";
@ -63,10 +58,11 @@ class Products extends Component {
render() { render() {
const { dateFilters, degreeFilters, firstFilters } = this.state; const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
this.props.list ? ( !loading ? (
<> <>
<div className="products d-flex flex-column"> <div className="products d-flex flex-column">
<Navbar page={"products"} /> <Navbar page={"products"} />
@ -94,7 +90,7 @@ class Products extends Component {
) )
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
this.props.list ? ( !loading ? (
<> <>
<div className="mobile-products d-flex flex-column"> <div className="mobile-products d-flex flex-column">
<Navbar page={"products"} /> <Navbar page={"products"} />
@ -119,7 +115,7 @@ class Products extends Component {
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
<div className="mobile-products__list d-flex flex-wrap"> <div className="mobile-products__list d-flex flex-wrap">
{this.props.list.map((item, i) => ( {list.map((item, i) => (
<Product product={item} key={i} id={i} /> <Product product={item} key={i} id={i} />
))} ))}
</div> </div>
@ -142,6 +138,7 @@ class Products extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
list: state.book.list, list: state.book.list,
loading: state.book.loading,
// status: state.user.status, // status: state.user.status,
}), }),
{ getList: book.list } { getList: book.list }
@ -156,142 +153,6 @@ Products.defaultProps = {
"جدیدترین", "جدیدترین",
"بزودی", "بزودی",
], ],
subjects: [ subjects: ["فیزیک", "زیست", "شیمی", "روانشناسی", "علوم", "دین و زندگی"],
"فیزیک",
"زیست شناسی",
"شیمی آلی",
"روانشناسی",
"علوم تجربی",
"دین و زندگی",
],
levels: ["اول", "دوم", "سوم", "دهم"], levels: ["اول", "دوم", "سوم", "دهم"],
products: [
{
id: 0,
image: sciense_6,
title: "کتاب شیمی آلی",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 1,
image: sciense_7,
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 2,
image: sciense_8,
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
status: {
digital: true,
ar: true,
},
},
{
id: 3,
image: sciense_9,
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
status: {
digital: true,
ar: true,
},
},
{
id: 4,
image: zist_10,
title: "کتاب علوم تجربی",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
status: {
digital: true,
ar: true,
},
},
{
id: 5,
image: sciense_6,
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 6,
image: sciense_7,
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 7,
image: sciense_8,
title: "کتاب علوم تجربی",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 8,
image: sciense_9,
title: "کتاب علوم تجربی",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
{
id: 9,
image: zist_10,
title: "کتاب علوم تجربی",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
status: {
digital: true,
ar: true,
},
},
],
}; };

Loading…
Cancel
Save