Skip to content

Commit d8ade21

Browse files
joedixonjoedixon
authored
Refactor search to use object (#796)
* Refactor search to object * Apply fixes from StyleCI
1 parent 2cf8daf commit d8ade21

File tree

2 files changed

+89
-65
lines changed

2 files changed

+89
-65
lines changed

‎resources/js/search.js

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,54 @@ import algoliasearch from 'algoliasearch/lite';
22

33
const client = algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SECRET);
44

5-
window.search = (event) => {
6-
// If the input is empty, return no results.
7-
if (event.target.value.length === 0) {
8-
return Promise.resolve({ hits: [] });
9-
}
10-
11-
// Perform the search using the provided input.
12-
return client.multipleQueries([
13-
{
14-
indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
15-
query: event.target.value,
16-
params: {
17-
hitsPerPage: 5,
18-
attributesToSnippet: ['body:10'],
5+
window.searchConfig = () => {
6+
return {
7+
show: false,
8+
threads: {
9+
total: 0,
10+
formattedTotal: function () {
11+
return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
1912
},
13+
threads: [],
2014
},
21-
{
22-
indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
23-
query: event.target.value,
24-
params: {
25-
hitsPerPage: 5,
26-
attributesToSnippet: ['body:10'],
15+
articles: {
16+
total: 0,
17+
formattedTotal: function () {
18+
return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
2719
},
20+
articles: [],
21+
},
22+
search: async function (query) {
23+
// If the input is empty, return no results.
24+
if (query.length === 0) {
25+
return Promise.resolve({ hits: [] });
26+
}
27+
28+
// Perform the search using the provided input.
29+
const { results } = await client.multipleQueries([
30+
{
31+
indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
32+
query: query,
33+
params: {
34+
hitsPerPage: 5,
35+
attributesToSnippet: ['body:10'],
36+
},
37+
},
38+
{
39+
indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
40+
query: query,
41+
params: {
42+
hitsPerPage: 5,
43+
attributesToSnippet: ['body:10'],
44+
},
45+
},
46+
]);
47+
48+
this.show = true;
49+
this.threads.total = results[0].nbHits;
50+
this.threads.threads = results[0].hits;
51+
this.articles.total = results[1].nbHits;
52+
this.articles.articles = results[1].hits;
2853
},
29-
]);
54+
};
3055
};

‎resources/views/_partials/_search.blade.php

Lines changed: 43 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div x-data="{ results: false, threads: [], articles: [] }">
1+
<div x-data="searchConfig()">
22
<label for="search" class="sr-only">Search</label>
33

44
<div class="relative">
@@ -7,65 +7,64 @@
77
</div>
88

99
<input
10-
@click.outside="results = false"
11-
@keyup="window.search(event).then(function({ results: hits }) { results = true; threads = hits[0].hits; articles = hits[1].hits; })"
10+
@click.outside="show = false"
11+
@keyup.escape="show = false"
12+
@keyup="search(event.target.value)"
1213
type="search"
1314
name="search"
1415
id="search"
1516
class="border-0 border-t border-b block pl-10 border-gray-300 md:border md:rounded w-full"
1617
placeholder="Search for threads and articles..."
1718
/>
1819

19-
<template x-if="results">
20-
<div class="search absolute md:origin-top-right md:right-0 md:rounded md:shadow-lg bg-white md:mt-2 z-50">
21-
<div class="flex flex-col md:flex-row">
22-
<div class="w-full flex-none border-r border-b md:w-1/2">
23-
<div class="flex text-lg font-medium border-b p-4">
24-
<span class="text-gray-900 mr-3">Threads</span>
20+
<div x-show="show" x-cloak class="search absolute md:origin-top-right md:right-0 md:rounded md:shadow-lg bg-white md:mt-2 z-50">
21+
<div class="flex flex-col md:flex-row">
22+
<div class="w-full flex-none border-r border-b md:w-1/2">
23+
<div class="flex text-lg font-medium border-b p-4">
24+
<span class="text-gray-900 mr-3">Threads</span>
2525

26-
<span class="text-gray-300" x-text="threads.length + ' Results'"></span>
27-
</div>
28-
29-
<div class="max-h-72 overflow-y-scroll">
30-
<template x-for="thread in threads" :key="thread.subject">
31-
<a :href="'/forum/'+thread.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
32-
<span class="text-black-900 text-lg font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
33-
<span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
34-
</a>
35-
</template>
36-
</div>
26+
<span class="text-gray-300" x-text="threads.formattedTotal()"></span>
27+
</div>
3728

38-
<span x-show="threads.length === 0" x-cloak class="p-4 text-gray-500 block">
39-
No threads found
40-
</span>
29+
<div class="max-h-72 overflow-y-scroll">
30+
<template x-for="thread in threads.threads">
31+
<a :href="'/forum/'+thread.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
32+
<span class="text-black-900 text-lg font-medium break-all" x-html="thread._highlightResult.subject.value"></span>
33+
<span class="text-black-900 break-all" x-html="thread._snippetResult.body.value"></span>
34+
</a>
35+
</template>
4136
</div>
4237

43-
<div class="w-full flex-none border-b md:w-1/2">
44-
<div class="flex text-lg font-medium border-b p-4">
45-
<span class="text-gray-900 mr-3">Articles</span>
38+
<span x-show="threads.length === 0" x-cloak class="p-4 text-gray-500 block">
39+
No threads found
40+
</span>
41+
</div>
4642

47-
<span class="text-gray-300" x-text="threads.length + ' Results'"></span>
48-
</div>
43+
<div class="w-full flex-none border-b md:w-1/2">
44+
<div class="flex text-lg font-medium border-b p-4">
45+
<span class="text-gray-900 mr-3">Articles</span>
4946

50-
<div class="max-h-72 overflow-y-scroll">
51-
<template x-for="article in articles" :key="article.title">
52-
<a :href="'/articles/'+article.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
53-
<span class="text-black-900 text-lg font-medium break-all" x-html="article._highlightResult.title.value"></span>
54-
<span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
55-
</a>
56-
</template>
57-
</div>
47+
<span class="text-gray-300" x-text="articles.formattedTotal()"></span>
48+
</div>
5849

59-
<span x-show="articles.length === 0" x-cloak class="p-4 text-gray-500 block">
60-
No articles found
61-
</span>
50+
<div class="max-h-72 overflow-y-scroll">
51+
<template x-for="article in articles.articles">
52+
<a :href="'/articles/'+article.slug" class="flex flex-col px-4 py-2 hover:bg-lio-100">
53+
<span class="text-black-900 text-lg font-medium break-all" x-html="article._highlightResult.title.value"></span>
54+
<span class="text-black-900 break-all" x-html="article._snippetResult.body.value"></span>
55+
</a>
56+
</template>
6257
</div>
63-
</div>
6458

65-
<a href="https://algolia.com" class="flex justify-end px-4 py-2">
66-
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
67-
</a>
59+
<span x-show="articles.length === 0" x-cloak class="p-4 text-gray-500 block">
60+
No articles found
61+
</span>
62+
</div>
6863
</div>
69-
</template>
64+
65+
<a href="https://algolia.com" class="flex justify-end px-4 py-2">
66+
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
67+
</a>
68+
</div>
7069
</div>
7170
</div>

0 commit comments

Comments
 (0)