Make it deployable to Netlify (#2931)

7 files changed, 112 insertions, 1 deletions

diff --git a/examples/ssr/src/api.ts b/examples/ssr/src/api.ts
index 40058360b..64dfe17d3 100644
--- a/examples/ssr/src/api.ts
+++ b/examples/ssr/src/api.ts
@@ -60,7 +60,7 @@ export async function getCart(): Promise<Cart> {
 }
 
 export async function addToUserCart(id: number | string, name: string): Promise<void> {
-	await fetch(`${origin}/api/add-to-cart`, {
+	await fetch(`${origin}/api/cart`, {
 		credentials: 'same-origin',
 		method: 'POST',
 		mode: 'no-cors',
diff --git a/examples/ssr/src/models/db.json b/examples/ssr/src/models/db.json
new file mode 100644
index 000000000..76f9e4da3
--- /dev/null
+++ b/examples/ssr/src/models/db.json
@@ -0,0 +1,28 @@
+{
+  "products": [
+    {
+      "id": 1,
+      "name": "Cereal",
+      "price": 3.99,
+      "image": "/images/products/cereal.jpg"
+    },
+    {
+      "id": 2,
+      "name": "Yogurt",
+      "price": 3.97,
+      "image": "/images/products/yogurt.jpg"
+    },
+    {
+      "id": 3,
+      "name": "Rolled Oats",
+      "price": 2.89,
+      "image": "/images/products/oats.jpg"
+    },
+    {
+      "id": 4,
+      "name": "Muffins",
+      "price": 4.39,
+      "image": "/images/products/muffins.jpg"
+    }
+  ]
+}
diff --git a/examples/ssr/src/models/db.ts b/examples/ssr/src/models/db.ts
new file mode 100644
index 000000000..d9caa8b03
--- /dev/null
+++ b/examples/ssr/src/models/db.ts
@@ -0,0 +1,9 @@
+import db from './db.json';
+
+const products = db.products;
+const productMap = new Map(products.map((product) => [product.id, product]));
+
+export {
+	products,
+	productMap
+};
diff --git a/examples/ssr/src/models/session.ts b/examples/ssr/src/models/session.ts
new file mode 100644
index 000000000..60ca8f1da
--- /dev/null
+++ b/examples/ssr/src/models/session.ts
@@ -0,0 +1,3 @@
+
+// Normally this would be in a database.
+export const userCartItems = new Map();
diff --git a/examples/ssr/src/pages/api/cart.ts b/examples/ssr/src/pages/api/cart.ts
new file mode 100644
index 000000000..5dbe5acbd
--- /dev/null
+++ b/examples/ssr/src/pages/api/cart.ts
@@ -0,0 +1,47 @@
+import lightcookie from 'lightcookie';
+import { userCartItems } from '../../models/session';
+
+export function get(_params: any, request: Request) {
+	let cookie = request.headers.get('cookie');
+	let userId = cookie ? lightcookie.parse(cookie)['user-id'] : '1'; // default for testing
+	if (!userId || !userCartItems.has(userId)) {
+		return {
+			body: JSON.stringify({ items: [] })
+		};
+	}
+	let items = userCartItems.get(userId);
+	let array = Array.from(items.values());
+
+	return {
+		body: JSON.stringify({ items: array })
+	}
+}
+
+interface AddToCartItem {
+	id: number;
+	name: string;
+}
+
+export async function post(_params: any, request: Request) {
+	const item: AddToCartItem = await request.json();
+
+	let cookie = request.headers.get('cookie');
+	let userId = lightcookie.parse(cookie)['user-id'];
+
+	if (!userCartItems.has(userId)) {
+		userCartItems.set(userId, new Map());
+	}
+
+	let cart = userCartItems.get(userId);
+	if (cart.has(item.id)) {
+		cart.get(item.id).count++;
+	} else {
+		cart.set(item.id, { id: item.id, name: item.name, count: 1 });
+	}
+
+	return {
+		body: JSON.stringify({
+			ok: true
+		})
+	};
+}
diff --git a/examples/ssr/src/pages/api/products.ts b/examples/ssr/src/pages/api/products.ts
new file mode 100644
index 000000000..533bdef23
--- /dev/null
+++ b/examples/ssr/src/pages/api/products.ts
@@ -0,0 +1,7 @@
+import { products } from '../../models/db';
+
+export function get() {
+	return {
+		body: JSON.stringify(products)
+	};
+}
diff --git a/examples/ssr/src/pages/api/products/[id].ts b/examples/ssr/src/pages/api/products/[id].ts
new file mode 100644
index 000000000..6a3a83722
--- /dev/null
+++ b/examples/ssr/src/pages/api/products/[id].ts
@@ -0,0 +1,17 @@
+import { productMap } from '../../../models/db';
+
+export function get({ id: idStr }) {
+	const id = Number(idStr);
+	if (productMap.has(id)) {
+		const product = productMap.get(id);
+
+		return {
+			body: JSON.stringify(product)
+		};
+	} else {
+		return new Response(null, {
+			status: 400,
+			statusText: 'Not found'
+		});
+	}
+}