Skip to content

Commit

Permalink
fix(frontend): ensure that a filter operation updates the cached page…
Browse files Browse the repository at this point in the history
…s results
  • Loading branch information
mercihabam committed Feb 13, 2025
1 parent 768c78a commit cd509bb
Show file tree
Hide file tree
Showing 11 changed files with 75 additions and 38 deletions.
11 changes: 11 additions & 0 deletions modules/core/js_modules/Hm_MessagesStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,17 @@ class Hm_MessagesStore {
}

}

updateRow(uid, html) {
const rows = Object.entries(this.rows);
const row = this.getRowByUid(uid)?.value;
if (row) {
const objectRows = Object.fromEntries(rows);
objectRows[row[0]]['0'] = html;
this.rows = objectRows;
this.#saveToLocalStorage();
}
}

#fetch(hideLoadingState = false) {
return new Promise((resolve, reject) => {
Expand Down
8 changes: 4 additions & 4 deletions modules/core/js_modules/actions/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ async function nextPage() {

const nextPage = parseInt(currentPage) + 1;

const store = new Hm_MessagesStore(getListPathParam(), currentPage, getParam('keyword'));
const store = new Hm_MessagesStore(getListPathParam(), currentPage, `${getParam('keyword')}_${getParam('filter')}`);
store.load(false, false, true);

await changePage(nextPage, this, store.offsets);
Expand All @@ -33,7 +33,7 @@ async function previousPage() {

let offsets = '';
if (previousPage > 1) {
const store = new Hm_MessagesStore(getListPathParam(), previousPage - 1, getParam('keyword'));
const store = new Hm_MessagesStore(getListPathParam(), previousPage - 1, `${getParam('keyword')}_${getParam('filter')}`);
store.load(false, false, true);
offsets = store.offsets;
}
Expand Down Expand Up @@ -61,11 +61,11 @@ async function changePage(toPage, button, offsets) {
history.pushState(history.state, "", url.toString());
window.location.next = url.search;

const messagesStore = new Hm_MessagesStore(getListPathParam(), toPage, getParam('keyword'));
const messagesStore = new Hm_MessagesStore(getListPathParam(), toPage, `${getParam('keyword')}_${getParam('filter')}`);
try {
await messagesStore.load();
Hm_Utils.tbody().attr('id', messagesStore.list);
display_imap_mailbox(messagesStore.rows, null, messagesStore.list);
display_imap_mailbox(messagesStore.rows, null, messagesStore.list, messagesStore);
$(".pagination .current").text(toPage);
} catch (error) {
Hm_Utils.add_sys_message("Failed to fetch content", "danger");
Expand Down
6 changes: 3 additions & 3 deletions modules/core/js_modules/actions/sortCombinedLists.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ async function sortCombinedLists(sortValue) {
const url = new URL(window.location.href);
url.searchParams.set('sort', sortValue);

history.pushState(null, null, url.toString());
history.pushState(history.state, null, url.toString());
location.next = url.search;
const messagesStore = new Hm_MessagesStore(getListPathParam(), getParam('page'), getParam('keyword'));
const messagesStore = new Hm_MessagesStore(getListPathParam(), getParam('page'), `${getParam('keyword')}_${getParam('filter')}`);
try {
await messagesStore.load(true);
Hm_Utils.tbody().attr('id', messagesStore.list);
display_imap_mailbox(messagesStore.rows, null, messagesStore.list);
display_imap_mailbox(messagesStore.rows, messagesStore.list, messagesStore);
} catch (error) {
Hm_Utils.add_sys_message('Failed to load messages', 'danger');
}
Expand Down
2 changes: 1 addition & 1 deletion modules/core/js_modules/route_handlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ function applyInfoPageHandlers() {
function applyMessaleListPageHandlers(routeParams) {
sortHandlerForMessageListAndSearchPage();
Hm_Message_List.set_row_events();
const messagesStore = new Hm_MessagesStore(routeParams.list_path, routeParams.list_page, routeParams.keyword);
const messagesStore = new Hm_MessagesStore(routeParams.list_path, routeParams.list_page, `${routeParams.keyword}_${routeParams.filter}`);
Hm_Utils.tbody().attr('id', messagesStore.list);

$('.core_msg_control').on("click", function(e) {
Expand Down
4 changes: 2 additions & 2 deletions modules/core/js_modules/utils/sortable.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ function handleMessagesDragAndDrop() {
{'name': 'imap_move_page', 'value': page},
{'name': 'imap_move_action', 'value': 'move'}],
async (res) =>{
const store = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), getParam('keyword'));
const store = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
await store.load(false, true, true);
const moveResponses = Object.values(res['move_responses']);
moveResponses.forEach((response) => {
store.removeRow(response.oldUid);
});
display_imap_mailbox(store.rows, store.list);
display_imap_mailbox(store.rows, store.list, store);
}
);

Expand Down
4 changes: 4 additions & 0 deletions modules/core/navigation/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ window.addEventListener('popstate', function(event) {
$('#cypht-main').replaceWith(event.state.main);
loadCustomScripts(event.state.head);
}

window.location.next = window.location.search;

const unMountCallback = renderPage(window.location.href);

if (unMountCallback) {
Expand Down Expand Up @@ -114,6 +117,7 @@ function renderPage(href) {
if (page) {
const route = ROUTES.find(route => route.page === page);
const routeParams = Object.fromEntries(searchParams.entries());

if (route) {
const unMountCallback = route.handler(routeParams, url.hash?.substring(1));
return unMountCallback;
Expand Down
9 changes: 5 additions & 4 deletions modules/core/navigation/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,19 @@ function hideRoutingToast() {
window.routingToast = null;
}

// Undefined is used as the default value instead of null to comply with the route handlers, which also use undefined as the default value.
function getListPathParam() {
return new URLSearchParams(window.location.next || window.location.search).get('list_path')
return new URLSearchParams(window.location.next || window.location.search).get('list_path') ?? undefined;
}

function getMessageUidParam() {
return new URLSearchParams(window.location.next || window.location.search).get('uid')
return new URLSearchParams(window.location.next || window.location.search).get('uid') ?? undefined;
}

function getPageNameParam() {
return new URLSearchParams(window.location.next || window.location.search).get('page')
return new URLSearchParams(window.location.next || window.location.search).get('page') ?? undefined;
}

function getParam(param) {
return new URLSearchParams(window.location.next || window.location.search).get(param)
return new URLSearchParams(window.location.next || window.location.search).get(param) ?? undefined;
}
20 changes: 15 additions & 5 deletions modules/core/site.js
Original file line number Diff line number Diff line change
Expand Up @@ -248,11 +248,11 @@ var Hm_Ajax_Request = function() { return {
if (name === getListPathParam()) {
Hm_Folders.unread_counts[name] = res.folder_status[name]['unseen'];
Hm_Folders.update_unread_counts();
const messages = new Hm_MessagesStore(name, Hm_Utils.get_url_page_number(), getParam('keyword'));
const messages = new Hm_MessagesStore(name, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
messages.load().then(() => {
if (messages.count != res.folder_status[name].messages) {
messages.load(true).then(() => {
display_imap_mailbox(messages.rows, messages.list);
display_imap_mailbox(messages.rows, messages.list, messages);
})
}
});
Expand Down Expand Up @@ -515,11 +515,21 @@ function Message_List() {
fixLtrInRtl();
};

this.update = function(msgs, id) {
this.update = function(msgs, id, store) {
Hm_Utils.tbody(id).html('');
for (const index in msgs) {
const row = msgs[index][0];
Hm_Utils.tbody(id).append(row);
Hm_Utils.tbody(id).append(row).find('a').each(function() {
const link = $(this);
const filterParams = ["keyword", "filter"];
const url = new URL(link.attr('href'), location.href);
filterParams.forEach(param => {
url.searchParams.set(param, getParam(param));
});
link.attr('href', url.toString());
const row = link.closest('tr');
store.updateRow(row.data('uid'), row.prop('outerHTML'));
});
}
};

Expand Down Expand Up @@ -858,7 +868,7 @@ function Message_List() {
let nextUrl;

const target = $('.msg_headers tr').last();
const messages = new Hm_MessagesStore(lisPath, Hm_Utils.get_url_page_number(), getParam('keyword'));
const messages = new Hm_MessagesStore(lisPath, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
messages.load(false, true);
const next = messages.getNextRowForMessage(msgUid);
const prev = messages.getPreviousRowForMessage(msgUid);
Expand Down
4 changes: 2 additions & 2 deletions modules/github/js_modules/route_handlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ function applyGithubMessageListPageHandler(routeParams) {
if (routeParams.list_path === 'github_all') {
const dataSources = hm_data_sources().map((source) => source.id);
dataSources.forEach((id) => {
const messages = new Hm_MessagesStore('github_' + id, Hm_Utils.get_url_page_number(), getParam('keyword'));
const messages = new Hm_MessagesStore('github_' + id, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
messages.load().then(store => {
for (const row of Object.values(store.rows)) {
Hm_Utils.tbody().append(row['0']);
Expand All @@ -58,7 +58,7 @@ function applyGithubMessageListPageHandler(routeParams) {

function refreshAll(dataSources, background = false, abortController) {
dataSources.forEach((id) => {
const messages = new Hm_MessagesStore('github_' + id, Hm_Utils.get_url_page_number(), getParam('keyword'), {}, abortController);
const messages = new Hm_MessagesStore('github_' + id, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`, {}, abortController);
messages.load(true, background).then(store => {
const rows = Object.values(store.rows);
for (const index in rows) {
Expand Down
2 changes: 1 addition & 1 deletion modules/imap/js_modules/route_handlers.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function applyImapMessageContentPageHandlers(routeParams) {
imap_setup_message_view_page(routeParams.uid, null, routeParams.list_path, routeParams.list_parent, imap_setup_tags);
imap_setup_snooze();

const messages = new Hm_MessagesStore(routeParams.list_path, routeParams.list_page, routeParams.keyword);
const messages = new Hm_MessagesStore(routeParams.list_path, routeParams.list_page, `${routeParams.keyword}_${routeParams.filter}`);
messages.load(false);
const next = messages.getNextRowForMessage(routeParams.uid);
const prev = messages.getPreviousRowForMessage(routeParams.uid);
Expand Down
43 changes: 27 additions & 16 deletions modules/imap/site.js
Original file line number Diff line number Diff line change
Expand Up @@ -382,13 +382,24 @@ var remove_from_cached_imap_pages = function(msg_cache_key) {
}

async function select_imap_folder(path, page = 1,reload, processInTheBackground = false, abortController = null) {
const messages = new Hm_MessagesStore(path, page, getParam('keyword'), null, abortController);
const messages = new Hm_MessagesStore(path, page, `${getParam('keyword')}_${getParam('filter')}`, null, abortController);
await messages.load(reload, processInTheBackground).then(() => {
if (processInTheBackground) {
const rows = Object.values(messages.rows);
for (const index in rows) {
const row = rows[index]?.[0];
const rowUid = $(row).data('uid');
const row = $(rows[index]?.[0]);
const rowUid = row.data('uid');
row.find('a').each(function() {
const link = $(this);
const filterParams = ["keyword", "filter"];
const url = new URL(link.attr('href'), location.href);
filterParams.forEach(param => {
url.searchParams.set(param, getParam(param));
});
link.attr('href', url.toString());
const row = link.closest('tr');
messages.updateRow(rowUid, row.prop('outerHTML'));
});
const tableRow = Hm_Utils.tbody(messages.list).find(`tr[data-uid="${rowUid}"]`);
if (!tableRow.length) {
if (Hm_Utils.rows(messages.list).length >= index) {
Expand All @@ -406,7 +417,7 @@ async function select_imap_folder(path, page = 1,reload, processInTheBackground
}
});
} else {
display_imap_mailbox(messages.rows, messages.list);
display_imap_mailbox(messages.rows, messages.list, messages);
}
if (messages.pages) {
showPagination(messages.pages);
Expand Down Expand Up @@ -440,12 +451,12 @@ var setup_imap_folder_page = async function(listPath, listPage = 1) {
e.preventDefault();
$('#imap_filter_form').trigger('submit');
});
$('.imap_keyword').on('search', function(e) {
$('.imap_keyword').on('change', function(e) {
e.preventDefault();
$('#imap_filter_form').trigger('submit');
});

const hadLocalData = new Hm_MessagesStore(listPath, listPage, getParam('keyword')).hasLocalData();
const hadLocalData = new Hm_MessagesStore(listPath, listPage, `${getParam('keyword')}_${getParam('filter')}`).hasLocalData();
await select_imap_folder(listPath, listPage);

handleMessagesDragAndDrop();
Expand All @@ -469,13 +480,13 @@ $(document).on('submit', '#imap_filter_form', async function(event) {
event.preventDefault();
const url = new URL(location.href);
url.search = $(this).serialize();
history.replaceState(null, '', url);
history.pushState(history.state, "", url.toString());
location.next = url.search;
try {
const messages = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), getParam('keyword'));
const messages = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
await messages.load(!messages.hasLocalData());
Hm_Utils.tbody().attr('id', messages.list);
display_imap_mailbox(messages.rows, messages.list);
display_imap_mailbox(messages.rows, messages.list, messages);
if (messages.pages) {
showPagination(messages.pages);
}
Expand All @@ -484,10 +495,10 @@ $(document).on('submit', '#imap_filter_form', async function(event) {
}
});

var display_imap_mailbox = function(rows, id) {
var display_imap_mailbox = function(rows, id, store) {
Hm_Message_List.toggle_msg_controls();
if (rows) {
Hm_Message_List.update(rows, id);
Hm_Message_List.update(rows, id, store);
Hm_Message_List.check_empty_list();
$('input[type=checkbox]').on("click", function(e) {
Hm_Message_List.toggle_msg_controls();
Expand Down Expand Up @@ -521,7 +532,7 @@ async function markPrefetchedMessagesAsRead(uid) {
const detail = Hm_Utils.parse_folder_path(listPath, 'imap');
const msgId = `${detail.type}_${detail.server_id}_${uid}_${detail.folder}`;

const messages = new Hm_MessagesStore(listPath, Hm_Utils.get_url_page_number(), getParam('keyword'));
const messages = new Hm_MessagesStore(listPath, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
await messages.load(false, true);
if (!messages.flagAsReadOnOpen) {
return;
Expand Down Expand Up @@ -976,7 +987,7 @@ var imap_perform_move_copy = function(dest_id, context, action = null) {
{'name': 'imap_move_action', 'value': action}],
async function(res) {
var index;
const store = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), getParam('keyword'));
const store = new Hm_MessagesStore(getListPathParam(), Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
await store.load(false, true, true);
const moveResponses = Object.values(res['move_responses']);
moveResponses.forEach((response) => {
Expand All @@ -990,7 +1001,7 @@ var imap_perform_move_copy = function(dest_id, context, action = null) {
}
}
if (getListPathParam().substr(0, 4) === 'imap') {
display_imap_mailbox(store.rows, store.list);
display_imap_mailbox(store.rows, store.list, store);
}
else {
Hm_Message_List.load_sources();
Expand Down Expand Up @@ -1171,14 +1182,14 @@ var imap_setup_snooze = function() {
const snoozedMessages = Object.values(res['snoozed_messages']);
if (snoozedMessages.length) {
const path = getParam("list_parent") || getListPathParam();
const store = new Hm_MessagesStore(path, Hm_Utils.get_url_page_number(), getParam('keyword'));
const store = new Hm_MessagesStore(path, Hm_Utils.get_url_page_number(), `${getParam('keyword')}_${getParam('filter')}`);
await store.load(false, true, true);

snoozedMessages.forEach((msg) => {
store.removeRow(msg);
});
if (getPageNameParam() == 'message_list') {
display_imap_mailbox(store.rows, store.list);
display_imap_mailbox(store.rows, store.list, store);
}

Hm_Folders.reload_folders(true);
Expand Down

0 comments on commit cd509bb

Please sign in to comment.