-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(GIST-82): add paginate on gists
* feat(paginate): working on paginate on gists * feat(GIST-80): added correct pagination numbers * feat(GIST-80): added url as source of truth for paginate * feat(GIST-80): fixed edge case on paginate
- Loading branch information
1 parent
f494ada
commit 07ca56f
Showing
8 changed files
with
554 additions
and
270 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| "use client"; | ||
| import { usePathname, useRouter, useSearchParams } from "next/navigation"; | ||
| import { | ||
| createContext, | ||
| ReactNode, | ||
| useCallback, | ||
| useEffect, | ||
| useState, | ||
| } from "react"; | ||
|
|
||
| interface PaginationContextContent { | ||
| offset: number; | ||
| limit: number; | ||
| nb_pages?: number; | ||
| setOffset: (offset: number) => void; | ||
| setLimit: (limit: number) => void; | ||
| setNbPages: (nb_pages: number) => void; | ||
| } | ||
|
|
||
| const PaginationInitialState = { | ||
| offset: 0, | ||
| limit: 9, | ||
| nb_pages: 0, | ||
| setOffset: (offset: number) => {}, | ||
| setLimit: (limit: number) => {}, | ||
| setNbPages: (nb_pages: number) => {}, | ||
| }; | ||
|
|
||
| export const PaginationContext = createContext<PaginationContextContent>( | ||
| PaginationInitialState, | ||
| ); | ||
|
|
||
| export function PaginationProvider({ | ||
| children, | ||
| fromUrl, | ||
| }: { | ||
| children: ReactNode; | ||
| fromUrl: boolean; | ||
| }) { | ||
| const [offset, setOffset] = useState(PaginationInitialState.offset); | ||
| const [limit, setLimit] = useState(PaginationInitialState.limit); | ||
| const [nb_pages, setNbPages] = useState(PaginationInitialState.nb_pages); | ||
| const searchParams = useSearchParams(); | ||
| const pathname = usePathname(); | ||
| const router = useRouter(); | ||
|
|
||
| const checkOffset = useCallback( | ||
| (offset: number) => { | ||
| if (offset >= 0 && offset <= nb_pages * limit) { | ||
| return true; | ||
| } | ||
| return false; | ||
| }, | ||
| [nb_pages, limit], | ||
| ); | ||
|
|
||
| const setOffsetHandler = useCallback( | ||
| (offset: number) => { | ||
| if (checkOffset(offset)) { | ||
| if (fromUrl) { | ||
| const page = Math.floor(offset / limit) + 1; | ||
| router.push(`${pathname}?page=${page}`); | ||
| } | ||
| setOffset(offset); | ||
| } | ||
| }, | ||
| [checkOffset, fromUrl, limit, pathname, router], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!fromUrl) return; | ||
| if (searchParams.has("page")) { | ||
| const page = parseInt(searchParams.get("page") as string); | ||
| const offset = (page - 1) * limit; | ||
| console.log("offset", offset); | ||
| if (!checkOffset(offset)) return; | ||
| setOffset(offset); | ||
| } | ||
| }, [searchParams, fromUrl, setOffset, limit, setOffsetHandler, checkOffset]); | ||
|
|
||
| return ( | ||
| <PaginationContext.Provider | ||
| value={{ | ||
| offset, | ||
| setOffset: setOffsetHandler, | ||
| limit, | ||
| setLimit, | ||
| nb_pages, | ||
| setNbPages, | ||
| }} | ||
| > | ||
| {children} | ||
| </PaginationContext.Provider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,63 @@ | ||
| import * as React from 'react' | ||
| import { Slot } from '@radix-ui/react-slot' | ||
| import { cva, type VariantProps } from 'class-variance-authority' | ||
| import * as React from "react"; | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { cva, type VariantProps } from "class-variance-authority"; | ||
|
|
||
| import { cn } from '@/lib/utils' | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const buttonVariants = cva( | ||
| 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', | ||
| "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: 'bg-primary text-primary-foreground hover:bg-primary/90', | ||
| destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', | ||
| outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', | ||
| secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', | ||
| ghost: 'hover:bg-light-background hover:text-foreground', | ||
| link: 'text-primary text-base underline-offset-4 hover:underline', | ||
| icon: 'text-foreground bg-icon hover:bg-icon/80', | ||
| menu: 'text-primary-foreground hover:bg-primary hover:text-primary-foreground', | ||
| header: 'hover:bg-primary hover:text-foreground', | ||
| default: "bg-primary text-primary-foreground hover:bg-primary/90", | ||
| destructive: | ||
| "bg-destructive text-destructive-foreground hover:bg-destructive/90", | ||
| outline: | ||
| "border border-input bg-background hover:bg-accent hover:text-accent-foreground", | ||
| secondary: | ||
| "bg-secondary text-secondary-foreground hover:bg-secondary/80", | ||
| ghost: "hover:bg-light-background hover:text-foreground", | ||
| disabled: | ||
| "hover:bg-light-background hover:text-foreground opacity-50 cursor-not-allowed", | ||
| link: "text-primary text-base underline-offset-4 hover:underline", | ||
| icon: "text-foreground bg-icon hover:bg-icon/80", | ||
| menu: "text-primary-foreground hover:bg-primary hover:text-primary-foreground", | ||
| header: "hover:bg-primary hover:text-foreground", | ||
| }, | ||
| size: { | ||
| default: 'h-10 px-6 py-3', | ||
| 'no-padding': 'h-10', | ||
| sm: 'h-9 rounded-md px-3', | ||
| lg: 'h-11 rounded-md px-8', | ||
| menu: 'h-10 py-2 px-3', | ||
| icon: 'h-10 w-10', | ||
| default: "h-10 px-6 py-3", | ||
| "no-padding": "h-10", | ||
| sm: "h-9 rounded-md px-3", | ||
| lg: "h-11 rounded-md px-8", | ||
| menu: "h-10 py-2 px-3", | ||
| icon: "h-10 w-10", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: 'default', | ||
| size: 'default', | ||
| variant: "default", | ||
| size: "default", | ||
| }, | ||
| } | ||
| ) | ||
| }, | ||
| ); | ||
|
|
||
| export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> { | ||
| asChild?: boolean | ||
| export interface ButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | ||
| VariantProps<typeof buttonVariants> { | ||
| asChild?: boolean; | ||
| } | ||
|
|
||
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : 'button' | ||
| return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> | ||
| }) | ||
| Button.displayName = 'Button' | ||
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | ||
| ({ className, variant, size, asChild = false, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : "button"; | ||
| return ( | ||
| <Comp | ||
| className={cn(buttonVariants({ variant, size, className }))} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }, | ||
| ); | ||
| Button.displayName = "Button"; | ||
|
|
||
| export { Button, buttonVariants } | ||
| export { Button, buttonVariants }; |
Oops, something went wrong.