diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 61dfd54f..5ed8ca8d 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -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.", diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 9075a05e..c5d4348c 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -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.": "Мы выслали вам письмо с ссылкой на почту. Перейдите по ссылке в письме, чтобы войти на сайт.", diff --git a/src/components/Nav/SearchModal/SearchModal.module.scss b/src/components/Nav/SearchModal/SearchModal.module.scss index e0dc9801..0a7e40ec 100644 --- a/src/components/Nav/SearchModal/SearchModal.module.scss +++ b/src/components/Nav/SearchModal/SearchModal.module.scss @@ -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); + } +} diff --git a/src/components/Nav/SearchModal/SearchModal.tsx b/src/components/Nav/SearchModal/SearchModal.tsx index 456a88d3..e756edef 100644 --- a/src/components/Nav/SearchModal/SearchModal.tsx +++ b/src/components/Nav/SearchModal/SearchModal.tsx @@ -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 }) => `${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 (
{ ref={(el) => (searchInputRef.current = el)} class={styles.searchInput} onInput={handleSearch} - onFocusIn={() => setIsSearching(true)} - onFocusOut={() => setIsSearching(false)} /> - - -
  • - -
    • -
  • - -
    • - */} + {/* */} + + + {/* */} + + {(article: Shout) => ( + + )} + + + +

    + +

    +     +     + + +

    + + {/* @@TODO handle filter */} {/* @@ -119,71 +161,29 @@ export const SearchModal = () => { class={styles.filterResultsControl} onClick={() => setActiveFilter(filter)} > - Период времени + {filter.name} )}

    */} - {/* */} - - {/* */} - - {(article: Shout) => ( - - )} - - - {/* @@TODO handle load more */} - {/* -

    - -

    -     */} -     - {/* @@TODO handle topics */} - {/*
    -
    -
    - {topics.map((topic) => ( - - ))} + {/* +
    +
    +
    + + {(topic) => ( + + )} + +
    -
    */} + */}
    ) } diff --git a/src/utils/config.ts b/src/utils/config.ts index 3039e213..e83e9735 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -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