Merge pull request #25 from Capstone-Projects-2022-Spring/BAZ-109-create-shopping-list-page-list-product-component

added functionality to add product button on shopping list page

Author: Shivani-07

src/Components/Pages/ProductSearch/ProductSearch.js

@@ -179,9 +179,10 @@ export function ProductSearch(props) {
             onSortModelChange={handleSortModelChange}
             onPageChange={handlePageChange}
             onPageSizeChange={handlePageSizeChange}
+            onRowClick={productClicked}
           />
         </div>
       </div>
     </>
   );
-}
+}

src/Components/Pages/ProductSearch/styles.css

@@ -2,6 +2,7 @@
   height: 300;
   width: "100%";
 } */
+
 .wrapper{
   display: 'flex';
   justify-content: 'center';

src/Components/Pages/ShoppingLists/ShoppingListView.js

@@ -7,6 +7,7 @@ import ListManagementDropdown from './ListManagementDropdown';
 import Navbar from '../../NavBar/Navbar'
 import { ProductSearch } from '../ProductSearch/ProductSearch';
 import ErrorPage from "../404Page/ErrorPage"
+import { Link } from "react-router-dom";
 
 export class ShoppingListView extends React.Component {
     constructor(props) {
@@ -25,12 +26,8 @@ export class ShoppingListView extends React.Component {
         this.togglePop = this.togglePop.bind(this);
         this.handleAddProduct = this.handleAddProduct.bind(this);
         this.handleRemoveProduct = this.handleRemoveProduct.bind(this);
-      //  this.updateCurrentProductIndex = this.updateCurrentProductIndex.bind(this);
-        
     }
 
-
-
     changeListHandler(newIndex) {
         //alert('new list index: ' + newIndex);
         this.setState({
@@ -39,9 +36,6 @@ export class ShoppingListView extends React.Component {
         })
     }
 
-
-
-
     handleInput(event) {
         this.setState({value: event.target.value});
     }
@@ -132,7 +126,6 @@ export class ShoppingListView extends React.Component {
         });
     }
 
-    
     handleRemoveProduct = (clickedIndex) => {
         //alert('called handleremoveproduct');
         //this.updateCurrentProductIndex(clickedIndex);
@@ -168,7 +161,9 @@ export class ShoppingListView extends React.Component {
                                 <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}/>
                             </div>
                             <div className='productlistcolumn bg-purple-200'>
-                                <button onClick={this.handleAddProduct}>+ Add a Product</button>
+                                    <Link to={`/search`} className="">
+                                        <div className="px-2 py-1 text-sm rounded-full text-white bg-purple-600" >+ Add a Product</div>
+                                    </Link>
                                 <ShoppingListDisplay displayIndex={this.state.listIndex} lists={this.state.lists} currentList={this.state.currentList} removeProduct={this.handleRemoveProduct} productIndex={this.state.productIndex}/>
 
                             </div>

src/Components/Pages/ShoppingLists/styles.css

@@ -1,3 +1,12 @@
+/*body {
+  height: 100%;
+  overflow: auto;
+  background-color:#E9D5FF;
+  margin: 0px;
+  padding: 0px;
+
+}*/
+
 .container{
     background: #FBE9E8;
     width: 100%;