mirrors/spliit
1
0
Fork 0
mirror of https://github.com/spliit-app/spliit.git synced 2026-02-26 09:26:12 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Better loading behavior

Browse Source
This commit is contained in:
Sebastien Castiel
2023-12-06 12:39:54 -05:00
parent 6c4ced0f79
commit c72311d01a
13 changed files with 144 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/groups/[groupId]/edit/page.tsx
View File

@@ -1,9 +1,6 @@
import { GroupForm } from '@/components/group-form'
import { Button } from '@/components/ui/button'
import { getGroup, updateGroup } from '@/lib/api'
import { groupFormSchema } from '@/lib/schemas'
import { ChevronLeft } from 'lucide-react'
import Link from 'next/link'
import { notFound, redirect } from 'next/navigation'
export default async function EditGroupPage({
@@ -21,16 +18,5 @@ export default async function EditGroupPage({
redirect(`/groups/${group.id}`)
}
return (
<main>
<div className="mb-4">
<Button variant="ghost" asChild>
<Link href={`/groups/${groupId}`}>
<ChevronLeft className="w-4 h-4 mr-2" /> Back to group
</Link>
</Button>
</div>
<GroupForm group={group} onSubmit={updateGroupAction} />
</main>
)
return <GroupForm group={group} onSubmit={updateGroupAction} />
}

3
src/app/groups/[groupId]/expenses/[expenseId]/edit/loading.tsx
View File

@@ -1,3 +0,0 @@
export default function Loading() {
return <p>Loading…</p>
}

22
src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
View File

@@ -1,9 +1,6 @@
import { ExpenseForm } from '@/components/expense-form'
import { Button } from '@/components/ui/button'
import { getExpense, getGroup, updateExpense } from '@/lib/api'
import { expenseFormSchema } from '@/lib/schemas'
import { ChevronLeft } from 'lucide-react'
import Link from 'next/link'
import { notFound, redirect } from 'next/navigation'
export default async function EditExpensePage({
@@ -24,19 +21,10 @@ export default async function EditExpensePage({
}
return (
<main>
<div className="mb-4">
<Button variant="ghost" asChild>
<Link href={`/groups/${groupId}`}>
<ChevronLeft className="w-4 h-4 mr-2" /> Back to group
</Link>
</Button>
</div>
<ExpenseForm
group={group}
expense={expense}
onSubmit={updateExpenseAction}
/>
</main>
<ExpenseForm
group={group}
expense={expense}
onSubmit={updateExpenseAction}
/>
)
}

13
src/app/groups/[groupId]/layout.tsx
View File

@@ -15,13 +15,20 @@ export default async function GroupLayout({
if (!group) notFound()
return (
<main>
<>
<div className="mb-4 flex justify-between">
<Button variant="ghost" asChild>
<Link href="/groups">
<ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
</Link>
</Button>
</div>
<div className="flex justify-between items-baseline mb-4">
<h1 className="font-bold text-2xl">
<Link href={`/groups/${groupId}`}>{group.name}</Link>
</h1>
<Button variant="secondary" asChild>
<Link href={`/groups/${groupId}/edit`}>
<Edit className="w-4 h-4 mr-2" /> Edit group settings
@@ -29,9 +36,7 @@ export default async function GroupLayout({
</Button>
</div>
<h1 className="font-bold mb-4">{group.name}</h1>
{children}
</main>
</>
)
}

3
src/app/groups/[groupId]/loading.tsx
View File

@@ -1,3 +0,0 @@
export default function Loading() {
return <p>Loading…</p>
}

5
src/app/groups/layout.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { PropsWithChildren } from 'react'
export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
return <main>{children}</main>
}

3
src/app/groups/loading.tsx
View File

@@ -1,3 +0,0 @@
export default function Loading() {
return <p>Loading…</p>
}

2
src/app/layout.tsx
View File

@@ -1,3 +1,4 @@
import { ProgressBar } from '@/components/progress-bar'
import type { Metadata } from 'next'
import './globals.css'
@@ -14,6 +15,7 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<ProgressBar />
<div className="max-w-screen-md mx-auto p-4">{children}</div>
</body>
</html>

3
src/app/loading.tsx
View File

@@ -1,3 +0,0 @@
export default function Loading() {
return <p>Loading…</p>
}

13
src/components/progress-bar.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import { Next13ProgressBar } from 'next13-progressbar'
export function ProgressBar() {
return (
<Next13ProgressBar
height="2px"
color="#64748b"
options={{ showSpinner: true }}
showOnShallow
/>
)
}