[GH-ISSUE #39] After performing an action [delete|archive], our toggle switches [archived|private|forked] are reset #3

Open
opened 2026-02-26 04:36:28 +03:00 by kerem · 5 comments
Owner

Originally created by @technoplato on GitHub (Sep 30, 2019).
Original GitHub issue: https://github.com/moollaza/repo-remover/issues/39

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
Originally created by @technoplato on GitHub (Sep 30, 2019). Original GitHub issue: https://github.com/moollaza/repo-remover/issues/39 **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
Author
Owner

@technoplato commented on GitHub (Sep 30, 2019):

Looks like the issue comes from setting all the toggle values to true regardless of their previous state here: github.com/moollaza/repo-remover@7b89739ff4/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.

<!-- gh-comment-id:536617491 --> @technoplato commented on GitHub (Sep 30, 2019): 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.
Author
Owner

@moollaza commented on GitHub (Oct 3, 2019):

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 👍

<!-- gh-comment-id:537982793 --> @moollaza commented on GitHub (Oct 3, 2019): 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:
Author
Owner

@technoplato commented on GitHub (Oct 3, 2019):

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?

<!-- gh-comment-id:537984668 --> @technoplato commented on GitHub (Oct 3, 2019): 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?
Author
Owner

@moollaza commented on GitHub (Oct 3, 2019):

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? :)

<!-- gh-comment-id:538150669 --> @moollaza commented on GitHub (Oct 3, 2019): > 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? :)
Author
Owner

@technoplato commented on GitHub (Oct 3, 2019):

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:

<!-- gh-comment-id:538151624 --> @technoplato commented on GitHub (Oct 3, 2019): 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:
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/repo-remover-moollaza#3
No description provided.