Skip to content

Commit

Permalink
🛠️ Pagination Updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@sinanptm
sinanptm committed Sep 25, 2024
1 parent 23ace8a commit f2e7ebc
Show file tree
Hide file tree
Showing 9 changed files with 45 additions and 48 deletions.
29 changes: 15 additions & 14 deletions client/app/(patient)/appointments/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,22 @@

import Pagination from "@/components/navigation/Pagination";
import { useGetAppointmentsPatient } from "@/lib/hooks/appointment/useAppointmentPatient";
import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { ButtonV2 } from "@/components/common/ButtonV2";
import { useRouter } from "next/navigation";
import { format } from "date-fns";
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
import { Calendar, FileText, Video, User } from "lucide-react";
import { useState } from "react";
import { ButtonV2 } from "@/components/common/ButtonV2";

const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: number } }) => {
const page = searchParams.page || 0;
const page = searchParams.page || 1;
const [currentPage, setCurrentPage] = useState(page);
const { data } = useGetAppointmentsPatient(page, 4);
const { data, isLoading } = useGetAppointmentsPatient(page-1, 4);
const router = useRouter();

const handlePageChange = (pageIndex: number) => {
if (pageIndex > data?.totalPages!) return null;
if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
router.replace(`/appointments?page=${pageIndex}`);
setCurrentPage(pageIndex);
};
Expand Down Expand Up @@ -77,14 +77,15 @@ const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: numbe
))}

<div className="mt-6">
{}
<Pagination
currentPage={currentPage}
handlePageChange={handlePageChange}
hasNextPage={data?.hasNextPage!}
hasPrevPage={data?.hasPreviousPage!}
totalPages={data?.totalPages!}
/>
{!isLoading && (
<Pagination
currentPage={currentPage}
handlePageChange={handlePageChange}
hasNextPage={data?.hasNextPage!}
hasPrevPage={data?.hasPreviousPage!}
totalPages={data?.totalPages!}
/>
)}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/app/admin/doctors/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const metadata: Metadata = {
};

const Page = ({ searchParams }: { searchParams: { page: number; type: DoctorsFilter } }) => {
const page = searchParams.page || 0;
const page = searchParams.page || 1;
const type = searchParams.type || DoctorsFilter.VERIFIED;

return <DoctorTable page={page} type={type} />;
Expand Down
2 changes: 1 addition & 1 deletion client/app/admin/patients/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const metadata: Metadata = {
};

const Page = ({ searchParams }: { searchParams: { page: number } }) => {
const page = searchParams.page || 0;
const page = searchParams.page || 1;

return (
<main>
Expand Down
2 changes: 1 addition & 1 deletion client/app/doctor/appointments/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export const metadata: Metadata = {
};

const Appointments = ({ searchParams }: { searchParams: { page: number } }) => {
const page = searchParams.page || 0;
const page = searchParams.page || 1;

return <AppointmentTable page={page} />;
};
Expand Down
13 changes: 5 additions & 8 deletions client/components/models/admin/PatientProfileModel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { IPatient } from "@/types";
import { useChangeStatusAdmin } from "@/lib/hooks/admin/useAdminPatients";
import { toast } from "@/components/ui/use-toast";
import { Badge } from "@/components/ui/badge";

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
type Props = {
open: boolean;
setOpen: Dispatch<SetStateAction<boolean>>;
Expand Down Expand Up @@ -70,13 +70,10 @@ const AdminPatientProfileModel = ({ open, setOpen, patient, refetch }: Props) =>
<AlertDialogDescription></AlertDialogDescription>
<div className="space-y-6">
<div className="flex items-center space-x-6">
<Image
src={patient.profile || "/assets/icons/user.svg?height=128&width=128"}
alt={patient.name || "Profile"}
width={128}
height={128}
className="rounded-full object-cover"
/>
<Avatar className="h-28 w-28 rounded-full object-cover">
<AvatarImage src={patient.profile || "/assets/icons/circle-user.svg"} alt={patient.name} />
<AvatarFallback>{(patient.name!||"P").charAt(0)}</AvatarFallback>
</Avatar>
<div>
<h3 className="text-2xl font-semibold">{patient.name}</h3>
<p className="text-muted-foreground">{patient.gender || "Not specified"}</p>
Expand Down
8 changes: 4 additions & 4 deletions client/components/navigation/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ export default function Pagination({
handlePageChange,
totalPages,
className,
hasNextPage,
hasPrevPage,
}: Props) {
if (totalPages <= 1) return null;

Expand Down Expand Up @@ -52,8 +50,9 @@ export default function Pagination({
<PaginationItem>
<PaginationPrevious
href="#"
isActive={currentPage > 1}
onClick={(e) => handleClick(e, currentPage - 1)}
aria-disabled={!hasPrevPage || currentPage <= 1}
aria-disabled={currentPage <= 1}
/>
</PaginationItem>
{getPageRange().map((page, index) => (
Expand All @@ -74,8 +73,9 @@ export default function Pagination({
<PaginationItem>
<PaginationNext
href="#"
isActive={currentPage < totalPages}
onClick={(e) => handleClick(e, currentPage + 1)}
aria-disabled={!hasNextPage || currentPage >= totalPages}
aria-disabled={currentPage >= totalPages}
/>
</PaginationItem>
</PaginationContent>
Expand Down
5 changes: 3 additions & 2 deletions client/components/view/table/DoctorAppointmentTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function AppointmentTable({ page }: Props) {
const [statusFilter, setStatusFilter] = useState<AppointmentStatus | "all">("all");
const limit = 7;
const { data, isLoading, error, refetch } = useGetAppointmentsDoctor(
currentPage,
currentPage-1,
limit,
statusFilter === "all" ? undefined : statusFilter
);
Expand All @@ -40,6 +40,7 @@ export default function AppointmentTable({ page }: Props) {
const appointments = useMemo(() => data?.items || [], [data?.items]);

const handlePageChange = (pageIndex: number) => {
if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
setCurrentPage(pageIndex);
router.replace(`/doctor/appointments?page=${pageIndex}&status=${statusFilter}`);
refetch();
Expand All @@ -51,7 +52,7 @@ export default function AppointmentTable({ page }: Props) {

const handleStatusChange = (status: AppointmentStatus | "all") => {
setStatusFilter(status);
setCurrentPage(0);
setCurrentPage(1);
router.replace(`/doctor/appointments?page=1&status=${status}`);
refetch();
};
Expand Down
5 changes: 3 additions & 2 deletions client/components/view/table/DoctorsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function DoctorsPage({ page, type }: Props) {
const [tabType, setTabType] = useState<DoctorsFilter>(DoctorsFilter.VERIFIED);
const router = useRouter();
const limit = 7;
const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, limit, type);
const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage-1, limit, type);

const doctors = useMemo(() => data?.items || [], [data]);

Expand All @@ -46,14 +46,15 @@ export default function DoctorsPage({ page, type }: Props) {
};

const handlePageChange = (pageIndex: number) => {
if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
setCurrentPage(pageIndex);
router.push(`/admin/doctors?page=${pageIndex}&type=${tabType}`);
refetch();
};

const handleTabChange = (value: DoctorsFilter) => {
setTabType(value);
setCurrentPage(0);
setCurrentPage(1);
router.push(`/admin/doctors?page=${currentPage}&type=${value}`);
refetch();
};
Expand Down
27 changes: 12 additions & 15 deletions client/components/view/table/PatientsTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
"use client";

import { useState } from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useGetPatientsAdmin } from "@/lib/hooks/admin/useAdminPatients";
import Pagination from "@/components/navigation/Pagination";
import {IPatient} from "@/types";
import { IPatient } from "@/types";
import AdminPatientProfileModel from "@/components/models/admin/PatientProfileModel";
import { useRouter } from "next/navigation";
import TableSkeleton from "@/components/skeletons/TableSkelton";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

type Props = {
page: number;
Expand All @@ -22,7 +22,7 @@ export default function PatientsTable({ page }: Props) {
const [selectedPatient, setSelectedPatient] = useState({});
const router = useRouter();
const limit = 7;
const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, limit);
const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage-1, limit);
const columns = [
{ name: "Image", width: "w-[80px]" },
{ name: "Name", width: "" },
Expand All @@ -35,6 +35,7 @@ export default function PatientsTable({ page }: Props) {
const patients = data?.items!;

const handlePageChange = (pageIndex: number) => {
if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
setCurrentPage(pageIndex);
router.push(`/admin/patients?page=${pageIndex}`);
refetch();
Expand Down Expand Up @@ -80,19 +81,15 @@ export default function PatientsTable({ page }: Props) {
<TableRow key={patient._id}>
<TableCell>
<div
className={`relative w-16 h-16 rounded-full ${
patient.isBlocked
? "border-4 border-destructive"
: "border-4 border-primary"
}`}
className={`relative w-16 h-16 rounded-full ${patient.isBlocked
? "border-4 border-destructive"
: "border-4 border-primary"
}`}
>
<Image
src={patient.profile || "/placeholder.svg?height=64&width=64"}
alt={patient.name || "Profile"}
width={64}
height={64}
className="rounded-full object-cover"
/>
<Avatar className="w-full h-full" >
<AvatarImage src={patient.profile || "/assets/icons/circle-user.svg"} alt={patient.name} />
<AvatarFallback>{(patient.name!||"P").charAt(0)}</AvatarFallback>
</Avatar>
</div>
</TableCell>
<TableCell className="font-medium">{patient.name}</TableCell>
Expand Down

1 comment on commit f2e7ebc

@vercel
Copy link

@vercel vercel bot commented on f2e7ebc Sep 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

avm-care – ./

avm-care.vercel.app
avm-care-git-main-sinans-projects-8d312afe.vercel.app
avm-care-sinans-projects-8d312afe.vercel.app

Please sign in to comment.