reza added some change

temp
Reza_ashrafi 3 years ago
parent 81b8aa79b0
commit 79ae51e795
  1. 99
      src/components/Comments/index.js
  2. 17
      src/components/Footer/index.js
  3. 27
      src/components/ProductStatusCard/index.js
  4. 8
      src/redux/actions/public.js
  5. 8
      src/redux/reducers/blog.js
  6. 4
      src/redux/reducers/public.js
  7. 4
      src/views/Blogs/layouts/Hashtags.js
  8. 31
      src/views/Product/Desktop/index.js

@ -7,32 +7,33 @@ import Avatar from "../Avatar";
import moment from "jalali-moment"; import moment from "jalali-moment";
import StarRating from "../StarRating"; import StarRating from "../StarRating";
export const Comments = ({ comments }) => { export const Comments = ({ comments, indent }) => {
const [list, setList] = useState([]); const [list, setList] = useState([]);
useEffect(() => { useEffect(() => {
let indentComments = comments?.sort((i, j) => i.pid - j.pid); if (indent) {
let indentComments = comments?.sort((i, j) => i.pid - j.pid);
let result = [];
indentComments?.reduce((acc, comment) => {
let cmnt = {
id: comment?.id,
title: comment?.title,
text: comment?.text,
pid: comment?.pid,
childs: [],
};
let result = []; if (comment.pid) {
indentComments?.reduce((acc, comment) => { acc[comment.pid]?.childs?.push(cmnt);
let cmnt = { } else {
id: comment?.id, result?.push(cmnt);
title: comment?.title, }
text: comment?.text, acc[comment?.id] = cmnt;
pid: comment?.pid,
childs: [],
};
if (comment.pid) { return acc;
acc[comment.pid]?.childs?.push(cmnt); }, []);
} else { setList(result);
result?.push(cmnt); }
}
acc[comment?.id] = cmnt;
return acc;
}, []);
setList(result);
}, [comments]); }, [comments]);
const Comment = ({ comment }) => { const Comment = ({ comment }) => {
@ -42,27 +43,19 @@ export const Comments = ({ comments }) => {
<div className="flex flex-row items-end"> <div className="flex flex-row items-end">
<Avatar source={comment?.userImage} size={60} rounded={true} /> <Avatar source={comment?.userImage} size={60} rounded={true} />
<div className="flex flex-col"> <div className="flex flex-col">
<strong className="text-lg mr-2">{comment.id}</strong> <div className="flex items-center">
{/* {comment.pid && ( <strong className="text-base mr-2">{comment.userId}</strong>
<strong className="text-lg mr-2"> <span className="text-tiny text-greenBA mr-3">
{"در پاسخ به" + {comment?.userRoll || "خریدار محصول"}
" " + </span>
comments.filter( <div className="flex flex-row items-center mr-10 font-semibold">
(commentt) => commentt.id === comment.pid <StarRating />
)[0].id} </div>
</strong> </div>
)} */} <div
{/* <div
className="flex flex-row divide-x divide-gray-300 mt-4 divided items-center" className="flex flex-row divide-x divide-gray-300 mt-4 divided items-center"
style={{ direction: "ltr" }} style={{ direction: "ltr" }}
> ></div>
<span className="px-2 text-xs text-gray-500">
{comment?.product?.color}
</span>
<span className="px-2 text-xs text-gray-500">
{comment?.product?.name}
</span>
</div> */}
</div> </div>
</div> </div>
<div <div
@ -77,14 +70,12 @@ export const Comments = ({ comments }) => {
</span> </span>
</div> </div>
</header> </header>
<div className="flex flex-row py-4"> <div className="flex flex-row">
<div style={{ width: 60 }} className="min-h-full"></div> <div style={{ width: 60 }} className="min-h-full"></div>
<div className="flex flex-1 flex-col px-3"> <div className="flex flex-1 flex-col px-3">
<header className="w-full flex flex-row justify-between items-center"> <header className="w-full flex flex-row justify-between items-center">
{/* <div className="flex flex-row items-center"> <div>&nbsp;</div>
<StarRating /> <div className="flex flex-row items-center">
</div> */}
{/* <div className="flex flex-row items-center">
{comment?.status === true && ( {comment?.status === true && (
<> <>
<img src={positiveIcon} alt="" className="w-6 ml-2" /> <img src={positiveIcon} alt="" className="w-6 ml-2" />
@ -101,7 +92,7 @@ export const Comments = ({ comments }) => {
</span> </span>
</> </>
)} )}
</div> */} </div>
</header> </header>
<p className="text-gray-500 h-auto leading-7 mt-2"> <p className="text-gray-500 h-auto leading-7 mt-2">
{comment?.text} {comment?.text}
@ -111,18 +102,20 @@ export const Comments = ({ comments }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex pr-12"> {indent && (
{comment?.childs?.map((object, index) => ( <div className="flex pr-12">
<Comment comment={object} key={index} /> {comment?.childs?.map((object, index) => (
))} <Comment comment={object} key={index} />
</div> ))}
</div>
)}
</div> </div>
); );
}; };
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col divide-y divide-solid divide-gray-200">
{list?.map((comment, index) => ( {(indent ? list : comments)?.map((comment, index) => (
<Comment comment={comment} key={index} /> <Comment comment={comment} key={index} />
))} ))}
</div> </div>

@ -29,16 +29,21 @@ const FooterDesign1 = ({ color, bg, items, hasHeader }) => {
</p> </p>
</div> </div>
</div> </div>
<div className="mr-8 text-lg flex flex-col font-black transform translate-y-0.5">
<div className="mr-8 text-lg font-black transform translate-y-0.5"> <a href="tel:654412 021" className="text-left mb-5">
<h1 className="text-left mb-5">654412 021</h1> 654412 021
<h1>Info[at]danovin.ir</h1> </a>
<a href="https://info@danovin.ir">Info@danovin.ir</a>
</div> </div>
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
{/* <img src={iosIcon} alt="" className="cursor-pointer" /> */} {/* <img src={iosIcon} alt="" className="cursor-pointer" /> */}
<a href="http://danovin.ir/app.apk" download> <a
<img src={bazarIcon} alt="" className="w-52 mr-6" /> href="http://danovin.ir/app.apk"
download
className="py-4 px-5 text-base font-bold rounded-md bg-blueC0 transition-all transform hover:scale-110 text-white"
>
دانلود اپلیکیشن اندروید
</a> </a>
</div> </div>
</div> </div>

@ -30,7 +30,7 @@ const ProductStatusCard = ({
shippingTime, shippingTime,
}) => { }) => {
return ( return (
<section className="w-full" style={{minWidth: 350 }}> <section className="w-full" style={{ minWidth: 350 }}>
<div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200"> <div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200">
<div className="flex flex-row items-center justify-between py-3"> <div className="flex flex-row items-center justify-between py-3">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
@ -39,7 +39,6 @@ const ProductStatusCard = ({
<div className="text-sm">{`توصیه به خرید توسط ${suggestedCounter} نفر`}</div> <div className="text-sm">{`توصیه به خرید توسط ${suggestedCounter} نفر`}</div>
</div> </div>
</div> </div>
<img src={circle} alt="" className="w-5" />
</div> </div>
{seller && ( {seller && (
<div className="flex flex-row items-center justify-between py-3"> <div className="flex flex-row items-center justify-between py-3">
@ -61,7 +60,6 @@ const ProductStatusCard = ({
</div> </div>
</div> </div>
</div> </div>
<img src={circle} alt="" className="w-5" />
</div> </div>
{garanty && ( {garanty && (
<div className="flex flex-row items-center justify-between py-3"> <div className="flex flex-row items-center justify-between py-3">
@ -71,24 +69,23 @@ const ProductStatusCard = ({
<div className="flex flex-row gap-1 text-sm">{garanty}</div> <div className="flex flex-row gap-1 text-sm">{garanty}</div>
</div> </div>
</div> </div>
<img src={circle} alt="" className="w-5" />
</div> </div>
)} )}
{offerPrice && (
<div className="flex flex-col items-center py-3"> <div className="flex flex-col items-center py-3">
<p className="text-xl text-blueC0 font-bold"> <p className="text-6xl text-blueC0 font-bold">
{separate(price)} {separate(price)}
<span className="text-sm text-gray-700 font-light mr-1"> <span className="text-sm text-gray-700 font-light mr-1">تومان</span>
تومان </p>
</span> {offerPrice && (
</p>
<p className="text-xs font-light text-gray-600 mt-2"> <p className="text-xs font-light text-gray-600 mt-2">
با خرید این کالا با خرید این کالا
<span>{offerPrice}</span> <span className="text-sm font-bold">{' ' + separate(price - offerPrice) + ' ' + 'تومان '}</span>
صرفه جویی کنید صرفه جویی کنید
</p> </p>
</div> )}
)} </div>
<Button <Button
title="اضافه کردن به سبد خرید" title="اضافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}

@ -1,4 +1,5 @@
import proxy from "../proxy"; import proxy from "../proxy";
const publicApi = { const publicApi = {
setOverLayer: (data) => async (dispatch) => setOverLayer: (data) => async (dispatch) =>
await dispatch({ type: "public/setOverLayer", data }), await dispatch({ type: "public/setOverLayer", data }),
@ -19,7 +20,6 @@ const publicApi = {
await proxy.get("public/vod/bookCourse", data, { dispatch }); await proxy.get("public/vod/bookCourse", data, { dispatch });
await proxy.get("book/info", data2, { dispatch }); await proxy.get("book/info", data2, { dispatch });
}, },
bookSection: bookSection:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
@ -28,12 +28,6 @@ const publicApi = {
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
await proxy.get("public/contact", data, { dispatch }), await proxy.get("public/contact", data, { dispatch }),
getBlogList: (data) => async (dispatch) =>
await proxy.get("public/blogList", data, { dispatch }),
getBlogInfo: (data) => async (dispatch) =>
await proxy.get("public/blogInfo", data, { dispatch }),
setSubscribe: (data) => async (dispatch) => setSubscribe: (data) => async (dispatch) =>
await dispatch({ type: "public/setSubscribe", data }), await dispatch({ type: "public/setSubscribe", data }),
getProvince: getProvince:

@ -40,7 +40,13 @@ export default function blog(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "public/blogList": case "public/blogList":
return { ...state, loading: false, list: data, error: null }; return {
...state,
loading: false,
list: data,
hashtags: [...new Set(data.map((object) => object.tag))],
error: null,
};
case "public/blogInfo": case "public/blogInfo":
return { ...state, loading: false, error: null, blog: data }; return { ...state, loading: false, error: null, blog: data };
case "blog/loading": case "blog/loading":

@ -175,10 +175,6 @@ export default function publicApi(state = initialState, action) {
return { ...state, loading: false, error: null, arList: data }; return { ...state, loading: false, error: null, arList: data };
case "public/contact": case "public/contact":
return { ...state, loading: false, error: null, contactData: data }; return { ...state, loading: false, error: null, contactData: data };
case "public/blogList":
return { ...state, loading: false, error: null, blogList: data };
case "public/blogInfo":
return { ...state, loading: false, error: null, blog: data };
case "public/setSubscribe": case "public/setSubscribe":
return { ...state, loading: false, error: null, selectedSubscribe: data }; return { ...state, loading: false, error: null, selectedSubscribe: data };
case "public/province": case "public/province":

@ -10,8 +10,8 @@ export const Hashtags = ({ hashtags }) => {
<img src={arrowIcon} alt="" className="w-7" /> <img src={arrowIcon} alt="" className="w-7" />
<ul className="list-none flex justify-around items-center lg:flex-1 lg:ml-0 ml-4"> <ul className="list-none flex justify-around items-center lg:flex-1 lg:ml-0 ml-4">
{hashtags.map((hashtag, index) => ( {hashtags.map((hashtag, index) => (
<li className="text-tiny font-semibold cursor-pointer w-32 lg:px-0 flex-1 lg:w-auto" style={{ color: hashtag.color }}> <li className="text-tiny font-semibold cursor-pointer w-32 lg:px-0 flex-1 lg:w-auto">
{"#" + " " + hashtag.title} {"#" + " " + hashtag}
</li> </li>
))} ))}
</ul> </ul>

@ -1,10 +1,14 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
//components
import ProductOverAll from "./ProductOverAll"; import ProductOverAll from "./ProductOverAll";
import ProductTab from "../../../components/ProductTab"; import ProductTab from "../../../components/ProductTab";
import ProductSuggestions from "../../../components/ProductSuggestion"; import ProductSuggestions from "../../../components/ProductSuggestion";
import Rate from "../Rate"; import Rate from "../Rate";
import Comments from "../../../components/Comments"; import Comments from "../../../components/Comments";
import QandA from "../../../components/QandA"; import QandA from "../../../components/QandA";
import Table from "../../Video/components/Desktop/Table";
const DesktopProductLayout = () =>{ const DesktopProductLayout = () =>{
useEffect(() => { useEffect(() => {
@ -13,7 +17,30 @@ const DesktopProductLayout = () =>{
return ( return (
<div className="w-11/12 flex flex-col overflow-y-hidden mt-3 mb-64 items-center"> <div className="w-11/12 flex flex-col overflow-y-hidden mt-3 mb-64 items-center">
<ProductOverAll /> <ProductOverAll />
<ProductTab /> <ProductTab
tabs={[
{
title: "مشخصات",
components: <Table />,
},
{
title: "نقد و بررسی",
components: (
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
این بخش فعلا قابل دسترسی نیست.
</div>
),
},
{
title: "پرسش و پاسخ",
components: (
<div className="bg-gray-100 rounded-md mt-4 w-full flex justify-center items-center h-40 text-green4F text-tiny">
این بخش فعلا قابل دسترسی نیست.
</div>
),
},
]}
/>
<div className="w-full"> <div className="w-full">
<ProductSuggestions /> <ProductSuggestions />
</div> </div>
@ -21,7 +48,7 @@ const DesktopProductLayout = () =>{
<Rate desktop /> <Rate desktop />
</div> </div>
<div className="w-4/5"> <div className="w-4/5">
<Comments /> <Comments indent={false} />
{/* <QandA /> */} {/* <QandA /> */}
</div> </div>

Loading…
Cancel
Save