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 = {
getHomeData: (data, history) => async (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;

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

@ -1,13 +1,40 @@
const initialState = {
homeData: [],
faqList: [],
loading: false,
error: null,
searchResult: [],
};
export default function publicApi(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "public/homePage":
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":
return { ...state, loading: true };
case "error":

@ -1,4 +1,7 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
@ -17,9 +20,10 @@ const fontSize = {
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
},
};
export default class Collapse extends Component {
class Collapse extends Component {
render() {
const { message, setMessageActive } = this.props;
const { message, setFaqActive } = this.props;
return (
<div className="collapse d-flex flex-column">
<div
@ -30,18 +34,16 @@ export default class Collapse extends Component {
borderColor: message.active ? "#7dc241" : "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
style={
{
color: message.active ? "#7dc241" : "#666",
fontSize:
window.innerWidth > 1000
? fontSize.desktop.h2
: fontSize.mobile.h2,
}
}
style={{
color: message.active ? "#7dc241" : "#666",
fontSize:
window.innerWidth > 1000
? fontSize.desktop.h2
: fontSize.mobile.h2,
}}
>
{message.title}
</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 { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Collapse from "./Collapse/index";
import Loader from "~/components/Loader/index";
import "./index.scss";
@ -24,49 +28,17 @@ const fontSize = {
form: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
},
};
export default class Faq extends Component {
class Faq extends Component {
state = {
search: "",
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) => {
if (this.state.searchedMessages) {
if (status) {
@ -105,61 +77,66 @@ export default class Faq extends Component {
handleSearch = (val) => {
this.setState({
search: "",
});
this.setState((prevState) => ({
searchedMessages: prevState.messages.filter(
(item) => item.title.search(val) !== -1
),
search: val,
}));
});
this.props.searchFaq(val);
};
render() {
const { faqList, searchResult, loading } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="faq d-flex flex-column align-items-center">
<Navbar page={"faq"} />
<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">
<input
type="search"
placeholder="دنبال چه چیزی برات باشیم؟"
onChange={(e) => this.handleSearch(e.target.value)}
/>
<button
type="submit"
style={{ fontSize: fontSize.mobile.button }}
>
جستجو
</button>
!loading ? (
<>
<div className="faq d-flex flex-column align-items-center">
<Navbar page={"faq"} />
<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">
<input
type="search"
placeholder="دنبال چه چیزی برات باشیم؟"
onChange={(e) => this.handleSearch(e.target.value)}
/>
<button
type="submit"
style={{ fontSize: fontSize.mobile.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>
</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>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
<Footer />
</>
)
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-faq d-flex flex-column align-items-center">
@ -177,14 +154,14 @@ export default class Faq extends Component {
</header>
<div className="mobile-faq__list d-flex flex-column">
{!this.state.search
? this.state.messages.map((item, i) => (
? faqList.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
message={item}
key={i}
/>
))
: this.state.searchedMessages.map((item, i) => (
: searchResult.map((item, i) => (
<Collapse
setMessageActive={this.setMessageActive}
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";
export default class List extends React.Component {
state = {
sortList: this.props.parent.props.products,
sortList: this.props.parent.props.list,
};
render() {
const { parent } = this.props;
var sortList = parent.props.products;
if(parent.state.selectedSort === 'گران ترین') {
var sortList = parent.props.list;
if (parent.state.selectedSort === "گران ترین") {
sortList = sortList.sort((a, b) => (a.price > b.price ? -1 : 1));
}else if(parent.state.selectedSort === 'ارزان ترین'){
sortList = sortList.sort((a, b) => (a.price < b.price && ( a.price !== '' || b.price !== '' ) ? -1 : 1));
} else if (parent.state.selectedSort === "ارزان ترین") {
sortList = sortList.sort((a, b) =>
a.price < b.price && (a.price !== "" || b.price !== "") ? -1 : 1
);
}
var filterList;
if(parent.state.selectedFilters.subject.length > 0 && parent.state.selectedFilters.level.length > 0){
console.log(parent.state.selectedFilters.subject.length, parent.state.selectedFilters.level.length);
for(let j = 0; j < parent.state.selectedFilters.subject.length; j++) {
filterList = sortList.filter(item => item.title.indexOf(parent.state.selectedFilters.subject[j]) !== -1);
};
for(let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = filterList.filter(item => item.subTitle.indexOf(parent.state.selectedFilters.level[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);
};
}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{
var filterList = [];
if (
parent.state.selectedFilters.subject.length > 0 &&
parent.state.selectedFilters.level.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
);
}
for (let j = 0; j < parent.state.selectedFilters.level.length; j++) {
filterList = filterList.filter(
(item) =>
item.subTitle.indexOf(parent.state.selectedFilters.level[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
);
}
} 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;
}
return (
<div className="products-list d-flex flex-wrap">
{filterList.length > 0
? filterList.map((item, i) => (
<Product product={item} key={i} />
))
? filterList.map((item, i) => <Product product={item} key={i} />)
: null}
</div>
);
}
}

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

@ -1,10 +1,8 @@
.mobile-products-product {
}
.products-product {
width: calc(100% / 4);
padding: 10px;
margin-bottom: 20px;
text-align: center;
a {
width: 100%;
text-decoration: none;
@ -21,38 +19,16 @@
color: #02a1a6;
letter-spacing: -1px;
text-align: center;
margin-bottom: 15px;
}
}
&__notAvailabe {
font-family: numeralBold;
width: 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__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;
}
&--physical {
background-color: #7fc75d;
color: white;
padding: 5px 3px;
border-radius: 7px;
font-family: numeralMedium;
text-decoration: none;
}
}

@ -13,11 +13,6 @@ import List from "./List/index";
import Sort from "./Sort/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 "./index.scss";
@ -63,10 +58,11 @@ class Products extends Component {
render() {
const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
this.props.list ? (
!loading ? (
<>
<div className="products d-flex flex-column">
<Navbar page={"products"} />
@ -94,7 +90,7 @@ class Products extends Component {
)
) : null}
{window.innerWidth < 1000 ? (
this.props.list ? (
!loading ? (
<>
<div className="mobile-products d-flex flex-column">
<Navbar page={"products"} />
@ -119,7 +115,7 @@ class Products extends Component {
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
<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} />
))}
</div>
@ -142,6 +138,7 @@ class Products extends Component {
export default connect(
(state) => ({
list: state.book.list,
loading: state.book.loading,
// status: state.user.status,
}),
{ getList: book.list }
@ -156,142 +153,6 @@ Products.defaultProps = {
"جدیدترین",
"بزودی",
],
subjects: [
"فیزیک",
"زیست شناسی",
"شیمی آلی",
"روانشناسی",
"علوم تجربی",
"دین و زندگی",
],
subjects: ["فیزیک", "زیست", "شیمی", "روانشناسی", "علوم", "دین و زندگی"],
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