After performing an action [delete|archive], our toggle switches [archived|private|forked] are reset

[technoplato]

Describe the bug After performing an action [delete|archive], our toggle switches [archived|private|forked] are reset

To Reproduce Steps to reproduce the behavior:

1. Go through setup
2. Toggle 'forked' to not show
3. Delete a repo
4. Observe that 'forked' toggle is reset

Expected behavior Whatever toggles I checked remain checked after an action is performed.

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome

[technoplato]

Looks like the issue comes from setting all the toggle values to true regardless of their previous state here: https://github.com/moollaza/repo-remover/blob/7b89739ff4aaac2814c9498ffabb1ffe25c73f9c/src/components/ReposTable.vue#L292-L294

I tried to dig in as best as I could, but as a React guy, I'm not sure how Vue 'maintains' previous state.

Thanks for an awesome tool! Hope this issue helps. I think the same thing occurs with the selection of number of rows to display.

[moollaza]

Thanks @technoplato, I think if those settings are passed down as props from the parent, we can ensure they hold when the component is re-created :+1:

[technoplato]

If you give me a tiny bit of guidance, I think I could figure this one out. I wanted to the other day, but tried to stay on task with what I was doing. If you'd rather just take care of it, cool cool cool.

And thanks so much for an awesome tool! Saved me probably at least a couple hours. Do you have a coffee donate link or anything?

[moollaza]

If you give me a tiny bit of guidance, I think I could figure this one out.

Oh awesome, thanks!

I think what we want to do is pass a prop, e.g. tableToggles from Details.vue to the <ReposTable> (Line 53):

<ReposTable
    v-if="repos.length > 0"
    :repos="repos"
    v-bind= "reposTableToggles" // passed the keys of this obj as individual props
/>

In Details.vue we'd create this variable to pass along as a prop:

data() {
    return {
      repos: [],
      reposTableToggles: {
        showPrivateRepos: { value: "isPrivate", isEnabled: true },
        showArchivedRepos: { value: "isArchived", isEnabled: true },
        showForkedRepos: { value: "isFork", isEnabled: true },
    };
  },

We'd then update the ReposTable component to accept these new props:

props: {
  repos: {
    type: Array,
    default: function() {
      return [];
    }
  },
  showPrivateRepos: {
    type: Object,
    default: { value: "isPrivate", isEnabled: true },
  }, 
  showArchivedRepos: { ... },
  showForkedRepos: { ... }
},

This gets the data flowing down from parent -> child, but we'll need to use an event to update the parent when the toggle is actually clicked by the child.

The <b-switch> will automatically update the value of this local copy when it's toggled, so I think you'll need to setup functions to watch each of those props, and when they update, emit an event containing the updated value. This might help: https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

However, we don't really need to keep the parent's values synced with the child's, we really only need to send these back to the parent before we destroy the ReposTable instance, so perhaps when the ReposTable is about to modify repos, it should fire and event to let the parent get the current state of the toggles?

I'm relatively new to Vue as well so this approach probably isn't 100% accurate. If you need help let me know, and thanks for offering to fix this.

Do you have a coffee donate link or anything?

Wow, I really appreciate the offer, but I really don't need it. What about sending a coffee to a charity instead? :)

[technoplato]

Awesome awesome awesome. I’m going to need to take some time to grok this. I know how I’d do it in React, but the Vue paradigm is just different enough that it’ll be a tad bit difficult for me.

Next time I have the opportunity I’ll grab a strangers coffee ☕️:thumbup: