add search loader & refactor results rendering
This commit is contained in:
dog
parent
cf7aec3e1c
commit
f520de9d52
|
|
@ -363,6 +363,7 @@
|
|||
"Video": "Video",
|
||||
"Video format not supported": "Video format not supported",
|
||||
"Views": "Views",
|
||||
"We couldn't find anything for your request": "We couldn’t find anything for your request",
|
||||
"We can't find you, check email or": "We can't find you, check email or",
|
||||
"We know you, please try to login": "This email address is already registered, please try to login",
|
||||
"We've sent you a message with a link to enter our website.": "We've sent you an email with a link to your email. Follow the link in the email to enter our website.",
|
||||
|
|
|
|||
|
|
@ -381,6 +381,7 @@
|
|||
"Video": "Видео",
|
||||
"Video format not supported": "Тип видео не поддерживается",
|
||||
"Views": "Просмотры",
|
||||
"We couldn't find anything for your request": "Мы не смогли ничего найти по вашему запросу",
|
||||
"We can't find you, check email or": "Не можем вас найти, проверьте адрес электронной почты или",
|
||||
"We know you, please try to login": "Такой адрес почты уже зарегистрирован, попробуйте залогиниться",
|
||||
"We've sent you a message with a link to enter our website.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.",
|
||||
|
|
|
|||
|
|
@ -109,3 +109,24 @@
|
|||
.filterResultsControl {
|
||||
@include searchFilterControl;
|
||||
}
|
||||
|
||||
.searchLoader {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
border: 5px solid #fff;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,22 +5,16 @@ import { ArticleCard } from '../../Feed/ArticleCard'
|
|||
import { Button } from '../../_shared/Button'
|
||||
import { Icon } from '../../_shared/Icon'
|
||||
|
||||
// import { PRERENDERED_ARTICLES_COUNT } from '../../Views/Home'
|
||||
|
||||
// import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
|
||||
|
||||
import type { Shout } from '../../../graphql/types.gen'
|
||||
|
||||
import { searchUrl } from '../../../utils/config'
|
||||
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
|
||||
import styles from './SearchModal.module.scss'
|
||||
|
||||
// @@TODO implement search
|
||||
// @@TODO implement throttling
|
||||
|
||||
// @@TODO handle founded shouts rendering (cors)
|
||||
// @@TODO implement load more (await ...({ filters: { .. }, limit: .., offset: .. }))
|
||||
// @@TODO implement modal hiding on article click
|
||||
// @@TODO search url as const
|
||||
// @@TODO refactor switcher, filters, topics
|
||||
|
||||
const getSearchCoincidences = ({ str, intersection }) =>
|
||||
`<span>${str.replace(
|
||||
|
|
@ -33,15 +27,17 @@ export const SearchModal = () => {
|
|||
|
||||
const searchInputRef: { current: HTMLInputElement } = { current: null }
|
||||
|
||||
const [isSearching, setIsSearching] = createSignal(false)
|
||||
const [searchResultsList, setSearchResultsList] = createSignal([])
|
||||
// const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
|
||||
const [searchResultsList, setSearchResultsList] = createSignal<[] | null>([])
|
||||
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
|
||||
const [isLoading, setIsLoading] = createSignal(false)
|
||||
|
||||
const handleSearch = async () => {
|
||||
const searchValue = searchInputRef.current?.value || ''
|
||||
|
||||
if (Boolean(searchValue)) {
|
||||
await fetch(`https://search.discours.io/search?q=${searchValue}`, {
|
||||
setIsLoading(true)
|
||||
|
||||
await fetch(`${searchUrl}=${searchValue}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
accept: 'application/json',
|
||||
|
|
@ -50,10 +46,8 @@ export const SearchModal = () => {
|
|||
})
|
||||
.then((data) => data.json())
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
|
||||
// if (data.length) {
|
||||
// const preparedSearchResultsList = [].map((article) => ({
|
||||
// if (data.what) {
|
||||
// const preparedSearchResultsList = data.what.map((article) => ({
|
||||
// ...article,
|
||||
// title: getSearchCoincidences({
|
||||
// str: article.title,
|
||||
|
|
@ -62,19 +56,27 @@ export const SearchModal = () => {
|
|||
// subtitle: getSearchCoincidences({
|
||||
// str: article.subtitle,
|
||||
// intersection: searchInputRef.current?.value || ''
|
||||
// })
|
||||
// }),
|
||||
// }))
|
||||
//
|
||||
// setSearchResultsList(preparedSearchResultsList)
|
||||
//
|
||||
// @@TODO handle setIsLoadMoreButtonVisible()
|
||||
// } else {
|
||||
// // @@TODO handle no search results notice
|
||||
// setSearchResultsList(null)
|
||||
// }
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('search request failed', error)
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const loadMore = () => {}
|
||||
|
||||
return (
|
||||
<div class={styles.searchContainer}>
|
||||
<input
|
||||
|
|
@ -83,11 +85,13 @@ export const SearchModal = () => {
|
|||
ref={(el) => (searchInputRef.current = el)}
|
||||
class={styles.searchInput}
|
||||
onInput={handleSearch}
|
||||
onFocusIn={() => setIsSearching(true)}
|
||||
onFocusOut={() => setIsSearching(false)}
|
||||
/>
|
||||
|
||||
<Button class={styles.searchButton} onClick={handleSearch} value={<Icon name="search" />} />
|
||||
<Button
|
||||
class={styles.searchButton}
|
||||
onClick={handleSearch}
|
||||
value={isLoading() ? <div class={styles.searchLoader} /> : <Icon name="search" />}
|
||||
/>
|
||||
|
||||
<p
|
||||
class={styles.searchDescription}
|
||||
|
|
@ -96,38 +100,9 @@ export const SearchModal = () => {
|
|||
)}
|
||||
/>
|
||||
|
||||
{/* @@TODO handle switcher */}
|
||||
{/* <ul class={clsx('view-switcher', styles.filterSwitcher)}>
|
||||
<li class="view-switcher__item view-switcher__item--selected">
|
||||
<button type="button">Все</button>
|
||||
</li>
|
||||
<li class="view-switcher__item">
|
||||
<button type="button">Публикации</button>
|
||||
</li>
|
||||
<li class="view-switcher__item">
|
||||
<button type="button">Темы</button>
|
||||
</li>
|
||||
</ul> */}
|
||||
|
||||
{/* @@TODO handle filter */}
|
||||
{/* <Show when={FILTERS.length}>
|
||||
<div class={styles.filterResults}>
|
||||
<For each={FILTERS}>
|
||||
{(filter) => (
|
||||
<button
|
||||
type="button"
|
||||
class={styles.filterResultsControl}
|
||||
onClick={() => setActiveFilter(filter)}
|
||||
>
|
||||
Период времени
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show> */}
|
||||
|
||||
{/* <Show when={searchResultsList().length}> */}
|
||||
<Show when={true}>
|
||||
{/* <Show when={!isLoading()}> */}
|
||||
<Show when={false}>
|
||||
<Show when={searchResultsList().length}>
|
||||
{/* <For each={searchResultsList()}> */}
|
||||
<For
|
||||
each={[
|
||||
|
|
@ -136,7 +111,7 @@ export const SearchModal = () => {
|
|||
cover: 'production/image/bbad6b10-9b44-11ee-bdef-5758f9198f7d.png',
|
||||
createdAt: '12',
|
||||
id: 12,
|
||||
slug: '/',
|
||||
slug: '/about',
|
||||
authors: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -144,8 +119,8 @@ export const SearchModal = () => {
|
|||
slug: '/'
|
||||
}
|
||||
],
|
||||
title: '',
|
||||
subtitle: '',
|
||||
title: 'asas',
|
||||
subtitle: 'asas',
|
||||
topics: []
|
||||
}
|
||||
]}
|
||||
|
|
@ -162,28 +137,53 @@ export const SearchModal = () => {
|
|||
)}
|
||||
</For>
|
||||
|
||||
{/* @@TODO handle load more */}
|
||||
{/* <Show when={isLoadMoreButtonVisible()}>
|
||||
<Show when={isLoadMoreButtonVisible()}>
|
||||
<p class="load-more-container">
|
||||
<button class="button" onClick={loadMore}>
|
||||
{t('Load more')}
|
||||
</button>
|
||||
</p>
|
||||
</Show> */}
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
<Show when={!searchResultsList()}>
|
||||
<p class={styles.searchDescription} innerHTML={t("We couldn't find anything for your request")} />
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
{/* @@TODO handle filter */}
|
||||
{/* <Show when={FILTERS.length}>
|
||||
<div class={styles.filterResults}>
|
||||
<For each={FILTERS}>
|
||||
{(filter) => (
|
||||
<button
|
||||
type="button"
|
||||
class={styles.filterResultsControl}
|
||||
onClick={() => setActiveFilter(filter)}
|
||||
>
|
||||
{filter.name}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show> */}
|
||||
|
||||
{/* @@TODO handle topics */}
|
||||
{/* <div class="container-xl">
|
||||
{/* <Show when={TOPICS.length}>
|
||||
<div class="container-xl">
|
||||
<div class="row">
|
||||
<div class={clsx('col-md-18 offset-md-2', styles.topicsList)}>
|
||||
{topics.map((topic) => (
|
||||
<button type="button" class={styles.topTopic}>
|
||||
<For each={TOPICS}>
|
||||
{(topic) => (
|
||||
<button type="button" class={styles.topTopic} onClick={() => setActiveTopic(topic)}>
|
||||
{topic.name}
|
||||
</button>
|
||||
))}
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</Show> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,6 @@ const defaultThumborUrl = 'https://images.discours.io'
|
|||
export const thumborUrl = import.meta.env.PUBLIC_THUMBOR_URL || defaultThumborUrl
|
||||
|
||||
export const SENTRY_DSN = import.meta.env.PUBLIC_SENTRY_DSN || ''
|
||||
|
||||
const defaultSearchUrl = 'https://search.discours.io/search?q'
|
||||
export const searchUrl = import.meta.env.PUBLIC_SEARCH_URL || defaultSearchUrl
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user