Add cart to frontend

Author: tobias-tengler

src/SourceSchemas/Cart/Data/Cart.cs

@@ -9,6 +9,4 @@ public class Cart
 
     [Required]
     public DateTime CreatedAt { get; set; }
-
-    public ICollection<CartItem> Items { get; set; } = new List<CartItem>();
 }

src/SourceSchemas/Cart/Data/CartContext.cs

@@ -19,5 +19,17 @@ public static async Task SeedDataAsync(
 
         // Ensure database is created
         await context.Database.EnsureCreatedAsync(cancellationToken);
+
+        // Create initial cart if none exists
+        if (!await context.Carts.AnyAsync(cancellationToken))
+        {
+            var cart = new Cart
+            {
+                CreatedAt = DateTime.UtcNow
+            };
+
+            context.Carts.Add(cart);
+            await context.SaveChangesAsync(cancellationToken);
+        }
     }
 }

src/SourceSchemas/Cart/Types/CartItemNode.cs

@@ -8,6 +8,10 @@ static partial void Configure(IObjectTypeDescriptor<Data.CartItem> descriptor)
         descriptor.Ignore(x => x.CartId);
     }
 
+    [ID]
+    public static int GetId([Parent] Data.CartItem cartItem)
+        => cartItem.Id;
+    
     public static DateTime GetAddedAt([Parent] Data.CartItem cartItem)
         => cartItem.AddedAt;
 

src/SourceSchemas/Cart/Types/CartMutations.cs

@@ -6,13 +6,12 @@ namespace Demo.Cart.Types;
 [MutationType]
 public static partial class CartMutations
 {
-    public static async Task<Data.Cart> AddToCartAsync(
+    public static async Task<Data.Cart> AddProductToCartAsync(
         [ID<Product>] int productId,
         CartContext context,
         CancellationToken cancellationToken)
     {
         var cart = await context.Carts
-            .Include(c => c.Items)
             .FirstOrDefaultAsync(cancellationToken);
 
         if (cart is null)
@@ -32,30 +31,30 @@ public static partial class CartMutations
             AddedAt = DateTime.UtcNow
         };
 
-        cart.Items.Add(cartItem);
+        context.CartItems.Add(cartItem);
         await context.SaveChangesAsync(cancellationToken);
 
         return cart;
     }
 
-    public static async Task<Data.Cart?> RemoveFromCartAsync(
+    public static async Task<Data.Cart?> RemoveProductFromCartAsync(
         [ID<Product>] int productId,
         CartContext context,
         CancellationToken cancellationToken)
     {
         var cart = await context.Carts
-            .Include(c => c.Items)
             .FirstOrDefaultAsync(cancellationToken);
 
         if (cart is null)
         {
             return null;
         }
 
-        var itemToRemove = cart.Items.FirstOrDefault(i => i.ProductId == productId);
+        var itemToRemove = await context.CartItems
+            .FirstOrDefaultAsync(i => i.CartId == cart.Id && i.ProductId == productId, cancellationToken);
+
         if (itemToRemove is not null)
         {
-            cart.Items.Remove(itemToRemove);
             context.CartItems.Remove(itemToRemove);
             await context.SaveChangesAsync(cancellationToken);
         }
@@ -68,16 +67,18 @@ public static partial class CartMutations
         CancellationToken cancellationToken)
     {
         var cart = await context.Carts
-            .Include(c => c.Items)
             .FirstOrDefaultAsync(cancellationToken);
 
         if (cart is null)
         {
             return null;
         }
 
-        context.CartItems.RemoveRange(cart.Items);
-        cart.Items.Clear();
+        var cartItems = await context.CartItems
+            .Where(i => i.CartId == cart.Id)
+            .ToListAsync(cancellationToken);
+
+        context.CartItems.RemoveRange(cartItems);
         await context.SaveChangesAsync(cancellationToken);
 
         return cart;

src/SourceSchemas/Cart/Types/CartNode.cs

@@ -1,12 +1,27 @@
+using Demo.Cart.Data;
+using GreenDonut.Data;
+using HotChocolate.Types.Pagination;
+
 namespace Demo.Cart.Types;
 
 [ObjectType<Data.Cart>]
 public static partial class CartNode
 {
-    public static DateTime GetCreatedAt([Parent] Data.Cart cart)
-        => cart.CreatedAt;
-
-    [UsePaging]
-    public static IEnumerable<Data.CartItem> GetItems([Parent] Data.Cart cart)
-        => cart.Items;
+    [ID]
+    public static int GetId([Parent] Data.Cart cart)
+        => cart.Id;
+    
+    [UsePaging(ConnectionName = "CartItems")]
+    public static async Task<Connection<CartItem>> GetItemsAsync(
+        [Parent] Data.Cart cart,
+        PagingArguments pagingArgs,
+        CartContext context,
+        CancellationToken cancellationToken)
+    {
+        return await context.CartItems
+            .Where(item => item.CartId == cart.Id)
+            .OrderBy(item => item.AddedAt)
+            .ToPageAsync(pagingArgs, cancellationToken)
+            .ToConnectionAsync();
+    }
 }

src/SourceSchemas/Cart/Types/Viewer.cs

@@ -5,12 +5,24 @@ namespace Demo.Cart.Types;
 
 public class Viewer
 {
-    public async Task<Data.Cart?> GetCartAsync(
+    public async Task<Data.Cart> GetCartAsync(
         CartContext context,
         CancellationToken cancellationToken)
     {
-        return await context.Carts
-            .Include(c => c.Items)
+        var cart = await context.Carts
             .FirstOrDefaultAsync(cancellationToken);
+
+        if (cart is null)
+        {
+            cart = new Data.Cart
+            {
+                CreatedAt = DateTime.UtcNow
+            };
+
+            context.Carts.Add(cart);
+            await context.SaveChangesAsync(cancellationToken);
+        }
+
+        return cart;
     }
 }

src/SourceSchemas/Cart/schema-settings.json

@@ -8,7 +8,7 @@
   },
   "extensions": {
     "nitro": {
-      "apiId": "TODO"
+      "apiId": "QXBpCmcwMTlhYTAyZWQxYmY3ZmExYjY1NDZhODYwZGM1YTA3Yw=="
     }
   },
   "environments": {

src/frontend/src/App.css

@@ -1,7 +1,63 @@
+import { useState } from "react";
 import ProductsPage from "./ProductsPage";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Box,
+} from "@mui/material";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import CartPopover from "./CartPopover";
+
+const headingStyles = {
+  fontWeight: 900,
+  fontSize: { xs: "1.75rem", sm: "2.25rem", md: "2.5rem" },
+  textTransform: "uppercase",
+  letterSpacing: "0.1em",
+  color: "white",
+  flexGrow: 1,
+  textAlign: "center",
+} as const;
 
 function App() {
-  return <ProductsPage />;
+  const [cartAnchorEl, setCartAnchorEl] = useState<HTMLElement | null>(null);
+  const cartOpen = Boolean(cartAnchorEl);
+
+  const handleCartClick = (event: React.MouseEvent<HTMLElement>) => {
+    setCartAnchorEl(event.currentTarget);
+  };
+
+  const handleCartClose = () => {
+    setCartAnchorEl(null);
+  };
+
+  return (
+    <>
+      <AppBar position="fixed">
+        <Toolbar>
+          <Typography variant="h4" component="h1" sx={headingStyles}>
+            Products
+          </Typography>
+          <IconButton
+            onClick={handleCartClick}
+            color="inherit"
+            size="large"
+          >
+            <ShoppingCartIcon fontSize="large" />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <CartPopover
+        anchorEl={cartAnchorEl}
+        open={cartOpen}
+        onClose={handleCartClose}
+      />
+      <Box sx={{ pt: { xs: 10, sm: 12 } }}>
+        <ProductsPage />
+      </Box>
+    </>
+  );
 }
 
 export default App;