Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add table loading skeletons and move data fetching down #207

Merged
merged 7 commits into from
Oct 10, 2023
Merged

Add table loading skeletons and move data fetching down #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
02a424b
Use tailwind variants
delbaoliveira Oct 9, 2023
3ea6fa5
Move data fetching down
delbaoliveira Oct 9, 2023
4c40bab
Merge branch 'main' into example-5tyh
delbaoliveira Oct 10, 2023
8107904
Add table skeleton
delbaoliveira Oct 10, 2023
0976320
Update pagination data fetching
delbaoliveira Oct 10, 2023
bc8672d
Fix skeleton layout shift
delbaoliveira Oct 10, 2023
50b1fff
Add key to suspense to trigger it on subsequent navigation
delbaoliveira Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions dashboard/15-final/app/dashboard/invoices/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import Pagination from '@/app/ui/invoices/pagination';
import Search from '@/app/ui/search';
import { CreateInvoice } from '@/app/ui/invoices/buttons';
import Table from '@/app/ui/invoices/table';
import { fetchFilteredInvoices } from '@/app/lib/data';
import { lusitana } from '@/app/ui/fonts';
import { InvoicesTableSkeleton } from '@/app/ui/dashboard/skeletons';
import { Suspense } from 'react';
import { fetchInvoicesPages } from '@/app/lib/data';

export default async function Page({
searchParams,
Expand All @@ -14,12 +16,8 @@ export default async function Page({
};
}) {
const query = searchParams?.query || '';
const currentPage = Number(searchParams?.page || '1');

const { invoices, totalPages } = await fetchFilteredInvoices(
query,
currentPage,
);
const currentPage = Number(searchParams?.page) || 1;
const totalPages = await fetchInvoicesPages(query);

return (
<div className="w-full">
Expand All @@ -30,9 +28,11 @@ export default async function Page({
<Search placeholder="Search invoices..." />
<CreateInvoice />
</div>
<Table invoices={invoices} />
<Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
<Table query={query} currentPage={currentPage} />
</Suspense>
<div className="mt-5 flex w-full justify-center">
<Pagination totalPages={totalPages} currentPage={currentPage} />
<Pagination totalPages={totalPages} />
</div>
</div>
);
Expand Down
49 changes: 26 additions & 23 deletions dashboard/15-final/app/lib/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@ export async function fetchCardData() {
}
}

const ITEMS_PER_PAGE = 6;
export async function fetchFilteredInvoices(
query: string,
currentPage: number,
) {
const itemsPerPage = 6;
const offset = (currentPage - 1) * itemsPerPage;
const offset = (currentPage - 1) * ITEMS_PER_PAGE;

try {
const data = await sql<InvoicesTable>`
const invoices = await sql<InvoicesTable>`
SELECT
invoices.id,
invoices.amount,
Expand All @@ -105,34 +105,37 @@ export async function fetchFilteredInvoices(
invoices.date::text ILIKE ${`%${query}%`} OR
invoices.status ILIKE ${`%${query}%`}
ORDER BY invoices.date DESC
LIMIT ${itemsPerPage} OFFSET ${offset}
LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
`;

const count = await sql`
SELECT COUNT(*)
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE
customers.name ILIKE ${`%${query}%`} OR
customers.email ILIKE ${`%${query}%`} OR
invoices.amount::text ILIKE ${`%${query}%`} OR
invoices.date::text ILIKE ${`%${query}%`} OR
invoices.status ILIKE ${`%${query}%`}
`;

const totalRecords = Number(count.rows[0].count);
const totalPages = Math.ceil(totalRecords / itemsPerPage);

return {
invoices: data.rows,
totalPages,
};
return invoices.rows;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch invoices.');
}
}

export async function fetchInvoicesPages(query: string) {
try {
const count = await sql`SELECT COUNT(*)
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE
customers.name ILIKE ${`%${query}%`} OR
customers.email ILIKE ${`%${query}%`} OR
invoices.amount::text ILIKE ${`%${query}%`} OR
invoices.date::text ILIKE ${`%${query}%`} OR
invoices.status ILIKE ${`%${query}%`}
`;

const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE);
return totalPages;
} catch (error) {
console.error('Database Error:', error);
throw new Error('Failed to fetch total number of invoices.');
}
}

export async function fetchInvoiceById(id: string) {
try {
const data = await sql<InvoiceForm>`
Expand Down
115 changes: 115 additions & 0 deletions dashboard/15-final/app/ui/dashboard/skeletons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,118 @@ export default function DashboardSkeleton() {
</>
);
}

export function TableRowSkeleton() {
return (
<tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
{/* Customer Name and Image */}
<td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-gray-100"></div>
<div className="h-6 w-24 rounded bg-gray-100"></div>
</div>
</td>
{/* Email */}
<td className="whitespace-nowrap px-3 py-3">
<div className="h-6 w-32 rounded bg-gray-100"></div>
</td>
{/* Amount */}
<td className="whitespace-nowrap px-3 py-3">
<div className="h-6 w-16 rounded bg-gray-100"></div>
</td>
{/* Date */}
<td className="whitespace-nowrap px-3 py-3">
<div className="h-6 w-16 rounded bg-gray-100"></div>
</td>
{/* Status */}
<td className="whitespace-nowrap px-3 py-3">
<div className="h-6 w-16 rounded bg-gray-100"></div>
</td>
{/* Actions */}
<td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex justify-end gap-3">
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
</div>
</td>
</tr>
);
}

export function InvoicesMobileSkeleton() {
return (
<div className="mb-2 w-full rounded-md bg-white p-4">
<div className="flex items-center justify-between border-b border-gray-100 pb-8">
<div className="flex items-center">
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
<div className="h-6 w-16 rounded bg-gray-100"></div>
</div>
<div className="h-6 w-16 rounded bg-gray-100"></div>
</div>
<div className="flex w-full items-center justify-between pt-4">
<div>
<div className="h-6 w-16 rounded bg-gray-100"></div>
<div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
</div>
<div className="flex justify-end gap-2">
<div className="h-10 w-10 rounded bg-gray-100"></div>
<div className="h-10 w-10 rounded bg-gray-100"></div>
</div>
</div>
</div>
);
}

export function InvoicesTableSkeleton() {
return (
<div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden">
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
<InvoicesMobileSkeleton />
</div>
<table className="hidden min-w-full text-gray-900 md:table">
<thead className="rounded-lg text-left text-sm font-normal">
<tr>
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
Customer
</th>
<th scope="col" className="px-3 py-5 font-medium">
Email
</th>
<th scope="col" className="px-3 py-5 font-medium">
Amount
</th>
<th scope="col" className="px-3 py-5 font-medium">
Date
</th>
<th scope="col" className="px-3 py-5 font-medium">
Status
</th>
<th
scope="col"
className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
>
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white">
<TableRowSkeleton />
<TableRowSkeleton />
<TableRowSkeleton />
<TableRowSkeleton />
<TableRowSkeleton />
<TableRowSkeleton />
</tbody>
</table>
</div>
</div>
</div>
);
}
12 changes: 3 additions & 9 deletions dashboard/15-final/app/ui/invoices/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,18 @@ import Link from 'next/link';
import { generatePagination } from '@/app/lib/utils';
import { usePathname, useSearchParams } from 'next/navigation';

export default function Pagination({
currentPage,
totalPages,
}: {
currentPage: number;
totalPages: number;
}) {
export default function Pagination({ totalPages }: { totalPages: number }) {
const pathname = usePathname();
const searchParams = useSearchParams();
const currentPage = Number(searchParams.get('page')) || 1;
const allPages = generatePagination(currentPage, totalPages);

const createPageURL = (pageNumber: number | string) => {
const params = new URLSearchParams(searchParams);
params.set('page', pageNumber.toString());
return `${pathname}?${params.toString()}`;
};

const allPages = generatePagination(currentPage, totalPages);

return (
<div className="inline-flex">
<PaginationArrow
Expand Down
Loading
Loading