Skip to content

Commit 2861405

Browse files
taylorotwelltaylorotwell
committed
fix conflicts
2 parents 8ef5018 + 87110a3 commit 2861405

File tree

7 files changed

+659
-660
lines changed

7 files changed

+659
-660
lines changed

‎package-lock.json

Lines changed: 564 additions & 548 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"dependencies": {
2626
"@headlessui/react": "^2.2.0",
27-
"@inertiajs/react": "^2.0.0",
27+
"@inertiajs/react": "^2.1.0",
2828
"@radix-ui/react-avatar": "^1.1.3",
2929
"@radix-ui/react-checkbox": "^1.1.4",
3030
"@radix-ui/react-collapsible": "^1.1.3",

‎resources/js/app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { initializeTheme } from './hooks/use-appearance';
88
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
99

1010
createInertiaApp({
11-
title: (title) => title ? `${title} - ${appName}` : appName,
11+
title: (title) => (title ? `${title} - ${appName}` : appName),
1212
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
1313
setup({ el, App, props }) {
1414
const root = createRoot(el);

‎resources/js/components/delete-user.tsx

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,9 @@
1-
import { useForm } from '@inertiajs/react';
2-
import { FormEventHandler } from 'react';
3-
4-
import { Button } from '@/components/ui/button';
5-
61
import HeadingSmall from '@/components/heading-small';
7-
2+
import { Button } from '@/components/ui/button';
83
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
4+
import { Form } from '@inertiajs/react';
95

106
export default function DeleteUser() {
11-
const { delete: destroy, processing, reset, clearErrors } = useForm();
12-
13-
const deleteUser: FormEventHandler = (e) => {
14-
e.preventDefault();
15-
16-
destroy(route('profile.destroy'), {
17-
preserveScroll: true,
18-
onSuccess: () => closeModal(),
19-
onFinish: () => reset(),
20-
});
21-
};
22-
23-
const closeModal = () => {
24-
clearErrors();
25-
reset();
26-
};
27-
287
return (
298
<div className="space-y-6">
309
<HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
@@ -41,22 +20,34 @@ export default function DeleteUser() {
4120
<DialogContent>
4221
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
4322
<DialogDescription>
44-
Once your account is deleted, all of its resources and data will also be permanently deleted. Please confirm
45-
you would like to permanently delete your account.
23+
Once your account is deleted, all of its resources and data will also be permanently deleted. Please confirm you would
24+
like to permanently delete your account.
4625
</DialogDescription>
47-
<form method="POST" className="space-y-6" onSubmit={deleteUser}>
48-
<DialogFooter className="gap-2">
49-
<DialogClose asChild>
50-
<Button variant="secondary" onClick={closeModal}>
51-
Cancel
52-
</Button>
53-
</DialogClose>
54-
55-
<Button variant="destructive" disabled={processing} asChild>
56-
<button type="submit">Delete account</button>
57-
</Button>
58-
</DialogFooter>
59-
</form>
26+
<Form
27+
method="delete"
28+
action={route('profile.destroy')}
29+
options={{
30+
preserveScroll: true,
31+
}}
32+
resetOnSuccess
33+
className="space-y-6"
34+
>
35+
{({ resetAndClearErrors, processing, errors }) => (
36+
<>
37+
<DialogFooter className="gap-2">
38+
<DialogClose asChild>
39+
<Button variant="secondary" onClick={() => resetAndClearErrors()}>
40+
Cancel
41+
</Button>
42+
</DialogClose>
43+
44+
<Button variant="destructive" disabled={processing} asChild>
45+
<button type="submit">Delete account</button>
46+
</Button>
47+
</DialogFooter>
48+
</>
49+
)}
50+
</Form>
6051
</DialogContent>
6152
</Dialog>
6253
</div>

‎resources/js/pages/dashboard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function Dashboard() {
1414
return (
1515
<AppLayout breadcrumbs={breadcrumbs}>
1616
<Head title="Dashboard" />
17-
<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 overflow-x-auto">
17+
<div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-4">
1818
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
1919
<div className="relative aspect-video overflow-hidden rounded-xl border border-sidebar-border/70 dark:border-sidebar-border">
2020
<PlaceholderPattern className="absolute inset-0 size-full stroke-neutral-900/20 dark:stroke-neutral-100/20" />

‎resources/js/pages/settings/profile.tsx

Lines changed: 62 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import { type BreadcrumbItem, type SharedData } from '@/types';
2-
import { Transition } from '@headlessui/react';
3-
import { Head, useForm, usePage } from '@inertiajs/react';
4-
import { FormEventHandler } from 'react';
5-
61
import DeleteUser from '@/components/delete-user';
72
import HeadingSmall from '@/components/heading-small';
83
import InputError from '@/components/input-error';
@@ -11,6 +6,9 @@ import { Input } from '@/components/ui/input';
116
import { Label } from '@/components/ui/label';
127
import AppLayout from '@/layouts/app-layout';
138
import SettingsLayout from '@/layouts/settings/layout';
9+
import { type BreadcrumbItem, type SharedData } from '@/types';
10+
import { Transition } from '@headlessui/react';
11+
import { Form, Head, usePage } from '@inertiajs/react';
1412

1513
const breadcrumbs: BreadcrumbItem[] = [
1614
{
@@ -19,27 +17,9 @@ const breadcrumbs: BreadcrumbItem[] = [
1917
},
2018
];
2119

22-
type ProfileForm = {
23-
name: string;
24-
email: string;
25-
};
26-
2720
export default function Profile() {
2821
const { auth } = usePage<SharedData>().props;
2922

30-
const { data, setData, patch, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
31-
name: auth.user.name,
32-
email: auth.user.email,
33-
});
34-
35-
const submit: FormEventHandler = (e) => {
36-
e.preventDefault();
37-
38-
patch(route('profile.update'), {
39-
preserveScroll: true,
40-
});
41-
};
42-
4323
return (
4424
<AppLayout breadcrumbs={breadcrumbs}>
4525
<Head title="Profile settings" />
@@ -48,53 +28,65 @@ export default function Profile() {
4828
<div className="space-y-6">
4929
<HeadingSmall title="Profile information" description="Update your name and email address" />
5030

51-
<form onSubmit={submit} className="space-y-6">
52-
<div className="grid gap-2">
53-
<Label htmlFor="name">Name</Label>
54-
55-
<Input
56-
id="name"
57-
className="mt-1 block w-full"
58-
value={data.name}
59-
onChange={(e) => setData('name', e.target.value)}
60-
required
61-
autoComplete="name"
62-
placeholder="Full name"
63-
/>
64-
65-
<InputError className="mt-2" message={errors.name} />
66-
</div>
67-
68-
<div className="grid gap-2">
69-
<Label htmlFor="email">Email address</Label>
70-
71-
<Input
72-
id="email"
73-
type="email"
74-
className="mt-1 block w-full"
75-
value={data.email}
76-
required
77-
autoComplete="username"
78-
disabled
79-
/>
80-
81-
<InputError className="mt-2" message={errors.email} />
82-
</div>
83-
84-
<div className="flex items-center gap-4">
85-
<Button disabled={processing}>Save</Button>
86-
87-
<Transition
88-
show={recentlySuccessful}
89-
enter="transition ease-in-out"
90-
enterFrom="opacity-0"
91-
leave="transition ease-in-out"
92-
leaveTo="opacity-0"
93-
>
94-
<p className="text-sm text-neutral-600">Saved</p>
95-
</Transition>
96-
</div>
97-
</form>
31+
<Form
32+
method="patch"
33+
action={route('profile.update')}
34+
options={{
35+
preserveScroll: true,
36+
}}
37+
className="space-y-6"
38+
>
39+
{({ processing, recentlySuccessful, errors }) => (
40+
<>
41+
<div className="grid gap-2">
42+
<Label htmlFor="name">Name</Label>
43+
44+
<Input
45+
id="name"
46+
className="mt-1 block w-full"
47+
defaultValue={auth.user.name}
48+
name="name"
49+
required
50+
autoComplete="name"
51+
placeholder="Full name"
52+
/>
53+
54+
<InputError className="mt-2" message={errors.name} />
55+
</div>
56+
57+
<div className="grid gap-2">
58+
<Label htmlFor="email">Email address</Label>
59+
60+
<Input
61+
id="email"
62+
type="email"
63+
className="mt-1 block w-full"
64+
defaultValue={auth.user.email}
65+
name="email"
66+
required
67+
autoComplete="username"
68+
disabled
69+
/>
70+
71+
<InputError className="mt-2" message={errors.email} />
72+
</div>
73+
74+
<div className="flex items-center gap-4">
75+
<Button disabled={processing}>Save</Button>
76+
77+
<Transition
78+
show={recentlySuccessful}
79+
enter="transition ease-in-out"
80+
enterFrom="opacity-0"
81+
leave="transition ease-in-out"
82+
leaveTo="opacity-0"
83+
>
84+
<p className="text-sm text-neutral-600">Saved</p>
85+
</Transition>
86+
</div>
87+
</>
88+
)}
89+
</Form>
9890
</div>
9991

10092
<DeleteUser />

‎resources/js/ssr.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ createServer((page) =>
1010
createInertiaApp({
1111
page,
1212
render: ReactDOMServer.renderToString,
13-
title: (title) => title ? `${title} - ${appName}` : appName,
13+
title: (title) => (title ? `${title} - ${appName}` : appName),
1414
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
1515
setup: ({ App, props }) => {
1616
/* eslint-disable */

0 commit comments

Comments
 (0)