✨ Add webhook blocks API public endpoints

apps/builder/src/features/dashboard/components/DashboardHeader.tsx

@@ -1,38 +1,18 @@
 import React from 'react'
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  Text,
-  HStack,
-  Flex,
-  SkeletonCircle,
-  Button,
-  useDisclosure,
-} from '@chakra-ui/react'
-import {
-  ChevronLeftIcon,
-  HardDriveIcon,
-  LogOutIcon,
-  PlusIcon,
-  SettingsIcon,
-} from '@/components/icons'
+import { HStack, Flex, Button, useDisclosure } from '@chakra-ui/react'
+import { SettingsIcon } from '@/components/icons'
 import { signOut } from 'next-auth/react'
 import { useUser } from '@/features/account'
-import { useWorkspace } from '@/features/workspace'
+import { useWorkspace, WorkspaceDropdown } from '@/features/workspace'
 import { isNotDefined } from 'utils'
 import Link from 'next/link'
-import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
 import { TypebotLogo } from '@/components/TypebotLogo'
-import { PlanTag } from '@/features/billing'
 import { WorkspaceSettingsModal } from '@/features/workspace'
 
 export const DashboardHeader = () => {
   const { user } = useUser()
+  const { workspace, switchWorkspace, createWorkspace } = useWorkspace()
 
-  const { workspace, workspaces, switchWorkspace, createWorkspace } =
-    useWorkspace()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   const handleLogOut = () => {
@@ -71,63 +51,12 @@ export const DashboardHeader = () => {
           >
             Settings & Members
           </Button>
-          <Menu placement="bottom-end">
-            <MenuButton as={Button} variant="outline" px="2">
-              <HStack>
-                <SkeletonCircle
-                  isLoaded={workspace !== undefined}
-                  alignItems="center"
-                  display="flex"
-                  boxSize="20px"
-                >
-                  <EmojiOrImageIcon
-                    boxSize="20px"
-                    icon={workspace?.icon}
-                    defaultIcon={HardDriveIcon}
-                  />
-                </SkeletonCircle>
-                {workspace && (
-                  <>
-                    <Text noOfLines={1} maxW="200px">
-                      {workspace.name}
-                    </Text>
-                    <PlanTag plan={workspace.plan} />
-                  </>
-                )}
-                <ChevronLeftIcon transform="rotate(-90deg)" />
-              </HStack>
-            </MenuButton>
-            <MenuList>
-              {workspaces
-                ?.filter((w) => w.id !== workspace?.id)
-                .map((workspace) => (
-                  <MenuItem
-                    key={workspace.id}
-                    onClick={() => switchWorkspace(workspace.id)}
-                  >
-                    <HStack>
-                      <EmojiOrImageIcon
-                        icon={workspace.icon}
-                        boxSize="16px"
-                        defaultIcon={HardDriveIcon}
-                      />
-                      <Text>{workspace.name}</Text>
-                      <PlanTag plan={workspace.plan} />
-                    </HStack>
-                  </MenuItem>
-                ))}
-              <MenuItem onClick={handleCreateNewWorkspace} icon={<PlusIcon />}>
-                New workspace
-              </MenuItem>
-              <MenuItem
-                onClick={handleLogOut}
-                icon={<LogOutIcon />}
-                color="orange.500"
-              >
-                Log out
-              </MenuItem>
-            </MenuList>
-          </Menu>
+          <WorkspaceDropdown
+            currentWorkspace={workspace}
+            onLogoutClick={handleLogOut}
+            onCreateNewWorkspaceClick={handleCreateNewWorkspace}
+            onWorkspaceSelected={switchWorkspace}
+          />
         </HStack>
       </Flex>
     </Flex>

apps/builder/src/features/dashboard/hooks/useTypebots.ts

@@ -1,31 +1,29 @@
-import { fetcher } from '@/utils/helpers'
-import { stringify } from 'qs'
-import useSWR from 'swr'
-import { env } from 'utils'
-import { TypebotInDashboard } from '../types'
+import { trpc } from '@/lib/trpc'
 
 export const useTypebots = ({
   folderId,
   workspaceId,
-  allFolders,
   onError,
 }: {
   workspaceId?: string
-  folderId?: string
-  allFolders?: boolean
+  folderId?: string | 'root'
   onError: (error: Error) => void
 }) => {
-  const params = stringify({ folderId, allFolders, workspaceId })
-  const { data, error, mutate } = useSWR<
-    { typebots: TypebotInDashboard[] },
-    Error
-  >(workspaceId ? `/api/typebots?${params}` : null, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
-  })
-  if (error) onError(error)
+  const { data, isLoading, refetch } = trpc.typebot.listTypebots.useQuery(
+    {
+      workspaceId: workspaceId!,
+      folderId,
+    },
+    {
+      enabled: !!workspaceId,
+      onError: (error) => {
+        onError(new Error(error.message))
+      },
+    }
+  )
   return {
     typebots: data?.typebots,
-    isLoading: !error && !data,
-    mutate,
+    isLoading,
+    refetch,
   }
 }