Skip to content

Refactor search to use object #796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 29, 2021
Merged

Refactor search to use object #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0281f5
Refactor search to object
joedixon Dec 28, 2021
576548b
Apply fixes from StyleCI
joedixon Dec 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 46 additions & 21 deletions resources/js/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,54 @@ import algoliasearch from 'algoliasearch/lite';

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

window.search = (event) => {
// If the input is empty, return no results.
if (event.target.value.length === 0) {
return Promise.resolve({ hits: [] });
}

// Perform the search using the provided input.
return client.multipleQueries([
{
indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
query: event.target.value,
params: {
hitsPerPage: 5,
attributesToSnippet: ['body:10'],
window.searchConfig = () => {
return {
show: false,
threads: {
total: 0,
formattedTotal: function () {
return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
},
threads: [],
},
{
indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
query: event.target.value,
params: {
hitsPerPage: 5,
attributesToSnippet: ['body:10'],
articles: {
total: 0,
formattedTotal: function () {
return `${this.total} ${this.total === 1 ? 'Result' : 'Results'}`;
},
articles: [],
},
search: async function (query) {
// If the input is empty, return no results.
if (query.length === 0) {
return Promise.resolve({ hits: [] });
}

// Perform the search using the provided input.
const { results } = await client.multipleQueries([
{
indexName: process.env.MIX_ALGOLIA_THREADS_INDEX,
query: query,
params: {
hitsPerPage: 5,
attributesToSnippet: ['body:10'],
},
},
{
indexName: process.env.MIX_ALGOLIA_ARTICLES_INDEX,
query: query,
params: {
hitsPerPage: 5,
attributesToSnippet: ['body:10'],
},
},
]);

this.show = true;
this.threads.total = results[0].nbHits;
this.threads.threads = results[0].hits;
this.articles.total = results[1].nbHits;
this.articles.articles = results[1].hits;
},
]);
};
};
87 changes: 43 additions & 44 deletions resources/views/_partials/_search.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div x-data="{ results: false, threads: [], articles: [] }">
<div x-data="searchConfig()">
<label for="search" class="sr-only">Search</label>

<div class="relative">
Expand All @@ -7,65 +7,64 @@
</div>

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

<template x-if="results">
<div class="search absolute md:origin-top-right md:right-0 md:rounded md:shadow-lg bg-white md:mt-2 z-50">
<div class="flex flex-col md:flex-row">
<div class="w-full flex-none border-r border-b md:w-1/2">
<div class="flex text-lg font-medium border-b p-4">
<span class="text-gray-900 mr-3">Threads</span>
<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">
<div class="flex flex-col md:flex-row">
<div class="w-full flex-none border-r border-b md:w-1/2">
<div class="flex text-lg font-medium border-b p-4">
<span class="text-gray-900 mr-3">Threads</span>

<span class="text-gray-300" x-text="threads.length + ' Results'"></span>
</div>

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

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

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

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

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

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

<a href="https://algolia.com" class="flex justify-end px-4 py-2">
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
</a>
<span x-show="articles.length === 0" x-cloak class="p-4 text-gray-500 block">
No articles found
</span>
</div>
</div>
</template>

<a href="https://algolia.com" class="flex justify-end px-4 py-2">
<img src="{{ asset('images/algolia.svg') }}" class="h-4 mx-4 my-2" />
</a>
</div>
</div>
</div>