101 lines
2.4 KiB
TypeScript
101 lines
2.4 KiB
TypeScript
import type {
|
|
EditProjectById,
|
|
UpdateProjectInput,
|
|
UpdateProjectMutationVariables,
|
|
} 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 CellFailure from 'src/components/Cell/CellFailure/CellFailure'
|
|
import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
|
|
import ProjectForm from 'src/components/Project/ProjectForm'
|
|
|
|
export const QUERY: TypedDocumentNode<EditProjectById> = gql`
|
|
query EditProjectById($id: Int!) {
|
|
project: project(id: $id) {
|
|
id
|
|
title
|
|
description
|
|
date
|
|
links
|
|
images
|
|
tags {
|
|
id
|
|
tag
|
|
color
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
const UPDATE_PROJECT_MUTATION: TypedDocumentNode<
|
|
EditProjectById,
|
|
UpdateProjectMutationVariables
|
|
> = gql`
|
|
mutation UpdateProjectMutation($id: Int!, $input: UpdateProjectInput!) {
|
|
updateProject(id: $id, input: $input) {
|
|
id
|
|
title
|
|
description
|
|
date
|
|
links
|
|
}
|
|
}
|
|
`
|
|
|
|
export const Loading = () => <CellLoading />
|
|
export const Failure = ({ error }: CellFailureProps) => (
|
|
<CellFailure error={error} />
|
|
)
|
|
|
|
export const Success = ({ project }: CellSuccessProps<EditProjectById>) => {
|
|
const [updateProject, { loading, error }] = useMutation(
|
|
UPDATE_PROJECT_MUTATION,
|
|
{
|
|
onCompleted: () => {
|
|
toast.success('Project updated')
|
|
navigate(routes.adminProjects())
|
|
},
|
|
onError: (error) => toast.error(error.message),
|
|
}
|
|
)
|
|
|
|
const onSave = (
|
|
input: UpdateProjectInput,
|
|
id: EditProjectById['project']['id']
|
|
) => updateProject({ variables: { id, input } })
|
|
|
|
return (
|
|
<div className="flex w-full justify-center">
|
|
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
|
|
<table className="table w-80">
|
|
<thead className="bg-base-200 font-syne">
|
|
<tr>
|
|
<th className="w-0">Edit Project {project.id}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>
|
|
<ProjectForm
|
|
project={project}
|
|
onSave={onSave}
|
|
error={error}
|
|
loading={loading}
|
|
/>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|