Add more pages to main app group

apps/web/src/app/(main)/carts/[id]/page.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { gql, useQuery } from 'urql';
+
+const CART_QUERY = gql`
+	query Cart($id: ID!) {
+		cart(id: $id) {
+			id
+		}
+	}
+`;
+
+const CartPage = () => {
+	const [{ data, fetching, error }] = useQuery({ query: CART_QUERY });
+
+	return <div>Cart</div>;
+};
+
+export default CartPage;

apps/web/src/app/(main)/carts/page.tsx

@@ -1,32 +1,34 @@
+'use client';
+
+import Link from 'next/link';
 import { gql, useQuery } from 'urql';
 
 const CARTS_QUERY = gql`
-  query Carts {
-    currentUser {
-      id
-      carts {
-        id
-
-        store {
-          id
-            name
-          }
-        }
-
-        products {
-          cartId
-          productId
-          quantity
-
-          product {
-            id
-            name
-            unitPrice
-          }
-        }
-      }
-    }
-  }
+	query Carts {
+		currentUser {
+			id
+			carts {
+				id
+
+				store {
+					id
+					name
+				}
+
+				products {
+					cartId
+					productId
+					quantity
+
+					product {
+						id
+						name
+						unitPrice
+					}
+				}
+			}
+		}
+	}
 `;
 
 const CartsPage = () => {
@@ -38,7 +40,12 @@ const CartsPage = () => {
 	return (
 		<div>
 			<h1>Carts</h1>
-			<pre>{JSON.stringify(data, null, 2)}</pre>
+			{data?.currentUser?.carts.map((cart: any) => (
+				<div key={cart.id}>
+					<h2>{cart.store.name}</h2>
+					<Link href={`/carts/${cart.id}`}>View Cart</Link>
+				</div>
+			))}
 		</div>
 	);
 };

apps/web/src/app/(main)/home/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { gql, useQuery } from 'urql';
 
 const HOME_QUERY = gql`
@@ -76,7 +77,34 @@ const HomePage = () => {
 	return (
 		<div className='container mx-auto'>
 			<h1>Home</h1>
-			<pre>{JSON.stringify(data, null, 2)}</pre>
+			<h2>Orders</h2>
+			<div>
+				{data.currentUser.orders.map((order: any) => (
+					<div key={order.id}>
+						<h2>{order.store.name}</h2>
+						{order.products.map((product: any) => (
+							<div key={product.productId}>
+								<h3>{product.product.name}</h3>
+								<p>Price: {product.unitPrice}</p>
+								<p>Quantity: {product.quantity}</p>
+							</div>
+						))}
+						<p>Total: {order.total}</p>
+						<p>Status: {order.status}</p>
+						<p>Created At: {order.createdAt}</p>
+						<Link href={`/orders/${order.id}`}>View Order</Link>
+					</div>
+				))}
+			</div>
+			<h2>Followed Stores</h2>
+			<div>
+				{data.currentUser.followed.map((followed: any) => (
+					<div key={followed.store.id}>
+						<h2>{followed.store.name}</h2>
+						<image href={followed.store.image?.path} />
+					</div>
+				))}
+			</div>
 		</div>
 	);
 };

apps/web/src/app/(main)/orders/[id]/page.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { gql, useQuery } from 'urql';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+
+const ORDER_QUERY = gql`
+	query Order($id: ID!) {
+		order(id: $id) {
+			id
+			storeId
+			products {
+				orderId
+				productId
+				product {
+					id
+					name
+					unitPrice
+					quantity
+					images {
+						id
+						path
+					}
+				}
+			}
+		}
+	}
+`;
+
+const OrderPage = () => {
+	const { id } = useParams<{ id: string }>();
+	const [{ data, fetching, error }] = useQuery({
+		query: ORDER_QUERY,
+		variables: { id }
+	});
+
+	return (
+		<div>
+			<Link href={`/store/${data?.order.storeId}`}>View store</Link>
+			<pre>{JSON.stringify(data, null, 2)}</pre>
+		</div>
+	);
+};
+
+export default OrderPage;

apps/web/src/app/(main)/orders/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { gql, useQuery } from 'urql';
+
+const ORDERS_QUERY = gql`
+	query Orders {
+		currentUser {
+			id
+			orders {
+				id
+				store {
+					id
+					name
+					image {
+						id
+						path
+					}
+				}
+				products {
+					orderId
+					productId
+					product {
+						id
+						name
+					}
+					unitPrice
+					quantity
+				}
+				total
+				status
+				createdAt
+			}
+		}
+	}
+`;
+
+const OrdersPage = () => {
+	const [{ data, fetching, error }] = useQuery({ query: ORDERS_QUERY });
+
+	return (
+		<div>
+			<h1>Orders</h1>
+			<pre>{JSON.stringify(data, null, 2)}</pre>
+		</div>
+	);
+};
+
+export default OrdersPage;

apps/web/src/app/(main)/product/[id]/page.tsx

@@ -57,7 +57,6 @@ const ProductPage = () => {
 
 	return (
 		<div>
-			<Header />
 			<div className='container mx-auto px-4 py-8'>
 				<div className='grid grid-cols-1 md:grid-cols-2 gap-8'>
 					<div>

apps/web/src/app/(main)/store/[id]/page.tsx

@@ -4,7 +4,6 @@ import { useParams } from 'next/navigation';
 import React from 'react';
 import { useQuery } from 'urql';
 
-import Header from '@/components/home/Header';
 import Product from '@/components/store/Product';
 
 const STORE_QUERY = `
@@ -14,13 +13,18 @@ const STORE_QUERY = `
 			name
 			description
 			products {
-				id
+  			edges {
+     cursor
+     node {
+     id
 				name
 				unitPrice
 				images {
 					id
 					path
 				}
+     }
+  			}
 			}
 		}
 	}
@@ -48,8 +52,8 @@ const StorePage = () => {
 				<h1 className='text-2xl font-bold'>{data.store.name}</h1>
 				<p className='text-gray-600'>{data.store.description}</p>
 				<div className='mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4'>
-					{data.store.products.map((product: any) => (
-						<Product key={product.id} {...product} />
+					{data.store.products.edges.map((product: any) => (
+						<Product key={product.id} {...product.node} />
 					))}
 				</div>
 			</div>

apps/web/src/app/(marketing)/page.tsx

@@ -1,8 +1,21 @@
 'use client';
 
 import Hero from '@/components/home/Hero';
+import { useAuthContext } from '@/contexts/AuthContext';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
+// TODO: Rethink the entire authentication logic on the frontend
 const Home = () => {
+	const { userId, accessToken } = useAuthContext();
+	const router = useRouter();
+
+	useEffect(() => {
+		if (userId && accessToken) {
+			router.push('/home');
+		}
+	}, [userId, accessToken, router]);
+
 	return (
 		<div className='container flex flex-1 flex-col'>
 			<Hero />

apps/web/src/components/main/MainNavigation.tsx

@@ -26,7 +26,7 @@ const items = [
 		icon: ShoppingBag
 	},
 	{
-		href: '/cart',
+		href: '/carts',
 		icon: ShoppingCart
 	}
 ];