GPT-2: Edit item cards on dashboard

src/components/ItemCard.tsx

@@ -1,16 +1,22 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { useNavigate } from "react-router-dom";
+
 export interface ItemCardProps {
-    itemImageUrl: string;
-    itemName: string;
-    barcode?: string;
-    description: string;
-    category: string;
-    storeName: string;
-    isDiscount: boolean;
-    itemPrice: number;
-    discountedPrice?: number;
+  id: string;
+  itemImageUrl: string;
+  itemName: string;
+  barcode?: string;
+  description: string;
+  category: string;
+  storeName: string;
+  isDiscount: boolean;
+  itemPrice: number;
+  discountedPrice?: number;
 }
 
 const ItemCard: React.FC<ItemCardProps> = ({
+  id,
   itemImageUrl,
   itemName,
   barcode,
@@ -21,6 +27,12 @@ const ItemCard: React.FC<ItemCardProps> = ({
   itemPrice,
   discountedPrice,
 }) => {
+  const navigate = useNavigate();
+
+  const handleEditClick = () => {
+    navigate(`/edit-item/${id}`);
+  };
+
     return (
         <div className="item-card">
             <img src={itemImageUrl} alt={itemName}/>
@@ -39,6 +51,9 @@ const ItemCard: React.FC<ItemCardProps> = ({
                 <p>${itemPrice}</p>
             )}
             </div>
+            <button className="button edit-button" onClick={handleEditClick}>
+                <FontAwesomeIcon icon={faPencilAlt} /> Edit
+            </button>
         </div>
     )
 }

src/components/RoutePaths.tsx

@@ -6,6 +6,7 @@ const DashboardPage = lazy(() => import("../pages/Dashboard.tsx"))
 const CreateNewItemPage = lazy(() => import("../pages/CreateNewItem.tsx"))
 const CreateNewStorePage = lazy(() => import("../pages/CreateNewStore.tsx"))
 const NotFoundPage = lazy(() => import("../pages/NotFound.tsx"))
+const EditItemPage = lazy(() => import("../pages/Edititem.tsx"))
 
 const RoutePaths: React.FC = () => {
   return (
@@ -14,6 +15,7 @@ const RoutePaths: React.FC = () => {
       <Route path="/dashboard" element={<DashboardPage />} />
       <Route path="/create-new-item" element={<CreateNewItemPage />} />
       <Route path="/create-new-store" element={<CreateNewStorePage />} />
+      <Route path="/edit-item/:itemId" element={<EditItemPage />} />
 
       {/* 404 page */}
       <Route path="/404" element={<NotFoundPage />} />

src/custom-dropdown-select/StoresDropdownSelect.tsx

@@ -55,7 +55,7 @@ const StoresDropdownSelect: React.FC<StoresDropdownSelectProps> = ({ onChange, v
             options={storeOptions}
             labelField="label"
             valueField="value"
-            values={value ? storeOptions.filter(option => option.value === value) : []}
+            values={value ? storeOptions.filter(option => option.value.id === value.id) : []}
             onChange={handleChange}
             clearable
             searchable

src/index.css

@@ -477,7 +477,7 @@ h1 {
 }
 
 .item-price {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .item-price p, .item-price s {
@@ -492,6 +492,11 @@ h1 {
   font-size: 1.15rem;
 }
 
+.edit-button {
+  margin-bottom: 1.75rem;
+  width: max-content;
+}
+
 .barcode-scanner {
   display: flex;
   gap: 0.5em;

src/pages/CreateNewItem.tsx

@@ -16,6 +16,7 @@ import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 const client = generateClient<Schema>();
 
 const initialItemInputs: ItemInputs = {
+  id: "",
   barcode: "",
   itemName: "",
   itemImageUrl: "",
@@ -130,7 +131,9 @@ const CreateNewItem: React.FC = () => {
         title: 'New Item Successfully Created',
         text: successMessage,
         icon: 'success',
-      })
+        }).then(() => {
+          navigate("/dashboard");
+        });
 
       setInputs(initialItemInputs);
       setSelectedStore(undefined);

src/pages/Dashboard.tsx

@@ -41,7 +41,6 @@ const Dashboard: React.FC = () => {
 
   if (loading) return <p>Loading items...</p>;
 
-
   const filteredItems = dashboardItems.filter(item => {
     const categoryMatch =
       selectedCategories.length === 0 || selectedCategories.includes(item.category);
@@ -81,7 +80,7 @@ const Dashboard: React.FC = () => {
       const priceB = b.isDiscount ? b.discountedPrice : b.itemPrice;
       return (priceB ?? 0) - (priceA ?? 0);
     });
-  }
+}
 
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
 
@@ -123,7 +122,9 @@ const Dashboard: React.FC = () => {
               <p>No items found.</p>
             ) : (
               sortedItems.map((item) => (
-                <ItemCard key={item.barcode}
+                <ItemCard
+                  key={item.barcode}
+                  id={item.id}
                   itemImageUrl={item.itemImageUrl}
                   itemName={item.itemName}
                   barcode={item.barcode}