Skip to content

Instantly share code, notes, and snippets.

@ChangoMan
Last active September 2, 2023 13:27
Show Gist options
  • Save ChangoMan/a5413e6446c75bd8cc9829c50c2a8c0c to your computer and use it in GitHub Desktop.
Save ChangoMan/a5413e6446c75bd8cc9829c50c2a8c0c to your computer and use it in GitHub Desktop.
Next.js Client Component consuming a Server Action
'use client'
import { Button } from '@/components/ui/button'
import { useCallback, useState } from 'react'
import { updateAccount } from '../actions'
type Profile = {
avatarUrl: string
email?: string
fullName: string
userId: string
username: string
website: string
}
export default function EditAccount({
avatarUrl,
email,
fullName,
userId,
username,
website,
}: Profile) {
// ... //
const onSubmit = useCallback(
async (formData: FormData) => {
setLoading(true)
const res = await updateAccount(formData, userId)
if (res && res.message === 'Success') {
// Success toast popup
}
},
[userId],
)
// ... //
return (
<form action={onSubmit}>
</form>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment