feat: clear Nuxt state on unmount

limbo-works · Nov 26, 2024 · 84e309b · 84e309b
1 parent 628734b
commit 84e309b
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 90 deletions.
diff --git a/.playground/app.vue b/.playground/app.vue
@@ -1,42 +1,18 @@
 <template>
-  <div>
-    Hello World!
-	<LimboSearch
-		ref="limboSearch"
-		:search-filters="{
-			endpointUrl: 'https://www.jammerbugt.dk/api/jobs/search/',
-			fields: [{name: 'contextId', value: '1588'}, {name: 'text', value: ''}, {name:'limit', value: '16'}],
-		}"
-		#default="{ data, pagination, action }"
-	>
-		<template v-if="data">
-			<pre>{{ pagination }}</pre>
-			<pre>{{ data }}</pre>
-			<div
-				v-if="
-					pagination?.total -
-						pagination?.limit -
-						pagination?.offset >
-						0
-				"
-				class="flex justify-center"
-			>
-				<button
-					@click="action.fetchMore()"
-					class="mt-60 bg-purple text-white spa-link cursor-pointer flex items-center justify-center py-20 px-48 text-md hover:bg-purple-light transition duration-200 ease-smooth-line spa-link--prefetched"
-				>
-					<!-- eslint-disable -->
-					<span slot="label">Vis flere</span>
-					<!-- eslint-enable -->
-				</button>
-			</div>
-		</template>
-	</LimboSearch>
-  </div>
+	<div>
+		<div class="links">
+			<NuxtLink to="/page1">Page 1</NuxtLink>
+			<NuxtLink to="/page2">Page 2</NuxtLink>
+			<NuxtLink to="/page3">Page 3</NuxtLink>
+		</div>
+		<NuxtPage />
+	</div>
 </template>
 
-
-<script setup>
-const limboSearch = ref(null);
-console.log(limboSearch);
-</script>
+<script setup></script>
+<style>
+.links {
+	display: flex;
+	justify-content: space-around;
+}
+</style>
diff --git a/.playground/pages/page1.vue b/.playground/pages/page1.vue
@@ -0,0 +1,51 @@
+<template>
+	<div>
+		Hello World!
+		<LimboSearch
+			ref="limboSearch"
+			:search-filters="{
+				endpointUrl: 'https://www.jammerbugt.dk/api/jobs/search/',
+				fields: [
+					{ name: 'contextId', value: '1588' },
+					{ name: 'text', value: '' },
+					{ name: 'limit', value: '3' },
+				],
+			}"
+			#default="{ data, pagination, action }"
+		>
+			<template v-if="data">
+				<pre>{{ pagination }}</pre>
+				<pre>{{ data }}</pre>
+				<div
+					v-if="
+						pagination?.total -
+							pagination?.limit -
+							pagination?.offset >
+						0
+					"
+					class="flex justify-center"
+				>
+					<button
+						@click="action.fetchMore()"
+						class="mt-60 bg-purple text-white spa-link cursor-pointer flex items-center justify-center py-20 px-48 text-md hover:bg-purple-light transition duration-200 ease-smooth-line spa-link--prefetched"
+					>
+						<!-- eslint-disable -->
+						<span slot="label">Vis flere</span>
+						<!-- eslint-enable -->
+					</button>
+				</div>
+			</template>
+		</LimboSearch>
+	</div>
+</template>
+
+<script setup>
+import { useNuxtApp } from "nuxt/app";
+import { onMounted } from "vue";
+
+const limboSearch = ref(null);
+
+onMounted(() => {
+	console.log("mounted", useNuxtApp().payload.state);
+});
+</script>
diff --git a/.playground/pages/page2.vue b/.playground/pages/page2.vue
@@ -0,0 +1,80 @@
+<template>
+	<div style="padding: 40px">
+		<h1>Hello World!</h1>
+		<input v-model="filters.fields[1].value" @change="submitSearch" />
+		<a
+			:href="item.url"
+			v-for="item in limboSearch.searchData?.data"
+			:key="item.id"
+		>
+			<div style="padding: 20px; font-size: 2em">
+				{{ item.title }}
+			</div>
+			<div style="padding: 0 20px 20px">{{ item.teaser }}</div>
+		</a>
+		<div
+			v-if="
+				limboSearch.searchData?.pagination?.total -
+					limboSearch.searchData?.pagination?.limit -
+					limboSearch.searchData?.pagination?.offset >
+				0
+			"
+			class="flex justify-center"
+		>
+			<button
+				@click="limboSearch.fetchMore()"
+				class="mt-60 bg-purple text-white spa-link cursor-pointer flex items-center justify-center py-20 px-48 text-md hover:bg-purple-light transition duration-200 ease-smooth-line spa-link--prefetched"
+			>
+				<!-- eslint-disable -->
+				<span slot="label">Vis flere</span>
+				<!-- eslint-enable -->
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const route = useRoute();
+
+const filters = ref({
+	endpointUrl: "https://www.jammerbugt.dk/api/jobs/search/",
+	fields: [
+		{ name: "contextId", value: "1588" },
+		{ name: "text", value: "" },
+	],
+});
+
+const limboSearch = await useLimboSearch({
+	searchKey: route.path,
+
+	searchFilters: filters.value,
+	config: {
+		callMethod: "GET",
+		allowSearchFiltersMutation: true,
+		updateVueRouteOnSearch: true,
+		limit: 3,
+		immediateSearch: { useUrlQuery: true, ssr: true },
+		// searchBodyTransformerMethod: () => ({
+		// 	page: { name: "page", value: page.value },
+		// 	...props.searchFilters.fieldByName,
+		// }),
+		// hiddenParameters: [
+		// 	"siteId",
+		// 	"contextId",
+		// 	"pageId",
+		// 	"culture",
+		// 	"hitsPerPage",
+		// 	"sorting",
+		// 	"attributesToRetrieve",
+		// 	"filters.allowedArchives",
+		// 	"parentId",
+		// 	"filters.allowedSites",
+		// ],
+	},
+});
+
+function submitSearch() {
+	console.log("hello");
+	limboSearch?.submit();
+}
+</script>
diff --git a/.playground/pages/page3.vue b/.playground/pages/page3.vue
@@ -0,0 +1,51 @@
+<template>
+	<div>
+		Hello World!
+		<LimboSearch
+			ref="limboSearch"
+			:search-filters="{
+				endpointUrl: 'https://www.jammerbugt.dk/api/jobs/search/',
+				fields: [
+					{ name: 'contextId', value: '1588' },
+					{ name: 'text', value: '' },
+					{ name: 'limit', value: '3' },
+				],
+			}"
+			#default="{ data, pagination, action }"
+		>
+			<template v-if="data">
+				<pre>{{ pagination }}</pre>
+				<pre>{{ data }}</pre>
+				<div
+					v-if="
+						pagination?.total -
+							pagination?.limit -
+							pagination?.offset >
+						0
+					"
+					class="flex justify-center"
+				>
+					<button
+						@click="action.fetchMore()"
+						class="mt-60 bg-purple text-white spa-link cursor-pointer flex items-center justify-center py-20 px-48 text-md hover:bg-purple-light transition duration-200 ease-smooth-line spa-link--prefetched"
+					>
+						<!-- eslint-disable -->
+						<span slot="label">Vis flere</span>
+						<!-- eslint-enable -->
+					</button>
+				</div>
+			</template>
+		</LimboSearch>
+	</div>
+</template>
+
+<script setup>
+import { useNuxtApp } from "nuxt/app";
+import { onMounted } from "vue";
+
+const limboSearch = ref(null);
+
+onMounted(() => {
+	console.log("mounted", useNuxtApp().payload.state);
+});
+</script>
diff --git a/components/LimboSearch.vue b/components/LimboSearch.vue
@@ -6,19 +6,19 @@
 </template>
 
 <script setup>
-const emits = defineEmits(['init', 'update', 'error']);
+const emits = defineEmits(["init", "update", "error"]);
 
 const props = defineProps({
 	tag: {
 		type: String,
-		default: 'div',
+		default: "div",
 	},
 	searchFilters: {
 		type: Object,
 		required: true,
 		validator(obj) {
 			return (
-				typeof obj.endpointUrl === 'string' && Array.isArray(obj.fields)
+				typeof obj.endpointUrl === "string" && Array.isArray(obj.fields)
 			);
 		},
 	},
@@ -37,7 +37,7 @@ const props = defineProps({
 	},
 	searchKey: {
 		type: String,
-		default: '',
+		default: "",
 	},
 });
 
@@ -108,11 +108,10 @@ const bindings = computed(() => {
 	};
 });
 
-const id = useId();
-
+const route = useRoute();
 const dynamicOptions = computed(() => {
 	return {
-		searchKey: props.searchKey ? props.searchKey : id,
+		searchKey: props.searchKey ? props.searchKey : route.path,
 		searchFilters: props.searchFilters,
 		config: props.config,
 		extraParameters: props.extraParameters,
@@ -126,14 +125,14 @@ watch(
 	() => limboSearch.state.isInitiated,
 	(isInitiated) => {
 		if (isInitiated) {
-			emits('init', true);
+			emits("init", true);
 		}
 	}
 );
 
 // can we get the functions from the limboSearch object directly without adding them here..
 function submit() {
-	emits('update', true);
+	emits("update", true);
 	limboSearch?.submit();
 }
 </script>