bug fixes w chakra

Alforoan · Aug 19, 2024 · d05e6b2 · d05e6b2
1 parent 278d6ab
commit d05e6b2
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 29 deletions.
diff --git a/client/src/components/BoardComponent.tsx b/client/src/components/BoardComponent.tsx
@@ -297,6 +297,7 @@ const BoardComponent: React.FC = () => {
                                 shadow="sm"
                                 cursor="pointer"
                                 onClick={() => setSelectedCard(card)}
+                                key={card.id}
                               >
                                 <Heading
                                   fontSize="md"

diff --git a/client/src/components/CheckboxItem.tsx b/client/src/components/CheckboxItem.tsx
@@ -200,24 +200,28 @@ const CheckboxItem: React.FC<CheckboxItemProps> = ({
         role="checkbox"
         aria-checked={item.checked}
       >
-        {!isTemplate && !isEditing && (
-          <Box
-            w="8%"
-            mr={2.5}
-            py={1}
-            textAlign="center"
-            color="white"
-            borderRadius="md"
-            bg={item.checked ? "blue.500" : "white"}
-            opacity={selectedCard!.column !== Columns.inProgress ? 0.25 : 1}
-          >
-            {item.checked ? (
+        {!isTemplate &&
+          !isEditing &&
+          selectedCard!.column !== Columns.backlog && (
+            <Box
+              w="38px"
+              minW="38px"
+              mr={2.5}
+              py={1}
+              textAlign="center"
+              color="white"
+              borderRadius="md"
+              bg={item.checked ? "blue.500" : "white"}
+              opacity={selectedCard!.column !== Columns.inProgress ? 0.25 : 1}
+            >
+              {/* {item.checked ? (
               <Icon as={CheckIcon} w={5} h={5} />
             ) : (
               <Icon as={CloseIcon} w={5} h={5} />
-            )}
-          </Box>
-        )}
+            )} */}
+              <Icon as={CheckIcon} w={5} h={5} />
+            </Box>
+          )}
 
         <>
           {isEditing ? (
@@ -254,13 +258,13 @@ const CheckboxItem: React.FC<CheckboxItemProps> = ({
             )
           ) : (
             <Box
-              w={isTemplate ? "100%" : "92%"}
               pl={4}
               py={1}
               bg="white"
               borderRadius="md"
               textDecoration={item.checked ? "line-through" : "none"}
               whiteSpace="break-spaces"
+              w="100%"
             >
               {renderTextWithLinks(item.value)}
             </Box>

diff --git a/client/src/components/EditBoardName.tsx b/client/src/components/EditBoardName.tsx
@@ -150,11 +150,12 @@ const EditBoardName: React.FC<EditBoardNameProps> = ({
           leftIcon={<EditIcon />}
           _hover={{ bg: "gray.600" }}
           justifyContent={{ base: "center", md: "right" }}
+          textAlign="center"
         >
           Edit Title
         </Button>
       ) : (
-        <Container minW="5xl" maxW="5xl" px={{ md: "8", sm: "4" }}>
+        <Container maxW="5xl" px={{ md: "8", sm: "4" }}>
           <Flex direction="column">
             <Flex direction="row" alignItems="center" mx={0}>
               <Input

diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
@@ -221,13 +221,15 @@ const Navbar: React.FC = () => {
       <Box bg={useColorModeValue("gray.100", "gray.900")} px={4}>
         <Flex h={16} alignItems={"center"} justifyContent={"space-between"}>
           <Flex alignItems="center">
-            <IconButton
-              aria-label={"Open Menu"}
-              icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
-              display={{ md: "none" }}
-              onClick={isOpen ? onClose : onOpen}
-              mr={2}
-            />
+            {isAuthenticated && (
+              <IconButton
+                aria-label={"Open Menu"}
+                icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+                display={{ md: "none" }}
+                onClick={isOpen ? onClose : onOpen}
+                mr={2}
+              />
+            )}
             <Link
               to="/home"
               style={{
@@ -379,6 +381,9 @@ const Navbar: React.FC = () => {
                 colorScheme={"teal"}
                 size={"sm"}
                 leftIcon={<Search2Icon />}
+                as={Link}
+                to={"/templates"}
+                onClick={() => resetState()}
               >
                 Find A Template
               </Button>
@@ -387,6 +392,9 @@ const Navbar: React.FC = () => {
                 colorScheme={"blue"}
                 size={"sm"}
                 leftIcon={<AddIcon />}
+                as={Link}
+                to={"/new"}
+                onClick={() => resetState()}
               >
                 Create New Board
               </Button>

diff --git a/client/src/components/TemplatePreview.tsx b/client/src/components/TemplatePreview.tsx
@@ -31,7 +31,13 @@ interface TemplatePreviewProps {
 }
 
 const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template }) => {
-  const { setIsTemplate, setUserTemplates, templateIsOwned } = useTemplates();
+  const {
+    setIsTemplate,
+    setUserTemplates,
+    templateIsOwned,
+    setUploadedTemplateNames,
+    userTemplates,
+  } = useTemplates();
   const { setSelectedBoard, setIsSearching, isLoading } = useBoard();
 
   const [isConfirmingDelete, setIsConfirmingDelete] = useState<boolean>(false);
@@ -81,6 +87,7 @@ const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template }) => {
   };
 
   const handleCancelDelete = () => {
+    setIsConfirmingDelete(false);
     console.log("canceling delete");
   };
 
@@ -97,6 +104,11 @@ const TemplatePreview: React.FC<TemplatePreviewProps> = ({ template }) => {
     setUserTemplates((prev) =>
       prev.filter((temp: Template) => temp.uuid !== template.uuid)
     );
+    setUploadedTemplateNames(
+      userTemplates
+        .map((temp) => (temp.uuid !== template.uuid ? temp.name : undefined))
+        .filter((name): name is string => name !== undefined)
+    );
     setIsConfirmingDelete(false);
   };
 

diff --git a/client/src/components/TitleComponent.tsx b/client/src/components/TitleComponent.tsx
@@ -7,7 +7,7 @@ import { Heading, Flex, Icon } from "@chakra-ui/react";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import DownloadTemplateComponent from "./DownloadTemplateComponent";
 import UploadBoardComponent from "./UploadBoardComponent";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const TitleComponent = () => {
   const {
@@ -46,6 +46,10 @@ const TitleComponent = () => {
     }
   };
 
+  useEffect(() => {
+    console.log("UPLOADED TEMPLATE NAMES", uploadedTemplateNames);
+  }, []);
+
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   return (
     <Flex direction="column" alignItems="center" justifyContent="center" mb={4}>
@@ -73,12 +77,13 @@ const TitleComponent = () => {
 
       {selectedBoard && !selectedCard && (
         <Flex
-          w="40%"
+          w={{ base: "100%", md: "100%" }}
           textAlign="center"
           mt={4}
           justifyContent="center"
           direction={{ base: "column", md: "row" }}
           gap={{ base: "4", md: "0" }}
+          alignItems={"center"}
         >
           {!isTemplate || templateIsOwned ? (
             <EditBoardName

diff --git a/client/src/components/UserTemplatesGrid.tsx b/client/src/components/UserTemplatesGrid.tsx
@@ -11,8 +11,12 @@ import { useBoard } from "../context/BoardContext";
 import { Grid, GridItem, Skeleton } from "@chakra-ui/react";
 
 const UserTemplatesGrid = () => {
-  const { userTemplates, setUserTemplates, setTemplateIsOwned } =
-    useTemplates();
+  const {
+    userTemplates,
+    setUserTemplates,
+    setTemplateIsOwned,
+    setUploadedTemplateNames,
+  } = useTemplates();
   const { setIsSearching } = useBoard();
   const { user } = useAuth0();
   const [isLoading, setIsLoading] = useState(true);
@@ -33,6 +37,9 @@ const UserTemplatesGrid = () => {
       );
       setUserTemplates(updatedTemplates);
       setTemplateIsOwned(true);
+      setUploadedTemplateNames(
+        updatedTemplates.map((template) => template.name)
+      );
     }
   };