created parent component for shopping lists and product search

Author: linlioechsle

src/App.js

@@ -12,6 +12,7 @@ import ShoppingListView from './Components/Pages/ShoppingLists/ShoppingListView'
 import { ProductSearch } from './Components/Pages/ProductSearch/ProductSearch';
 import ErrorPage from "./Components/Pages/404Page/ErrorPage"
 import Logout from './Components/Pages/Logout/logout';
+import ProductListParent from './Components/Pages/ProductListParent';
 
 import {
   BrowserRouter,
@@ -27,8 +28,8 @@ export default function App() {
         <Route index element={<LoginForm />} />
         <Route path="/register" element={<RegisterForm />} />
         <Route path="/home" element={<HomeForm />} />
-        <Route path="/lists" element={<ShoppingListView />} />
-        <Route path="/search" element={<ProductSearch />} />
+        <Route path="/lists" element={<ProductListParent pageIndex={1} />} />
+        <Route path="/search" element={<ProductListParent pageIndex={0} />} />
         <Route path="/logout" element={<Logout />} />
         <Route path="*" element={<ErrorPage />} />
       </Routes>

src/Components/Pages/ProductListParent.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ShoppingList, ShoppingListCollection, Product } from './ShoppingLists/ShoppingList.js'
+import ShoppingListView from './ShoppingLists/ShoppingListView';
+import { ProductSearch } from './ProductSearch/ProductSearch';
+import ErrorPage from "./404Page/ErrorPage"
+
+class ProductListParent extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        shoppingList: ShoppingListCollection.collection,
+      };
+    }
+
+    updateShoppingList(updatedList) {
+      this.setState({shoppingList: updatedList})
+    }
+
+
+            
+
+
+    render() {
+        let component = null;
+
+        switch(this.props.pageIndex) {
+            case 0:
+                component = <ProductSearch />;
+                break;
+            case 1:
+                component = <ShoppingListView />;
+                break;
+            default:
+                component = <ErrorPage />
+        }
+
+        return (
+            <div>
+                {component}
+            </div>
+
+        );
+    }
+  }
+
+
+
+  export default ProductListParent;

src/Components/Pages/ProductSearch/ProductSearch.js

@@ -91,6 +91,10 @@ export function ProductSearch() {
     console.log('searchtext: ' + searchText)
   };
 
+  function productClicked(param, event) {
+    alert(JSON.stringify(param.row));
+}
+
   return (
     <>
       <Navbar />
@@ -107,7 +111,7 @@ export function ProductSearch() {
               inputProps={{ 'aria-label': 'search' }}
             />
           </Search>
-          <DataGrid rows={rows} columns={columns} autoPageSize />
+          <DataGrid rows={rows} columns={columns} onRowClick={productClicked} autoPageSize />
         </div>
       </div>
     </>