Add pagination icons, almost add links

app/components/CapitalProjectsAccordionPanel.tsx

@@ -7,12 +7,13 @@ export interface CapitalProjectsAccordionPanelProps {
     capitalProjects: Array<CapitalProject>;
     district: string;
     limit: number;
+    path: string;
     offset: number;
     total: number;
 }
 
 export const CapitalProjectsAccordionPanel = ({
-    capitalProjects, district, limit, offset, total
+    capitalProjects, district, limit, offset, total, path
 }: CapitalProjectsAccordionPanelProps) => {
     return (
         <Flex
@@ -46,6 +47,7 @@ export const CapitalProjectsAccordionPanel = ({
                     capitalProjects={capitalProjects}
                     limit={limit}
                     offset={offset}
+                    path={path}
                     total={total}
                 /> 
                 </AccordionPanel>

app/components/CapitalProjectsList.tsx

@@ -1,26 +1,56 @@
-import { Box, Flex, Hide, FlexProps, VStack, HStack, IconButton} from "@nycplanning/streetscape";
+import { Box, Flex, Hide, FlexProps, VStack, HStack, IconButton, Link} from "@nycplanning/streetscape";
 import { useState } from "react";
 import { CapitalProject } from "~/gen";
 import { getYear, getMonth, compareAsc } from "date-fns";
 import { CapitalProjectsListItem } from "./CapitalProjectsListItem";
 import { Button } from "@chakra-ui/react";
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
-import { ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
+import { ArrowLeftIcon, ArrowRightIcon, Icon } from "@chakra-ui/icons";
 import { Pagination } from "./Pagination";
+import ReactPaginate from 'react-paginate';
+import { useSearchParams } from "@remix-run/react";
 
 export interface CapitalProjectsListProps {
     capitalProjects: Array<CapitalProject>;
     limit: number;
     offset: number;
     total: number;
+    path: string;
 }
 
 export const CapitalProjectsList = ({
-    capitalProjects, limit, offset, total,
+    capitalProjects, limit, offset, total, path
 }: CapitalProjectsListProps) => {
+
+    const [searchParams] = useSearchParams();
+    console.log(searchParams);
+
+    function setSearchParamsString(
+        searchParams: URLSearchParams,
+        changes: Record<string, string | number | undefined>,
+      ) {
+        const newSearchParams = new URLSearchParams(searchParams)
+        for (const [key, value] of Object.entries(changes)) {
+          if (value === undefined) {
+            newSearchParams.delete(key)
+            continue
+          }
+          newSearchParams.set(key, String(value))
+        }
+        // Print string manually to avoid over-encoding the URL
+        // Browsers are ok with $ nowadays
+        // optional: return newSearchParams.toString()
+        return Array.from(newSearchParams.entries())
+          .map(([key, value]) =>
+            value ? `${key}=${encodeURIComponent(value)}` : key,
+          )
+          .join("&")
+      }
+
     const [isExpanded, setIsExpanded] = useState(false);
 
     const numberOfPages = total / limit;
+    // Invoke when user click to request another page.
 
     const getFiscalYearForDate = (date: Date): number => {
         const year = getYear(date);
@@ -81,7 +111,27 @@ export const CapitalProjectsList = ({
             </VStack>
         </Box>
         <HStack>
-            <Pagination total={total} />
+        <Button
+        size="xs"
+        variant="outline"
+      >
+        {/* <Link
+          to={{
+            search: setSearchParamsString(searchParams, {
+              $skip: 0,
+            }),
+          }}
+          preventScrollReset
+          prefetch="intent"
+          className="text-neutral-600"
+        >
+          <span className="sr-only"> First page</span>
+          <Icon name="double-arrow-left" />
+        </Link> */}
+      </Button>
+      <Pagination total={10} path={path} />
+
+           {/* We cannot know the size of the capital projects so we need to test out the 'next' offset to determine whether or not we should disable  */}
             {/* <HStack>
             <IconButton variant="ghost" aria-label='Search database' icon={<ArrowLeftIcon />} />
             <Pagination />   

app/components/CapitalProjectsListItem.tsx

@@ -1,5 +1,6 @@
 import { Box, HStack, Heading, VStack, Text, Spacer } from "@nycplanning/streetscape";
 import { Icon, createIcon, Flex } from '@chakra-ui/react'
+import { Pagination } from "./Pagination";
 
 export interface CapitalProjectsListItemProps {
     description: string;
@@ -48,7 +49,6 @@ export const CapitalProjectsListItem = ({
 
                 </HStack>
 
-
             </Box>
         </Flex>
     )

app/components/Pagination.tsx

@@ -1,14 +1,38 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { HStack, IconButton } from "@nycplanning/streetscape";
 import { useSearchParams } from "@remix-run/react";
+import { Button } from "@chakra-ui/button";
+import { Link } from "@remix-run/react";
 
 export interface PaginationProps{
     total: number;
+    path: string,
 };
 
-export const Pagination = ({total}: 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 = Math.floor(offset / limit) + 1;
+    const canSkipBackward = offset > 0;
+    const canSkipForward = total === limit;
+
+    // const skip
     return (
-        <></>
+        <HStack>
+
+                <Link
+                    to={{
+                        search: {},
+                      }}
+                >
+                    <IconButton disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronLeftIcon />}/>
+                </Link>
+            <Button size="sm" aria-label="Page">{currentPage}</Button>
+            <IconButton  disable={!canSkipBackward} size="s" aria-label="Add" icon={<ChevronRightIcon />} />
+        </HStack>
     );
 }

app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx

@@ -5,7 +5,10 @@ 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 limitParam = url.searchParams.get("limit");
   const offsetParam = url.searchParams.get("offset");
   let limit;
@@ -30,7 +33,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     await findCapitalProjectsByCityCouncilId(
       cityCouncilDistrictId,
       {
-        limit: 7,
+        limit,
         offset,
       },
       {
@@ -43,10 +46,13 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
 export default function CapitalProjectsByCityCouncilDistrict() {
     const {projectsByCityCouncilDistrictResponse, cityCouncilDistrictId, limit, offset} = useLoaderData<typeof loader>();
+    console.log("in return fuction", projectsByCityCouncilDistrictResponse.capitalProjects);
+
     return (
     <CapitalProjectsAccordionPanel
         capitalProjects={projectsByCityCouncilDistrictResponse.capitalProjects}
         limit={limit}
+        path={path}
         offset={offset}
         total={projectsByCityCouncilDistrictResponse.total}
         district={"City Council District " + cityCouncilDistrictId}