Merge branch 'feature/search-modal' into dev

src/components/Nav/HeaderAuth.tsx

@@ -128,7 +128,7 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={!isSaveButtonVisible()}>
               <div class={styles.userControlItem}>
-                <a href="?modal=search">
+                <a href="?m=search">
                   <Icon name="search" class={styles.icon} />
                   <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
                 </a>

src/components/Nav/SearchModal/SearchModal.tsx

@@ -1,9 +1,10 @@
 import type { Shout } from '../../../graphql/schema/core.gen'
 
-import { createSignal, Show, For } from 'solid-js'
+import { createResource, createSignal, For, onCleanup, Show } from 'solid-js'
+import { debounce } from 'throttle-debounce'
 
 import { useLocalize } from '../../../context/localize'
-import { loadShoutsSearch, useArticlesStore } from '../../../stores/zine/articles'
+import { loadShoutsSearch } from '../../../stores/zine/articles'
 import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
 import { byScore } from '../../../utils/sortby'
 import { Button } from '../../_shared/Button'
@@ -17,6 +18,7 @@ import styles from './SearchModal.module.scss'
 // @@TODO handle empty article options after backend support (subtitle, cover, etc.)
 // @@TODO implement load more
 // @@TODO implement FILTERS & TOPICS
+// @@TODO use save/restoreScrollPosition if needed
 
 const getSearchCoincidences = ({ str, intersection }: { str: string; intersection: string }) =>
   `<span>${str.replaceAll(
@@ -24,16 +26,16 @@ const getSearchCoincidences = ({ str, intersection }: { str: string; intersectio
     (casePreservedMatch) => `<span class="blackModeIntersection">${casePreservedMatch}</span>`,
   )}</span>`
 
-const prepareSearchResults = (list, searchValue) =>
-  list.map((article, index) => ({
+const prepareSearchResults = (list: Shout[], searchValue: string) =>
+  list.sort(byScore()).map((article, index) => ({
     ...article,
-    body: '',
-    cover: '',
-    createdAt: '',
+    body: article.body,
+    cover: article.cover,
+    created_at: article.created_at,
     id: index,
     slug: article.slug,
-    authors: [],
-    topics: [],
+    authors: article.authors,
+    topics: article.topics,
     title: article.title
       ? getSearchCoincidences({
           str: article.title,
@@ -50,53 +52,76 @@ const prepareSearchResults = (list, searchValue) =>
 
 export const SearchModal = () => {
   const { t } = useLocalize()
-  const { sortedArticles } = useArticlesStore()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-  const [offset, setOffset] = createSignal(0)
   const [inputValue, setInputValue] = createSignal('')
-  //const [searchResultsList, setSearchResultsList] = createSignal<[] | null>([])
   const [isLoading, setIsLoading] = createSignal(false)
-  // const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-
-  let searchEl: HTMLInputElement
-  const handleQueryChange = async (_ev) => {
-    setInputValue(searchEl.value)
-
-    if (inputValue() && inputValue().length > 2) await loadMore()
-  }
-
-  const loadMore = async () => {
-    setIsLoading(true)
-    saveScrollPosition()
-    if (inputValue() && inputValue().length > 2) {
-      console.log(inputValue())
-      const { hasMore } = await loadShoutsSearch({
+  const [offset, setOffset] = createSignal<number>(0)
+  const [searchResultsList, { refetch: loadSearchResults, mutate: setSearchResultsList }] = createResource<
+    Shout[] | null
+  >(
+    async () => {
+      setIsLoading(true)
+      const { hasMore, newShouts } = await loadShoutsSearch({
+        limit: FEED_PAGE_SIZE,
         text: inputValue(),
         offset: offset(),
-        limit: FEED_PAGE_SIZE,
       })
+      setIsLoading(false)
+      setOffset(newShouts.length)
       setIsLoadMoreButtonVisible(hasMore)
-      setOffset(offset() + FEED_PAGE_SIZE)
+      return newShouts
+    },
+    {
+      ssrLoadFrom: 'initial',
+      initialValue: null,
+    },
+  )
+
+  let searchEl: HTMLInputElement
+  const debouncedLoadMore = debounce(500, loadSearchResults)
+
+  const handleQueryInput = async () => {
+    setInputValue(searchEl.value)
+    if (searchEl.value?.length > 2) {
+      await debouncedLoadMore()
     } else {
-      console.warn('[SaerchView] no query found')
+      setIsLoading(false)
+      setSearchResultsList(null)
+    }
+  }
+
+  const enterQuery = async (ev: KeyboardEvent) => {
+    setIsLoading(true)
+    if (ev.key === 'Enter' && inputValue().length > 2) {
+      await debouncedLoadMore()
+    } else {
+      setIsLoading(false)
+      setSearchResultsList(null)
     }
     restoreScrollPosition()
     setIsLoading(false)
   }
 
+  // Cleanup the debounce timer when the component unmounts
+  onCleanup(() => {
+    debouncedLoadMore.cancel()
+    // console.debug('[SearchModal] cleanup debouncing search')
+  })
+
   return (
     <div class={styles.searchContainer}>
       <input
         type="search"
         placeholder={t('Site search')}
         class={styles.searchInput}
-        onInput={handleQueryChange}
+        onInput={handleQueryInput}
+        onKeyDown={enterQuery}
         ref={searchEl}
       />
 
       <Button
         class={styles.searchButton}
-        onClick={loadMore}
+        onClick={debouncedLoadMore}
         value={isLoading() ? <div class={styles.searchLoader} /> : <Icon name="search" />}
       />
 
@@ -108,8 +133,8 @@ export const SearchModal = () => {
       />
 
       <Show when={!isLoading()}>
-        <Show when={sortedArticles()}>
-          <For each={sortedArticles().sort(byScore())}>
+        <Show when={searchResultsList()}>
+          <For each={prepareSearchResults(searchResultsList(), inputValue())}>
             {(article: Shout) => (
               <div>
                 <SearchResultItem
@@ -126,14 +151,14 @@ export const SearchModal = () => {
 
           <Show when={isLoadMoreButtonVisible()}>
             <p class="load-more-container">
-              <button class="button" onClick={loadMore}>
+              <button class="button" onClick={loadSearchResults}>
                 {t('Load more')}
               </button>
             </p>
           </Show>
         </Show>
 
-        <Show when={!sortedArticles()}>
+        <Show when={Array.isArray(searchResultsList()) && searchResultsList().length === 0}>
           <p class={styles.searchDescription} innerHTML={t("We couldn't find anything for your request")} />
         </Show>
       </Show>

src/components/ProfileSettings/ProfileSettings.tsx

@@ -190,7 +190,7 @@ export const ProfileSettings = () => {
                     <h4>{t('Userpic')}</h4>
                     <div class="pretty-form__item">
                       <div
-                        class={clsx(styles.userpic, { [styles.hasControls]: form.userpic })}
+                        class={clsx(styles.userpic, { [styles.hasControls]: form.pic })}
                         onClick={handleCropAvatar}
                       >
                         <Switch>