From dacdef2e49c80111deb6c70ad4da4850a72e2de5 Mon Sep 17 00:00:00 2001 From: pratishta Date: Mon, 15 Jul 2024 14:42:14 -0400 Subject: [PATCH] Add pagination icons, almost add links --- .../CapitalProjectsAccordionPanel.tsx | 4 +- app/components/CapitalProjectsList.tsx | 58 +++++++++++++++++-- app/components/CapitalProjectsListItem.tsx | 2 +- app/components/Pagination.tsx | 28 ++++++++- ...cityCouncilDistrictId.capital-projects.tsx | 8 ++- 5 files changed, 91 insertions(+), 9 deletions(-) diff --git a/app/components/CapitalProjectsAccordionPanel.tsx b/app/components/CapitalProjectsAccordionPanel.tsx index ec559a7..2071783 100644 --- a/app/components/CapitalProjectsAccordionPanel.tsx +++ b/app/components/CapitalProjectsAccordionPanel.tsx @@ -7,12 +7,13 @@ export interface CapitalProjectsAccordionPanelProps { capitalProjects: Array; 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 ( diff --git a/app/components/CapitalProjectsList.tsx b/app/components/CapitalProjectsList.tsx index bd927ae..7be0976 100644 --- a/app/components/CapitalProjectsList.tsx +++ b/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; 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, + ) { + 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 = ({ - + + + + {/* 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 */} {/* } /> diff --git a/app/components/CapitalProjectsListItem.tsx b/app/components/CapitalProjectsListItem.tsx index 955e5b8..c4ea471 100644 --- a/app/components/CapitalProjectsListItem.tsx +++ b/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 = ({ - ) diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx index fe5be80..20b6a75 100644 --- a/app/components/Pagination.tsx +++ b/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 ( - <> + + + + }/> + + + } /> + ); } \ 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 408abb6..b72111e 100644 --- a/app/routes/city-council-districts.$cityCouncilDistrictId.capital-projects.tsx +++ b/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(); + console.log("in return fuction", projectsByCityCouncilDistrictResponse.capitalProjects); + return (