Skip to content

Commit

Permalink
feat: ssr and layout improvements on u and b routes
Browse files Browse the repository at this point in the history
  • Loading branch information
gaboesquivel committed Apr 8, 2024
1 parent ec6a463 commit 6a89b92
Show file tree
Hide file tree
Showing 19 changed files with 134 additions and 245 deletions.
4 changes: 2 additions & 2 deletions apps/masterbots.ai/app/(browse)/[category]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import BrowseList from '@/components/shared/thread-list'
import ThreadList from '@/components/shared/thread-list'
import { BrowseCategoryTabs } from '@/components/routes/browse/browse-category-tabs'
import { BrowseSearchInput } from '@/components/routes/browse/browse-search-input'
import { getBrowseThreads, getCategories } from '@/services/hasura'
Expand Down Expand Up @@ -30,7 +30,7 @@ export default async function BrowseCategoryPage({
initialCategory={params.category}
/>
<BrowseSearchInput />
<BrowseList initialThreads={threads} />
<ThreadList initialThreads={threads} />
</div>
)
}
6 changes: 2 additions & 4 deletions apps/masterbots.ai/app/(browse)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import BrowseList from '@/components/shared/thread-list'
import ThreadList from '@/components/shared/thread-list'
import { BrowseCategoryTabs } from '@/components/routes/browse/browse-category-tabs'
import { BrowseSearchInput } from '@/components/routes/browse/browse-search-input'
import { getBrowseThreads, getCategories } from '@/services/hasura'

export const revalidate = 3600 // revalidate the data at most every hour

export default async function BrowsePage() {
const categories = await getCategories()
const threads = await getBrowseThreads({
Expand All @@ -15,7 +13,7 @@ export default async function BrowsePage() {
<div className="w-full max-w-screen-lg px-4 pb-10 mx-auto">
<BrowseCategoryTabs categories={categories} />
<BrowseSearchInput />
<BrowseList initialThreads={threads} />
<ThreadList initialThreads={threads} />
</div>
)
}
18 changes: 13 additions & 5 deletions apps/masterbots.ai/app/b/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { getChatbot, getBrowseThreads } from '@/services/hasura'
import { botNames } from '@/lib/bots-names'
import BotDetails from '@/components/routes/b/bot-details'

const PAGE_SIZE = 50
import ThreadList from '@/components/shared/thread-list'
import AccountDetails from '@/components/shared/account-details'

export default async function BotThreadsPage({
params
Expand All @@ -20,12 +19,21 @@ export default async function BotThreadsPage({

threads = await getBrowseThreads({
chatbotName: botNames.get(params.id),
limit: PAGE_SIZE
limit: 50
})

return (
<div className="w-full py-5">
<BotDetails chatbot={chatbot} />
<AccountDetails
href={`/b/${chatbot.name.toLowerCase()}`}
alt={chatbot.name}
chatbotName={chatbot.name}
avatar={chatbot.avatar}
description={chatbot.description}
/>
<div className="container">
<ThreadList initialThreads={threads} />
</div>
</div>
)
}
17 changes: 12 additions & 5 deletions apps/masterbots.ai/app/u/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { getBrowseThreads, getUserInfoFromBrowse } from '@/services/hasura'
import BrowseUserDetails from '@/components/routes/browse/browse-user-details'

const PAGE_SIZE = 50
import ThreadList from '@/components/shared/thread-list'
import AccountDetails from '@/components/shared/account-details'

export default async function BotThreadsPage({
params
Expand All @@ -12,11 +11,19 @@ export default async function BotThreadsPage({
if (!user) return <div className="m-auto">No user found.</div>
const threads = await getBrowseThreads({
slug: params.slug,
limit: PAGE_SIZE
limit: 50
})
return (
<div className="w-full py-5">
<BrowseUserDetails user={threads[0].user} />
<AccountDetails
href={`/u/${params.slug}`}
alt={user.username}
username={user.username}
avatar={user.profilePicture || ''}
/>
<div className="container">
<ThreadList initialThreads={threads} />
</div>
</div>
)
}
34 changes: 18 additions & 16 deletions apps/masterbots.ai/components/layout/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,24 @@ export async function Header() {
const jwt = cookies().get('hasuraJwt')?.value || ''

return (
<header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
<div className="flex items-center">
<SidebarToggle />
<HeaderLink href="/" text="Masterbots" />
<IconSeparator className="size-6 text-muted-foreground/50" />
<HeaderLink href="/c" text="Chat" />
<HeaderLink href="p" text="Pro" />
</div>
<div className="flex items-center justify-end space-x-2">
{user && !isTokenExpired(jwt) ? (
<UserMenu />
) : (
<Button asChild className="-ml-2" variant="link">
<Link href="/auth/sign-in">Login</Link>
</Button>
)}
<header className="sticky top-0 z-50 w-full border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
<div className="container flex items-center justify-between px-4 h-16">
<div className="flex items-center ">
<SidebarToggle />
<HeaderLink href="/" text="Masterbots" />
<IconSeparator className="size-6 text-muted-foreground/50" />
<HeaderLink href="/c" text="Chat" />
<HeaderLink href="/p" text="Pro" />
</div>
<div className="flex items-center justify-end space-x-2">
{user && !isTokenExpired(jwt) ? (
<UserMenu />
) : (
<Button asChild className="-ml-2" variant="link">
<Link href="/auth/sign-in">Login</Link>
</Button>
)}
</div>
</div>
</header>
)
Expand Down
82 changes: 0 additions & 82 deletions apps/masterbots.ai/components/routes/b/bot-details.tsx

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import * as React from 'react'
import { useThread } from '@/hooks/use-thread'
import { ThreadPopup } from './thread-popup'
import { ThreadPopup } from './chat-thread-popup'

export function ChatLayoutSection({ children }: { children: React.ReactNode }) {
const { sectionRef, isOpenPopup } = useThread()
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@
import type { Thread } from '@repo/mb-genql'
import React, { useEffect, useRef, useState } from 'react'
import { ChatSearchInput } from '@/components/routes/c/chat-search-input'
import ThreadList from '@/components/routes/c/thread-list'

import { useSidebar } from '@/hooks/use-sidebar'
import { useThread } from '@/hooks/use-thread'
import { getThreads } from '@/services/hasura'
import { useGlobalStore } from '@/hooks/use-global-store'
import ChatChatbotDetails from '../chat-chatbot-details'
import ThreadList from '../chat-thread-list'

const PAGE_SIZE = 20

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Image from 'next/image'
import Link from 'next/link'
import { IconUser } from '../ui/icons'

export function MbAvatar({ href, alt, src }: MbAvatarProp) {
export function AccountAvatar({ href, alt, src, size = 32 }: MbAvatarProp) {
return (
<Link
className={cn(
Expand All @@ -17,8 +17,8 @@ export function MbAvatar({ href, alt, src }: MbAvatarProp) {
alt={alt}
className="transition-opacity duration-300 rounded-full select-none bg-background dark:bg-primary-foreground hover:opacity-80"
src={src}
width={32}
height={32}
width={size}
height={size}
/>
) : (
<IconUser width={32} height={32} />
Expand All @@ -31,4 +31,5 @@ interface MbAvatarProp {
href: string
alt: string
src?: string
size?: number
}
Loading

0 comments on commit 6a89b92

Please sign in to comment.