From f22f3cb6808edc34bd2dbf173a72ce49187dbd38 Mon Sep 17 00:00:00 2001
From: Arhey <github@oiya.xyz>
Date: Fri, 22 Apr 2022 02:41:03 +0300
Subject: [PATCH] Update the results after pressing the Back button

---
 src/components/HTMLPreview.svelte | 11 +++++++----
 src/routes/index.svelte           | 31 +++++++++++++++++++++++--------
 src/store.js                      | 13 ++++++++++---
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/HTMLPreview.svelte b/src/components/HTMLPreview.svelte
index 1df2a6495..ee0fcda38 100644
--- a/src/components/HTMLPreview.svelte
+++ b/src/components/HTMLPreview.svelte
@@ -1,6 +1,6 @@
 <script>
 	import dayjs from 'dayjs'
-	import { search, query, hasQuery, channels } from '../store.js'
+	import { search, query, hasQuery, channels, setSearchParam } from '../store.js'
 
 	export let data
 	export let close
@@ -40,9 +40,12 @@
 	function searchBy(name, value) {
 		value = value.includes(' ') ? `"${value}"` : value
 		const q = `${name}:${value}`
-		query.set(q)
-		hasQuery.set(true)
-		search(q)
+		if($query !== q) {
+			query.set(q)
+			hasQuery.set(true)
+			search(q)
+			setSearchParam('q', q)
+		}
 		close()
 	}
 </script>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a9fc4611c..446f092d6 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import InfiniteLoading from 'svelte-infinite-loading'
-  import { fetchChannels, hasQuery, countries, filteredChannels, query, search } from '../store.js'
+  import { fetchChannels, hasQuery, countries, filteredChannels, query, search, setSearchParam, setPageTitle } from '../store.js'
   import { onMount, onDestroy } from 'svelte'
   import CountryItem from '../components/CountryItem.svelte'
   import SearchField from '../components/SearchField.svelte'
@@ -19,12 +19,8 @@
 
   $: grouped = _.groupBy($filteredChannels, 'country.code')
 
-  function reset() {
-    limit = initLimit
-    infiniteId = +new Date()
-  }
-
-  function loadMore({ detail: { loaded, complete } }) {
+  function loadMore({ detail }) {
+    let { loaded, complete } = detail
     if (limit < _countries.length) {
       limit++
       loaded()
@@ -33,10 +29,16 @@
     }
   }
 
+  function reset() {
+    infiniteId = +new Date()
+    limit = initLimit
+  }
+
   onMount(async () => {
     const params = new URLSearchParams(window.location.search)
     const q = params.get('q')
     if (q) {
+      setPageTitle(q)
       query.set(q)
       hasQuery.set(true)
     }
@@ -45,9 +47,22 @@
     _countries = Object.values($countries)
     isLoading = false
 
-    if ($hasQuery) {
+    if($hasQuery) {
       search($query)
     }
+
+    window.onpopstate = (event) => {
+      const q = event.state.q
+      if (q) {
+        setPageTitle(q)
+        query.set(q)
+        hasQuery.set(true)
+        search($query)
+      } else {
+        setPageTitle(null)
+        hasQuery.set(false)
+      }
+    }
   })
 </script>
 
diff --git a/src/store.js b/src/store.js
index b86e24758..bd48fc820 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,7 +9,6 @@ export const countries = writable({})
 export const filteredChannels = writable([])
 
 export function search(_query) {
-	setSearchParam('q', _query)
 	const parts = _query.toLowerCase().match(/(".*?"|[^"\s]+)+(?=\s*|\s*$)/g) || []
 	const filters = []
 	for (let value of parts) {
@@ -180,11 +179,19 @@ function generateSearchable(c) {
 	return searchable
 }
 
-function setSearchParam(key, value) {
+export function setSearchParam(key, value) {
 	if (window.history.pushState) {
 		let query = key && value ? `?${key}=${value}` : ''
 		query = query.replace(/\+/g, '%2B')
 		const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}${query}`
-		window.history.pushState({ path: url }, '', url)
+		const state = {}
+		state[key] = value
+		window.history.pushState(state, '', url)
+		setPageTitle(value)
 	}
 }
+
+export function setPageTitle(value) {
+	const title = value ? `${value} · iptv-org` : 'iptv-org'
+	document.title = title
+}