svelte-pokedex: add filter method to grid

Author: paulcpk

pokedex-app/README.md

@@ -103,10 +103,12 @@ I keep asking myself, "Who would come up with that and think it was a good idea?
 
 This doesn't work btw. Still struggling to fetch my `id` param from the URL. It seems like they completely revamped the API for this, all the Stackoverflow posts dated older than ~ 6 months are useless.
 
+More highly esotheric syntax for observing variable changes: (https://stackoverflow.com/questions/56983938/in-svelte-how-to-console-logyes-when-a-variable-changed)[https://stackoverflow.com/questions/56983938/in-svelte-how-to-console-logyes-when-a-variable-changed]
 
-Time to implement: ~ 1h
+
+Time to implement: ~ 2.5h
 
 Breakdown:
-- App Setup and UI: 1h
+- App Setup and UI: 2.5h
 - Testing Setup: 0h
 - CI/CD: 0h

pokedex-app/svelte-pokedex/src/components/Grid.svelte

@@ -12,14 +12,26 @@
 	let searchValue = '';
 	let page = 0;
 
-	onMount(async function () {
+	async function fetchData() {
 		const response = await fetch(
 			`https://pokeapi.co/api/v2/pokemon?limit=${FETCH_LIMIT}&offset=${page * FETCH_LIMIT}`
 		);
 		const res = await response.json();
 		data = [...data, ...res.results];
-		console.log('data', data);
+	}
+
+	onMount(async function () {
+		fetchData();
 	});
+
+	$: if (page) {
+		fetchData();
+	}
+
+	$: if (searchValue || data) {
+		const filteredCollection = data.filter((item) => item.name.includes(searchValue));
+		displayData = filteredCollection;
+	}
 </script>
 
 <div class="grid-container">
@@ -33,12 +45,14 @@
 		/>
 	</div>
 	<div class="grid-wrapper">
-		{#each data as item}
+		{#each displayData as item}
 			{@const postId = getPostIdFromUrl(item.url)}
 			<a href={`detail/${getPostIdFromUrl(item.url)}`}>
 				<ItemCard name={item.name} postId={getPostIdFromUrl(item.url)} />
 			</a>
 		{/each}
 	</div>
-	<button class="load-more button is-primary is-fullwidth"> Load More </button>
+	<button class="load-more button is-primary is-fullwidth" on:click={() => page++}>
+		Load More
+	</button>
 </div>