postmerge-2

src/components/Editor/Editor.tsx

@@ -356,7 +356,7 @@ export const Editor = (props: Props) => {
   })
 
   onCleanup(() => {
-    editor().destroy()
+    editor()?.destroy()
   })
 
   return (

src/components/Nav/SearchModal/SearchModal.tsx

@@ -3,7 +3,6 @@ import type { Shout } from '../../../graphql/schema/core.gen'
 import { createSignal, Show, For } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
-import { apiClient } from '../../../graphql/client/core'
 import { Button } from '../../_shared/Button'
 import { Icon } from '../../_shared/Icon'
 import { FEED_PAGE_SIZE } from '../../Views/Feed/Feed'
@@ -11,6 +10,9 @@ import { FEED_PAGE_SIZE } from '../../Views/Feed/Feed'
 import { SearchResultItem } from './SearchResultItem'
 
 import styles from './SearchModal.module.scss'
+import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
+import { loadShoutsSearch, useArticlesStore } from '../../../stores/zine/articles'
+import { byScore } from '../../../utils/sortby'
 
 // @@TODO handle empty article options after backend support (subtitle, cover, etc.)
 // @@TODO implement load more
@@ -48,41 +50,39 @@ 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 [searchResultsList, setSearchResultsList] = createSignal<[] | null>([])
   const [isLoading, setIsLoading] = createSignal(false)
   // const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
 
-  const handleSearch = async () => {
-    const searchValue = inputValue() || ''
+  let searchEl: HTMLInputElement
+  const handleQueryChange = async (_ev) => {
+    setInputValue(searchEl.value)
 
-    if (Boolean(searchValue) && searchValue.length > 2) {
+    if (inputValue() && inputValue().length > 2) await loadMore()
+  }
+
+  const loadMore = async () => {
     setIsLoading(true)
-
-      try {
-        // TODO: use offset to load more
-        const response = await apiClient.getShoutsSearch({
-          text: searchValue,
+    saveScrollPosition()
+    if (inputValue() && inputValue().length > 2) {
+      console.log(inputValue())
+      const { hasMore } = await loadShoutsSearch({
+        text: inputValue(),
+        offset: offset(),
         limit: FEED_PAGE_SIZE,
-          offset: 0,
       })
-        const searchResult = await response.json()
-
-        if (searchResult.length > 0) {
-          const preparedSearchResultsList = prepareSearchResults(searchResult, searchValue)
-
-          setSearchResultsList(preparedSearchResultsList)
+      setIsLoadMoreButtonVisible(hasMore)
+      setOffset(offset() + FEED_PAGE_SIZE)
     } else {
-          setSearchResultsList(null)
+      console.warn('[SaerchView] no query found')
     }
-      } catch (error) {
-        console.log('search request failed', error)
-      } finally {
+    restoreScrollPosition()
     setIsLoading(false)
   }
-    }
-  }
 
   return (
     <div class={styles.searchContainer}>
@@ -90,16 +90,13 @@ export const SearchModal = () => {
         type="search"
         placeholder={t('Site search')}
         class={styles.searchInput}
-        onInput={(event) => {
-          setInputValue(event.target.value)
-
-          handleSearch()
-        }}
+        onInput={handleQueryChange}
+        ref={searchEl}
       />
 
       <Button
         class={styles.searchButton}
-        onClick={handleSearch}
+        onClick={loadMore}
         value={isLoading() ? <div class={styles.searchLoader} /> : <Icon name="search" />}
       />
 
@@ -111,14 +108,13 @@ export const SearchModal = () => {
       />
 
       <Show when={!isLoading()}>
-        <Show when={searchResultsList()}>
-          <For each={searchResultsList()}>
+        <Show when={sortedArticles()}>
+          <For each={sortedArticles().sort(byScore())}>
             {(article: Shout) => (
               <div>
                 <SearchResultItem
                   article={article}
                   settings={{
-                    noimage: true, // @@TODO remove flag after cover support
                     isFloorImportant: true,
                     isSingle: true,
                     nodate: true,
@@ -128,16 +124,16 @@ export const SearchModal = () => {
             )}
           </For>
 
-          {/* <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()}>
+        <Show when={!sortedArticles()}>
           <p class={styles.searchDescription} innerHTML={t("We couldn't find anything for your request")} />
         </Show>
       </Show>

src/components/_shared/InviteMembers/InviteMembers.tsx

@@ -60,8 +60,8 @@ export const InviteMembers = (props: Props) => {
     })
     const start = page * PAGE_SIZE
     const end = start + PAGE_SIZE
-    const authors = authorsToInvite().map((author) => ({ ...author, selected: false }))
-    return authors.slice(start, end)
+    const authors = authorsToInvite()?.map((author) => ({ ...author, selected: false }))
+    return authors?.slice(start, end)
   }
 
   const [pages, infiniteScrollLoader, { end }] = createInfiniteScroll(fetcher)

src/stores/zine/articles.ts

@@ -22,7 +22,7 @@ const [topMonthArticles, setTopMonthArticles] = createSignal<Shout[]>([])
 const articlesByAuthor = createLazyMemo(() => {
   return Object.values(articleEntities()).reduce(
     (acc, article) => {
-      article.authors.forEach((author) => {
+      article.authors?.forEach((author) => {
         if (!acc[author.slug]) {
           acc[author.slug] = []
         }

src/utils/sortby.ts

@@ -40,6 +40,16 @@ export const byTopicStatDesc = (metric: keyof TopicStat) => {
   }
 }
 
+export const byScore = () => {
+  return (a, b) => {
+    const x = a?.score || 0
+    const y = b?.score || 0
+    if (x > y) return -1
+    if (x < y) return 1
+    return 0
+  }
+}
+
 export const sortBy = (data, metric) => {
   const x = [...data]
   x.sort(typeof metric === 'function' ? metric : byStat(metric))