From 0c202e0ef6d6256d1cedc03e7ec3eded554b8046 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Mon, 7 Aug 2023 14:43:05 +0200
Subject: [PATCH] adding testcase for graphql queries mapping.

---
 .../components/refactor/ComposerGraph.svelte  |  16 +++
 .../components/refactor/ComposerWrap.svelte   | 135 -----------------
 src/routes/composer/+page.svelte              | 136 +++++++++++++++++-
 src/routes/{test => graphql}/+page.gql        |   0
 src/routes/graphql/+page.svelte               |  58 ++++++++
 src/routes/test/+page.svelte                  |  30 ----
 6 files changed, 207 insertions(+), 168 deletions(-)
 create mode 100644 src/lib/components/refactor/ComposerGraph.svelte
 delete mode 100644 src/lib/components/refactor/ComposerWrap.svelte
 rename src/routes/{test => graphql}/+page.gql (100%)
 create mode 100644 src/routes/graphql/+page.svelte
 delete mode 100644 src/routes/test/+page.svelte

diff --git a/src/lib/components/refactor/ComposerGraph.svelte b/src/lib/components/refactor/ComposerGraph.svelte
new file mode 100644
index 0000000..ce00d1d
--- /dev/null
+++ b/src/lib/components/refactor/ComposerGraph.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let me;
+</script>
+
+<div class="flex flex-col h-screen border-2 border-green-500">
+	<section class="p-8 h-96">
+		<p>My ID is: {$me.id}</p>
+
+		My state is: {$me.state}
+		{#if $me.store.todos}
+			{#each $me.store.todos as todo}
+				<p>{todo.text}</p>
+			{/each}
+		{/if}
+	</section>
+</div>
diff --git a/src/lib/components/refactor/ComposerWrap.svelte b/src/lib/components/refactor/ComposerWrap.svelte
deleted file mode 100644
index 62f3fa2..0000000
--- a/src/lib/components/refactor/ComposerWrap.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-	import Composer from '$lib/core/refactor/Composer.svelte';
-	import { queryMessages } from '$lib/data/queryMessages';
-	import { queryTodos } from '$lib/data/queryTodos';
-
-	let composer = {
-		id: 'ComposerParent',
-		machine: {
-			initial: 'NOTREADY',
-			states: {
-				NOTREADY: {
-					on: { TOGGLE: 'READY' }
-				},
-				READY: {
-					on: { TOGGLE: 'NOTREADY' }
-				}
-			}
-		},
-		layout: {
-			columns: '1fr 1fr',
-			rows: 'auto 1fr',
-			areas: `
-				"topleft topright"
-				"mainleft mainright"
-			`
-		},
-		children: [
-			{
-				id: 'ComposerCharly',
-				component: 'ComposerCharly',
-				slot: 'mainright',
-				data: {
-					map: {
-						todos: queryTodos,
-						messages: queryMessages
-					}
-				},
-				machine: {
-					initial: 'LOADING',
-					states: {
-						LOADING: {
-							on: {
-								TOGGLE: {
-									target: 'READY'
-								}
-							}
-						},
-						READY: {
-							on: {
-								TOGGLE: {
-									target: 'LOADING'
-								}
-							}
-						}
-					}
-				}
-			},
-			{
-				id: 'ComposerBob',
-				component: 'ComposerBob',
-				slot: 'topleft',
-				machine: {
-					initial: 'READY',
-					states: {
-						NOTREADY: {
-							on: { TOGGLE: 'READY' }
-						},
-						READY: {
-							on: { TOGGLE: 'NOTREADY' }
-						}
-					}
-				}
-			},
-			{
-				id: 'ComposerAlice',
-				component: 'ComposerAlice',
-				slot: 'topright',
-				machine: {
-					initial: 'RED',
-					states: {
-						GREEN: {
-							on: { SWITCH: 'YELLOW' }
-						},
-						YELLOW: {
-							on: { SWITCH: 'RED' }
-						},
-						RED: {
-							on: { SWITCH: 'GREEN' }
-						}
-					},
-					on: {
-						READY: 'GREEN',
-						NOTREADY: 'RED'
-					}
-				}
-			},
-			{
-				id: 'ComposerForm',
-				component: 'ComposerForm',
-				slot: 'mainleft',
-				machine: {
-					id: 'validation',
-					initial: 'notValidated',
-					context: {
-						isValidated: false
-					},
-					states: {
-						notValidated: {
-							on: {
-								VALIDATE: {
-									target: 'isValidated',
-									actions: 'setValidated'
-								}
-							}
-						},
-						isValidated: {
-							on: {
-								INVALIDATE: {
-									target: 'notValidated',
-									actions: 'setNotValidated'
-								}
-							}
-						}
-					},
-					services: {
-						setValidated: (context) => (context.isValidated = true),
-						setNotValidated: (context) => (context.isValidated = false)
-					}
-				}
-			}
-		]
-	};
-</script>
-
-<Composer {composer} />
diff --git a/src/routes/composer/+page.svelte b/src/routes/composer/+page.svelte
index 2785c63..62f3fa2 100644
--- a/src/routes/composer/+page.svelte
+++ b/src/routes/composer/+page.svelte
@@ -1,5 +1,135 @@
-<script>
-	import ComposerWrap from '$lib/components/refactor/ComposerWrap.svelte';
+<script lang="ts">
+	import Composer from '$lib/core/refactor/Composer.svelte';
+	import { queryMessages } from '$lib/data/queryMessages';
+	import { queryTodos } from '$lib/data/queryTodos';
+
+	let composer = {
+		id: 'ComposerParent',
+		machine: {
+			initial: 'NOTREADY',
+			states: {
+				NOTREADY: {
+					on: { TOGGLE: 'READY' }
+				},
+				READY: {
+					on: { TOGGLE: 'NOTREADY' }
+				}
+			}
+		},
+		layout: {
+			columns: '1fr 1fr',
+			rows: 'auto 1fr',
+			areas: `
+				"topleft topright"
+				"mainleft mainright"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerCharly',
+				component: 'ComposerCharly',
+				slot: 'mainright',
+				data: {
+					map: {
+						todos: queryTodos,
+						messages: queryMessages
+					}
+				},
+				machine: {
+					initial: 'LOADING',
+					states: {
+						LOADING: {
+							on: {
+								TOGGLE: {
+									target: 'READY'
+								}
+							}
+						},
+						READY: {
+							on: {
+								TOGGLE: {
+									target: 'LOADING'
+								}
+							}
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'topleft',
+				machine: {
+					initial: 'READY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'topright',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			},
+			{
+				id: 'ComposerForm',
+				component: 'ComposerForm',
+				slot: 'mainleft',
+				machine: {
+					id: 'validation',
+					initial: 'notValidated',
+					context: {
+						isValidated: false
+					},
+					states: {
+						notValidated: {
+							on: {
+								VALIDATE: {
+									target: 'isValidated',
+									actions: 'setValidated'
+								}
+							}
+						},
+						isValidated: {
+							on: {
+								INVALIDATE: {
+									target: 'notValidated',
+									actions: 'setNotValidated'
+								}
+							}
+						}
+					},
+					services: {
+						setValidated: (context) => (context.isValidated = true),
+						setNotValidated: (context) => (context.isValidated = false)
+					}
+				}
+			}
+		]
+	};
 </script>
 
-<ComposerWrap />
+<Composer {composer} />
diff --git a/src/routes/test/+page.gql b/src/routes/graphql/+page.gql
similarity index 100%
rename from src/routes/test/+page.gql
rename to src/routes/graphql/+page.gql
diff --git a/src/routes/graphql/+page.svelte b/src/routes/graphql/+page.svelte
new file mode 100644
index 0000000..3fa1ba7
--- /dev/null
+++ b/src/routes/graphql/+page.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { PageData } from '../test/$houdini';
+	import Composer from '$lib/core/refactor/composer.svelte';
+	import { queryTodos } from '$lib/data/queryTodos';
+
+	export let data: PageData;
+
+	$: ({ queryTest } = data);
+
+	let composer = {
+		id: 'ComposerParent',
+		machine: {
+			initial: 'NOTREADY',
+			states: {
+				NOTREADY: {
+					on: { TOGGLE: 'READY' }
+				},
+				READY: {
+					on: { TOGGLE: 'NOTREADY' }
+				}
+			}
+		},
+		children: [
+			{
+				id: 'ComposerGraph',
+				component: 'ComposerGraph',
+				data: {
+					map: {
+						todos: queryTodos
+					}
+				},
+				machine: {
+					initial: 'LOADING',
+					states: {
+						LOADING: {
+							on: {
+								TOGGLE: {
+									target: 'READY'
+								}
+							}
+						},
+						READY: {
+							on: {
+								TOGGLE: {
+									target: 'LOADING'
+								}
+							}
+						}
+					}
+				}
+			}
+		]
+	};
+</script>
+
+{JSON.stringify($queryTest.data, null, 2)}
+
+<Composer {composer} />
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
deleted file mode 100644
index 8795a7e..0000000
--- a/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import Composite from '$lib/core/Composite.svelte';
-	// import type { PageData } from './$houdini';
-	// export let data: PageData;
-
-	// $: ({ queryTest } = data);
-
-	let composite = {
-		id: 'test',
-		layout: {
-			areas: `
-				"top bottom"
-			`,
-			columns: '1fr 500px',
-			rows: '1fr'
-		},
-		children: [
-			{
-				id: 'bottommessage',
-				component: 'Messages',
-				slot: 'bottom'
-				// map: { messages: '@data:queryMessages' }
-			}
-		]
-	};
-</script>
-
-<!-- {JSON.stringify($queryTest.data, null, 2)} -->
-
-<Composite {composite} />