Fix observations from Jun (#353)

* update

* fix: update

* fix: added empty state

* fix: rm favourt and added card empty state

* fix: hide sibe category without threads on user profile

* fix: update

* fix: update

Author: sheriffjimoh

apps/hasura/metadata/databases/masterbots/tables/public_chatbot.yaml

@@ -78,6 +78,7 @@ select_permissions:
         - description
         - name
       filter: {}
+      allow_aggregations: true
     comment: ""
   - role: moderator
     permission:

apps/hasura/metadata/databases/masterbots/tables/public_thread.yaml

@@ -77,6 +77,7 @@ select_permissions:
         - updated_at
         - user_id
       filter: {}
+      allow_aggregations: true
     comment: ""
   - role: moderator
     permission:

apps/masterbots.ai/components/layout/sidebar/sidebar-category-general.tsx

@@ -6,6 +6,7 @@ import { useSidebar } from '@/lib/hooks/use-sidebar'
 export function SidebarCategoryGeneral({ page }: { page?: string }) {
   const { filteredCategories, isFilterMode } = useSidebar()
 
+ 
   if (!filteredCategories.length) return <div className="p-4 text-center">No matching categories found</div>
   return (
     <ul className="space-y-2">

apps/masterbots.ai/components/routes/profile/empty-state.tsx

@@ -0,0 +1,18 @@
+
+import { FolderX } from 'lucide-react'
+
+export function EmptyState() {
+ return (
+   <div className="flex flex-col justify-center items-center h-full w-full text-center p-6">
+     <div className="mb-6">
+       <FolderX className="mx-auto text-gray-400" size={100} strokeWidth={1} />
+     </div>
+     <h2 className="text-2xl font-bold text-gray-800 mb-3">
+       No Data Available
+     </h2>
+     <p className="text-gray-600 max-w-md">
+       There is no data available for this user.
+     </p>
+   </div>
+ );
+}

apps/masterbots.ai/components/routes/profile/user-card.tsx

@@ -25,6 +25,7 @@ import { userFollowOrUnfollow } from '@/services/hasura/hasura.service'
 import type { SocialFollowing } from 'mb-genql'
 import router from 'next/router'
 import { useSonner } from '@/lib/hooks/useSonner'
+import { EmptyState } from './empty-state'
 
 interface UserCardProps {
   user: User | null
@@ -277,20 +278,25 @@ export function UserCard({ user, loading }: UserCardProps) {
           <Loader className="w-16 h-16 text-white" />
         </div>
       )}
-      {!loading && user && (
+      {user && (
         <div className="relative w-full">
           <div className="space-y-1 ">
             {/* Profile Name */}
             <div className="px-5 pb-2 pt-7">
               <h2 className="text-xl font-semibold capitalize md:text-2xl">
                 {user?.username}
               </h2>
-              <div className="flex items-center space-x-1 md:hidden">
-                <BotIcon className="w-4 h-4" />
-                <span className="">Threads:</span>
-                <span className="text-gray-500">{user?.threads.length}</span>
-              </div>
-              <div className="flex items-center space-x-1">
+              {
+                user?.threads.length > 0 && (
+                  <div className="items-center space-x-1 md:hidden flex">
+                  <BotIcon className="w-4 h-4" />
+                  <span className="">Threads:</span>
+                  <span className="text-gray-500">{user?.threads.length}</span>
+                </div>
+                )
+              }
+           
+              <div className="flex items-center  space-x-1">
                 <BookUser className="w-4 h-4" />
                 <p className="text-sm ">bio:</p>
 
@@ -338,15 +344,19 @@ export function UserCard({ user, loading }: UserCardProps) {
             </div>
 
             {/* Stats Section */}
-            <div className="flex flex-col p-6 md:flex-row md:justify-between">
-              <div className="pt-5 space-y-1">
-                <div className="items-center hidden space-x-1 md:flex">
-                  <BotIcon className="w-4 h-4" />
-                  <span className="">Threads:</span>
-                  <span className="text-gray-500">{user?.threads.length}</span>
-                </div>
+            <div className="flex md:flex-row flex-col md:justify-between p-6">
+              <div className="space-y-1 pt-5">
+                {
+                     user?.threads.length > 0 && (
+                     <div className="md:flex  items-center space-x-1 hidden">
+                      <BotIcon className="w-4 h-4" />
+                      <span className="">Threads:</span>
+                      <span className="text-gray-500">{user?.threads.length}</span>
+                    </div>
+                      )
+                }
 
-                <div>
+                {/* <div>
                   <div className="flex items-center space-x-1">
                     <MessageSquareHeart className="w-4 h-4" />
                     <p className="">Favourite topic:</p>
@@ -391,7 +401,7 @@ export function UserCard({ user, loading }: UserCardProps) {
                       {favouriteTopic}
                     </p>
                   )}
-                </div>
+                </div> */}
               </div>
 
               <div className="flex flex-col items-center space-y-3  md:mt-0 mt-7">
@@ -487,6 +497,9 @@ export function UserCard({ user, loading }: UserCardProps) {
           </div>
         </div>
       )}
+      {!user && <EmptyState />}
+
+      
     </div>
   )
 }

apps/masterbots.ai/components/routes/profile/user-thread-list.tsx

@@ -1,13 +1,18 @@
 'use client'
-import UserThreadPanel from "../thread/user-thread-panel";
-import { Thread, User } from "mb-genql";
+import UserThreadPanel from '../thread/user-thread-panel'
+import { Thread, User } from 'mb-genql'
 
-export  function UserThreadList({ user, threads }: { user: User, threads: Thread[] }) {
-
-    if (!user) return null 
-    return (
-      <div className="max-w-screen-lg pb-10 mx-auto w-full">
-       <UserThreadPanel  threads={threads} page="profile" />
-      </div>
-    )
-}
+export function UserThreadList({
+  user,
+  threads
+}: {
+  user: User
+  threads: Thread[]
+}) {
+  if (!user) return null
+  return (
+    <div className="max-w-screen-lg pb-10 mx-auto w-full overflow-y-auto scrollbar-hide">
+      <UserThreadPanel threads={threads} page="profile" />
+    </div>
+  )
+}

apps/masterbots.ai/lib/hooks/use-sidebar.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { getCategories } from '@/services/hasura'
+import { getCategories, getUserBySlug } from '@/services/hasura'
 import { Category, Chatbot } from 'mb-genql'
 import { toSlug } from 'mb-lib'
-import { usePathname } from 'next/navigation'
+import { usePathname, useParams } from 'next/navigation'
 import * as React from 'react'
 import { useAsync } from 'react-use'
 
@@ -65,8 +65,21 @@ interface SidebarProviderProps {
 export function SidebarProvider({ children }: SidebarProviderProps) {
   const [selectedCategories, setSelectedCategories] = React.useState<number[]>([])
   const [selectedChatbots, setSelectedChatbots] = React.useState<number[]>([])
+  const { slug } = useParams()
+  const pathname = usePathname()
+ 
   const { value: categories, loading, error } = useAsync(async () => {
-    const categories = await getCategories()
+    let categories = []
+    if(slug){
+      const { user, error } =  await getUserBySlug({
+        slug: slug as string, 
+        isSameUser: false
+       });
+       const userId = user ? user?.userId : undefined
+        categories = await getCategories(userId)
+    }else{
+       categories = await getCategories()
+    }
     const categoriesObj = {
       categoriesChatbots: categories || [],
       categoriesId: categories.map(category => category.categoryId),
@@ -76,7 +89,8 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
     setSelectedCategories(categoriesObj.categoriesId)
     setSelectedChatbots(categoriesObj.chatbotsId)
     return categoriesObj
-  }, [])
+  }, [pathname])
+
   const [isSidebarOpen, setSidebarOpen] = React.useState(false)
   const [isLoading, setLoading] = React.useState(true)
   const [activeChatbot, setActiveChatbot] = React.useState<Chatbot | null>(null)
@@ -105,7 +119,6 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
     })
   }
 
-  const pathname = usePathname()
   React.useEffect(() => {
     if (!pathname || !categories) return
     const pathParts = pathname.split('/')

apps/masterbots.ai/services/hasura/hasura.service.ts

@@ -42,7 +42,7 @@ function getHasuraClient({ jwt, adminSecret }: GetHasuraClientParams) {
   })
 }
 
-export async function getCategories() {
+export async function getCategories(userId?: string) {
   const client = getHasuraClient({})
   const { category } = await client.query({
     category: {
@@ -59,7 +59,15 @@ export async function getCategories() {
       },
       ...everything,
       __args: {
-        limit: 20,
+        where: userId ? {
+          chatbots: {
+            chatbot: {
+              threads: {
+                userId: { _eq: userId }
+              }
+            }
+          }
+        } : {},
       },
     },
   })