Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

quick-reactions - New feature #7247

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
+106 −0
Draft

quick-reactions - New feature #7247

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4797363
optimistic reactions
brumm Feb 4, 2024
17e8ae1
fix eslint warnings
brumm Feb 4, 2024
363c8d5
add test urls
brumm Feb 5, 2024
2bd80ad
add newline at end of file
brumm Feb 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Prev Previous commit
Next Next commit
fix eslint warnings
  • Loading branch information
@brumm
brumm committed Feb 4, 2024
commit 17e8ae186a5c76233c0f3c942a58c58fc6ac2e8b
40 changes: 21 additions & 19 deletions source/features/quick-reactions.tsx
View file
Open in desktop
@@ -1,9 +1,10 @@
import delegate, { DelegateEvent } from 'delegate-it';
import delegate, {DelegateEvent} from 'delegate-it';
import React from 'dom-chef';
import * as pageDetect from 'github-url-detection';

import features from '../feature-manager.js';

const emojiSortOrder = ['THUMBS_UP', 'THUMBS_DOWN', 'LAUGH', 'HOORAY', 'CONFUSED', 'HEART', 'ROCKET', 'EYES']
const emojiSortOrder = ['THUMBS_UP', 'THUMBS_DOWN', 'LAUGH', 'HOORAY', 'CONFUSED', 'HEART', 'ROCKET', 'EYES'];

function optimisticReactionFromPost(event: DelegateEvent<MouseEvent>): void {
const reaction = event.delegateTarget as HTMLButtonElement;
Expand All @@ -14,48 +15,50 @@
const reactionButton = event.delegateTarget as HTMLButtonElement;
const reactionsMenu = reactionButton.closest('reactions-menu')!;
const details = reactionsMenu.querySelector('details');
details!.open = false; // close reactions menu immediately
details!.open = false; // Close reactions menu immediately

const reactionsContainer = reactionsMenu.nextElementSibling!.querySelector('.js-comment-reactions-options')!;
const reactionButtonValue = reactionButton.getAttribute('value')!;
const existingReaction = reactionsContainer.querySelector<HTMLButtonElement>(`[value="${reactionButtonValue}"]`);

if (existingReaction) {
// the user is updating an existing reaction via the menu, just update the reaction
// The user is updating an existing reaction via the menu, just update the reaction
updateReaction(existingReaction);
} else {
// reactions have a specific order, so we need to insert the new reaction in the correct position
// Reactions have a specific order, so we need to insert the new reaction in the correct position
const reactionIndex = emojiSortOrder.findIndex(item => reactionButtonValue.startsWith(item));
const insertionIndex = [...reactionsContainer.querySelectorAll('button')].findIndex(
button => parseInt(button.getAttribute('data-button-index-position')!, 10) > reactionIndex
)
const insertionIndex = [...reactionsContainer.querySelectorAll('button')].findIndex(button => {
const index = Number.parseInt(button.getAttribute('data-button-index-position')!, 10);
return index > reactionIndex;
});
const referenceNode = reactionsContainer.querySelectorAll('button').item(insertionIndex);
const emojiElement = reactionButton.querySelector('g-emoji')!.cloneNode(true);
emojiElement.className = 'social-button-emoji'
emojiElement.className = 'social-button-emoji';

reactionsContainer.insertBefore(
<>
<button
name="input[content]"
value={reactionButtonValue}
type="submit"
className="social-reaction-summary-item btn-link d-flex no-underline flex-items-baseline mr-2 user-has-reacted"
>
{emojiElement}
<span className="js-discussion-reaction-group-count">1</span>
</button>
<span /> {/* helps avoid unwanted margin due to adjacent siblings of .social-reaction-summary-item */}
<span/> {/* helps avoid unwanted margin due to adjacent siblings of .social-reaction-summary-item */}
</>,
referenceNode
referenceNode,
);
}
}

function updateReaction(buttonElement: HTMLButtonElement) {
function updateReaction(buttonElement: HTMLButtonElement): void {
const countElement = buttonElement.querySelector(
'.js-discussion-reaction-group-count'
'.js-discussion-reaction-group-count',
)!;
const count = parseInt(countElement.textContent, 10);
const isIncrease = buttonElement.getAttribute('value')!.endsWith('unreact') === false;
const count = Number.parseInt(countElement.textContent, 10);
const isIncrease = !buttonElement.getAttribute('value')!.endsWith('unreact');
const newCount = isIncrease ? count + 1 : count - 1;

if (newCount === 0) {
Expand All @@ -70,10 +73,9 @@
}
}


function init(signal: AbortSignal): void {
delegate('reactions-menu + form button[value$=react]', 'click', optimisticReactionFromPost, { signal });
delegate('reactions-menu button[value$=react]', 'click', optimisticReactionFromMenu, { signal });
delegate('reactions-menu + form button[value$=react]', 'click', optimisticReactionFromPost, {signal});
delegate('reactions-menu button[value$=react]', 'click', optimisticReactionFromMenu, {signal});
}

void features.add(import.meta.url, {
Expand All @@ -83,5 +85,5 @@
pageDetect.isSingleReleaseOrTag,
pageDetect.isDiscussion,
],
init
init,
});

Check failure on line 89 in source/features/quick-reactions.tsx

View workflow job for this annotation

GitHub Actions / TestURLs 

Every new or edited feature must be tested manually before merging.
To help testing, we're progressively adding test URLs in each feature.

You can find or create a test URL:

- on our sandbox repo: https://github.com/refined-github/sandbox
- on previous PRs for this feature

The section must be appended to each .tsx file:

/*

Test URLs:

https://github.com/a/REAL/url/here
https://github.com/another/REAL/url/here

*/