-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updates modules to AUG 31 2024, fixes a lot of vulnerabilities
- Loading branch information
Showing
19 changed files
with
7,479 additions
and
11,979 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,57 @@ | ||
| import React, {useEffect, lazy, Suspense } from 'react'; | ||
|
|
||
| import { Route,Switch, Redirect } from 'react-router-dom'; | ||
| import {connect} from 'react-redux'; | ||
| import { createStructuredSelector } from 'reselect'; | ||
|
|
||
| import GlobalStyle from './global.styles'; | ||
|
|
||
|
|
||
| import { selectCurrentUser } from './redux/user/user.selectors'; | ||
| import { checkUserSession } from './redux/user/user.actions'; | ||
|
|
||
| import Header from './components/header/header.component'; | ||
| import Spinner from './components/spinner/spinner.component'; | ||
| import ErrorBoundary from './components/error-boundary/error-boundary.component'; | ||
|
|
||
| //Lazy loading //Incrementing Performance of chunks files | ||
| const HomePage = lazy(()=>import('./pages/homepage/homepage.component')); | ||
| const ShopPage = lazy(()=>import('./pages/shop/shop.component')); | ||
| const CheckoutPage = lazy(()=>import('./pages/checkout/checkout.component')); | ||
| const SignInAndSignUp = lazy(()=>import('./pages/signin-and-singup/signin-and-singup.component')); | ||
|
|
||
| const App=({checkUserSession,currentUser})=>{ | ||
| useEffect(()=>{ | ||
| checkUserSession(); | ||
| },[checkUserSession]) | ||
|
|
||
| return( | ||
| <div> | ||
| import React, { useEffect, lazy, Suspense } from "react"; | ||
| import { Route, Routes, Navigate } from "react-router-dom"; | ||
| import { connect } from "react-redux"; | ||
| import { createStructuredSelector } from "reselect"; | ||
|
|
||
| import GlobalStyle from "./global.styles"; | ||
|
|
||
| import { selectCurrentUser } from "./redux/user/user.selectors"; | ||
| import { checkUserSession } from "./redux/user/user.actions"; | ||
|
|
||
| import Header from "./components/header/header.component"; | ||
| import Spinner from "./components/spinner/spinner.component"; | ||
| import ErrorBoundary from "./components/error-boundary/error-boundary.component"; | ||
|
|
||
| // Lazy loading components | ||
| const HomePage = lazy(() => import("./pages/homepage/homepage.component")); | ||
| const ShopPage = lazy(() => import("./pages/shop/shop.component")); | ||
| const CheckoutPage = lazy(() => import("./pages/checkout/checkout.component")); | ||
| const SignInAndSignUp = lazy(() => | ||
| import("./pages/signin-and-singup/signin-and-singup.component") | ||
| ); | ||
|
|
||
| const App = ({ checkUserSession, currentUser }) => { | ||
| useEffect(() => { | ||
| checkUserSession(); | ||
| }, [checkUserSession]); | ||
|
|
||
| return ( | ||
| <> | ||
| <GlobalStyle /> | ||
|
|
||
| <Switch> | ||
| <Header /> | ||
| <ErrorBoundary> | ||
| <Suspense fallback={<Spinner />}> | ||
| <Header/> | ||
| <Route exact path="/" component={HomePage} /> | ||
| <Route path="/shop" component={ShopPage} /> | ||
| <Route exact path="/checkout" component={CheckoutPage} /> | ||
| <Route exact path="/signin" | ||
| render={()=> | ||
| currentUser?( | ||
| <Redirect to='/' /> | ||
| ):( | ||
| <SignInAndSignUp/> | ||
| ) | ||
| } | ||
| <Suspense fallback={<Spinner />}> | ||
| <Routes> | ||
| <Route path="/" element={<HomePage />} /> | ||
| <Route path="/shop/*" element={<ShopPage />} /> | ||
| <Route path="/checkout" element={<CheckoutPage />} /> | ||
| <Route | ||
| path="/signin" | ||
| element={currentUser ? <Navigate to="/" /> : <SignInAndSignUp />} | ||
| /> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| </Switch> | ||
| </div> | ||
| ); | ||
| } | ||
| const mapStateToProps = createStructuredSelector ({ | ||
| currentUser: selectCurrentUser | ||
| }) | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| checkUserSession: () => dispatch(checkUserSession()) | ||
| }) | ||
|
|
||
| export default connect(mapStateToProps,mapDispatchToProps)(App); | ||
| </Routes> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const mapStateToProps = createStructuredSelector({ | ||
| currentUser: selectCurrentUser, | ||
| }); | ||
|
|
||
| const mapDispatchToProps = (dispatch) => ({ | ||
| checkUserSession: () => dispatch(checkUserSession()), | ||
| }); | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(App); |
64 changes: 36 additions & 28 deletions
64
client/src/components/cart-dropdown/cart-dropdown.component.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,42 @@ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import React from "react"; | ||
| import { connect, useDispatch } from "react-redux"; | ||
|
|
||
| import CustomButton from '../custom-button/custom-button.component'; | ||
| import CartItem from '../cart-item/cart-item-component'; | ||
| import { selectCartItems } from '../../redux/cart/cart.selector'; | ||
| import { createStructuredSelector } from 'reselect'; | ||
| import { withRouter } from 'react-router-dom' | ||
| import { toggleCartHidden } from '../../redux/cart/cart.actions' | ||
| import CustomButton from "../custom-button/custom-button.component"; | ||
| import CartItem from "../cart-item/cart-item-component"; | ||
| import { selectCartItems } from "../../redux/cart/cart.selector"; | ||
| import { createStructuredSelector } from "reselect"; | ||
| import { toggleCartHidden } from "../../redux/cart/cart.actions"; | ||
| import { useNavigate } from "react-router-dom"; | ||
|
|
||
| import './cart-dropdown.styles.scss'; | ||
| import "./cart-dropdown.styles.scss"; | ||
|
|
||
| const CartDropDown = ({cartItems, history, dispatch}) => ( | ||
| <div className='cart-dropdown'> | ||
| <div className='cart-items'> | ||
| { | ||
| cartItems.length ? | ||
| cartItems.map(cartItem=>( | ||
| <CartItem key={cartItem.id} item={cartItem} /> | ||
| ) | ||
| ) | ||
| : | ||
| <span className='empty-message'>Tu carrito esta vacio.</span> | ||
| } | ||
| </div> | ||
| <CustomButton onClick={()=> {history.push('/checkout'); dispatch(toggleCartHidden())}}>GO TO CHECKOUT</CustomButton> | ||
| const CartDropDown = ({ cartItems }) => { | ||
| const navigate = useNavigate(); | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const handleCheckout = () => { | ||
| navigate("/checkout"); | ||
| dispatch(toggleCartHidden()); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="cart-dropdown"> | ||
| <div className="cart-items"> | ||
| {cartItems.length ? ( | ||
| cartItems.map((cartItem) => ( | ||
| <CartItem key={cartItem.id} item={cartItem} /> | ||
| )) | ||
| ) : ( | ||
| <span className="empty-message">Tu carrito está vacío.</span> | ||
| )} | ||
| </div> | ||
| <CustomButton onClick={handleCheckout}>GO TO CHECKOUT</CustomButton> | ||
| </div> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| const mapStateToProps = createStructuredSelector ({ | ||
| cartItems: selectCartItems | ||
| }) | ||
| const mapStateToProps = createStructuredSelector({ | ||
| cartItems: selectCartItems, | ||
| }); | ||
|
|
||
| export default withRouter(connect(mapStateToProps)(CartDropDown)); | ||
| export default connect(mapStateToProps)(CartDropDown); |
60 changes: 30 additions & 30 deletions
60
client/src/components/collection-items/collection-items.component.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,37 @@ | ||
| import React from 'react'; | ||
| import React from "react"; | ||
|
|
||
| import { connect } from 'react-redux'; | ||
| import { connect } from "react-redux"; | ||
|
|
||
| import addItem from '../../redux/cart/cart.actions'; | ||
| import addItem from "../../redux/cart/cart.actions"; | ||
|
|
||
| import { | ||
| CollectionItemContainer, | ||
| CollectionFooterContainer, | ||
| AddButton, | ||
| BackgroundImage, | ||
| NameContainer, | ||
| PriceContainer | ||
| } from './collections-item.styles'; | ||
| CollectionItemContainer, | ||
| CollectionFooterContainer, | ||
| AddButton, | ||
| BackgroundImage, | ||
| NameContainer, | ||
| PriceContainer, | ||
| } from "./collections-item.styles"; | ||
|
|
||
| const CollectionItem = ({ item, addItem }) => { | ||
| const { name, price, imageUrl } = item; | ||
|
|
||
| return ( | ||
| <CollectionItemContainer> | ||
| <BackgroundImage className='image' imageUrl={imageUrl} /> | ||
| <CollectionFooterContainer> | ||
| <NameContainer>{name}</NameContainer> | ||
| <PriceContainer>{price}</PriceContainer> | ||
| </CollectionFooterContainer> | ||
| <AddButton onClick={() => addItem(item)} inverted> | ||
| Add to cart | ||
| </AddButton> | ||
| </CollectionItemContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const mapDispatchToProps = dispatch => ({ | ||
| addItem: item => dispatch(addItem(item)) | ||
| }) | ||
| const { name, price, imageUrl } = item; | ||
|
|
||
| export default connect(null, mapDispatchToProps)(CollectionItem); | ||
| return ( | ||
| <CollectionItemContainer> | ||
| <BackgroundImage className="image" imageurl={imageUrl} /> | ||
| <CollectionFooterContainer> | ||
| <NameContainer>{name}</NameContainer> | ||
| <PriceContainer>{price}</PriceContainer> | ||
| </CollectionFooterContainer> | ||
| <AddButton onClick={() => addItem(item)} inverted="true"> | ||
| Add to cart | ||
| </AddButton> | ||
| </CollectionItemContainer> | ||
| ); | ||
| }; | ||
|
|
||
| const mapDispatchToProps = (dispatch) => ({ | ||
| addItem: (item) => dispatch(addItem(item)), | ||
| }); | ||
|
|
||
| export default connect(null, mapDispatchToProps)(CollectionItem); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.