Danovin
/
application_17
5
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

update src/views/Blog/index.js, Suggest.js and src/views/ShoppingCart/index.js

Browse Source
master
Reza_ashrafi 2 years ago
parent f128c15c5e
commit 42e00c7ec0
3 changed files with 183 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 96
      src/views/Blog/index.js
  2. 2
      src/views/Blogs/layouts/Suggest.js
  3. 268
      src/views/ShoppingCart/index.js

96
src/views/Blog/index.js
Unescape View File

@ -2,14 +2,13 @@ import React, { useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { blog, publicApi } from "../../redux/actions"; import { blog, publicApi } from "../../redux/actions";
import { Carousel } from "@trendyol-js/react-carousel"; import { Carousel } from "@trendyol-js/react-carousel";
import location from "../../utils/location"; import { useParams } from "react-router-dom";
import Hashtags from "../Blogs/layouts/Hashtags"; //components
import Header from "../Blogs/layouts/Header"; import Header from "../Blogs/layouts/Header";
import Suggest from "../Blogs/layouts/Suggest"; import Suggest from "../Blogs/layouts/Suggest";
import New from "../Blogs/layouts/New"; import New from "../Blogs/layouts/New";
import Avatar from "../../components/Avatar"; import Avatar from "../../components/Avatar";
import { useParams } from "react-router-dom";
//assets //assets
import arrow from "../../assets/icons/dropdown-blue.svg"; import arrow from "../../assets/icons/dropdown-blue.svg";
@ -21,64 +20,21 @@ export const Blog = ({
headerOptions, headerOptions,
getList, getList,
blogs, blogs,
activeBlog,
}) => { }) => {
let { id } = useParams(); let { id } = useParams();
// let id = location.getId();
useEffect(() => { useEffect(() => {
getList();
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
getInfo({ id: location.getId() }); }, []);
if (blogs.length === 0) {
getList();
}
}, [id]);
useEffect(() => {
getInfo({ id: location.getId() });
}, [activeBlog]);
useEffect(() => { useEffect(() => {
// alert(); window.scroll({ top: 0, behavior: "smooth" });
window.scrollTo(0, 0); getInfo({ id });
}, [id]); }, [id]);
const suggestionSlider = React.useCallback(() => { return blogs?.length ? (
return ( <div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-10 pb-24">
<Carousel
show={4}
slide={2}
swiping={true}
useArrowKeys={true}
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
>
{blogs
?.filter((blog) => Number(blog?.id) !== Number(id))
.map((blog, index) => (
<Suggest blog={blog} key={index} />
))}
</Carousel>
);
}, [blogs, id]);
return (
<div className="flex flex-col lg:w-11/12 mx-auto lg:py-24 lg:px-0 px-4 lg:pb-0 pb-24 ">
<div <div
className="flex lg:hidden w-full rounded-md overflow-hidden relative" className="flex lg:hidden w-full rounded-md overflow-hidden relative"
style={{ style={{
@ -169,11 +125,43 @@ export const Blog = ({
{/* mobile */} {/* mobile */}
{/* desktop */} {/* desktop */}
<div className="hidden lg:flex w-full relative ltr"> <div className="hidden lg:flex w-full relative ltr">
<suggestionSlider /> <Carousel
show={4}
slide={2}
swiping={true}
useArrowKeys={true}
key={id}
transition={0.5}
rightArrow={
<img
className="absolute top-1/2 transform -rotate-90 -translate-y-1/2 cursor-pointer p-0"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer rotate-90 p-2 -left-3"
src={arrow}
alt=""
// onClick={(e) => e.stopPropagation()}
/>
}
>
{blogs
?.slice(0, 10)
?.filter((blog) => Number(blog?.id) !== Number(id))
.map((blog, index) => (
<Suggest blog={blog} key={index} />
))}
</Carousel>
</div> </div>
{/* desktop */} {/* desktop */}
</div> </div>
); ) : <div className="w-full h-screen">
</div>;
}; };
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({

2
src/views/Blogs/layouts/Suggest.js
Unescape View File

@ -20,7 +20,7 @@ export const Suggest = ({ blog }) => {
className="w-full rounded-md" className="w-full rounded-md"
style={{ height: "calc(100vw / 12 * 11 / 3 / 21 * 9)" }} style={{ height: "calc(100vw / 12 * 11 / 3 / 21 * 9)" }}
/> />
<strong className="text-lg my-4 leading-7">{blog?.title}</strong> <strong className="text-tiny my-4 leading-7">{blog?.title}</strong>
</Link> </Link>
); );
}; };

268
src/views/ShoppingCart/index.js
Unescape View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useMemo, useCallback } from "react";
import { import {
userProduct, userProduct,
userFactor, userFactor,
@ -24,7 +24,6 @@ import { connect } from "react-redux";
function ShoppingCart({ function ShoppingCart({
isDark, isDark,
isMobile, isMobile,
list,
factorInfo, factorInfo,
user, user,
getList, getList,
@ -37,11 +36,11 @@ function ShoppingCart({
loading, loading,
setDialog, setDialog,
isLogin, isLogin,
useless,
}) { }) {
const [phase, setPhase] = useState("products"); const [phase, setPhase] = useState("products");
const navigation = useNavigate(); const navigation = useNavigate();
useEffect(() => { useEffect(() => {
console.log("gl1")
if (isLogin) getList(); if (isLogin) getList();
getFactorInfo({ userId: user?.id }); getFactorInfo({ userId: user?.id });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
@ -53,36 +52,38 @@ function ShoppingCart({
} }
}, [phase]); }, [phase]);
const productsLength = userProducts?.filter( const productsLength = useMemo(() => {
(product) => product.condition < 2 return userProducts?.filter((product) => product.condition < 2)?.length;
)?.length; }, [userProducts]);
const next = { const next = useMemo(() => {
products: () => return {
productsLength products: () =>
? userProducts.filter((object) => object.productType === 2).length > 0 productsLength
? setPhase("deliveryForm") ? userProducts.filter((object) => object.productType === 2)?.length
: setDialog({ ? setPhase("deliveryForm")
type: "confirm", : setDialog({
text: "به درگاه پرداخت بریم؟", type: "confirm",
open: true, text: "به درگاه پرداخت بریم؟",
accept: () => payFactor({ userId: user.id }), open: true,
}) accept: () => payFactor({ userId: user.id }),
: toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."), })
deliveryForm: () => : toast.info("ابتدا یک محصول را به سبد خرید خود اضافه کنید."),
setDialog({ deliveryForm: () =>
type: "confirm", setDialog({
text: "به درگاه پرداخت بریم؟", type: "confirm",
open: true, text: "به درگاه پرداخت بریم؟",
accept: () => payFactor({ userId: user.id }), open: true,
}), accept: () => payFactor({ userId: user.id }),
profile: () => { }),
console.log("Set profile"); profile: () => {
console.log("Go to shaparak"); console.log("Set profile");
}, console.log("Go to shaparak");
}; },
};
}, [userProducts, user]);
const Table = () => { const Table = React.useCallback(() => {
return ( return (
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<header className="w-full flex gap-10"> <header className="w-full flex gap-10">
@ -94,11 +95,11 @@ function ShoppingCart({
</strong> </strong>
</header> </header>
<ul className="w-full mt-2 list-none p-0"> <ul className="w-full mt-2 list-none p-0">
{list {userProducts
.sort((a, b) => a?.id - b?.id) ?.sort((a, b) => a?.id - b?.id)
.map( ?.map(
(product, index) => (product, index) =>
product.condition < 2 && ( product?.condition < 2 && (
<Product loading={loading} key={index} product={product} /> <Product loading={loading} key={index} product={product} />
) )
)} )}
@ -108,90 +109,97 @@ function ShoppingCart({
</div> </div>
</div> </div>
); );
}; }, [userProducts]);
const PriceStatus = ({ name, value, type }) => { const PriceStatus = useCallback(
return isMobile ? ( ({ name, value, type }) => {
<div className="w-full flex justify-between py-3"> return (
<strong className="font-semibold text-tiny dark:text-white text-blue5F"> <React.Fragment>
{name} <div className="w-full flex lg:hidden justify-between py-3">
</strong> <strong className="font-semibold text-tiny dark:text-white text-blue5F">
<span {name}
className="font-medium text-lg dark:text-white" </strong>
style={{ <span
color: !isDark className="font-medium text-lg dark:text-white"
? type === "error" style={{
? "#F1420D" color: !isDark
: "rgb(6, 186, 206)" ? type === "error"
: "", ? "#F1420D"
}} : "rgb(6, 186, 206)"
> : "",
{separate(Math.floor(value))} }}
<span >
style={{ {separate(Math.floor(value))}
color: !isDark ? (type === "error" ? "#F1420D" : "") : "", <span
}} style={{
className="text-sm mr-2" color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
> }}
تومان className="text-sm mr-2"
</span> >
</span> تومان
</div> </span>
) : ( </span>
<div className="w-full flex justify-between py-4"> </div>
<strong className="font-semibold text-tiny dark:text-white text-blue5F"> <div className="w-full hidden lg:flex justify-between py-4">
{name} <strong className="font-semibold text-tiny dark:text-white text-blue5F">
</strong> {name}
<span </strong>
className="font-medium text-lg dark:text-white" {value ? (
style={{ <span
color: !isDark className="font-medium text-lg dark:text-white"
? type === "error" style={{
? "#F1420D" color: !isDark
: "rgb(6, 186, 206)" ? type === "error"
: "", ? "#F1420D"
}} : "rgb(6, 186, 206)"
> : "",
{separate(Math.floor(value))} }}
<span >
style={{ {separate(Math.floor(value))}
color: !isDark ? (type === "error" ? "#F1420D" : "") : "", <span
}} style={{
className="text-sm mr-2" color: !isDark ? (type === "error" ? "#F1420D" : "") : "",
> }}
تومان className="text-sm mr-2"
</span> >
</span> تومان
</div> </span>
); </span>
}; ) : null}
</div>
</React.Fragment>
);
},
[useless]
);
const layouts = { const layouts = useMemo(() => {
products: isMobile ? ( return {
<> products: isMobile ? (
{list <>
.sort((a, b) => a?.id - b?.id) {userProducts
.map( .sort((a, b) => a?.id - b?.id)
(product, index) => .map(
product.condition < 2 && ( (product, index) =>
<Product loading={loading} key={index} product={product} /> product.condition < 2 && (
) <Product loading={loading} key={index} product={product} />
)} )
<Code /> )}
</> <Code />
) : productsLength ? ( </>
<Table /> ) : productsLength ? (
) : ( <Table />
<Empty ) : (
text="سبد خرید شما خالی است." <Empty
buttonText="فروشگاه" text="سبد خرید شما خالی است."
buttonAction={() => navigation("/products")} buttonText="فروشگاه"
/> buttonAction={() => navigation("/products")}
// <strong className="text-blueC0">سبد خرید شما خالی است.</strong> />
), ),
deliveryForm: <DeliveryForm setPhase={setPhase} />, deliveryForm: <DeliveryForm setPhase={setPhase} />,
address: <Address setPhase={setPhase} />, address: <Address setPhase={setPhase} />,
}; };
}, [isMobile, userProducts, loading]);
return isMobile ? ( return isMobile ? (
<div className="w-full flex flex-col px-4 pb-24"> <div className="w-full flex flex-col px-4 pb-24">
@ -221,11 +229,13 @@ function ShoppingCart({
<strong className="font-bold text-tiny text-blue5F dark:text-white"> <strong className="font-bold text-tiny text-blue5F dark:text-white">
جمع کل سبد خرید جمع کل سبد خرید
</strong> </strong>
<p className="font-medium text-greenBA text-lg dark:text-white"> {factorInfo?.payFactor ? (
{separate(productsLength ? factorInfo?.payPrice : 0) + <p className="font-medium text-greenBA text-lg dark:text-white">
" " + {separate(factorInfo?.payPrice) +
"تومان"} " " +
</p> "تومان"}
</p>
) : null}
</div> </div>
<div <div
className="w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4" className="w-full rounded-md flex justify-center items-center py-2.5 px-3 mt-5 mb-4"
@ -276,8 +286,7 @@ function ShoppingCart({
}`} }`}
> >
<div className="flex flex-col flex-1">{layouts[phase]}</div> <div className="flex flex-col flex-1">{layouts[phase]}</div>
{console.log(list)} {userProducts?.filter((product) => product?.condition < 2)?.length
{list?.filter((product) => product?.condition < 2)?.length
? phase !== "address" && ( ? phase !== "address" && (
<div <div
className="flex flex-col w-1/4 p-10 bg-white shadow-all rounded-md px-4 py-4" className="flex flex-col w-1/4 p-10 bg-white shadow-all rounded-md px-4 py-4"
@ -286,17 +295,21 @@ function ShoppingCart({
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b"> <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
<PriceStatus <PriceStatus
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={productsLength ? factorInfo?.sumPrice : ""} value={factorInfo?.sumPrice ? factorInfo?.sumPrice : " "}
type="normal" type="normal"
/> />
<PriceStatus <PriceStatus
name="هزینه حمل و نقل" name="هزینه حمل و نقل"
value={productsLength ? factorInfo?.transportPrice : 0} value={
factorInfo?.transportPrice
? factorInfo?.transportPrice
: " "
}
type="error" type="error"
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={productsLength ? factorInfo?.offPrice : ""} value={factorInfo?.offPrice ? factorInfo?.offPrice : " "}
type="error" type="error"
/> />
{/* <PriceStatus {/* <PriceStatus
@ -398,7 +411,6 @@ function ShoppingCart({
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isDark: state.publicApi.isDark, isDark: state.publicApi.isDark,
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
list: state.userProduct.list,
payPrice: state.userProduct.sum, payPrice: state.userProduct.sum,
factorInfo: state.userFactor.info, factorInfo: state.userFactor.info,
user: state.user.status, user: state.user.status,

Write Preview
Loading…
Cancel
Save