anes039
KPCKevin Powell - Community
•Created by anes039 on 8/26/2024 in #front-end
React Redux with boolean values
so basically i am trying to do when quantity of my cart is >= 1 and if proceed is clicked to make quantity again at 0
export const cartSlice = createSlice({
name: 'cart',
initialState: {
cart: [],
quantity: 0,
isSubmited: false
},
reducers: {
resetCart: (state, action) => {
const itemInCart = state.cart.find((item) => item.id === action.payload);
{console.log(itemInCart)}
if (itemInCart && itemInCart.quantity >= 1 && state.isSubmited === false){
state.isSubmited = action.payload;
console.log(state.isSubmited + 'after dispatch');
}
console.log(state.isSubmited);
},
import classes from "./Proceed.module.css";
import { useSelector,useDispatch } from "react-redux";
import {resetCart} from '../Features/cartSlice';
import PropTypes from 'prop-types';
const Proceed = ({id}) => {
const dispatch = useDispatch();
const cart = useSelector((state) => state.cart.isSubmited);
const onClickHandler = (e) => {
e.preventDefault();
alert("Thank you for your purchase ");
dispatch((resetCart(id)));
console.log(cart);
};
return (
<div className={classes.container}>
<button onClick={onClickHandler} className={classes.btn}>
Proceed to Checkout!
</button>
</div>
);
};
export default Proceed;
Proceed.propTypes = {
id: PropTypes.string.isRequired,
}
6 replies
KPCKevin Powell - Community
•Created by anes039 on 8/15/2024 in #front-end
Items issue
So basically i finished my project but i have a bug if i have an item and like i double press the cart it adds the item to two places , i want only to add the quantity i have done like in my cart the plus and minus for adding quantity but here is my code
addToCart: (state, action) => {
const itemInCart = state.cart.find((item) => item.id === action.payload.id);
if (itemInCart === action.payload && itemInCart === 1) {
itemInCart.quantity++;
}
else if (itemInCart) {
itemInCart.quantity++;
} else {
state.cart.push({...action.payload, quantity: 1 });
}
},
41 replies
KPCKevin Powell - Community
•Created by anes039 on 8/9/2024 in #front-end
DELETE END POINT NOT WORKING
So my endPoint is not working when i press the button
5 replies
KPCKevin Powell - Community
•Created by anes039 on 8/7/2024 in #os-and-tools
Code suggestion
I want to remove something i dont know if it is from extension or what but when i write code it suggests me the other part like in a gray form and when u press tab it writes it for u
how do i remove this feature?
18 replies
KPCKevin Powell - Community
•Created by anes039 on 8/5/2024 in #back-end
SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
36 replies
KPCKevin Powell - Community
•Created by anes039 on 7/30/2024 in #front-end
React and Redux E-commerce
Hello everyone i have an issue with my ecommerce shop when i add items to the cart from my normal page they are adde, but when i try to increase or decrease their quantity i cant i should press addToCart, down below i will share mycode and liveDemo!
https://github.com/Anes039/Test
Demo:
https://38pnml-5173.csb.app/
5 replies
KPCKevin Powell - Community
•Created by anes039 on 7/27/2024 in #front-end
JavaScript E commerce shop
Guys i wanted to ask u something i am working into a React project but I am finding it hard to implement cart logic so basically , I am using redux to add and remove items i am finding it hard to do it by myself is this common?
14 replies
KPCKevin Powell - Community
•Created by anes039 on 7/23/2024 in #front-end
Responsive Layout
22 replies
KPCKevin Powell - Community
•Created by anes039 on 7/19/2024 in #front-end
responsive layout issue
53 replies
KPCKevin Powell - Community
•Created by anes039 on 7/17/2024 in #os-and-tools
Github rep issue
So i was just adding another repository and when i do add . after this it just takes so longgggg i dont know why over 5 min i tried to delete it like with rm index.lock and then again
22 replies
KPCKevin Powell - Community
•Created by anes039 on 2/19/2024 in #front-end
Cors Error
const [dogData,setDogData] = useState([]);
const express = require('express');
const app = express();
const cors = require('cors');
app.cors({
origin:'*'
})
useEffect(() => {
const fetchDogData = async () =>{
try {
const response = await fetch ('https://www.billplz-sandbox.com/api', );
const data = await response.json();
console.log(data);
setDogData(data);
}
catch (err){
console.log(err);
}
}
fetchDogData();
} , [])
return (
<div></div>
)
}
I am trying to fetch data from that api also i used this method but after that i got this message in my screen .....
Module not found: Error: Can't resolve 'zlib' in 'C:\Users\HP\Desktop\React\my-app\node_modules\body-parser\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
Without using cors i got a Cors error something related to header
17 replies