code refactoring

index.html

@@ -841,26 +841,6 @@
 
     </script>
     <script>
-        window.addEventListener('load', e => {
-            showPage(window.location.hash)
-        })
-        window.addEventListener('hashchange', e => {
-            showPage(window.location.hash)
-        })
-        window.addEventListener('popstate', e => {
-            showPage(window.location.hash)
-        })
-
-        let currentTorrent
-        document.addEventListener('click', async e => {
-            if (e.target.closest('.torrent-card__download-button')) {
-                const _target = e.target.closest('.torrent-card__download-button')
-                const card = _target.closest('.torrent-card')
-                const cardId = parseInt(card.id)
-                const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = await getDataFromIDB(cardId)
-                downloadTorrent(filename, startTx, chunks, cardId)
-            }
-        })
         const render = {
             torrentCard(obj) {
                 const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = obj
@@ -927,51 +907,6 @@
             getRef('torrent_container').append(renderTorrents(allTorrents))
         }
 
-        getRef('search_torrent').addEventListener('keydown', async e => {
-            if (e.target.value.trim() !== '') {
-                switch (e.key) {
-                    case 'Enter':
-                        const searchKey = getRef('search_torrent').value.trim()
-                        renderSearchResult(searchKey)
-                        pushParams()
-                        break;
-                    case 'ArrowDown':
-                        e.preventDefault()
-                        getRef('search_suggestions').firstElementChild.focus()
-                        break;
-                }
-            }
-        })
-        getRef('search_suggestions').addEventListener('keydown', async e => {
-            switch (e.key) {
-                case 'ArrowUp':
-                    e.preventDefault()
-                    if (e.target.previousElementSibling)
-                        e.target.previousElementSibling.focus()
-                    else
-                        getRef('search_torrent').focusIn()
-                    break;
-                case 'ArrowDown':
-                    e.preventDefault()
-                    if (e.target.nextElementSibling)
-                        e.target.nextElementSibling.focus()
-                    break;
-            }
-        })
-        getRef('search_torrent').addEventListener('input', async e => {
-            throttle(() => {
-                const searchKey = getRef('search_torrent').value.trim()
-                renderSearchSuggestions(searchKey)
-            }, 100)
-        })
-        getRef('advance_torrent_search').addEventListener('keyup', async e => {
-            if (e.target.value.trim() !== '' && e.key === 'Enter') {
-                const searchKey = getRef('advance_torrent_search').value.trim()
-                renderSearchResult(searchKey)
-                pushParams()
-            }
-        })
-
         function getSearchParams() {
             const urlSearchParams = new URLSearchParams(window.location.search);
             const params = Object.fromEntries(urlSearchParams.entries());
@@ -1081,27 +1016,6 @@
             document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
             getRef(page).classList.remove('hide-completely')
         }
-        getRef('advance_search_switch').addEventListener('change', e => {
-            if (e.detail.value) {
-                advancedSearch = {
-                    isActive: true,
-                    category: getRef('category_selector').value
-                }
-                getRef('advance_search_panel').classList.remove('hide-completely')
-            }
-            else {
-                advancedSearch.isActive = false
-                advancedSearch.category = ''
-                getRef('advance_search_panel').classList.add('hide-completely')
-            }
-            advancedSearch['query'] = getRef('advance_torrent_search').value.trim()
-        })
-        getRef('category_selector').addEventListener('change', e => {
-            advancedSearch.category = e.detail.value
-        })
-        getRef('browse_category_selector').addEventListener('change', e => {
-            showCategoryTorrents(e.detail.value)
-        })
 
         function alphaIncSort(arr, prop) {
             return arr.sort((a, b) => a[prop].localeCompare(b[prop]))
@@ -1110,15 +1024,18 @@
             return arr.sort((a, b) => b[prop].localeCompare(a[prop]))
         }
 
-        async function showCategoryTorrents(category) {
+        async function getFilteredTorrents(keys, searchKey, limit = undefined){
             const torrents = await getDataFromIDB()
             const options = {
-                keys: ['type'],
+                keys,
                 threshold: 0.2,
             }
             const fuseSearch = new Fuse(torrents, options)
-            const result = fuseSearch.search(category).map(elem => elem.item)
+            return fuseSearch.search(searchKey, {limit}).map(elem => elem.item)
+        }
 
+        async function showCategoryTorrents(category) {
+            const result = await getFilteredTorrents(['type'], category)
             getRef('browser_category_torrents').innerHTML = ``
             getRef('page_selector').innerHTML = ''
 
@@ -1144,34 +1061,8 @@
             }
         }
 
-        getRef('page_selector').addEventListener('change', async e => {
-            const torrents = await getDataFromIDB()
-            const options = {
-                keys: ['type'],
-                threshold: 0.2,
-            }
-            const fuseSearch = new Fuse(torrents, options)
-            const category = getRef('browse_category_selector').value
-            const result = fuseSearch.search(category).map(elem => elem.item)
-
-            const startIndex = parseInt(e.detail.value) * 20
-            const endIndex = ((parseInt(e.detail.value) * 20) + 30) < result.length ? (parseInt(e.detail.value) * 20) + 20 : result.length
-
-            setTimeout(() => {
-                getRef('browser_category_torrents').scrollIntoView({ behavior: 'smooth', block: 'start' })
-                getRef('browser_category_torrents').innerHTML = ``
-                getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
-            }, 200);
-        })
-
         async function renderSearchSuggestions(searchKey) {
-            const torrents = await getDataFromIDB()
+            const result = await getFilteredTorrents(['name', 'filename'], searchKey, limit = 6)
-            const options = {
-                keys: ['name', 'filename'],
-                threshold: 0.2,
-            }
-            const fuseSearch = new Fuse(torrents, options)
-            const result = fuseSearch.search(searchKey, { limit: 6 }).map(elem => elem.item)
 
             getRef('search_suggestions').innerHTML = ``
             if (result.length) {
@@ -1191,6 +1082,107 @@
                 getRef('search_suggestions').append(suggestionsFrag)
             }
         }
+
+        // Event listeners 
+
+        window.addEventListener('load', e => {
+            showPage(window.location.hash)
+        })
+        window.addEventListener('hashchange', e => {
+            showPage(window.location.hash)
+        })
+        window.addEventListener('popstate', e => {
+            showPage(window.location.hash)
+        })
+
+        let currentTorrent
+        document.addEventListener('click', async e => {
+            if (e.target.closest('.torrent-card__download-button')) {
+                const _target = e.target.closest('.torrent-card__download-button')
+                const card = _target.closest('.torrent-card')
+                const cardId = parseInt(card.id)
+                const { id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks } = await getDataFromIDB(cardId)
+                downloadTorrent(filename, startTx, chunks, cardId)
+            }
+        })
+        getRef('search_torrent').addEventListener('keydown', async e => {
+            if (e.target.value.trim() !== '') {
+                switch (e.key) {
+                    case 'Enter':
+                        const searchKey = getRef('search_torrent').value.trim()
+                        renderSearchResult(searchKey)
+                        pushParams()
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault()
+                        getRef('search_suggestions').firstElementChild.focus()
+                        break;
+                }
+            }
+        })
+        getRef('search_suggestions').addEventListener('keydown', async e => {
+            switch (e.key) {
+                case 'ArrowUp':
+                    e.preventDefault()
+                    if (e.target.previousElementSibling)
+                        e.target.previousElementSibling.focus()
+                    else
+                        getRef('search_torrent').focusIn()
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault()
+                    if (e.target.nextElementSibling)
+                        e.target.nextElementSibling.focus()
+                    break;
+            }
+        })
+        getRef('search_torrent').addEventListener('input', async e => {
+            throttle(() => {
+                const searchKey = getRef('search_torrent').value.trim()
+                renderSearchSuggestions(searchKey)
+            }, 100)
+        })
+        getRef('advance_torrent_search').addEventListener('keyup', async e => {
+            if (e.target.value.trim() !== '' && e.key === 'Enter') {
+                const searchKey = getRef('advance_torrent_search').value.trim()
+                renderSearchResult(searchKey)
+                pushParams()
+            }
+        })
+        getRef('advance_search_switch').addEventListener('change', e => {
+            if (e.detail.value) {
+                advancedSearch = {
+                    isActive: true,
+                    category: getRef('category_selector').value
+                }
+                getRef('advance_search_panel').classList.remove('hide-completely')
+            }
+            else {
+                advancedSearch.isActive = false
+                advancedSearch.category = ''
+                getRef('advance_search_panel').classList.add('hide-completely')
+            }
+            advancedSearch['query'] = getRef('advance_torrent_search').value.trim()
+        })
+        getRef('category_selector').addEventListener('change', e => {
+            advancedSearch.category = e.detail.value
+        })
+        getRef('browse_category_selector').addEventListener('change', e => {
+            showCategoryTorrents(e.detail.value)
+        })
+        getRef('page_selector').addEventListener('change', async e => {
+            const category = getRef('browse_category_selector').value
+            const result = await getFilteredTorrents(['type'], category)
+
+            const startIndex = parseInt(e.detail.value) * 20
+            const endIndex = ((parseInt(e.detail.value) * 20) + 30) < result.length ? (parseInt(e.detail.value) * 20) + 20 : result.length
+
+            setTimeout(() => {
+                getRef('browser_category_torrents').scrollIntoView({ behavior: 'smooth', block: 'start' })
+                getRef('browser_category_torrents').innerHTML = ``
+                getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
+            }, 200);
+        })
     </script>
 </body>