Add Dashboard

apps/builder/components/dashboard/FolderContent/FolderButton.tsx

@@ -0,0 +1,158 @@
+import { DashboardFolder } from '.prisma/client'
+import {
+  Button,
+  Editable,
+  EditableInput,
+  EditablePreview,
+  MenuItem,
+  useDisclosure,
+  Text,
+  VStack,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuList,
+  useToast,
+  SkeletonText,
+  SkeletonCircle,
+  WrapItem,
+} from '@chakra-ui/react'
+import { useDroppable } from '@dnd-kit/core'
+import { FolderIcon, MoreVerticalIcon } from 'assets/icons'
+import { ConfirmModal } from 'components/modals/ConfirmModal'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { deleteFolder, updateFolder } from 'services/folders'
+
+export const FolderButton = ({
+  folder,
+  onFolderDeleted,
+  onFolderRenamed,
+}: {
+  folder: DashboardFolder
+  onFolderDeleted: () => void
+  onFolderRenamed: (newName: string) => void
+}) => {
+  const router = useRouter()
+  const { setNodeRef, isOver } = useDroppable({
+    id: folder.id.toString(),
+  })
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+
+  const onDeleteClick = async () => {
+    const { error } = await deleteFolder(folder.id)
+    return error
+      ? toast({
+          title: "Couldn't delete the folder",
+          description: error.message,
+        })
+      : onFolderDeleted()
+  }
+
+  const onRenameSubmit = async (newName: string) => {
+    if (newName === '' || newName === folder.name) return
+    const { error } = await updateFolder(folder.id, { name: newName })
+    return error
+      ? toast({ title: 'An error occured', description: error.message })
+      : onFolderRenamed(newName)
+  }
+
+  const handleClick = () => {
+    router.push(`/typebots/folders/${folder.id}`)
+  }
+
+  return (
+    <Button
+      as={WrapItem}
+      ref={setNodeRef}
+      style={{ width: '225px', height: '270px' }}
+      paddingX={6}
+      whiteSpace={'normal'}
+      pos="relative"
+      cursor="pointer"
+      variant="outline"
+      colorScheme={isOver ? 'blue' : 'gray'}
+      borderWidth={isOver ? '3px' : '1px'}
+      justifyContent="center"
+      onClick={handleClick}
+      data-testid="folder-button"
+    >
+      <Menu>
+        <MenuButton
+          as={IconButton}
+          icon={<MoreVerticalIcon />}
+          aria-label="Show folder menu"
+          onClick={(e) => e.stopPropagation()}
+          colorScheme="blue"
+          variant="ghost"
+          size="lg"
+          pos="absolute"
+          top="5"
+          right="5"
+        />
+        <MenuList>
+          <MenuItem
+            color="red"
+            onClick={(e) => {
+              e.stopPropagation()
+              onOpen()
+            }}
+          >
+            Delete
+          </MenuItem>
+        </MenuList>
+      </Menu>
+      <VStack spacing="4">
+        <FolderIcon fontSize={50} color="blue.500" fill="blue.500" />
+        <Editable
+          defaultValue={folder.name}
+          fontSize="18"
+          onClick={(e) => e.stopPropagation()}
+          onSubmit={onRenameSubmit}
+        >
+          <EditablePreview _hover={{ bgColor: 'gray.300' }} px="2" />
+          <EditableInput textAlign="center" />
+        </Editable>
+      </VStack>
+
+      <ConfirmModal
+        isOpen={isOpen}
+        onClose={onClose}
+        confirmButtonLabel={'Delete'}
+        message={
+          <Text>
+            Are you sure you want to delete <strong>{folder.name}</strong>{' '}
+            folder? (Everything inside will be move to your dashboard)
+          </Text>
+        }
+        title={`Delete ${folder.name}?`}
+        onConfirm={onDeleteClick}
+        confirmButtonColor="red"
+      />
+    </Button>
+  )
+}
+
+export const ButtonSkeleton = () => (
+  <Button
+    as={VStack}
+    mr={{ sm: 6 }}
+    mb={6}
+    style={{ width: '225px', height: '270px' }}
+    paddingX={6}
+    whiteSpace={'normal'}
+    pos="relative"
+    cursor="pointer"
+    variant="outline"
+    colorScheme={'gray'}
+  >
+    <VStack spacing="6" w="full">
+      <SkeletonCircle boxSize="45px" />
+      <SkeletonText noOfLines={2} w="full" />
+    </VStack>
+  </Button>
+)