No longer staying on page after marking as read

[glitsj16]

OS: Arch Linux
Browser: Firefox 66.0.1
Notifications Preview for GitHub: 1.5.3

Browser extension - Preview your notifications without leaving the page

This wonderful time-saver extension seems partly broken (due to recent GitHub changes?). I love previewing notifications without leaving the page, but recently I get redirected to https://github.com/notifications after marking stuff read. Is this something that can be fixed somehow?

[tanmayrajani]

I'm guessing we can't return false on submission here since the action will only be performed if it's submitted.

What do you guys think? @bfred-it @jdreesen

Edit: Not sure if it's a good idea but one option is to convert the form with action to async operation like adding a function onsubmit (which performs that action using fetch maybe?) and removing the attributes that let the redirection happen. Thoughts?

[fregante]

But it seems that GitHub no longer loads the notification scripts on the page, so there's no handler at all for the current selector (which should work). From GitHub:

            o(".js-mark-notification-as-unread", async function(i, e) {
                c();
                const s = a(i, ".js-notification");
                n(s),
                f(s, ".js-mark-notification-as-read button");
                try {
                    await e.html()
                } catch (o) {
                    t(s),
                    r()
                }
            }),

I think it can be replaced with form.onsubmit => event.preventDefault()

[tanmayrajani]

So, I did the following:

for (const group of this.list) {
	...
    for (const form of select.all('form', group)) {
    	form.onsubmit = e => e.preventDefault()
   	}
}

at https://github.com/tanmayrajani/notifications-preview-github/blob/e4304837764e06f7e7095f47df2a151d68564c6c/extension/index.js#L22:

And it did stop the navigation, but it stopped the actual action as well. Clicking on mark as read did nothing.

[sfdye]

Any progress on this issue please?

[tanmayrajani]

So, instead of letting form action handle the POST request, I tried to mimic the action by using fetch, it's performing the action but still redirecting to same page and not rendering somehow.

I'm passing redirect: 'error' to fetch, I think it's supposed to stop the redirection but it's not.

Here's the snippet of what I tried:

const forms = select.all(('.NPG-dropdown form'));
for (const form of forms) {
	const action = form.getAttribute('action');
	const method = form.getAttribute('method');

	form.addEventListener('submit', async () => {
		const formData = new FormData();
		formData.append('utf8', '✓');
		formData.append('authenticity_token', select('input[name="authenticity_token"]', form).value);

		// This fails
		await fetch(location.origin + action, {
			method,
			redirect: 'error',
			body: new URLSearchParams(formData)
		});
		updateLoop();
	});

	form.removeAttribute('action');
}

If anyone got a hint or want to try out it's pushed to action-stay-same-page branch

[fregante]

You can use this: https://github.com/sindresorhus/refined-github/blob/master/source/libs/post-form.ts

And then something like

delegate('buttons', 'click', async event => {
	event.preventDefault();
	await postForm(event.delegateTarget.form);
	button.closest('.unread').classList.replace('unread', 'read')
});

Delegate is https://github.com/fregante/delegate-it

[sfdye]

No longer staying on page after marking as read seems to be fixed by 1.6.0, however the read item does not disappear until I manually refreshed page.

[tanmayrajani]

It wouldn't go away until the notification popover is open. Once you close it by clicking elsewhere, it seems to go away for me.

Here's how it happens:

[sfdye]

@tanmayrajani is this the old behavior? feels a bit different for me

[tanmayrajani]

@sfdye honestly, I don't remember the old behaviour. It wasn't working since long 😷

Although, if it goes away, you wouldn't have the option to mark as unread/unmuted if you've accidentally clicked on it, right?

[sfdye]

@tanmayrajani Cool, makes sense. Thanks a lot for the fix and release!