portfolio/web/src/components/Social/EditSocialCell/EditSocialCell.tsx

import type {
  EditSocialById,
  UpdateSocialInput,
  UpdateSocialMutationVariables,
} 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 CellEmpty from 'src/components/Cell/CellEmpty/CellEmpty'
import CellFailure from 'src/components/Cell/CellFailure/CellFailure'
import CellLoading from 'src/components/Cell/CellLoading/CellLoading'
import SocialForm from 'src/components/Social/SocialForm'

export const QUERY: TypedDocumentNode<EditSocialById> = gql`
  query EditSocialById($id: Int!) {
    social: social(id: $id) {
      id
      name
      type
      username
    }
  }
`

const UPDATE_SOCIAL_MUTATION: TypedDocumentNode<
  EditSocialById,
  UpdateSocialMutationVariables
> = gql`
  mutation UpdateSocialMutation($id: Int!, $input: UpdateSocialInput!) {
    updateSocial(id: $id, input: $input) {
      id
      name
      type
      username
    }
  }
`

export const Loading = () => <CellLoading />
export const Empty = () => <CellEmpty />
export const Failure = ({ error }: CellFailureProps) => (
  <CellFailure error={error} />
)

export const Success = ({ social }: CellSuccessProps<EditSocialById>) => {
  const [updateSocial, { loading, error }] = useMutation(
    UPDATE_SOCIAL_MUTATION,
    {
      onCompleted: () => {
        toast.success('Social updated')
        navigate(routes.socials())
      },
      onError: (error) => {
        toast.error(error.message)
      },
    }
  )

  const onSave = (
    input: UpdateSocialInput,
    id: EditSocialById['social']['id']
  ) => {
    updateSocial({ variables: { id, input } })
  }

  return (
    <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
      <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
        <table className="table">
          <thead className="bg-base-200 font-syne">
            <tr>
              <th className="w-0">Edit Social {social.id}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>
                <SocialForm
                  social={social}
                  onSave={onSave}
                  error={error}
                  loading={loading}
                />
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  )
}