search-modal-fix

src/components/Nav/SearchModal/SearchModal.tsx

@@ -4,28 +4,33 @@ import { useLocalize } from '../../../context/localize'
 import { Icon } from '../../_shared/Icon'
 
 import styles from './SearchModal.module.scss'
+import { apiClient } from '../../../graphql/client/core'
+import { createEffect, createSignal } from 'solid-js'
+import { SearchResult } from '../../../graphql/schema/core.gen'
 
 export const SearchModal = () => {
   const { t } = useLocalize()
+  const [searchResults, setSearchResults] = createSignal<Array<SearchResult>>([])
 
-  const action = '/search'
-  const method = 'get'
   let msgElement: HTMLTextAreaElement | undefined
   let contactElement: HTMLInputElement | undefined
+
   const submit = async () => {
-    await fetch(action, {
-      method,
-      headers: {
-        accept: 'application/json',
-        'content-type': 'application/json; charset=utf-8',
-      },
-      body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent }),
-    })
-    // hideModal()
+    const results = await apiClient.getShoutsSearch({ text: msgElement.value })
+
+    if (results) setSearchResults(results)
   }
 
+  createEffect(() => {
+    if (searchResults()) {
+      // TODO: some showing logics
+    }
+  })
+
+  // TODO: useLocalize()
+
   return (
-    <form method={method} action={action} onSubmit={submit} class={styles.searchForm}>
+    <form onSubmit={submit} class={styles.searchForm}>
       <input
         type="text"
         name="contact"

src/components/Views/Search.tsx

@@ -1,4 +1,4 @@
-import type { Shout } from '../../graphql/schema/core.gen'
+import type { SearchResult, Shout } from '../../graphql/schema/core.gen'
 
 import { Show, For, createSignal } from 'solid-js'
 
@@ -15,14 +15,14 @@ type SearchPageSearchParams = {
 
 type Props = {
   query: string
-  results: Shout[]
+  results: SearchResult[]
 }
 
 const LOAD_MORE_PAGE_SIZE = 50
 
 export const SearchView = (props: Props) => {
   const { t } = useLocalize()
-  const { sortedArticles } = useArticlesStore({ shouts: props.results })
+  const { articleEntities, sortedArticles } = useArticlesStore()
   const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
   const [query, setQuery] = createSignal(props.query)
   const [offset, setOffset] = createSignal(0)

src/context/inbox.tsx

@@ -1,14 +1,13 @@
 import type { Chat, Message, MessagesBy, MutationCreate_MessageArgs } from '../graphql/schema/chat.gen'
 import type { Accessor, JSX } from 'solid-js'
 
-import { createContext, createEffect, createSignal, useContext } from 'solid-js'
+import { createContext, createSignal, useContext } from 'solid-js'
 
 import { inboxClient } from '../graphql/client/chat'
 import { Author } from '../graphql/schema/core.gen'
 import { useAuthorsStore } from '../stores/zine/authors'
 
 import { SSEMessage, useConnect } from './connect'
-import { useSession } from './session'
 
 type InboxContextType = {
   chats: Accessor<Chat[]>

src/graphql/query/core/articles-load-search.ts

@@ -1,35 +1,11 @@
 import { gql } from '@urql/core'
 
 export default gql`
-  query MyFeedQuery($options: LoadShoutsOptions) {
+  query LoadSearchQuery($options: LoadShoutsOptions) {
     load_shouts_search(options: $options) {
-      id
+      score
       title
-      subtitle
       slug
-      layout
-      cover
-      main_topic
-      topics {
-        id
-        title
-        body
-        slug
-      }
-      authors {
-        id
-        name
-        slug
-        pic
-        created_at
-      }
-      created_at
-      published_at
-      stat {
-        viewed
-        reacted
-        rating
-      }
     }
   }
 `

src/pages/search.page.server.ts

@@ -2,10 +2,11 @@ import type { PageProps } from './types'
 import type { PageContext } from '../renderer/types'
 
 import { apiClient } from '../graphql/client/core'
+import { SearchResult } from '../graphql/schema/core.gen'
 
 export const onBeforeRender = async (pageContext: PageContext) => {
   const { q: text } = pageContext.routeParams
-  const searchResults = await apiClient.getShoutsSearch({ text, limit: 50 })
+  const searchResults: Array<SearchResult> = await apiClient.getShoutsSearch({ text, limit: 50 })
   const pageProps: PageProps = { searchResults, seo: { title: '' } }
 
   return {

src/pages/types.ts

@@ -1,6 +1,6 @@
 // in a separate file to avoid circular dependencies
 import type { Chat } from '../graphql/schema/chat.gen'
-import type { Author, Shout, Topic } from '../graphql/schema/core.gen'
+import type { Author, SearchResult, Shout, Topic } from '../graphql/schema/core.gen'
 // all the things (she said) that could be passed from the server
 export type PageProps = {
   article?: Shout
@@ -15,7 +15,7 @@ export type PageProps = {
   searchQuery?: string
   layouts?: LayoutType[]
   // other types?
-  searchResults?: Shout[]
+  searchResults?: SearchResult[]
   chats?: Chat[]
   seo: {
     title: string