Skip to content

Commit d2e384d

Browse files
linlioechslelinlioechsle
committed
updated productsearch
1 parent cae6198 commit d2e384d

1 file changed

Lines changed: 91 additions & 31 deletions

File tree

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

Lines changed: 91 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useState, useEffect } from "react";
22
import { DataGrid } from '@mui/x-data-grid';
33
import './styles.css';
44
import Navbar from '../../NavBar/Navbar'
@@ -8,29 +8,6 @@ import InputBase from '@mui/material/InputBase';
88
import SearchIcon from '@mui/icons-material/Search';
99
import AddProductDialog from "./AddProductDialog";
1010

11-
const input = [
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},
32-
]
33-
3411
const Search = styled('div')(({ theme }) => ({
3512
position: 'relative',
3613
borderRadius: theme.shape.borderRadius,
@@ -84,15 +61,84 @@ const columns = [
8461
];
8562

8663
export function ProductSearch(props) {
87-
const [rows, setRows] = React.useState(input);
88-
const [message, setMessage] = React.useState("");
64+
const [searchText, setSearchText] = useState(null)
65+
const [message, setMessage] = React.useState("")
66+
const [rows, setRows] = useState( [] )
67+
const [filter, setFilter] = useState({ column: undefined, value: undefined })
68+
const [sort, setSort] = useState({ column: undefined, order: undefined })
69+
const [pageNumber, setPageNumber] = useState(0)
70+
const [pageSize, setPageSize] = useState(10)
71+
const [rowCount, setRowCount] = useState(10)
72+
73+
useEffect(() => {
74+
makeRequestForNewData()
75+
}, [])
76+
77+
useEffect(() => {
78+
console.log('Current Filter: column=' + filter.column + ' value=' + filter.value)
79+
console.log('Current Sort: column=' + sort.column + ' order=' + sort.order)
80+
console.log('Current Page: number=' + pageNumber + ' size=' + pageSize)
81+
console.log('Search text: ' + searchText)
82+
makeRequestForNewData()
83+
}, [pageNumber, pageSize, filter, sort, searchText])
84+
85+
function makeRequestForNewData() {
86+
// send request to API endpoint
87+
generateSampleData()
88+
}
89+
90+
function generateSampleData() {
91+
let input = [
92+
{ id: 1, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
93+
{ id: 2, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
94+
{ id: 3, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
95+
{ id: 4, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
96+
{ id: 5, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
97+
{ id: 6, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
98+
{ id: 7, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
99+
{ id: 8, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
100+
{ id: 9, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
101+
{ id: 10, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
102+
{ id: 11, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
103+
{ id: 12, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
104+
{ id: 13, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
105+
{ id: 14, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
106+
{ id: 15, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
107+
{ id: 16, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
108+
{ id: 17, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
109+
{ id: 18, prod: 'Apple', price: 3.99, store: 'Walmart', weight: 5.1},
110+
{ id: 19, prod: 'Orange', price: 5.99, store: 'Target', weight: 6.7},
111+
{ id: 20, prod: 'Cereal', price: 2.99, store: 'Fresh Grocer', weight: 14},
112+
]
113+
if (searchText)
114+
input = input.filter(item => item.prod.toLowerCase().includes(searchText))
115+
116+
setRowCount(input.length)
117+
input = input.slice(pageNumber * pageSize, pageNumber * pageSize + pageSize)
118+
setRows(input)
119+
}
89120

90121
const handleSearchTextChange = (event) => {
91-
const searchText = event.target.value.toLowerCase()
92-
setRows(input.filter(item => item.prod.toLowerCase().includes(searchText)))
93-
console.log('searchtext: ' + searchText)
122+
setSearchText(event.target.value.toLowerCase());
123+
console.log('searchtext: ' + searchText);
94124
};
95125

126+
function handleFilterModelChange(model) {
127+
setFilter({ column: model.items[0].columnField, value: model.items[0].value })
128+
}
129+
130+
function handleSortModelChange(model) {
131+
setSort({ column: model[0]?.field, order: model[0]?.sort })
132+
}
133+
134+
function handlePageChange(page) {
135+
setPageNumber(page)
136+
}
137+
138+
function handlePageSizeChange(pageSize) {
139+
setPageSize(pageSize)
140+
}
141+
96142
function productClicked(param, event) {
97143
//alert(JSON.stringify(param.row.prod));
98144
props.addProduct(param.row.prod, param.row.weight, param.row.price, param.row.store);
@@ -121,9 +167,23 @@ export function ProductSearch(props) {
121167
<AddProductDialog lists={props.lists} selectedList={props.lists[props.listIndex]} changeList={props.changeList}/>
122168
{message}
123169
<br />
124-
<DataGrid rows={rows} columns={columns} onRowClick={productClicked} autoPageSize />
170+
<DataGrid
171+
rows={rows}
172+
columns={columns}
173+
page={pageNumber}
174+
pageSize={pageSize}
175+
rowCount={rowCount}
176+
filterMode='server'
177+
sortingMode='sever'
178+
paginationMode='server'
179+
onFilterModelChange={handleFilterModelChange}
180+
onSortModelChange={handleSortModelChange}
181+
onPageChange={handlePageChange}
182+
onPageSizeChange={handlePageSizeChange}
183+
onRowClick={productClicked}
184+
/>
125185
</div>
126186
</div>
127187
</>
128188
);
129-
}
189+
}

0 commit comments

Comments
 (0)