Merge pull request #14 from knowankit/feat/add-horizontal-scroll

Add dummy columns on button click
knowankit · Apr 30, 2021 · 4ee588b · 4ee588b · vercel · Apr 30, 2021
2 parents f5834f2 + ffe8e74
commit 4ee588b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/src/components/board/columns/index.tsx b/src/components/board/columns/index.tsx
@@ -1,18 +1,54 @@
 import React, { useState } from 'react';
 import { Box, Button, Heading } from '@chakra-ui/react';
 
-const tempData = [
-  { columnName: 'To-Do' },
-  { columnName: 'In Progress' },
-  { columnName: 'PR Raised' },
-  { columnName: 'Done' }
-];
-
 const BoardColumns = () => {
+  const tempData = [
+    { columnName: 'To-Do' },
+    { columnName: 'In Progress' },
+    { columnName: 'PR Raised' },
+    { columnName: 'Done' }
+  ];
+
   const [columns, setColumns] = useState(tempData);
 
+  const loadColumns = (column, index) => {
+    if (columns.length - 1 !== index) {
+      return (
+        <React.Fragment key={index}>
+          <Heading as="h6" size="sm" mt="5px" textAlign="center">
+            {column.columnName}
+          </Heading>
+          <Button size="xs" my="10px" mx="5px" bg="brand" color="white">
+            Add a card
+          </Button>
+        </React.Fragment>
+      );
+    }
+
+    return (
+      <Button
+        key={index}
+        size="xs"
+        my="10px"
+        mx="5px"
+        colorScheme="blue"
+        color="white"
+        onClick={addColumn}>
+        Add a Column
+      </Button>
+    );
+  };
+
+  const addColumn = () => {
+    setColumns([...columns, { columnName: 'Test' }]);
+
+    console.log('test', columns);
+  };
+
+  // const addCard = () => {};
+
   return (
-    <Box display="flex" height="calc(100vh - 200px)" bg="lightblue" overflowY="scroll">
+    <Box display="flex" overflowX="scroll">
       {columns.map((column, index) => (
         <Box
           key={index}
@@ -22,16 +58,10 @@ const BoardColumns = () => {
           flexDirection="column"
           mt="10px"
           mx="10px"
-          bg="gray">
-          <Heading color="white" as="h6" size="sm" mt="5px" textAlign="center">
-            {column.columnName}
-          </Heading>
-          <Button size="sm" my="10px" mx="5px">
-            Add a card
-          </Button>
+          bg={column.columnName === 'addColumn' ? '' : '#F0F0F0'}>
+          {loadColumns(column, index)}
         </Box>
       ))}
-      {/* <Button size='sm' my='10px' mx='5px' width='20vw'>Add a column</Button> */}
     </Box>
   );
 };

diff --git a/src/components/sub-navbar/index.tsx b/src/components/sub-navbar/index.tsx
@@ -1,13 +1,20 @@
-import { Box, Wrap, WrapItem, Avatar, Heading } from '@chakra-ui/react';
+import { Box, Wrap, WrapItem, Avatar, Heading, Button } from '@chakra-ui/react';
 import PropType from 'prop-types';
+import Link from 'next/link';
+
 import React from 'react';
 
 const SubNavbar = ({ board }) => {
   return (
-    <Box height="50px" bg="brand" boxShadow="md" display="flex">
-      <Heading ml="0.5rem" color="white" as="h3" size="lg" alignSelf="center" whiteSpace="nowrap">
+    <Box height="50px" bg="brand" boxShadow="md" display="flex" alignItems="center">
+      <Heading ml="0.5rem" color="white" as="h3" size="lg" whiteSpace="nowrap">
         {board.name}
       </Heading>
+      <Link href="/boards">
+        <Button size="xs" ml="10px">
+          Boards
+        </Button>
+      </Link>
       <Box display="flex" alignItems="center" justifyContent="center" width="100%">
         <Wrap>
           <WrapItem>