Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/nqq203/udemy-app into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@nqq203
nqq203 committed Apr 19, 2024
2 parents ded3b1d + 7bd407c commit 969e846
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 116 deletions.
26 changes: 14 additions & 12 deletions src/components/Card/CheckoutCourseCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import Tag from '../Tags/Tags';
import { Button } from '../../components/Button/Button';
import labelIcon from '../../page/icons/label.png';
import Rating from '@mui/material/Rating';
import {
OuterDiv,
Box1,
Expand All @@ -28,11 +29,11 @@ const CheckoutCourseCard = (props) => {

const {
id = 1,
img = '',
imageUrl = '',
link = '/',
ttl = 'xxx',
authors = ['xxx'],
ratings = { totalratings: 0, count: 0 },
ratings = 0,
duration = 0,
lectures = 0,
level = 'All',
Expand All @@ -46,22 +47,22 @@ const CheckoutCourseCard = (props) => {
<OuterDiv to={link} style={extraCss}>
<Box1>
<ImgBox>
<Img src={img} alt='course thumbnail' />
<Img src={imageUrl} alt='course thumbnail' />
</ImgBox>
<Details>
<Title>{ttl}</Title>
<Authors>By {authors?.join(', ')?.toString()}</Authors>
<Ratings>
{bestSeller ? <Tag /> : ''}
<RatingStats>
<RatingNumber>{ratings.totalratings}</RatingNumber>
<RatingCount>({ratings.count} ratings)</RatingCount>
<Rating name="half-rating-read" value={ratings} precision={0.5} readOnly />
<RatingCount>({ratings} ratings)</RatingCount>
</RatingStats>
</Ratings>
<CourseDetails>
<span>{duration} total hours</span>
<span className='crsDet, css.mid'>{lectures} lectures</span>
<span>{level} Levels</span>
<li style={{ listStyleType: 'none' }}>{duration} total hours</li>
<li className='crsDet, css.mid'>{lectures} lectures </li>
<li>{level} Levels</li>
</CourseDetails>
</Details>
</Box1>
Expand All @@ -74,6 +75,7 @@ const CheckoutCourseCard = (props) => {
color='var(--color-purple-300)'
margin='0.2rem'
padding='0'

>
Remove
</Button>
Expand All @@ -93,16 +95,16 @@ const CheckoutCourseCard = (props) => {
<Price>
{new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
currency: 'VND',
}).format(price)}
</Price>
{/* <PriceTagIcon src={labelIcon} alt='price tag' /> */}
<Discount>
{/* <Discount>
{new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
currency: 'VND',
}).format(discount)}
</Discount>
</Discount> */}
</PriceDetails>
</Box23>
</OuterDiv>
Expand Down
17 changes: 12 additions & 5 deletions src/components/Card/CheckoutCourseCardStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { Link } from "react-router-dom";

export const OuterDiv = styled(Link)`
width: 100%;
padding: 0.5rem;
padding: 5px;
margin: 10px 0;
display: flex;
align-items: flex-start;
border: 1px solid var(--color-gray-500);
Expand Down Expand Up @@ -69,8 +70,7 @@ export const Ratings = styled.div`
`;

export const RatingStats = styled.div`
width: 150px;
margin: 0 0.5rem;
align-items: center;
display: flex;
justify-content: space-between;
font-size: 0.8rem;
Expand All @@ -85,25 +85,32 @@ export const RatingCount = styled.span`
font-size: 0.8rem;
`;

export const CourseDetails = styled.div`
export const CourseDetails = styled.ul`
display: flex;
flex-direction: row;
gap: 25px;
padding-left: 0px;
font-size: 0.8rem;
color: var(--color-gray-300);
`;

export const Box23 = styled.div`
display: flex;
margin-left: auto;
margin-right: 1rem;
`;

export const ActionBox = styled.div`
margin: 0 1rem;
width: 100px;√
width: 100px;
display: flex;
flex-direction: column;
align-items: flex-end;
`;

export const PriceDetails = styled.div`
font-size: 1rem;
display: flex-end;
`;

export const Price = styled.div`
Expand Down
126 changes: 33 additions & 93 deletions src/page/ShoppingCart/ShoppingCart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,17 @@ import {
} from "./ShoppingCartStyle";
import { useQuery } from "react-query";
import { callApiGetCart } from "../../api/cart";

import { useAuth } from "../../context/AuthContext";
const ShoppingCart = () => {
const [coupon, setCoupon] = useState("");
const [appliedCoupon, setAppliedCoupon] = useState("");
const [cartData, setCartData] = useState([]);
const [totalPrice, setTotalPrice] = useState(0);
const { isAuthenticated } = useAuth()
// const token = localStorage.getItem('accessToken')
// console.log(token)
const { data, isSuccessFetch, isLoading,isError } = useQuery(
// let totalPrice = 0
const { data, isSuccessFetch, isLoading,isError, refetch } = useQuery(
"cart", () => callApiGetCart(), {
onSuccess: (data) => {
console.log(localStorage.getItem('accessToken'));
Expand All @@ -49,80 +52,25 @@ const ShoppingCart = () => {
staleTime: Infinity,
}
)
useEffect(() => {
if(!isAuthenticated) {
// setUsername(null)
}
refetch()
}, [isAuthenticated])


useEffect(() => {
setCartData(data.metadata)
console.log("data", data)
setCartData(data?.metadata)
}, [data, isSuccessFetch, cartData])

useEffect(() => {
setTotalPrice(cartData?.map((item) => item.price).reduce((a, b) => a + b, 0) || 0);
}, [cartData, totalPrice]);
const [filteredItems, setFilteredItems] = useState([]);
// let cartData = [
// {
// id: "660666f9b3f1e1cc048f2b57",
// img: "https://via.placeholder.com/300x300.png?text=Course+Image",
// link: "/course/android",
// ttl: "The Complete Android 14 & Kotlin Development Masterclass",
// authors: ["Koushil", "Nani"],
// ratings: { totalratings: 0, count: 0 },
// duration: 1700000,
// lectures: 0,
// level: "All",
// price: 1700000,
// discount: 0,
// couponApplied: "",
// bestSeller: false,
// }

// ];

// const data = await useQuery();÷

// const { data, isLoading, isError } = await useQuery("cart", callApiGetCart, {
// onSuccess: (data) => {
// console.log(localStorage.getItem('accessToken'));
// console.log(data);
// // Assign data.metadata to cartData
// },
// onError: (error) => {
// console.error("Error fetching data:", error);
// },
// staleTime: Infinity,
// });
// console.log(data);
// cartData = data.metadata;
// if (isLoading) return <div>Loading...</div>;
// if (isError) return <div>Error fetching data</div>;
const whitelistedCourses = [
{
id: 1,
img: lock,
link: "/course/python",
ttl: "Learn Python: The complete python programming course",
authors: ["Koushil", "Nani"],
ratings: { totalratings: 4.3, count: 3445 },
duration: 10000,
lectures: 146,
level: "All",
price: 649,
discount: 3399,
couponApplied: "koushil mankali",
bestSeller: true,
},
{
id: 2,
img: lock,
link: "/course/python",
ttl: "Learn Python: The complete python programming course",
authors: ["Koushil", "Nani"],
ratings: { totalratings: 4.3, count: 3445 },
duration: 10000,
lectures: 146,
level: "All",
price: 649,
discount: 3399,
couponApplied: "koushil mankali",
bestSeller: true,
},
];

const clearCouponHandler = () => {
setAppliedCoupon("");
Expand Down Expand Up @@ -153,32 +101,13 @@ const ShoppingCart = () => {
</Box1>
<Box2>
<TotalText>Total:</TotalText>
<Currency>
{new Intl.NumberFormat("en-IN", {
style: "currency",
currency: "INR",
}).format(600)}
</Currency>
<TotalDiscount>
{new Intl.NumberFormat("en-IN", {
style: "currency",
currency: "INR",
}).format(3399)}
currency: "VND",
}).format(totalPrice)}
</TotalDiscount>
<div className="ttlDisPer">81% off</div>
<Button
link="/checkout"
txt="Checkout"
bck="var(--color-purple-300)"
hovBck="var(--color-purple-500)"
extraCss={{
width: "100%",
margin: "1rem 0",
padding: "1rem",
border: "none",
color: "var(--white)",
}}
/>

<TotalText>Coupon code</TotalText>
{appliedCoupon ? (
<CouponBox>
Expand All @@ -200,7 +129,18 @@ const ShoppingCart = () => {
onChange={setCouponHandler}
btnClick={submitCoupon}
/>
<Link to="/payment">
<Button
width='100%'
fontWeight="700"
bgColor="var(--color-purple-300)"
hoverBgColor="var(--color-purple-400)"
>
Checkout
</Button>
</Link>
</Box2>

</BoxContainer>
) : (
<EmptyBody>
Expand All @@ -225,7 +165,7 @@ const ShoppingCart = () => {
</Button>
</Link>
</CartBox>
<WhitelistedCourses>
{/* <WhitelistedCourses>
<WhitelistedTitle>Recently wishlisted</WhitelistedTitle>
{whitelistedCourses?.map((item) => {
return (
Expand All @@ -241,7 +181,7 @@ const ShoppingCart = () => {
/>
);
})}
</WhitelistedCourses>
</WhitelistedCourses> */}
</EmptyBody>
)}
</InnerDiv>
Expand Down
10 changes: 5 additions & 5 deletions src/page/ShoppingCart/ShoppingCartStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,18 @@ export const Title = styled.div`
`;

export const BoxContainer = styled.div`
margin: 2rem 0;
margin: 10px 0;
display: flex;
justify-content: space-between;
`;

export const Box1 = styled.div`
width: 73%;
margin-right: 2rem;
`;

export const CourseContainer = styled.div`
/* margin: 0.5rem 0; */
margin: 5px 0;
`;

export const Count = styled.div`
Expand All @@ -51,9 +52,8 @@ export const Currency = styled.div`
`;

export const TotalDiscount = styled.div`
color: var(--color-gray-200);
font-size: 1rem;
font-weight: 400;
font-size: 2rem;
font-weight: 700;
`;

export const TotalText = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion src/page/cart/cartItemCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function CardItemCard({ course }) {
<CardMedia
component="img"
sx={{ width: 200 }}
image="/images/courses/reactnative.png"
image={course.img}
alt="React Native"
/>

Expand Down

0 comments on commit 969e846

Please sign in to comment.