quickest-silver

Using state, properties, or router to track an "actively selected?"

Hey everyone, i have a very quick question about what the best way to go about this is. I have quite a nested form where one can edit a module, as well as its lessons, and its exercises too. I've been using tanstack router with search params to determine selected state and soforth, but i run into a small issue when deleting items where before deleting i'd have to first navigate to the next/previous item before deleting (otherwise the param is broken). I attached a small example of how the form looks, i hope it makes sense. I was thinking of using state and soforth but from what i understood on other posts its a bit tricky and requires a bit of prop drilling (if it will be like a 5 or 6 components deep). Currently, i'm doing something like this

  const removeLesson = (thisId: string, index: number) => {
    const lessons = fieldArray.state.value;
    const isCurrent = currentLessonId === thisId;

    const nextId = lessons[index + 1]?.id ?? lessons[index - 1]?.id;

    if (isCurrent) {
      router.navigate(
        nextId
          ? ludoNavigation.build.toBuilderModule(courseId, nextId) //changes the search param of moduleId
          : ludoNavigation.build.toSelectCourse() // Should not happen, so as fallback navigate back
      );
    }

    fieldArray.removeValue(index);
  };

  const removeLesson = (thisId: string, index: number) => {
    const lessons = fieldArray.state.value;
    const isCurrent = currentLessonId === thisId;

    const nextId = lessons[index + 1]?.id ?? lessons[index - 1]?.id;

    if (isCurrent) {
      router.navigate(
        nextId
          ? ludoNavigation.build.toBuilderModule(courseId, nextId) //changes the search param of moduleId
          : ludoNavigation.build.toSelectCourse() // Should not happen, so as fallback navigate back
      );
    }

    fieldArray.removeValue(index);
  };

Should i maybe put in the form value itself an isSelected boolean? Thank you in advance for any insight guys, sorry its a bit silly q

12 Replies

helpful-purple•2w ago

What is selected state in this case?

quickest-silverOP•2w ago

A module, lesson, or exercise (the ones with the light purple higlight are the currently selected in the screenshot) so in this case the "Hello World!" lesson is selected (and since its part of Variables & Data types module that module is also selected) if i were to remove the hello world lesson while having it selected, ideally it would move to the Lesson 1 lesson

helpful-purple•2w ago

I see. How does the selection interlock with the other actions? You mentioned remove, and add is probably straightforward (doing nothing). What happens if you click on Edit?

quickest-silverOP•2w ago

On edit theres a modal to rearrange, edit title, or delete. The way the selection is important is mostly because for the exercises it is too much info to show all of them so i show them "per lesson"

quickest-silverOP•2w ago

helpful-purple•2w ago

It's been a while since I used search params in TanStack Router. Do they unmount / remount the components on the page, or do they stay on the route without rerenders?

quickest-silverOP•2w ago

If i'm not wrong the components don't unmount but they do re-render when they useSearch()

helpful-purple•2w ago

if it unmounts, you'd lose all temporary form state, so it should be apparent whether or not it happens so far, it sounds like the selected state should not be part of the form state. The UI implementation of the form should read from the state to determine its highlighting etc.

quickest-silverOP•2w ago

Then no it doesnt unmount no So a useState in that case? For each layer too? Module, lesson, exercise, soforth?

helpful-purple•2w ago

Depends on what your end result should be. I assume selecting a module is simply an array of its contents for you. You can invert that logic. You only keep state of selected exercises, and you color modules / lessons based on if 1+ exercises within are selected you can memoize the result if you have worries about performance

quickest-silverOP•2w ago

Ohhh oke i see, sorry for all the questions but to be sure i understand what you mean with the invert the logic. Is it that a lesson derives if its selected from whether one of its exercises is selected? So if i click on a lesson, it will just setSelected to the clickedLesson.exercises[0], and then the lesson is also "selected"? and clicking a module would setSelected to clickedModule.lessons[0].exercises[0] ?

helpful-purple•2w ago

Inverted logic means: Hierarchy: Modules -> 1+ Lessons -> 1+ exercises State: Exercise[] On select change: Add/Remove Exercise On select module / lesson: Add all exercises it has On Render, highlight if Exercises.some(e => belongsToMe(moduleId))

Gaming

Programming

Using state, properties, or router to track an "actively selected?"

Did you find this page helpful?