fix(home): resolve nearby filter not refreshing feed view

- Fix FeedFilters component missing activeDid context for settings updates
- Update reloadFeedOnChange to retrieve actual settings without defaults
- Add comprehensive logging throughout feed refresh process for debugging
- Ensure filter state changes immediately trigger feed refresh without page reload

The issue was caused by FeedFilters component calling $updateSettings() without
the activeDid parameter, causing settings to be saved to wrong location. Now
properly passes activeDid from HomeView and uses $accountSettings() for
accurate user-specific settings retrieval.

Closes filter refresh issue where turning ON nearby filter required page reload
This commit is contained in:
Matthew Raymer
2025-08-12 06:56:18 +00:00
parent 85f0283278
commit 9196081f34
4 changed files with 180 additions and 28 deletions

View File

@@ -187,9 +187,10 @@ export default class DataExportSection extends Vue {
const exContact: Contact = R.omit(["contactMethods"], contact);
// now add contactMethods as a true array of ContactMethod objects
exContact.contactMethods = contact.contactMethods
? (typeof contact.contactMethods === 'string' && contact.contactMethods.trim() !== ''
? JSON.parse(contact.contactMethods)
: [])
? typeof contact.contactMethods === "string" &&
contact.contactMethods.trim() !== ""
? JSON.parse(contact.contactMethods)
: []
: [];
return exContact;
});

View File

@@ -119,11 +119,13 @@ export default class FeedFilters extends Vue {
isNearby = false;
settingChanged = false;
visible = false;
activeDid = "";
async open(onCloseIfChanged: () => void) {
async open(onCloseIfChanged: () => void, activeDid: string) {
this.onCloseIfChanged = onCloseIfChanged;
this.activeDid = activeDid;
const settings = await this.$settings();
const settings = await this.$accountSettings(activeDid);
this.hasVisibleDid = !!settings.filterFeedByVisible;
this.isNearby = !!settings.filterFeedByNearby;
if (settings.searchBoxes && settings.searchBoxes.length > 0) {
@@ -137,17 +139,45 @@ export default class FeedFilters extends Vue {
async toggleHasVisibleDid() {
this.settingChanged = true;
this.hasVisibleDid = !this.hasVisibleDid;
await this.$updateSettings({
filterFeedByVisible: this.hasVisibleDid,
});
if (this.activeDid) {
await this.$updateSettings(
{
filterFeedByVisible: this.hasVisibleDid,
},
this.activeDid,
);
} else {
await this.$updateSettings({
filterFeedByVisible: this.hasVisibleDid,
});
}
}
async toggleNearby() {
this.settingChanged = true;
this.isNearby = !this.isNearby;
await this.$updateSettings({
filterFeedByNearby: this.isNearby,
console.log("[FeedFilters] 🔄 Toggling nearby filter:", {
newValue: this.isNearby,
settingChanged: this.settingChanged,
activeDid: this.activeDid,
});
if (this.activeDid) {
await this.$updateSettings(
{
filterFeedByNearby: this.isNearby,
},
this.activeDid,
);
} else {
await this.$updateSettings({
filterFeedByNearby: this.isNearby,
});
}
console.log("[FeedFilters] ✅ Nearby filter updated in settings");
}
async clearAll() {
@@ -155,10 +185,20 @@ export default class FeedFilters extends Vue {
this.settingChanged = true;
}
await this.$updateSettings({
filterFeedByNearby: false,
filterFeedByVisible: false,
});
if (this.activeDid) {
await this.$updateSettings(
{
filterFeedByNearby: false,
filterFeedByVisible: false,
},
this.activeDid,
);
} else {
await this.$updateSettings({
filterFeedByNearby: false,
filterFeedByVisible: false,
});
}
this.hasVisibleDid = false;
this.isNearby = false;
@@ -169,23 +209,40 @@ export default class FeedFilters extends Vue {
this.settingChanged = true;
}
await this.$updateSettings({
filterFeedByNearby: true,
filterFeedByVisible: true,
});
if (this.activeDid) {
await this.$updateSettings(
{
filterFeedByNearby: true,
filterFeedByVisible: true,
},
this.activeDid,
);
} else {
await this.$updateSettings({
filterFeedByNearby: true,
filterFeedByVisible: true,
});
}
this.hasVisibleDid = true;
this.isNearby = true;
}
close() {
console.log("[FeedFilters] 🚪 Closing dialog:", {
settingChanged: this.settingChanged,
hasCallback: !!this.onCloseIfChanged,
});
if (this.settingChanged) {
console.log("[FeedFilters] 🔄 Settings changed, calling callback");
this.onCloseIfChanged();
}
this.visible = false;
}
done() {
console.log("[FeedFilters] ✅ Done button clicked");
this.close();
}
}

View File

@@ -18,7 +18,7 @@ Raymer */
<div class="flex mb-4">
<AmountInput
:value="parseFloat(amountInput) || 0"
:onUpdateValue="handleAmountUpdate"
:on-update-value="handleAmountUpdate"
data-testId="inputOfferAmount"
/>
@@ -152,8 +152,6 @@ export default class OfferDialog extends Vue {
};
}
// =================================================
// COMPONENT METHODS
// =================================================
@@ -199,8 +197,6 @@ export default class OfferDialog extends Vue {
this.visible = false;
}
/**
* Handle amount updates from AmountInput component
* @param value - New amount value