Skip to content

Commit d67f654

Browse files
Shivani-07Shivani-07
authored
Merge pull request #23 from Capstone-Projects-2022-Spring/BAZ-110-update-product-list-table-to-interact-with-shopping-lists
Baz 110 update product list table to interact with shopping lists
2 parents d1ea0cc + 8b39890 commit d67f654

8 files changed

Lines changed: 190 additions & 75 deletions

File tree

‎src/App.js‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ShoppingListView from './Components/Pages/ShoppingLists/ShoppingListView'
1212
import { ProductSearch } from './Components/Pages/ProductSearch/ProductSearch';
1313
import ErrorPage from "./Components/Pages/404Page/ErrorPage"
1414
import Logout from './Components/Pages/Logout/logout';
15+
import ProductListParent from './Components/Pages/ProductListParent';
1516

1617
import {
1718
BrowserRouter,
@@ -27,26 +28,12 @@ export default function App() {
2728
<Route index element={<LoginForm />} />
2829
<Route path="/register" element={<RegisterForm />} />
2930
<Route path="/home" element={<HomeForm />} />
30-
<Route path="/lists" element={<ShoppingListView />} />
31-
<Route path="/search" element={<ProductSearch />} />
31+
{/* very messy but ProductSearch is now a child of ShoppingListView so they can access the same list state variable*/}
32+
<Route path="/lists" element={<ShoppingListView pageIndex={1} />} />
33+
<Route path="/search" element={<ShoppingListView pageIndex={0} />} />
3234
<Route path="/logout" element={<Logout />} />
3335
<Route path="*" element={<ErrorPage />} />
3436
</Routes>
3537
</BrowserRouter>
3638
);
37-
}
38-
39-
/*
40-
41-
<>
42-
<section>
43-
<main>
44-
<div> You Have
45-
46-
</>
47-
48-
49-
50-
51-
52-
*/
39+
}

‎src/Components/Pages/ProductListParent.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React from 'react';
2+
import { ShoppingList, ShoppingListCollection, Product } from './ShoppingLists/ShoppingList.js'
3+
import ShoppingListView from './ShoppingLists/ShoppingListView';
4+
import { ProductSearch } from './ProductSearch/ProductSearch';
5+
import ErrorPage from "./404Page/ErrorPage"
6+
import './ShoppingLists/styles.css'
7+
8+
// NOT CURRENTLY USED
9+
10+
class ProductListParent extends React.Component {
11+
constructor(props) {
12+
super(props);
13+
this.state = {
14+
shoppingList: ShoppingListCollection.collection,
15+
};
16+
}
17+
18+
updateShoppingList(updatedList) {
19+
this.setState({shoppingList: updatedList})
20+
}
21+
22+
23+
24+
render() {
25+
let component = null;
26+
27+
switch(this.props.pageIndex) {
28+
case 0:
29+
component = <ProductSearch testList={this.state.shoppingList} updateShoppingList={this.updateShoppingList}/>;
30+
break;
31+
case 1:
32+
component = <ShoppingListView />;
33+
break;
34+
default:
35+
component = <ErrorPage />
36+
}
37+
38+
return (
39+
<div>
40+
{component}
41+
</div>
42+
43+
);
44+
}
45+
}
46+
47+
48+
49+
export default ProductListParent;

‎src/Components/Pages/ProductSearch/AddProductDialog.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import * as React from 'react';
2+
import Dialog from '@mui/material/Dialog';
3+
import DialogContent from '@mui/material/DialogContent';
4+
import DialogContentText from '@mui/material/DialogContentText';
5+
import DialogTitle from '@mui/material/DialogTitle';
6+
import List from '@mui/material/List';
7+
import ListItem from '@mui/material/ListItem';
8+
9+
export default function AlertDialog(props) {
10+
const [open, setOpen] = React.useState(false);
11+
12+
const handleClickOpen = () => {
13+
setOpen(true);
14+
};
15+
16+
const handleClose = () => {
17+
setOpen(false);
18+
};
19+
20+
const changeCurrentList = (index) => {
21+
setOpen(false);
22+
props.changeList(index);
23+
}
24+
25+
return (
26+
<div>
27+
<button onClick={handleClickOpen} className="px-2 py-1 text-sm rounded-full text-white bg-purple-600">
28+
Adding Products To: {props.selectedList.name}
29+
</button>
30+
<Dialog
31+
open={open}
32+
onClose={handleClose}
33+
aria-labelledby="alert-dialog-title"
34+
aria-describedby="alert-dialog-description"
35+
>
36+
<DialogTitle id="alert-dialog-title">
37+
{"Select your current shopping list:"}
38+
</DialogTitle>
39+
<DialogContent>
40+
<DialogContentText id="alert-dialog-description">
41+
To add products to your shopping list, select the list you would like to add products to.
42+
Once you have selected a list, clicking any product's row will add the product to your
43+
selected list.
44+
</DialogContentText>
45+
</DialogContent>
46+
47+
<List sx={{ pt: 0 }}>
48+
{props.lists.map((list, index) => (
49+
<ListItem><button className="px-2 py-1 text-sm rounded-full text-white bg-purple-600" onClick={() => changeCurrentList(index)}>{list.name} </button></ListItem>
50+
51+
))}
52+
</List>
53+
</Dialog>
54+
</div>
55+
);
56+
}

‎src/Components/Pages/ProductSearch/ProductSearch.js‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@ import Navbar from '../../NavBar/Navbar'
66
import { styled, alpha } from '@mui/material/styles';
77
import InputBase from '@mui/material/InputBase';
88
import SearchIcon from '@mui/icons-material/Search';
9-
9+
import AddProductDialog from "./AddProductDialog";
1010

1111
const input = [
12-
{ id: 1, prod: 'Apple', price: '$3.00', store: 'Walmart' },
13-
{ id: 2, prod: 'Orange', price: '$5.00', store: 'Target' },
14-
{ id: 3, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
15-
{ id: 4, prod: 'Apple', price: '$3.00', store: 'Walmart' },
16-
{ id: 5, prod: 'Orange', price: '$5.00', store: 'Target' },
17-
{ id: 6, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
18-
{ id: 7, prod: 'Apple', price: '$3.00', store: 'Walmart' },
19-
{ id: 8, prod: 'Orange', price: '$5.00', store: 'Target' },
20-
{ id: 9, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
21-
{ id: 10, prod: 'Apple', price: '$3.00', store: 'Walmart' },
22-
{ id: 11, prod: 'Orange', price: '$5.00', store: 'Target' },
23-
{ id: 12, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
24-
{ id: 13, prod: 'Orange', price: '$5.00', store: 'Target' },
25-
{ id: 14, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
26-
{ id: 15, prod: 'Apple', price: '$3.00', store: 'Walmart' },
27-
{ id: 16, prod: 'Orange', price: '$5.00', store: 'Target' },
28-
{ id: 17, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
29-
{ id: 18, prod: 'Apple', price: '$3.00', store: 'Walmart' },
30-
{ id: 18, prod: 'Orange', price: '$5.00', store: 'Target' },
31-
{ id: 19, prod: 'Cereal', price: '$2.00', store: 'Fresh Grocer' },
12+
{ id: 1, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
13+
{ id: 2, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
14+
{ id: 3, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
15+
{ id: 4, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
16+
{ id: 5, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
17+
{ id: 6, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
18+
{ id: 7, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
19+
{ id: 8, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
20+
{ id: 9, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
21+
{ id: 10, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
22+
{ id: 11, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
23+
{ id: 12, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
24+
{ id: 13, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
25+
{ id: 14, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
26+
{ id: 15, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
27+
{ id: 16, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
28+
{ id: 17, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
29+
{ id: 18, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
30+
{ id: 19, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
31+
{ id: 20, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
3232
]
3333

3434
const Search = styled('div')(({ theme }) => ({
@@ -78,19 +78,30 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
7878

7979
const columns = [
8080
{ field: 'prod', headerName: 'Product', width: 150 },
81-
{ field: 'price', headerName: 'Price', width: 150 },
81+
{ field: 'price', headerName: 'Price ($)', width: 150 },
8282
{ field: 'store', headerName: 'Store', width: 150 },
83+
{ field: 'weight', headerName: 'Weight (oz.)', width: 150 }
8384
];
8485

85-
export function ProductSearch() {
86+
export function ProductSearch(props) {
8687
const [rows, setRows] = React.useState(input);
88+
const [message, setMessage] = React.useState("");
8789

8890
const handleSearchTextChange = (event) => {
8991
const searchText = event.target.value.toLowerCase()
9092
setRows(input.filter(item => item.prod.toLowerCase().includes(searchText)))
9193
console.log('searchtext: ' + searchText)
9294
};
9395

96+
function productClicked(param, event) {
97+
//alert(JSON.stringify(param.row.prod));
98+
props.addProduct(param.row.prod, param.row.weight, param.row.price, param.row.store);
99+
setMessage(param.row.prod + " added to " + props.lists[props.listIndex].name + "!");
100+
//alert(JSON.stringify(props.lists[props.listIndex].name));
101+
setTimeout(() => setMessage(""), 3000);
102+
103+
}
104+
94105
return (
95106
<>
96107
<Navbar />
@@ -107,7 +118,10 @@ export function ProductSearch() {
107118
inputProps={{ 'aria-label': 'search' }}
108119
/>
109120
</Search>
110-
<DataGrid rows={rows} columns={columns} autoPageSize />
121+
<AddProductDialog lists={props.lists} selectedList={props.lists[props.listIndex]} changeList={props.changeList}/>
122+
{message}
123+
<br />
124+
<DataGrid rows={rows} columns={columns} onRowClick={productClicked} autoPageSize />
111125
</div>
112126
</div>
113127
</>

‎src/Components/Pages/ShoppingLists/Product.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function ProductCard(props) {
2323
<br />
2424
${props.price}
2525
<br />
26-
{props.clicked}
26+
{props.store}
2727
</Typography>
2828
</CardContent>
2929
<CardActions >

‎src/Components/Pages/ShoppingLists/ShoppingList.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React from 'react';
22

33
class Product {
4-
constructor(productName, weight, price) {
4+
constructor(productName, weight, price, store) {
55
this.productName = productName;
66
this.weight = weight;
77
this.price = price;
8+
this.store = store;
89
}
910
}
1011

@@ -15,8 +16,8 @@ class ShoppingList {
1516
this.productCollection = productCollection;
1617
}
1718

18-
static addProduct(productName, weight, price) {
19-
this.productCollection.push(new Product(productName, weight, price));
19+
static addProduct(productName, weight, price, store) {
20+
this.productCollection.push(new Product(productName, weight, price, store));
2021
}
2122

2223
}
@@ -40,8 +41,8 @@ ShoppingListCollection.add('Breakfast',
4041

4142
//ShoppingListCollection.add('Dinner', [ShoppingList.addProduct("Sweet Baby Ray's Barbecue Sauce", 29.0, 2.99)]);
4243

43-
ShoppingListCollection.add('Dinner', [new Product("Sweet Baby Ray's Barbecue Sauce", 29.0, 2.99), new Product("Bananas", 16, 0.49), new Product("OREO Sandwich Cookies Chocolate", 25.5, 5.49)]);
44-
ShoppingListCollection.add('snacks', [new Product("sauce", 29.0, 2.99), new Product("fruit", 16, 0.49), new Product("OREO Sandwich Cookies Chocolate", 25.5, 5.49)]);
44+
ShoppingListCollection.add('Dinner', [new Product("Sweet Baby Ray's Barbecue Sauce", 29.0, 2.99, "Walmart"), new Product("Bananas", 16, 0.49, "Walmart"), new Product("OREO Sandwich Cookies Chocolate", 25.5, 5.49, "Walmart")]);
45+
ShoppingListCollection.add('snacks', [new Product("sauce", 29.0, 2.99, "Walmart"), new Product("fruit", 16, 0.49, "Walmart"), new Product("OREO Sandwich Cookies Chocolate", 25.5, 5.49, "Target")]);
4546

4647

4748
//alert('list:' + JSON.stringify(ShoppingListCollection.collection[0].productCollection));

‎src/Components/Pages/ShoppingLists/ShoppingListDisplay.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export class ShoppingListDisplay extends React.Component {
1717

1818
{
1919
this.props.lists[this.props.displayIndex].productCollection.map((product, index) => (
20-
<p><ProductCard name={product.productName} weight={product.weight} price={product.price} removeProduct={this.props.removeProduct} clicked={index}/></p>
20+
<p><ProductCard name={product.productName} weight={product.weight} price={product.price} store={product.store} removeProduct={this.props.removeProduct} clicked={index}/></p>
2121
))
2222
}
2323
</p>

‎src/Components/Pages/ShoppingLists/ShoppingListView.js‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ShoppingListDisplay from './ShoppingListDisplay'
55
import { ShoppingList, ShoppingListCollection, Product } from './ShoppingList'
66
import ListManagementDropdown from './ListManagementDropdown';
77
import Navbar from '../../NavBar/Navbar'
8+
import { ProductSearch } from '../ProductSearch/ProductSearch';
9+
import ErrorPage from "../404Page/ErrorPage"
810

911
export class ShoppingListView extends React.Component {
1012
constructor(props) {
@@ -118,9 +120,10 @@ export class ShoppingListView extends React.Component {
118120

119121
// save state of the index of list you wanna add product to.
120122
// button redirects to product search page + the index of shopping list saved so default add to is selected list
121-
handleAddProduct = () => {
123+
handleAddProduct = (name, weight, price, store) => {
124+
//name, weight, price, store
122125
var temp = [...this.state.lists];
123-
temp[this.state.listIndex].productCollection.push(new Product('test', 500, 4.99));
126+
temp[this.state.listIndex].productCollection.push(new Product(name, weight, price, store));
124127

125128
this.setState(() => {
126129
return {
@@ -147,37 +150,42 @@ export class ShoppingListView extends React.Component {
147150
});
148151

149152
//alert('temp list:' + JSON.stringify(temp))
150-
151-
152153
}
153154

154155
render() {
155-
156+
let component = null;
157+
158+
switch(this.props.pageIndex) {
159+
case 0:
160+
component = <ProductSearch addProduct={this.handleAddProduct} lists={this.state.lists} listIndex={this.state.listIndex} changeList={this.changeListHandler}/>;
161+
break;
162+
case 1:
163+
component = <>
164+
<Navbar />
165+
<section className="bg-purple-200 p-3">
166+
<section className='bg-purple-200 flex'>
167+
<div className='listnamescolumn'>
168+
<ShoppingListSelection changeListHandler={this.changeListHandler} handleAddList={this.handleAddList} lists={this.state.lists} handleInput={this.handleInput} value={this.state.value} togglePop={this.togglePop} seen={this.state.seen}/>
169+
</div>
170+
<div className='productlistcolumn bg-purple-200'>
171+
<button onClick={this.handleAddProduct}>+ Add a Product</button>
172+
<ShoppingListDisplay displayIndex={this.state.listIndex} lists={this.state.lists} currentList={this.state.currentList} removeProduct={this.handleRemoveProduct} productIndex={this.state.productIndex}/>
173+
174+
</div>
175+
<ListManagementDropdown handleRemoveList={this.handleRemoveList}/>
176+
</section>
177+
</section>
178+
</>;
179+
break;
180+
default:
181+
component = <ErrorPage />
182+
}
156183
return(
157-
<>
158-
<Navbar />
159-
<section className="bg-purple-200 p-3">
160-
<section className='bg-purple-200 flex'>
161-
<div className='listnamescolumn'>
162-
<ShoppingListSelection changeListHandler={this.changeListHandler} handleAddList={this.handleAddList} lists={this.state.lists} handleInput={this.handleInput} value={this.state.value} togglePop={this.togglePop} seen={this.state.seen}/>
163-
</div>
164-
<div className='productlistcolumn bg-purple-200'>
165-
<button onClick={this.handleAddProduct}>+ Add a Product</button>
166-
<ShoppingListDisplay displayIndex={this.state.listIndex} lists={this.state.lists} currentList={this.state.currentList} removeProduct={this.handleRemoveProduct} productIndex={this.state.productIndex}/>
167-
168-
</div>
169-
<ListManagementDropdown handleRemoveList={this.handleRemoveList}/>
170-
171-
172-
</section>
173-
</section>
174-
</>
175-
);
184+
<div>{component}</div>
176185

186+
);
177187
}
178188

179189
}
180190

181-
182-
183191
export default ShoppingListView;

0 commit comments

Comments
 (0)