Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up

Ready to get started?

Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.

Join for $8/mo Sign in
robot mascot smiling
Building with AdonisJS & Inertia

Switching Between Organizations

@tomgobich
Published by
@tomgobich
In This Lesson

We'll add the ability for our users to change which of their organizations is their active organization via our organization selector.

Chapters

00:00 - Handling Our Change Organization Click Event
01:26 - Updating The User's Active Organization
02:37 - Testing Our Organization Change Flow

Join the Discussion 4 comments

Share your thoughts!
Create a free account to join in on the discussion
  1. @tigerwolf974
    @tigerwolf974 Adocasts Plus

    Hello,

    I'm resuming the course, and I already have a question—sorry about that!

    For context, I’m using React rather than the Vue.js framework. I don't really know Vue.js, but I noticed that you’re using a watchEffect to keep track of the active organization value.

    At first, I did something similar in React with a useState and a useEffect. However, it feels a bit redundant to me. Why not use the organization value that we receive directly through props to keep the UI updated?

    It would look like this:

    <DropdownMenuRadioGroup
  value={organization.id.toString()} // formerly organizationIdSelected
  onValueChange={onOrganizationChange}
/>
    
  
    
    
    
      Copied!
    1
    1. Responding to tigerwolf974
      @tomgobich
      @tomgobich Adocasts Plus

      Hi tigerwolf974!

      Vue doesn't like direct mutation of prop values, which is why we're setting the organizationId into it's own ref and syncing it with the organization id from our props.

      However, you're right, it is still redundant and could've been done a little more cleanly using the newer toRef Vue method. The end result in data flow would've been similar though.

      Alternatively, we could've not used two-way data binding on the DropdownMenuRadioGroup, however, then our UI wouldn't have immediately updated but rather only updated after we got the response back from the organization switch. Not a huge deal, since the dropdown is auto-closed after selection, but still nice to be able to see the selection bubble change as the dropdown is closing as confirmation that the switch is occurring.

      1
      1. Responding to tomgobich
        @tigerwolf974
        @tigerwolf974 Adocasts Plus

        Thank you for your response.

        1
        1. Responding to tigerwolf974
          @tomgobich
          @tomgobich Adocasts Plus

          Anytime!!

          0