feat: ssr search (#164)

* chore: ssr search * chore: ssr search * chore: ssr search * chore: 404 page * chore: ssr search * chore: correct rabbit ai feedback
bitcashorg · Apr 11, 2024 · 39d6372 · 39d6372
1 parent 1bd8b07
commit 39d6372
Show file tree

Hide file tree

Showing 30 changed files with 280 additions and 319 deletions.
diff --git a/apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx b/apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx
@@ -2,7 +2,7 @@ import { getCategories, getMessagePairs, getThread } from '@/services/hasura'
 
 import { ThreadAccordion } from '@/components/shared/thread-accordion'
 import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { BrowseInput } from '@/components/shared/browse-input'
+import { SearchInput } from '@/components/shared/search-input'
 
 export default async function ThreadPage({ params }: ThreadPageProps) {
   const categories = await getCategories()
@@ -14,7 +14,7 @@ export default async function ThreadPage({ params }: ThreadPageProps) {
   return (
     <div className="container">
       <CategoryTabs categories={categories} />
-      <BrowseInput />
+      <SearchInput />
       <ThreadAccordion
         thread={thread}
         initialMessagePairs={initialMessagePairs}

diff --git a/apps/masterbots.ai/app/(browse)/[category]/page.tsx b/apps/masterbots.ai/app/(browse)/[category]/page.tsx
@@ -1,33 +1,41 @@
 import { ThreadList } from '@/components/shared/thread-list'
 import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { BrowseInput } from '@/components/shared/browse-input'
+import { SearchInput } from '@/components/shared/search-input'
 import { getBrowseThreads, getCategories } from '@/services/hasura'
+import { toSlug } from '@repo/mb-lib'
+import { decodeQuery } from '@/lib/url'
 
-export const revalidate = 3600 // revalidate the data at most every hour
+// TODO: dicuss caching
+// export const revalidate = 3600 // revalidate the data at most every hour
 
-export default async function BrowseCategoryPage({
-  params
-}: {
-  params: { category: string }
-}) {
+export default async function CategoryPage({
+  params,
+  searchParams
+}: CategoryPageProps) {
   const categories = await getCategories()
   const categoryId = categories.find(
-    c =>
-      c.name.toLowerCase().replace(/\s+/g, '_').replace(/\&/g, '_') ===
-      params.category
-  ).categoryId
-  if (!categoryId) throw new Error('Category id not foud')
+    c => toSlug(c.name) === params.category
+  )?.categoryId
+  if (!categoryId) throw new Error('Category not foud')
+
+  const query = searchParams.query ? decodeQuery(searchParams.query) : null
 
   const threads = await getBrowseThreads({
     limit: 20,
-    categoryId
+    categoryId,
+    query
   })
 
   return (
     <div className="container">
       <CategoryTabs categories={categories} initialCategory={params.category} />
-      <BrowseInput />
-      <ThreadList initialThreads={threads} filter={{ categoryId }} />
+      <SearchInput />
+      <ThreadList initialThreads={threads} filter={{ categoryId, query }} />
     </div>
   )
 }
+
+interface CategoryPageProps {
+  params: { category: string }
+  searchParams?: { query: string }
+}
diff --git a/apps/masterbots.ai/app/(browse)/layout.tsx b/apps/masterbots.ai/app/(browse)/layout.tsx
@@ -1,4 +1,3 @@
-import { BrowseProvider } from '@/hooks/use-browse'
 import FooterCT from '@/components/layout/footer-ct'
 
 interface BrowseLayoutProps {
@@ -7,13 +6,11 @@ interface BrowseLayoutProps {
 
 export default async function BrowseLayout({ children }: BrowseLayoutProps) {
   return (
-    <BrowseProvider>
-      <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
-        <section className="overflow-auto group scrollbar w-full">
-          {children}
-          <FooterCT />
-        </section>
-      </main>
-    </BrowseProvider>
+    <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
+      <section className="w-full overflow-auto group scrollbar">
+        {children}
+        <FooterCT />
+      </section>
+    </main>
   )
 }
diff --git a/apps/masterbots.ai/app/(browse)/page.tsx b/apps/masterbots.ai/app/(browse)/page.tsx
@@ -1,18 +1,37 @@
 import { ThreadList } from '@/components/shared/thread-list'
 import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { BrowseInput } from '@/components/shared/browse-input'
+import { SearchInput } from '@/components/shared/search-input'
 import { getBrowseThreads, getCategories } from '@/services/hasura'
+import { Card } from '@/components/ui/card'
+import { decodeQuery } from '@/lib/url'
 
-export default async function BrowsePage() {
+export default async function HomePage({ searchParams }: HomePageProps) {
   const categories = await getCategories()
+  const query = searchParams.query ? decodeQuery(searchParams.query) : null
   const threads = await getBrowseThreads({
-    limit: 20
+    limit: 20,
+    query
   })
+
   return (
     <div className="container">
       <CategoryTabs categories={categories} />
-      <BrowseInput />
-      <ThreadList initialThreads={threads} filter={{}} />
+      <SearchInput />
+
+      {threads?.length ? (
+        <ThreadList
+          initialThreads={threads}
+          filter={{
+            query
+          }}
+        />
+      ) : (
+        <Card>no results</Card>
+      )}
     </div>
   )
 }
+
+interface HomePageProps {
+  searchParams?: { query: string }
+}
diff --git a/apps/masterbots.ai/app/404/page.tsx b/apps/masterbots.ai/app/404/page.tsx
@@ -0,0 +1,5 @@
+export default async function NotFoudPage() {
+  return (
+    <div className="max-w-[1024px] pb-10 mx-auto w-full  mt-10">NOT Found</div>
+  )
+}
diff --git a/apps/masterbots.ai/app/b/[id]/layout.tsx b/apps/masterbots.ai/app/b/[id]/layout.tsx
@@ -1,4 +1,3 @@
-import { BrowseProvider } from '@/hooks/use-browse'
 import FooterCT from '@/components/layout/footer-ct'
 
 interface BrowseLayoutProps {
@@ -7,13 +6,11 @@ interface BrowseLayoutProps {
 
 export default async function BrowseLayout({ children }: BrowseLayoutProps) {
   return (
-    <BrowseProvider>
-      <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
-        <section className="overflow-auto group scrollbar w-full">
-          {children}
-          <FooterCT />
-        </section>
-      </main>
-    </BrowseProvider>
+    <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
+      <section className="overflow-auto group scrollbar w-full">
+        {children}
+        <FooterCT />
+      </section>
+    </main>
   )
 }
diff --git a/apps/masterbots.ai/app/b/[id]/page.tsx b/apps/masterbots.ai/app/b/[id]/page.tsx
@@ -3,7 +3,7 @@ import { botNames } from '@/lib/bots-names'
 import { ThreadList } from '@/components/shared/thread-list'
 import AccountDetails from '@/components/shared/account-details'
 import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { BrowseInput } from '@/components/shared/browse-input'
+import { SearchInput } from '@/components/shared/search-input'
 
 export default async function BotThreadsPage({
   params
@@ -28,7 +28,7 @@ export default async function BotThreadsPage({
   return (
     <div className=" container">
       <CategoryTabs categories={categories} />
-      <BrowseInput />
+      <SearchInput />
       <AccountDetails
         href={`/b/${chatbot.name.toLowerCase()}`}
         alt={chatbot.name}

diff --git a/apps/masterbots.ai/app/c/layout.tsx b/apps/masterbots.ai/app/c/layout.tsx
@@ -1,23 +1,20 @@
 import { ResponsiveSidebar } from '@/components/routes/c/sidebar/sidebar-responsive'
 import FooterCT from '@/components/layout/footer-ct'
-import { BrowseProvider } from '@/hooks/use-browse'
 
 interface ChatLayoutProps {
   children: React.ReactNode
 }
 
 export default async function ChatLayout({ children }: ChatLayoutProps) {
   return (
-    <BrowseProvider>
-      <main className="relative flex flex-row h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
-        <ResponsiveSidebar />
-        <div className="mx-5 flex grow w-full">
-          {children}
-          <div className="block lg:hidden">
-            <FooterCT />
-          </div>
+    <main className="relative flex flex-row h-[calc(100vh_-_theme(spacing.16))] overflow-hidden">
+      <ResponsiveSidebar />
+      <div className="mx-5 flex grow w-full">
+        {children}
+        <div className="block lg:hidden">
+          <FooterCT />
         </div>
-      </main>
-    </BrowseProvider>
+      </div>
+    </main>
   )
 }
diff --git a/apps/masterbots.ai/app/u/[slug]/page.tsx b/apps/masterbots.ai/app/u/[slug]/page.tsx
@@ -6,7 +6,7 @@ import {
 import { ThreadList } from '@/components/shared/thread-list'
 import AccountDetails from '@/components/shared/account-details'
 import { CategoryTabs } from '@/components/shared/category-tabs/category-tabs'
-import { BrowseInput } from '@/components/shared/browse-input'
+import { SearchInput } from '@/components/shared/search-input'
 
 export default async function BotThreadsPage({
   params
@@ -23,7 +23,7 @@ export default async function BotThreadsPage({
   return (
     <div className="container">
       <CategoryTabs categories={categories} />
-      <BrowseInput />
+      <SearchInput />
       <AccountDetails
         href={`/u/${params.slug}`}
         alt={user.username}

diff --git a/apps/masterbots.ai/app/u/layout.tsx b/apps/masterbots.ai/app/u/layout.tsx
@@ -1,4 +1,3 @@
-import { BrowseProvider } from '@/hooks/use-browse'
 import FooterCT from '@/components/layout/footer-ct'
 
 interface BrowseLayoutProps {
@@ -7,15 +6,11 @@ interface BrowseLayoutProps {
 
 export default async function BrowseLayout({ children }: BrowseLayoutProps) {
   return (
-    <BrowseProvider>
-      {/* TODO: https://github.com/TheSGJ/nextjs-toploader/issues/66 */}
-      {/* <NextTopLoader color="#1ED761" initialPosition={0.20} /> */}
-      <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
-        <section className="overflow-auto group scrollbar w-full">
-          {children}
-          <FooterCT />
-        </section>
-      </main>
-    </BrowseProvider>
+    <main className="flex flex-col h-[calc(100vh-theme(spacing.16))]">
+      <section className="overflow-auto group scrollbar w-full">
+        {children}
+        <FooterCT />
+      </section>
+    </main>
   )
 }
diff --git a/apps/masterbots.ai/components/routes/c/chat-search-input.tsx b/apps/masterbots.ai/components/routes/c/chat-search-input.tsx
@@ -18,10 +18,10 @@ export function ChatSearchInput({
 }) {
   const { chatbot } = useParams()
   const { activeCategory } = useSidebar()
-  const [searchPlaceholder, setSearchPlaceholder] = React.useState<
+  const [queryPlaceholder, setSearchPlaceholder] = React.useState<
     string | null
   >(null)
-  const [keyword, changeKeyword] = React.useState<string>('')
+  const [query, setKeyword] = React.useState<string>('')
   const previousThread = React.useRef<Thread[]>([])
   const previousCategory = React.useRef<number | null>(null)
 
@@ -45,42 +45,42 @@ export function ChatSearchInput({
     debounce(() => {
       setThreads &&
         setThreads(prevState => {
-          // ? If there is no results on a search, we should keep the previous state
-          // ? and if not, the threads previous state before the search will be lost.
+          // ? If there is no results on a query, we should keep the previous state
+          // ? and if not, the threads previous state before the query will be lost.
           previousThread.current = !previousThread.current.length
             ? prevState
             : previousThread.current
           const previousThreadState = previousThread.current
 
-          if (!keyword) {
+          if (!query) {
             return previousThreadState
           }
 
           return previousThreadState.filter((thread: Thread) =>
             thread.messages[0]?.content
               .toLowerCase()
-              .includes(keyword.toLowerCase())
+              .includes(query.toLowerCase())
           )
         })
     }, 230)()
-  }, [keyword])
+  }, [query])
 
   return (
     <div className="relative w-full max-w-[600px] mx-auto flex items-center justify-center">
       <Input
         className="max-w-[600px]"
         onChange={e => {
-          changeKeyword(e.target.value)
+          setKeyword(e.target.value)
         }}
-        placeholder={`Search any chat with ${searchPlaceholder ? searchPlaceholder : 'any bot category'}`}
-        value={keyword}
+        placeholder={`Search any chat with ${queryPlaceholder ? queryPlaceholder : 'any bot category'}`}
+        value={query}
       />
-      {keyword ? (
+      {query ? (
         <Button
-          aria-label="Clear search"
+          aria-label="Clear query"
           className="absolute right-0 px-3 -translate-y-1/2 cursor-pointer top-1/2"
           onClick={() => {
-            changeKeyword('')
+            setKeyword('')
           }}
           type="reset"
           variant="ghost"

diff --git a/apps/masterbots.ai/components/routes/c/chat-share-dialog.tsx b/apps/masterbots.ai/components/routes/c/chat-share-dialog.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import Link from 'next/link'
 import { type DialogProps } from '@radix-ui/react-dialog'
 import { toast } from 'react-hot-toast'
-import { ServerActionResult, Chat } from '@/lib/types'
+import { ServerActionResult, Chat } from '@/types/chat'
 import { cn } from '@/lib/utils'
 import { badgeVariants } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'

diff --git a/apps/masterbots.ai/components/routes/c/sidebar/clear-history.tsx b/apps/masterbots.ai/components/routes/c/sidebar/clear-history.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { toast } from 'react-hot-toast'
-import type { ServerActionResult } from '@/lib/types'
+import type { ServerActionResult } from '@/types/chat'
 import { Button } from '@/components/ui/button'
 import {
   AlertDialog,

diff --git a/apps/masterbots.ai/components/routes/c/sidebar/sidebar-item.tsx b/apps/masterbots.ai/components/routes/c/sidebar/sidebar-item.tsx
@@ -12,7 +12,7 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 import { useLocalStorage } from '@/hooks/use-local-storage'
-import { type Chat } from '@/lib/types'
+import { type Chat } from '@/types/chat'
 import { cn } from '@/lib/utils'
 
 interface SidebarItemProps {

diff --git a/apps/masterbots.ai/components/routes/c/sidebar/sidebar-items.tsx b/apps/masterbots.ai/components/routes/c/sidebar/sidebar-items.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { AnimatePresence, motion } from 'framer-motion'
-import type { Chat } from '@/lib/types'
+import type { Chat } from '@/types/chat'
 import { SidebarItem } from '@/components/routes/c/sidebar/sidebar-item'
 
 interface SidebarItemsProps {