From 5750a408b55ee8183dddebbe33add6f499fb11ea Mon Sep 17 00:00:00 2001
From: pratishta <ypradhi9@gmail.com>
Date: Wed, 17 Jul 2024 17:03:57 -0400
Subject: [PATCH] Use box instead of button

---
 .../CapitalProjectsAccordionPanel.tsx         |  7 +++----
 app/components/CapitalProjectsList.tsx        |  7 ++++---
 app/components/Pagination.tsx                 | 21 +++++++------------
 ...cityCouncilDistrictId.capital-projects.tsx |  3 ---
 4 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/app/components/CapitalProjectsAccordionPanel.tsx b/app/components/CapitalProjectsAccordionPanel.tsx
index e593d1b..f6cf0e3 100644
--- a/app/components/CapitalProjectsAccordionPanel.tsx
+++ b/app/components/CapitalProjectsAccordionPanel.tsx
@@ -1,8 +1,7 @@
-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Text, Flex, HStack, Heading, IconButton, Stack } from "@nycplanning/streetscape"
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, HStack, Heading, IconButton, Stack } from "@nycplanning/streetscape"
 import { Agency, CapitalProject } from "~/gen";
 import { CapitalProjectsList } from "./CapitalProjectsList";
-import { ChevronLeftIcon } from "@chakra-ui/icons";
-import { Divider } from "@chakra-ui/react";
+
 
 export interface CapitalProjectsAccordionPanelProps {
     capitalProjects: Array<CapitalProject>;
@@ -28,7 +27,7 @@ export const CapitalProjectsAccordionPanel = ({
         boxShadow={"0px 8px 4px 0px rgba(0, 0, 0, 0.08)"}
         gap={4}
     >
-<Accordion allowToggle>
+<Accordion defaultIndex={[0]} allowToggle>
             <AccordionItem border="none">
                 <h2>
                 <AccordionButton padding="0px">
diff --git a/app/components/CapitalProjectsList.tsx b/app/components/CapitalProjectsList.tsx
index f604790..b44d331 100644
--- a/app/components/CapitalProjectsList.tsx
+++ b/app/components/CapitalProjectsList.tsx
@@ -89,10 +89,11 @@ export const CapitalProjectsList = ({
             </VStack>
         </Box>
         </Flex>
-        <HStack>
+        <Flex paddingTop="16px" alignItems="center" justifyContent={"space-between"}>
     
-        <Pagination total={10} path={path} />            
-        </HStack>
+        <Pagination total={total} path={path} /> 
+        <Button size="sm">Export Data</Button>       
+        </Flex>
         
         </>
     );
diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index c3cd4ce..9bccd8e 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -1,8 +1,9 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
-import { Flex, HStack, IconButton } from "@nycplanning/streetscape";
+import { Box, Flex, HStack } from "@nycplanning/streetscape";
 import { useSearchParams } from "@remix-run/react";
 import { Button } from "@chakra-ui/button";
 import { Link } from "@remix-run/react";
+import { IconButton } from "@chakra-ui/react";
 
 export interface PaginationProps{
     total: number;
@@ -11,34 +12,28 @@ export interface PaginationProps{
 
 export const Pagination = ({total, path}: PaginationProps) => {
     const [searchParams] = useSearchParams();
-    console.log(searchParams);
-    console.log("total", total);
+
     const limit = Number(searchParams.get("limit"));
     const offset = Number(searchParams.get("offset"));
 
     const currentPage = offset === 0 ? 1 : offset / limit + 1;
-    console.log(currentPage);
     const canSkipBackward = offset > 0;
-    const canSkipForward = total === limit;
+    const canSkipForward = total === limit || limit === 0;
 
     const search = `?limit=7&offset=`; 
     return (
-        <Flex
-            paddingTop="16px"
-        >
-            <HStack>
+            <HStack gap={2}>
             <Link
                 to={{search: search + `${offset - 7}`}}
             >
-                <IconButton disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronLeftIcon />}/>
+                <Box as="button" disabled={!canSkipBackward}  _disabled={{ color: 'grey' }} fontSize={"xl"}><ChevronLeftIcon /></Box>
             </Link>
-            <Button borderRadius={0} size="sm" aria-label="Page">{currentPage}</Button>
+            <Box borderRadius={3} fontSize="sm" aria-label="Page">{currentPage}</Box>
             <Link
                 to={{search: search + `${currentPage * 7}`}}
             >
-                <IconButton  disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronRightIcon />} />
+                <Box as="button" disabled={!canSkipForward} _disabled={{ color: 'grey' }} fontSize={"xl"}><ChevronRightIcon /></Box>
             </Link>
             </HStack>
-        </Flex>
     );
 }
\ No newline at end of file
diff --git a/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx b/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
index aeae4f8..9c93a86 100644
--- a/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
+++ b/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx
@@ -5,10 +5,8 @@ import { CapitalProjectsList } from "~/components/CapitalProjectsList";
 import { CapitalProjectsAccordionPanel } from "~/components/CapitalProjectsAccordionPanel";
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
-    console.log("in loader");
   const url = new URL(request.url);
   const path = url.pathname;
-  console.log("url", url);
   const agenciesResponse = await findAgencies({
     baseURL: `${import.meta.env.VITE_ZONING_API_URL}/api`,
   });
@@ -49,7 +47,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
 export default function CapitalProjectsByCityCouncilDistrict() {
     const {projectsByCityCouncilDistrictResponse, agencies, cityCouncilDistrictId, limit, path, offset} = useLoaderData<typeof loader>();
-    console.log("in return fuction", projectsByCityCouncilDistrictResponse.capitalProjects);
 
     return (
     <CapitalProjectsAccordionPanel