dadobos/react-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: remove Capitalize component and update Card and Cart components to use direct string manipulation for titles and descriptions

Browse Source 
feat: add launch configuration for debugging in VSCode
fix: update Home component to use Tilt with improved speed and gyroscope options
This commit is contained in:
Dan Dobos
2025-10-21 12:07:26 +02:00
parent 013f01bc90
commit e0d5039d07
7 changed files with 439 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/launch.json
Vendored
+15
View File
@@ -0,0 +1,15 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000/react-shop",
"webRoot": "${workspaceFolder}/src"
}
]
}
src/App.scss
+28 -24
View File
@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap"); // @import url("https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
// Variables // Variables
@@ -52,7 +52,7 @@ $breakpoints: $xs, $sm, $md, $lg, $xl;
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: "Nanum Gothic Coding", monospace; font-family: "Sansation", sans-serif;
} }
a { a {
@@ -144,13 +144,14 @@ a {
.nav-quantity { .nav-quantity {
@include flex-center(); @include flex-center();
height: 25px; height: 36px;
width: 25px; width: 36px;
background-color: $PersianGreen; background-color: $OuterSpaceCrayola;
border: 1px solid $PersianGreen;
margin-left: 5px; margin-left: 5px;
border-radius: 50%; border-radius: 50%;
font-size: 14px; font-size: 16px;
} }
} }
} }
@@ -187,18 +188,19 @@ a {
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@include hover-animation(); .card-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 480px;
}
button { button {
border: 1px solid $PersianGreen;
border-radius: 20px; border-radius: 20px;
outline: none; outline: none;
// background-color: $Cultured; background-color: $OuterSpaceCrayola;
// background-color: $PersianGreen; color: $Cultured;
// color: $Cultured; font-size: 1rem;
color: $PersianGreen;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer; cursor: pointer;
height: 1.5rem; height: 1.5rem;
margin-top: 0.5rem; margin-top: 0.5rem;
@@ -225,6 +227,7 @@ a {
.description { .description {
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
flex-grow: 1;
} }
.category, .category,
@@ -281,7 +284,7 @@ a {
} }
h3 { h3 {
font-weight: 400; font-weight: 400;
margin-bottom: .3rem; margin-bottom: 0.3rem;
} }
button { button {
border: none; border: none;
@@ -346,9 +349,9 @@ a {
border-radius: 5px; border-radius: 5px;
font-weight: 400; font-weight: 400;
letter-spacing: 1.1px; letter-spacing: 1.1px;
border: 0.5px solid $SolidPink; background-color: $SolidPink;
color: $SolidPink; border: none;
background: none; color: $Cultured;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
font-size: 1.2rem; font-size: 1.2rem;
@@ -370,7 +373,7 @@ a {
button { button {
@include hover-animation(); @include hover-animation();
border: none; border: none;
border-radius: 5px; border-radius: 50px;
outline: none; outline: none;
background-color: $OuterSpaceCrayola; background-color: $OuterSpaceCrayola;
color: $Cultured; color: $Cultured;
@@ -421,21 +424,21 @@ a {
& > div > p { & > div > p {
margin-top: 1rem; margin-top: 1rem;
} }
button{ button {
font-size: 1rem; font-size: 1rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
} }
.price{ .price {
margin-bottom: 1rem; margin-bottom: 1rem;
&::before{ &::before {
content: "Price:"; content: "Price:";
} }
} }
.total-price{ .total-price {
margin-top: 1rem; margin-top: 1rem;
&::before{ &::before {
content: "Total Price:"; content: "Total Price:";
} }
} }
@@ -469,6 +472,7 @@ a {
.back-to-home { .back-to-home {
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 3rem; margin-top: 3rem;
color: $PersianGreen;
} }
.go-to-cart { .go-to-cart {
src/components/Capitalize.jsx
-11
View File
@@ -1,11 +0,0 @@
const Capitalize = ({ children, text })=> {
// ensure we always work with a string
const value = (children ?? "").toString();
if (!value) return null;
const capitalized = value.replace(/\b\w/g, (c) => c.toUpperCase());
return <>{capitalized}</>;
}
export default Capitalize
src/components/Card.jsx
+21 -23
View File
@@ -1,8 +1,6 @@
import { useEffect } from 'react'; import { useEffect } from "react";
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from "react-redux";
import { addToCart, getTotals } from '../features/cartSlice'; import { addToCart, getTotals } from "../features/cartSlice";
import Capitalize from './Capitalize';
const Card = ({ product }) => { const Card = ({ product }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -15,34 +13,34 @@ const Card = ({ product }) => {
const handleAddToCart = (product) => { const handleAddToCart = (product) => {
dispatch(addToCart(product)); dispatch(addToCart(product));
}; };
return ( return (
<> <div className="card-container">
<h3 className='title'>{Capitalize(product?.title ?? "")}</h3> <h3 className="title">{product.title}</h3>
<div className='image-container'> <div className="image-container">
<img src={product.images[0]} alt={Capitalize(product?.title ?? "")} /> <img src={product.images[0]} alt={product.title} />
</div> </div>
<div className='category'> <div className="category">
<span>{Capitalize(product?.category ?? "")}</span> <span>{product.category}</span>
<span>{Capitalize(product?.brand ?? "")}</span> <span>{product.availabilityStatus}</span>
</div> </div>
<p className='description'>{Capitalize(product?.description ?? "")}</p> <p className="description">{product?.description}</p>
<div> <div>
<p className='discount'> <p className="discount">
<span>Discount: </span> <span>Discount:</span>
<span>{product.discountPercentage}%</span> <span>{Math.round(product.discountPercentage)} %</span>
</p> </p>
<p className='price'> <p className="stock">
<span>Price:</span>
<span>€{product.price}</span>
</p>
<p className='stock'>
<span>Stock:</span> <span>Stock:</span>
<span>{product.stock}</span> <span>{product.stock}</span>
</p> </p>
<p className="price">
<span>Price:</span>
<span>€{product.price}</span>
</p>
</div> </div>
<button onClick={() => handleAddToCart(product)}>Add to cart</button> <button onClick={() => handleAddToCart(product)}>Add to cart</button>
</> </div>
); );
}; };
src/components/Cart.jsx
+5 -5
View File
@@ -8,7 +8,6 @@ import {
getTotals, getTotals,
} from '../features/cartSlice'; } from '../features/cartSlice';
import Capitalize from './Capitalize';
import BackHomeButton from './BackHomeButton'; import BackHomeButton from './BackHomeButton';
const Cart = () => { const Cart = () => {
@@ -55,7 +54,7 @@ const Cart = () => {
<div className='cart-product'> <div className='cart-product'>
<img src={cartItem.images[0]} alt={cartItem.title} /> <img src={cartItem.images[0]} alt={cartItem.title} />
<div> <div>
<h3>{Capitalize(cartItem.title)}</h3> <h3>{cartItem.title}</h3>
<p>{cartItem.description}</p> <p>{cartItem.description}</p>
<button onClick={() => handleRemoveFromCart(cartItem)}> <button onClick={() => handleRemoveFromCart(cartItem)}>
Remove Remove
@@ -73,7 +72,8 @@ const Cart = () => {
</button> </button>
</div> </div>
<div className='total-price'> <div className='total-price'>
€{cartItem.price * cartItem.cartQuantity}
€{Math.round((cartItem.price * cartItem.cartQuantity) * 100)/100}
</div> </div>
</div> </div>
))} ))}
@@ -85,9 +85,9 @@ const Cart = () => {
<div className='cart-checkout'> <div className='cart-checkout'>
<div className='subtotal'> <div className='subtotal'>
<span>Subtotal</span> <span>Subtotal</span>
<span className='amount'>€{cart.cartTotalAmount}</span> <span className='amount'>€{Math.round(cart.cartTotalAmount * 100)/100}</span>
</div> </div>
<button>Checkout</button> <button className='button' >Checkout</button>
</div> </div>
</div> </div>
<div className='continue-shopping'> <div className='continue-shopping'>
src/components/Home.jsx
+6 -2
View File
@@ -17,12 +17,16 @@ const Home = () => {
<> <>
{data.products?.map((product) => ( {data.products?.map((product) => (
<Tilt <Tilt
key={product.id}
options={{ options={{
reverse: true, reverse: true,
speed: 1200, speed: 300,
easing: "cubic-bezier(.09,.67,.54,.76)", easing: "cubic-bezier(.09,.67,.54,.76)",
gyroscope: true,
}}> }}>
<article className="card-list" key={product.id}> <article className="card-list" >
<Card product={product} /> <Card product={product} />
</article> </article>
</Tilt> </Tilt>
src/features/cartSlice.js
+19 -26
View File
@@ -1,7 +1,5 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import Capitalize from '../components/Capitalize';
import GoToCartButton from '../components/GoToCartButton';
const initialState = { const initialState = {
cartItems: localStorage.getItem('cartItems') cartItems: localStorage.getItem('cartItems')
@@ -27,29 +25,24 @@ const cartSlice = createSlice({
if (itemIndex >= 0) { if (itemIndex >= 0) {
state.cartItems[itemIndex].cartQuantity += 1; state.cartItems[itemIndex].cartQuantity += 1;
let multipleItemsText = `Increased ${Capitalize( let multipleItemsText = `Increased ${
state.cartItems[itemIndex].title state.cartItems[itemIndex].title
)} quantity to ${state.cartItems[itemIndex].cartQuantity}`; } quantity to ${state.cartItems[itemIndex].cartQuantity}`;
// Show a toast when quantity is increased
if (window.location.href.indexOf('cart') !== -1) {
toast.info( toast.info(multipleItemsText, toastifyOptions);
window.location.href.indexOf('cart') !== -1 ? ( } else {
multipleItemsText toast.info(multipleItemsText, toastifyOptions);
) : ( // Optionally, trigger a UI update to show GoToCartButton elsewhere
<GoToCartButton text={multipleItemsText} /> }
),
toastifyOptions
);
} else { } else {
const tempProduct = { ...action.payload, cartQuantity: 1 }; const tempProduct = { ...action.payload, cartQuantity: 1 };
state.cartItems.push(tempProduct); state.cartItems.push(tempProduct);
let firstItemText = `${Capitalize(action.payload.title)} added to cart` let firstItemText = `${action.payload.title} added to cart`
toast.success( toast.success(firstItemText, toastifyOptions);
<GoToCartButton text={firstItemText} />, // Optionally, trigger a UI update to show GoToCartButton elsewhere
toastifyOptions
);
} }
localStorage.setItem('cartItems', JSON.stringify(state.cartItems)); localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
}, },
@@ -59,7 +52,7 @@ const cartSlice = createSlice({
); );
state.cartItems = nextCartItems; state.cartItems = nextCartItems;
localStorage.setItem('cartItems', JSON.stringify(state.cartItems)); localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
toast.error(`${Capitalize(action.payload.title)} removed from cart`, toastifyOptions); toast.error(`${action.payload.title} removed from cart`, toastifyOptions);
}, },
decreaseCart(state, action) { decreaseCart(state, action) {
const itemIndex = state.cartItems.findIndex( const itemIndex = state.cartItems.findIndex(
@@ -68,7 +61,7 @@ const cartSlice = createSlice({
if (state.cartItems[itemIndex].cartQuantity > 1) { if (state.cartItems[itemIndex].cartQuantity > 1) {
state.cartItems[itemIndex].cartQuantity -= 1; state.cartItems[itemIndex].cartQuantity -= 1;
toast.info( toast.info(
`Decreased ${Capitalize(action.payload.title)} cart quantity`, `Decreased ${action.payload.title} cart quantity`,
toastifyOptions toastifyOptions
); );
} else if (state.cartItems[itemIndex].cartQuantity === 1) { } else if (state.cartItems[itemIndex].cartQuantity === 1) {
@@ -77,19 +70,19 @@ const cartSlice = createSlice({
); );
state.cartItems = nextCartItems; state.cartItems = nextCartItems;
toast.error( toast.error(
`${Capitalize(action.payload.title)} removed from cart`, `${action.payload.title} removed from cart`,
toastifyOptions toastifyOptions
); );
} }
localStorage.setItem('cartItems', JSON.stringify(state.cartItems)); localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
}, },
clearCart(state, action) { clearCart(state) {
state.cartItems = []; state.cartItems = [];
toast.error(`Cart cleared`, toastifyOptions); toast.error(`Cart cleared`, toastifyOptions);
localStorage.setItem('cartItems', JSON.stringify(state.cartItems)); localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
}, },
getTotals(state, action) { getTotals(state, action) {
let { total, quantity } = state.cartItems.reduce( let { total: cartTotalAmount, quantity: cartTotalQuantity } = state.cartItems.reduce(
(cartTotal, cartItem) => { (cartTotal, cartItem) => {
const { price, cartQuantity } = cartItem; const { price, cartQuantity } = cartItem;
const itemTotal = price * cartQuantity; const itemTotal = price * cartQuantity;
@@ -104,8 +97,8 @@ const cartSlice = createSlice({
quantity: 0, quantity: 0,
} }
); );
state.cartTotalQuantity = quantity; state.cartTotalQuantity = cartTotalQuantity;
state.cartTotalAmount = total; state.cartTotalAmount = cartTotalAmount;
}, },
}, },
}); });