Skip to content
GitLab

Task : set-up redux

Merged Danh Đạt requested to merge task/product into main
Compare
and
8 files
+ 137
- 58
F‎E‎
s‎rc‎
Components‎/CartModal‎
CartMo‎dal.jsx‎ +25 -14
Pages/‎OutSide‎
Ho‎me‎
Home‎.jsx‎ +1 -1
Produc‎tDetail‎
ProductD‎etail.jsx‎ +39 -13
re‎dux‎
cartRed‎ucer.js‎ +26 -0
rootRed‎ucer.js‎ +6 -0
inde‎x.js‎ +6 -5
package-‎lock.json‎ +34 -19
packag‎e.json‎ +0 -6
FE/src/Components/CartModal/CartModal.jsx
+ 25
- 14
import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react'
export default function CartModal(props) {
import { useEffect } from 'react';
import { connect } from 'react-redux';
function CartModal(props) {
function renderCartList() {
return props.cart.map(function (value, index) {
return props?.cart.cart.map((value, index) => {
return (
<tr key={index}>
<td><b>{value.id}</b></td>
@@ -42,16 +42,16 @@ export default function CartModal(props) {
return (
<div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style={{ minWidth: '1000px' }}>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Giỏ hàng</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div className="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document" style={{ minWidth: '1000px' }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Giỏ hàng</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div className="modal-body">
<table className='table table_vertical'>
<thead className='bg-info text-light'>
<tr>
@@ -68,12 +68,23 @@ export default function CartModal(props) {
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
<div className="modal-footer"></div>
</div>
</div>
</div>
</div>
)
}
//Lấy data về bằng hàm này
function mapStateToProps(state) {
return {
cart: state.cartReducer
}
}
function mapDispatchToProps(){
//
}
export default connect(mapStateToProps, mapDispatchToProps)(CartModal)
\ No newline at end of file
FE/src/Components/CartModal/CartModal.jsx
+ 25
- 14
import React from 'react'
import { useState } from 'react';
import { useEffect } from 'react'
export default function CartModal(props) {
import { useEffect } from 'react';
import { connect } from 'react-redux';
function CartModal(props) {
function renderCartList() {
return props.cart.map(function (value, index) {
return props?.cart.cart.map((value, index) => {
return (
<tr key={index}>
<td><b>{value.id}</b></td>
@@ -42,16 +42,16 @@ export default function CartModal(props) {
return (
<div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style={{ minWidth: '1000px' }}>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Giỏ hàng</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div className="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document" style={{ minWidth: '1000px' }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">Giỏ hàng</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div className="modal-body">
<table className='table table_vertical'>
<thead className='bg-info text-light'>
<tr>
@@ -68,12 +68,23 @@ export default function CartModal(props) {
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
<div className="modal-footer"></div>
</div>
</div>
</div>
</div>
)
}
//Lấy data về bằng hàm này
function mapStateToProps(state) {
return {
cart: state.cartReducer
}
}
function mapDispatchToProps(){
//
}
export default connect(mapStateToProps, mapDispatchToProps)(CartModal)
\ No newline at end of file
FE/src/Pages/OutSide/Home/Home.jsx
+ 1
- 1
@@ -44,7 +44,7 @@ export default function Home() {
return (
<div key={index} className="col-lg-3 pb-2">
<Link style={{color:'black'}} to={`/${value.id}/product-detail`}>
<ProductCard
<ProductCard
img={value.img}
name={value.name}
price={value.price}
FE/src/Pages/OutSide/ProductDetail/ProductDetail.jsx
+ 39
- 13
@@ -7,14 +7,15 @@ import style from './ProductDetail.module.css';
import { Link, useParams } from 'react-router-dom';
import { useState } from 'react';
import CartModal from '../../../Components/CartModal/CartModal';
import { connect } from 'react-redux';
const axios = require('axios').default;
export default function ProductDetail() {
function ProductDetail(props) {
let params = useParams();
let [productData, setProductData] = useState();
let [productList, setProductList] = useState();
let [preview, setPreview] = useState();
let [cart, setCart] = useState();
//let [cart, setCart] = useState();
useEffect(function () {
axios.get(`http://localhost:8000/api/product/${params.id}`)
@@ -76,15 +77,15 @@ export default function ProductDetail() {
})
}
function addToCart(productId)
{
axios.get(`http://localhost:8000/cart/${productId}/add-item`, {
withCredentials: true
})
.then(function(res){
setCart(res.data.data);
});
}
// function addToCart(productId)
// {
// axios.get(`http://localhost:8000/cart/${productId}/add-item`, {
// withCredentials: true
// })
// .then(function(res){
// //setCart(res.data.data);
// });
// }
return (
<div>
@@ -114,7 +115,7 @@ export default function ProductDetail() {
className='btn btn-info pl-4 pr-4 mr-2'
data-toggle="modal"
data-target="#exampleModal"
onClick={()=>{addToCart(productData ? productData.id : null)}}
onClick={()=>{props.addToCart(productData ? productData.id : null)}}
>Thêm vô giỏ</button>
<button className='btn btn-danger pl-4 pr-4'>Mua luôn</button>
</div>
@@ -131,7 +132,32 @@ export default function ProductDetail() {
</div>
</div>
<Footer></Footer>
<CartModal cart={cart}></CartModal>
<CartModal></CartModal>
</div>
)
}
function mapStateToProps(){
}
function mapDispatchToProps(dispatch)
{
return {
addToCart : function(productId){
axios.get(`http://localhost:8000/cart/${productId}/add-item`, {
withCredentials: true
})
.then(function(res){
//setCart(res.data.data);
let product = res.data.data;
dispatch({
type: 'ADD_TO_CART',
product
});
});
}
}
}
export default connect(null, mapDispatchToProps)(ProductDetail);
\ No newline at end of file
FE/src/redux/cartReducer.js 0 → 100644
+ 26
- 0
const initState = {
cart: [
{
id: "",
name: "",
price: 0,
options: {
"img" : ""
},
qty: 0
}
]
}
const cartReducer = (state = initState, action) => {
switch (action.type) {
case 'ADD_TO_CART':
state.cart = action.product;
return {...state};
default:
break;
}
return {...state};
}
export default cartReducer;
\ No newline at end of file
FE/src/redux/rootReducer.js 0 → 100644
+ 6
- 0
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";
export const rootReducer = combineReducers({
cartReducer,
});
\ No newline at end of file
FE/src/index.js
+ 6
- 5
@@ -3,15 +3,16 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { rootReducer } from './redux/rootReducer';
const store = createStore(rootReducer);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</React.StrictMode>
</Provider>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
FE/package-lock.json
+ 34
- 19
@@ -12919,15 +12919,15 @@
}
},
"node_modules/postcss-load-config": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
"integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
"dependencies": {
"lilconfig": "^2.0.5",
"yaml": "^1.10.2"
"yaml": "^2.1.1"
},
"engines": {
"node": ">= 10"
"node": ">= 14"
},
"funding": {
"type": "opencollective",
@@ -12946,6 +12946,14 @@
}
}
},
"node_modules/postcss-load-config/node_modules/yaml": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
"integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw==",
"engines": {
"node": ">= 14"
}
},
"node_modules/postcss-loader": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -16030,9 +16038,9 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"node_modules/tailwindcss": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
"integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.5.tgz",
"integrity": "sha512-bC/2dy3dGPqxMWAqFSRgQxVCfmO/31ZbeEp8s9DMDh4zgPZ5WW1gxRJkbBkXcTUIzaSUdhWrcsrSOe32ccgB4w==",
"dependencies": {
"arg": "^5.0.2",
"chokidar": "^3.5.3",
@@ -16050,12 +16058,12 @@
"postcss": "^8.4.14",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-load-config": "^4.0.1",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
"resolve": "^1.22.0"
"resolve": "^1.22.1"
},
"bin": {
"tailwind": "lib/cli.js",
@@ -26681,12 +26689,19 @@
}
},
"postcss-load-config": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
"integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
"requires": {
"lilconfig": "^2.0.5",
"yaml": "^1.10.2"
"yaml": "^2.1.1"
},
"dependencies": {
"yaml": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
"integrity": "sha512-o96x3OPo8GjWeSLF+wOAbrPfhFOGY0W00GNaxCDv+9hkcDJEnev1yh8S7pgHF0ik6zc8sQLuL8hjHjJULZp8bw=="
}
}
},
"postcss-loader": {
@@ -28865,9 +28880,9 @@
"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
},
"tailwindcss": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.4.tgz",
"integrity": "sha512-NrxbFV4tYsga/hpWbRyUfIaBrNMXDxx5BsHgBS4v5tlyjf+sDsgBg5m9OxjrXIqAS/uR9kicxLKP+bEHI7BSeQ==",
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.5.tgz",
"integrity": "sha512-bC/2dy3dGPqxMWAqFSRgQxVCfmO/31ZbeEp8s9DMDh4zgPZ5WW1gxRJkbBkXcTUIzaSUdhWrcsrSOe32ccgB4w==",
"requires": {
"arg": "^5.0.2",
"chokidar": "^3.5.3",
@@ -28885,12 +28900,12 @@
"postcss": "^8.4.14",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
"postcss-load-config": "^4.0.1",
"postcss-nested": "5.0.6",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
"resolve": "^1.22.0"
"resolve": "^1.22.1"
},
"dependencies": {
"color-name": {
FE/package.json
+ 0
- 6
@@ -22,12 +22,6 @@
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",