diff --git a/apps/masterbots.ai/app/(browse)/page.tsx b/apps/masterbots.ai/app/(browse)/page.tsx index 6088e0f2..56c319eb 100644 --- a/apps/masterbots.ai/app/(browse)/page.tsx +++ b/apps/masterbots.ai/app/(browse)/page.tsx @@ -28,7 +28,7 @@ export default async function HomePage({ searchParams }: HomePageProps) { return (
- {/* */} + {/*
Your query: {query}
    {threads.map(t => ( diff --git a/apps/masterbots.ai/components/shared/search-input.tsx b/apps/masterbots.ai/components/shared/search-input.tsx index 5a012831..da397451 100644 --- a/apps/masterbots.ai/components/shared/search-input.tsx +++ b/apps/masterbots.ai/components/shared/search-input.tsx @@ -9,26 +9,29 @@ import { useGlobalStore } from '@/hooks/use-global-store' export function SearchInput() { const pathname = usePathname() + // const router = useRouter() const { setGlobalQuery, ...global } = useGlobalStore() const [query, setQuery] = useState(global.query) const replaceUrl = () => { + // Encoding the query and managing search parameters const searchParams = new URLSearchParams(window.location.search) - if (query) { - searchParams.set('query', encodeQuery(query)) - } else { - console.log('delete') - searchParams.delete('query') - } - searchParams.delete('page') + if (!query) searchParams.delete('query') + searchParams.delete('page') // Always remove 'page' param to reset pagination or similar - history.pushState({}, undefined, `${pathname}?${searchParams.toString()}`) - // SSR wont work as Next is not updating the client component intial props on ThreadList - // ThreadList listes to changes on global store query state + //TODO: find out how to fix client component refresh issue + // in the meantime I'll use client global store + // update url for history navigation and reload support + history.pushState({}, undefined, `${pathname}?query=${encodeQuery(query)}`) + + // const href = `${pathname}?${searchParams.toString()}` + // router.replace(href) + // router.refresh() } const handleSubmit = e => { e.preventDefault() + // ThreadList listens to changes on global store query state setGlobalQuery(encodeQuery(query)) replaceUrl() } diff --git a/apps/masterbots.ai/components/shared/thread-list.tsx b/apps/masterbots.ai/components/shared/thread-list.tsx index 392ddbf2..7c724da3 100644 --- a/apps/masterbots.ai/components/shared/thread-list.tsx +++ b/apps/masterbots.ai/components/shared/thread-list.tsx @@ -11,6 +11,7 @@ import { getBrowseThreads } from '@/services/hasura' import { ThreadDialog } from './thread-dialog' import { ThreadListAccordion } from './thread-list-accordion' import { ThreadListChatItem } from './thread-list-chat-item' +import { useGlobalStore } from '@/hooks/use-global-store' const limit = 20 export function ThreadList({ @@ -19,29 +20,36 @@ export function ThreadList({ chat = false, dialog = false }: ThreadListProps) { - // const globalStore = useGlobalStore() - const queryKey = [usePathname(), 'globalStore.query'] + const { query } = useGlobalStore() const loadMoreRef = useRef(null) const queryClient = useQueryClient() const [showSkeleton, setShowSkeleton] = useState(false) + + const queryKey = [usePathname(), query] const [lastQueryKey, setLastQueryKey] = useState(queryKey) + const { isFetchingNextPage, fetchNextPage, data, refetch } = useInfiniteQuery( + { + queryKey, + queryFn: async props => { + return getBrowseThreads({ + ...filter, + offset: props.pageParam * limit, + limit, + query + }) + }, + initialData: { pages: [initialThreads], pageParams: [1] }, + initialPageParam: 2, + getNextPageParam: (_a, _b, lastPageParam) => { + return lastPageParam + 1 + }, + enabled: false + } + ) - const { isFetchingNextPage, fetchNextPage, data } = useInfiniteQuery({ - queryKey, - queryFn: async props => { - return getBrowseThreads({ - ...filter, - offset: props.pageParam * limit, - limit - }) - }, - initialData: { pages: [initialThreads], pageParams: [1] }, - initialPageParam: 2, - getNextPageParam: (_a, _b, lastPageParam) => { - return lastPageParam + 1 - }, - enabled: false - }) + useEffect(() => { + refetch() + }, [refetch, query]) // load mare item when it gets to the end // TODO: read count from database @@ -84,9 +92,10 @@ export function ThreadList({ queryClient.invalidateQueries({ queryKey }).then(() => { queryClient.refetchQueries({ queryKey }).then(() => { setShowSkeleton(false) + refetch() }) }) - }, [queryKey, setLastQueryKey, lastQueryKey, setShowSkeleton]) + }, [queryKey, setLastQueryKey, lastQueryKey, setShowSkeleton, refetch]) // ThreadList can displays the rigth list item based on the context // ThreadListChatItem is next shallow link for chat ui lists diff --git a/apps/masterbots.ai/lib/url.ts b/apps/masterbots.ai/lib/url.ts index 0a0e161b..eadf10d4 100644 --- a/apps/masterbots.ai/lib/url.ts +++ b/apps/masterbots.ai/lib/url.ts @@ -1,12 +1,13 @@ import { z, ZodSchema } from 'zod' // Zod schema for validating slug strings -export const SlugSchema: ZodSchema = z.string() +export const SlugSchema: ZodSchema = z + .string() .min(1) - .regex(/^[a-z0-9]+[a-z0-9+_-]*[a-z0-9]+$/, "Invalid slug format.") + .regex(/^[a-z0-9]+[a-z0-9+_-]*[a-z0-9]+$/, 'Invalid slug format.') // Function to convert a username into a slug -export const toSlug = (username: string, separator = '_' ): string => { +export const toSlug = (username: string, separator = '_'): string => { return username .toLowerCase() .replace(/ & /g, '_and_') @@ -24,7 +25,7 @@ export const fromSlug = (slug: string, separator = '_'): string => { //Encodes a string for use in a URL, replacing spaces with the '+' character. export const encodeQuery = (input: string): string => { - return encodeURIComponent(input).replace(/%20/g, '+') + return encodeURIComponent(input).replace(/%20/g, '+').replace(/ /g, '+') } //Decodes a URL-encoded string, converting '+' back into spaces. diff --git a/apps/masterbots.ai/package.json b/apps/masterbots.ai/package.json index a3628298..e596879e 100644 --- a/apps/masterbots.ai/package.json +++ b/apps/masterbots.ai/package.json @@ -3,7 +3,7 @@ "private": true, "name": "masterbots.ai", "scripts": { - "dev": "next dev --turbo", + "dev": "rm -rf .next/ && next dev --turbo", "build": "next build", "start": "next start", "lint": "next lint", diff --git a/apps/masterbots.ai/services/hasura/hasura.service.ts b/apps/masterbots.ai/services/hasura/hasura.service.ts index 98331d4e..4d33def8 100644 --- a/apps/masterbots.ai/services/hasura/hasura.service.ts +++ b/apps/masterbots.ai/services/hasura/hasura.service.ts @@ -357,7 +357,6 @@ export async function getBrowseThreads({ offset, slug }: GetBrowseThreadsParams) { - const client = getHasuraClient({}) const { thread } = await client.query({