From 3cd90d8e032c12b40a8c24e25498e7e786859136 Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Mon, 16 Aug 2021 17:22:23 +0430 Subject: [PATCH] reza added faq and desktop products api --- src/Redux/actions/public.js | 6 + src/Redux/reducers/book.js | 2 +- src/Redux/reducers/public.js | 27 +++++ src/views/Faq/Collapse/index.js | 30 +++-- src/views/Faq/index.js | 156 ++++++++++++-------------- src/views/Products/List/index.js | 72 +++++++----- src/views/Products/Product/index.js | 51 +++------ src/views/Products/Product/index.scss | 42 ++----- src/views/Products/index.js | 151 +------------------------ 9 files changed, 197 insertions(+), 340 deletions(-) diff --git a/src/Redux/actions/public.js b/src/Redux/actions/public.js index 3df16dd..b02d22b 100644 --- a/src/Redux/actions/public.js +++ b/src/Redux/actions/public.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; diff --git a/src/Redux/reducers/book.js b/src/Redux/reducers/book.js index ea9cbd1..c394bf6 100644 --- a/src/Redux/reducers/book.js +++ b/src/Redux/reducers/book.js @@ -1,5 +1,5 @@ const initialState = { - loading: false, + loading: true, error: null, list: null, info: null, diff --git a/src/Redux/reducers/public.js b/src/Redux/reducers/public.js index 20afc77..bff629d 100644 --- a/src/Redux/reducers/public.js +++ b/src/Redux/reducers/public.js @@ -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": diff --git a/src/views/Faq/Collapse/index.js b/src/views/Faq/Collapse/index.js index 4cd27a5..0731dbf 100644 --- a/src/views/Faq/Collapse/index.js +++ b/src/views/Faq/Collapse/index.js @@ -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 (
setMessageActive(message.id, message.active)} + onClick={() => setFaqActive(message.id)} >

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}

@@ -80,3 +82,7 @@ export default class Collapse extends Component { ); } } + +export default connect(() => ({}), { + setFaqActive: publicApi.setFaqActive, +})(Collapse); diff --git a/src/views/Faq/index.js b/src/views/Faq/index.js index 747517b..ff17836 100644 --- a/src/views/Faq/index.js +++ b/src/views/Faq/index.js @@ -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 ? ( - <> -
- -
-

- سلام چطوری میتونم کمکتون کنم؟ -

-
- this.handleSearch(e.target.value)} - /> - + !loading ? ( + <> +
+ +
+

+ سلام چطوری میتونم کمکتون کنم؟ +

+
+ this.handleSearch(e.target.value)} + /> + +
+
+
+ {this.state.search === "" + ? faqList.map((item, i) => ( + + )) + : searchResult.map((item, i) => ( + + ))}
-
-
- {this.state.search === "" - ? this.state.messages.map((item, i) => ( - - )) - : this.state.searchedMessages.map((item, i) => ( - - ))}
+