79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
import type {
|
|
EditPostById,
|
|
UpdatePostInput,
|
|
UpdatePostMutationVariables,
|
|
} from 'types/graphql'
|
|
|
|
import { navigate, routes } from '@redwoodjs/router'
|
|
import type {
|
|
CellSuccessProps,
|
|
CellFailureProps,
|
|
TypedDocumentNode,
|
|
} from '@redwoodjs/web'
|
|
import { useMutation } from '@redwoodjs/web'
|
|
import { toast } from '@redwoodjs/web/toast'
|
|
|
|
import PostForm from 'src/components/Post/PostForm'
|
|
|
|
export const QUERY: TypedDocumentNode<EditPostById> = gql`
|
|
query EditPostById($id: Int!) {
|
|
post: post(id: $id) {
|
|
id
|
|
title
|
|
body
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
}
|
|
`
|
|
|
|
const UPDATE_POST_MUTATION: TypedDocumentNode<
|
|
EditPostById,
|
|
UpdatePostMutationVariables
|
|
> = gql`
|
|
mutation UpdatePostMutation($id: Int!, $input: UpdatePostInput!) {
|
|
updatePost(id: $id, input: $input) {
|
|
id
|
|
title
|
|
body
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
}
|
|
`
|
|
|
|
export const Loading = () => <div>Loading...</div>
|
|
|
|
export const Failure = ({ error }: CellFailureProps) => (
|
|
<div className="rw-cell-error">{error?.message}</div>
|
|
)
|
|
|
|
export const Success = ({ post }: CellSuccessProps<EditPostById>) => {
|
|
const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
|
|
onCompleted: () => {
|
|
toast.success('Post updated')
|
|
navigate(routes.posts())
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message)
|
|
},
|
|
})
|
|
|
|
const onSave = (input: UpdatePostInput, id: EditPostById['post']['id']) => {
|
|
updatePost({ variables: { id, input } })
|
|
}
|
|
|
|
return (
|
|
<div className="rw-segment">
|
|
<header className="rw-segment-header">
|
|
<h2 className="rw-heading rw-heading-secondary">
|
|
Edit Post {post?.id}
|
|
</h2>
|
|
</header>
|
|
<div className="rw-segment-main">
|
|
<PostForm post={post} onSave={onSave} error={error} loading={loading} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|