rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update error page styles (#210)

Browse Source 
Co-authored-by: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
This commit is contained in:
Delba de Oliveira
2023-10-12 14:59:43 +01:00
committed by GitHub
parent 24ac91ac03
commit f53d117332
3 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
dashboard/15-final/app/dashboard/invoices/[id]/edit/not-found.tsx
View File

@@ -4,12 +4,12 @@ import { FaceFrownIcon } from '@heroicons/react/24/outline';
export default function NotFound() {
return (
<main className="flex h-full flex-col items-center justify-center gap-2">
<FaceFrownIcon className="w-12 text-gray-400" />
<h2 className="text-lg font-semibold">Not Found</h2>
<FaceFrownIcon className="w-10 text-gray-400" />
<h2 className="text-xl font-semibold">404 Not Found</h2>
<p>Could not find the requested invoice.</p>
<Link
href="/dashboard/invoices"
className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
>
Go Back
</Link>

2
dashboard/15-final/app/dashboard/invoices/error.tsx
View File

@@ -18,7 +18,7 @@ export default function Error({
<main className="flex h-full flex-col items-center justify-center">
<h2 className="text-center">Something went wrong!</h2>
<button
className="mt-4 rounded-md bg-black px-4 py-2 text-sm text-white"
className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
onClick={
// Attempt to recover by trying to re-render the invoices route
() => reset()

12
dashboard/15-final/app/lib/actions.ts
View File

@@ -13,7 +13,9 @@ const FormSchema = z.object({
amount: z.coerce
.number()
.gt(0, { message: 'Please enter an amount greater than $0.' }),
status: z.enum(['pending', 'paid']),
status: z.enum(['pending', 'paid'], {
invalid_type_error: 'Please select an invoice status.',
}),
date: z.string(),
});
@@ -61,7 +63,7 @@ export async function createInvoice(prevState: State, formData: FormData) {
} catch (error) {
// If a database error occurs, return a more specific error.
return {
message: 'Database error: Failed to create invoice.',
message: 'Database Error: Failed to Create Invoice.',
};
}
@@ -95,7 +97,7 @@ export async function updateInvoice(prevState: State, formData: FormData) {
WHERE id = ${id}
`;
} catch (error) {
return { message: 'Database error: Failed to update invoice.' };
return { message: 'Database Error: Failed to Update Invoice.' };
}
revalidatePath('/dashboard/invoices');
@@ -103,6 +105,8 @@ export async function updateInvoice(prevState: State, formData: FormData) {
}
export async function deleteInvoice(formData: FormData) {
throw new Error('Failed to Delete Invoice');
const { id } = DeleteInvoice.parse({
id: formData.get('id'),
});
@@ -112,6 +116,6 @@ export async function deleteInvoice(formData: FormData) {
revalidatePath('/dashboard/invoices');
return { message: 'Deleted Invoice' };
} catch (error) {
return { message: 'Database error: Failed to delete invoice.' };
return { message: 'Database Error: Failed to Delete Invoice.' };
}
}