From 8a98e53e4d6a5bfb5303111a7644e08f34d8a9f5 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Mon, 27 Dec 2021 18:02:04 +0330 Subject: [PATCH] reza added Product --- package.json | 1 + src/assets/images/user.png | Bin 0 -> 3141 bytes src/components/Button/index.js | 22 +++ src/components/Header/index.js | 32 ++++ src/components/Progress/index.js | 2 +- src/components/StarRating/index.js | 16 ++ src/components/index.js | 12 ++ src/redux/actions/book.js | 5 + src/redux/reducers/book.js | 2 + src/redux/reducers/public.js | 2 +- src/router.js | 4 +- src/views/Home/Portrait/Private/Shop/index.js | 15 +- src/views/Product/Comment/index.js | 26 ++++ src/views/Product/Rate/index.js | 55 +++++++ src/views/Product/index.js | 138 ++++++++++++++++++ src/views/Products/index.js | 2 +- yarn.lock | 15 +- 17 files changed, 333 insertions(+), 16 deletions(-) create mode 100644 src/assets/images/user.png create mode 100644 src/components/Button/index.js create mode 100644 src/components/Header/index.js create mode 100644 src/components/StarRating/index.js create mode 100644 src/components/index.js create mode 100644 src/views/Product/Comment/index.js create mode 100644 src/views/Product/Rate/index.js create mode 100644 src/views/Product/index.js diff --git a/package.json b/package.json index 63f240c..7d9f7f9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-redux": "^7.2.6", "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", + "react-star-rating-component": "^1.4.1", "react-toastify": "^8.1.0", "react-wavesurfer": "^0.8.6", "redux": "^4.1.2", diff --git a/src/assets/images/user.png b/src/assets/images/user.png new file mode 100644 index 0000000000000000000000000000000000000000..ccf1e39109ee206f1ade540d185e958f07577397 GIT binary patch literal 3141 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 literal 0 HcmV?d00001 diff --git a/src/components/Button/index.js b/src/components/Button/index.js new file mode 100644 index 0000000..ca558a3 --- /dev/null +++ b/src/components/Button/index.js @@ -0,0 +1,22 @@ +import React from "react"; + +export default function Button({ + title, + backgroundColor, + color, + border, + width, + bgOpacity, +}) { + return ( + + ); +} diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 0000000..cfbc518 --- /dev/null +++ b/src/components/Header/index.js @@ -0,0 +1,32 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import {connect} from 'react-redux'; +import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; +import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; + +function Header({ title, link, isDark }) { + return ( +
+ + {title} + + + + +
+ ); +} + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark +}) + +const mapDispatchToProps = { + +} + +export default connect(mapStateToProps, mapDispatchToProps)(Header); diff --git a/src/components/Progress/index.js b/src/components/Progress/index.js index 6c1a7f5..b6c0c7d 100644 --- a/src/components/Progress/index.js +++ b/src/components/Progress/index.js @@ -8,7 +8,7 @@ function Progress({ percent }) { }, 1000); }, [percent]); return ( -
+
setRating(value)} + /> + ); +} + +export default StarRating; diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..f4a3016 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,12 @@ +export {default as BG} from './BG'; +export {default as Button} from './Button'; +export {default as Dots} from './Dots'; +export {default as FloatWithMouse} from './FloatWidthMouse'; +export {default as JolPlayer} from './JolPlayer'; +export {default as Navbar} from './Navbar'; +export {default as Progress} from './Progress'; +export {default as Search} from './Search'; +export {default as Select} from './Select'; +// export {default as Wave} from './Wave'; + + diff --git a/src/redux/actions/book.js b/src/redux/actions/book.js index baa730c..f74ec70 100644 --- a/src/redux/actions/book.js +++ b/src/redux/actions/book.js @@ -4,12 +4,17 @@ const book = { (data = {}) => async (dispatch) => await proxy.get("book/list", data, { dispatch }), + info: + (data = {}) => + async (dispatch) => + await proxy.get("book/info", data, { dispatch }), setLessonActive: (data) => async (dispatch) => await dispatch({ type: "book/lesson/active", data: data }), gradeFilter: (data) => async (dispatch) => await dispatch({ type: "book/gradeFilter", data: data }), sortFilter: (data) => async (dispatch) => await dispatch({ type: "book/sortFilter", data: data }), + // update: // (data = {}, data2 = {}) => // async (dispatch : Dispatch) => { diff --git a/src/redux/reducers/book.js b/src/redux/reducers/book.js index ebe017c..a29204a 100644 --- a/src/redux/reducers/book.js +++ b/src/redux/reducers/book.js @@ -59,6 +59,8 @@ export default function book(state = initialState, action) { filterResult: data, error: null, }; + case "book/info": + return { ...state, loading: false, info: data, error: null }; case "book/lesson/active": return { ...state, diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index c615a03..0430a39 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,7 +1,7 @@ import location from "../../utils/location"; const initialState = { - isDark: localStorage.getItem("isDark") || false, + isDark: localStorage.getItem("isDark") || true, homeData: [], newProducts: [], levels: [], diff --git a/src/router.js b/src/router.js index a308741..32de240 100644 --- a/src/router.js +++ b/src/router.js @@ -7,6 +7,7 @@ import BG from "./components/BG"; import _ from "lodash"; import Home from "./views/Home"; import Products from "./views/Products"; +import Product from "./views/Product"; // import VideoTube from "./views/Home/VideoTube"; function Router({ isDark }) { @@ -15,7 +16,7 @@ function Router({ isDark }) {
} /> } /> + } />
-
- - فروشگاه - - -
+
    { return (
  • - + {index === 0 ? ( +
    +
    + + {comment?.name} +
    +
    +
    +

    {comment?.text}

    +
+ ); +} + +export default Comment; + +Comment.defaultProps = { + comment: { + name: "سورنا عابدی", + text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", + }, +}; diff --git a/src/views/Product/Rate/index.js b/src/views/Product/Rate/index.js new file mode 100644 index 0000000..8fc68ae --- /dev/null +++ b/src/views/Product/Rate/index.js @@ -0,0 +1,55 @@ +import React from "react"; +import StarRating from "../../../components/StarRating"; +import Progress from "../../../components/Progress"; + +function Rate({ avarage, all, fields }) { + return ( +
+
+ + {avarage} + + + {all} +
+
    + {fields.map((item, index) => ( +
  • + {item.name} + + {item.percent + "%"} +
  • + ))} +
+
+ ); +} + +export default Rate; + +Rate.defaultProps = { + avarage: 4.8, + all: 4780, + fields: [ + { + name: "5 ستاره", + percent: 50, + }, + { + name: "4 ستاره", + percent: 50, + }, + { + name: "3 ستاره", + percent: 50, + }, + { + name: "2 ستاره", + percent: 50, + }, + { + name: "1 ستاره", + percent: 50, + }, + ], +}; diff --git a/src/views/Product/index.js b/src/views/Product/index.js new file mode 100644 index 0000000..5d715d6 --- /dev/null +++ b/src/views/Product/index.js @@ -0,0 +1,138 @@ +import React, { useState, useEffect } from "react"; +import { connect } from "react-redux"; +import { book } from "../../redux/actions"; +import location from "../../utils/location"; +import Button from "../../components/Button"; +import Header from "../../components/Header"; +import Comment from "./Comment"; +import Rate from "./Rate"; + +export const Product = ({ productType, getInfo, book, grades, isDark }) => { + useEffect(() => { + getInfo({ id: location.getId() }); + }, []); + return ( + <> + {/* Portrait */} +
+
+ +
+

+ {book?.name} +

+
+ {"پایه" + " " + grades[book?.gradeId]} +
+
+
+
    +
  • + {book?.pagesNum}
    صفحه +
  • +
  • + {"فیزیکی - دیجیتالی"}
    در دسترس +
  • +
  • + {book?.rate}
    امتیاز +
  • +
+

+ نسخه محصول را انتخاب کنید +

+
+
+
+
+
+
+
+
+

+ خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ + ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ + ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ + ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ + ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ + ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ + ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ + ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} +

+
+
+
+ +
+
+ {[0, 1, 2, 2].map((comment, index) => ( + + ))} +
+
+ + ); +}; + +const mapStateToProps = (state) => ({ + book: state.book.info, + grades: state.publicApi.grades, + isDark: state.publicApi.isDark, +}); + +const mapDispatchToProps = { getInfo: book.info }; + +export default connect(mapStateToProps, mapDispatchToProps)(Product); + +Product.defaultProps = { + productType: "book", +}; diff --git a/src/views/Products/index.js b/src/views/Products/index.js index 96dc731..7f626e2 100644 --- a/src/views/Products/index.js +++ b/src/views/Products/index.js @@ -13,7 +13,7 @@ const Product = ({ productsType, product, index, grades }) => { <> {productsType === "کتاب" && (