Theo's Typesafe Cult•3y ago

Please help with complex form query state management mess

type EditChapterInput = {
  content: string,
  id: number,
  title?: string
};

const EditChapter = () => {
  const { control, handleSubmit, setValue } = useForm<EditChapterInput>();
  const router = useRouter();
  const { chapterId, storyid } = router.query;
  const session = trpc.useQuery(['auth.getSession']);
  const { data: story } = trpc.useQuery(['story.getByStoryId', { id: Number(storyid) }]);
  const { data: chapter } = trpc.useQuery(['chapter.getById', { id: Number(chapterId) }]);
  const editChapter = trpc.useMutation(['chapter.update']);

  setValue('title', (chapter?.title ? chapter.title : ''));
  setValue('content', (chapter?.content ? chapter.content : ''));

  const onSubmit: SubmitHandler<EditChapterInput> = data => {

    if (session.data && story && chapter) {
      const newChapterData: EditChapterInput = {
        content: data.content,
        id: chapter?.id,
        title: data.title
      };

      editChapter.mutate(newChapterData);
    }
  };

type EditChapterInput = {
  content: string,
  id: number,
  title?: string
};

const EditChapter = () => {
  const { control, handleSubmit, setValue } = useForm<EditChapterInput>();
  const router = useRouter();
  const { chapterId, storyid } = router.query;
  const session = trpc.useQuery(['auth.getSession']);
  const { data: story } = trpc.useQuery(['story.getByStoryId', { id: Number(storyid) }]);
  const { data: chapter } = trpc.useQuery(['chapter.getById', { id: Number(chapterId) }]);
  const editChapter = trpc.useMutation(['chapter.update']);

  setValue('title', (chapter?.title ? chapter.title : ''));
  setValue('content', (chapter?.content ? chapter.content : ''));

  const onSubmit: SubmitHandler<EditChapterInput> = data => {

    if (session.data && story && chapter) {
      const newChapterData: EditChapterInput = {
        content: data.content,
        id: chapter?.id,
        title: data.title
      };

      editChapter.mutate(newChapterData);
    }
  };

Ok this will be a bit of a mess. The above is the logic code of a component I'm writing to edit a given chapter of a story. In the sidebar there's a list of chapters of the story, when a user clicks a chapter I want the current form state to update with the contents of the clicked chapter. I also want it so that when a user save changes to a chapter, the form state reflects that. Currently when the users saves the value reverts to the previous value because of the setValue() calls I have. But without those calls, the form content doesn't update when a user clicks on a different chapter. I don't even know how to ask what I'm doing wrong because I'm kind of brain-fried with this right now

5 Replies

Donny DOP•3y ago

taking a bit of a break now. but I'll try to get a sandbox up later since it's kinda complicated to show what exactly is going wrong

maxtreme•3y ago

You might want to use useFormContext with FormProvider and bring state upwards. Also if I understand correctly You're trying to set title and content from chapter that you load through query but those calls are neither in useEffect (with data in dependency array) or in onSuccess callback you may set in query's settings. Right now title and content will be set on every rerender

Donny DOP•3y ago

You're trying to set title and content from chapter that you load through query

yes! hmm so I should try putting the setValue() in onSuccess in the chapter query?

maxtreme•3y ago

That's one way to do it (and best in my opinion although I don't know how rest of this feature you're making looks like)

Donny DOP•3y ago

wow. works a dream. thanks!

Gaming

Programming

Please help with complex form query state management mess