forked from CumbucaBr/web-pos
-
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.
Implement name changes, redux in foodOverlay and organized some code
- Loading branch information
Showing
22 changed files
with
243 additions
and
120 deletions.
There are no files selected for viewing
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 |
|---|---|---|
|
|
@@ -20,6 +20,7 @@ | |
| width: 55px; | ||
| height: 55px; | ||
| border-radius: 5px; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .elementContent-subcontainer { | ||
|
|
||
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,40 +1,53 @@ | ||
| import React from 'react' | ||
| import { connect } from 'react-redux'; | ||
| import { FoodModel } from '../../models'; | ||
| import './FoodModal.css' | ||
|
|
||
|
|
||
| const FoodModal = ({food, setFood}: any) => { | ||
| const FoodModal = ({ modalFood, closeModal, addFoodToCart }: any) => { | ||
| const [amount, setAmount] = React.useState<number>(1); | ||
|
|
||
| function closeModal() { | ||
| setFood(null); | ||
|
|
||
| function addToCart() { | ||
| addFoodToCart(modalFood, amount); | ||
| closeModal(); | ||
| } | ||
|
|
||
| return ( | ||
| <div className='foodModal-container' onClick={() => closeModal()}> | ||
| <div className='foodModal-content' onClick={(event) => event.stopPropagation()}> | ||
| <div className='foodModal-left'> | ||
| <img src={food?.image} alt="" /> | ||
| <img src={modalFood?.image} alt="" /> | ||
| </div> | ||
| <div className='foodModal-right'> | ||
| <div className='foodModal-right-content'> | ||
| <h1 className='foodModal-name'>{food?.name}</h1> | ||
| <h2 className='foodModal-description'>{food?.description}</h2> | ||
| <p className='foodModal-price'>${food?.price}</p> | ||
| <h1 className='foodModal-name'>{modalFood?.name}</h1> | ||
| <h2 className='foodModal-description'>{modalFood?.description}</h2> | ||
| <p className='foodModal-price'>${modalFood?.price * amount}</p> | ||
| <div className="productAmount-subcontainer"> | ||
| <p className="minus-sign" onClick={() => { if (amount > 1) setAmount(amount - 1) }}>-</p> | ||
| <p className="productAmount">{amount}</p> | ||
| <p className="plus-sign" onClick={() => setAmount(amount + 1)}>+</p> | ||
| </div> | ||
| <div className='addItems-container'> | ||
| <button className='cancel-button' onClick={() => closeModal()}>Cancel</button> | ||
| <button className='addToCart-button'>Add to cart +</button> | ||
| <button className='addToCart-button' onClick={() => addToCart()}>Add to cart +</button> | ||
| </div> | ||
| <h3 onClick={() => closeModal()}>CLOSE BUTTON</h3> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| const mapStateToProps = (state: any) => ({ modalFood: state.modalFoodOption.modalFood }); | ||
|
|
||
| const mapDispatchToProps = (dispatch: any) => ( | ||
| { | ||
| closeModal: () => dispatch({ type: 'CLEAR_MODAL_FOOD' }), | ||
| addFoodToCart: (food: FoodModel, amount: Number) => dispatch({ type: 'ADD_FOOD_TO_CART', food, amount }), | ||
| } | ||
| ); | ||
|
|
||
| export default FoodModal; | ||
| export default connect(mapStateToProps, mapDispatchToProps)(FoodModal); |
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
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,44 +1,26 @@ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { bindActionCreators } from 'redux'; | ||
|
|
||
| import { Foods } from '../../models'; | ||
| import FoodModal from '../FoodModal/FoodModal'; | ||
|
|
||
| import * as modalActions from '../../store/actions/modalFoodActions'; | ||
| import './ProductCard.css' | ||
|
|
||
| const ProductCard: React.FC = ({ activeFood }: any) => { | ||
| const [foods, setFoods] = React.useState<Foods[]>([]); | ||
| const [modalFood, setModalFood] = React.useState<any>(undefined); | ||
|
|
||
| React.useEffect(() => { | ||
| fetch('http://localhost:3001/products') | ||
| .then(response => response.json()) | ||
| .then(responseJSON => setFoods(responseJSON)) | ||
| }, []) | ||
| const ProductCard = ({ setModalFood, food }: any,) => { | ||
|
|
||
| return ( | ||
| <div className='foodCards-container'> | ||
| <div className='foodCards-grid'> | ||
| {modalFood && <FoodModal food={modalFood} setFood={setModalFood} />} | ||
| {foods.length > 0 && foods.map((food: Foods) => { | ||
| if (food.category.includes(activeFood)) | ||
| return ( | ||
| <div key={food.name} className="food-card" onClick={() => setModalFood(food)}> | ||
| <img src={food.image} alt={food.name} className="productImage" /> | ||
| <div className='foodInfos-subcontainer'> | ||
| <p className="foodName">{food.name}®</p> | ||
| <p className="foodDescription">{food.description}</p> | ||
| <p className="foodPrice">${food.price}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| else return null; | ||
| })} | ||
| <div key={food.name} className="food-card" onClick={() => { setModalFood(food) }}> | ||
| <img src={food.image} alt={food.name} className="productImage" /> | ||
| <div className='foodInfos-subcontainer'> | ||
| <p className="foodName">{food.name}®</p> | ||
| <p className="foodDescription">{food.description}</p> | ||
| <p className="foodPrice">${food.price}</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| ) | ||
| }; | ||
|
|
||
| const mapStateToProps = (state: any) => ({ activeFood: state.menuOption.activeFood }); | ||
|
|
||
| export default connect(mapStateToProps)(ProductCard); | ||
| const mapStateToProps = (state: any) => ({ }); | ||
| const mapDispatchToProps = (dispatch: any) => bindActionCreators(modalActions, dispatch) | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(ProductCard); |
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 |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); | ||
|
|
||
| * { | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Open Sans'; | ||
| } | ||
|
|
||
| .foodCards-container { | ||
| background-color: #E9ECEF; | ||
| width: 90%; | ||
| height: 100vh; | ||
| float: right; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| .foodCards-container::-webkit-scrollbar { | ||
| width: 5px; | ||
| } | ||
|
|
||
| .foodCards-container::-webkit-scrollbar-thumb { | ||
| border: 4px solid #c5cbd1; | ||
| } | ||
|
|
||
| .foodCards-grid { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { bindActionCreators } from 'redux'; | ||
|
|
||
| import * as modalActions from '../../store/actions/modalFoodActions'; | ||
| import FoodModal from '../FoodModal/FoodModal'; | ||
| import ProductCard from '../ProductCard/ProductCard'; | ||
| import { FoodModel } from '../../models'; | ||
| import './ProductList.css' | ||
|
|
||
| const ProductList: React.FC = ({ activeType, modalFood }: any) => { | ||
| const [foods, setFoods] = React.useState<FoodModel[]>([]); | ||
|
|
||
| React.useEffect(() => { | ||
| fetch('http://localhost:3001/products') | ||
| .then(response => response.json()) | ||
| .then(responseJSON => setFoods(responseJSON)) | ||
| }, []) | ||
|
|
||
| return ( | ||
| <div className='foodCards-container'> | ||
| <div className='foodCards-grid'> | ||
| {modalFood !== '' && <FoodModal />} | ||
| {foods.length > 0 && foods.map((food: FoodModel) => { | ||
| if (food.category.includes(activeType)) | ||
| return ( | ||
| <ProductCard food={food} /> | ||
| ); | ||
| else return null; | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| const mapStateToProps = (state: any) => ({ activeType: state.sideBarOption.foodType, modalFood: state.modalFoodOption.modalFood }); | ||
| const mapDispatchToProps = (dispatch: any) => bindActionCreators(modalActions, dispatch) | ||
|
|
||
| export default connect(mapStateToProps, mapDispatchToProps)(ProductList); |
Oops, something went wrong.