trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

feat: get the emojis to work with additions, removals, and multiple people

Browse Source
This commit is contained in:
Trent Larson
2025-10-19 15:22:34 -06:00
parent 9ac9f1d4a3
commit a4a9293bc2
9 changed files with 205 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/ActivityListItem.vue
View File

@@ -79,24 +79,34 @@
<!-- Emoji Section -->
<div
class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[200px]"
class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
>
<div class="flex items-center justify-between gap-1">
<!-- Existing Emojis Display -->
<div v-if="hasEmojis" class="flex flex-wrap gap-1 mr-2">
<div v-if="hasEmojis" class="flex flex-wrap gap-1">
<button
v-for="(count, emoji) in record.emojiCount"
:key="emoji"
class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
:class="{ 'bg-blue-50 border-blue-200': isUserEmoji(emoji) }"
:class="{
'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
'opacity-75 cursor-wait': loadingEmojis,
}"
:title="
isUserEmoji(emoji)
? 'Click to remove your emoji'
: 'Click to add this emoji'
loadingEmojis
? 'Loading...'
: !emojisOnActivity?.isResolved
? 'Click to load your emojis'
: isUserEmojiWithoutLoading(emoji)
? 'Click to remove your emoji'
: 'Click to add this emoji'
"
@click="toggleEmoji(emoji)"
:disabled="!isRegistered"
@click="toggleThisEmoji(emoji)"
>
<span class="text-sm leading-none">{{ emoji }}</span>
<!-- Show spinner when loading -->
<div v-if="loadingEmojis" class="animate-spin text-xs">⟳</div>
<span v-else class="text-sm leading-none">{{ emoji }}</span>
<span class="text-xs text-slate-600 font-medium leading-none">{{
count
}}</span>
@@ -105,11 +115,12 @@
<!-- Add Emoji Button -->
<button
class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-auto"
v-if="isRegistered"
class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
:title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
@click="showEmojiPicker = !showEmojiPicker"
@click="toggleEmojiPicker"
>
<span class="text-sm leading-none">{{
<span class="px-2 text-sm leading-none">{{
showEmojiPicker ? "x" : "😊"
}}</span>
</button>
@@ -121,14 +132,20 @@
class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
>
<!-- Temporary emoji buttons for testing -->
<div class="flex flex-wrap gap-1 mt-1">
<div class="flex flex-wrap gap-3 mt-1">
<button
v-for="emoji in QUICK_EMOJIS"
:key="emoji"
class="p-0.5 hover:bg-slate-200 rounded text-base"
@click="selectEmoji(emoji)"
class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
:class="{
'opacity-75 cursor-wait': loadingEmojis,
}"
:disabled="loadingEmojis"
@click="toggleThisEmoji(emoji)"
>
{{ emoji }}
<!-- Show spinner when loading -->
<div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
<span v-else>{{ emoji }}</span>
</button>
</div>
</div>
@@ -323,8 +340,9 @@ import {
NOTIFY_PERSON_HIDDEN,
NOTIFY_UNKNOWN_PERSON,
} from "@/constants/notifications";
import { GenericVerifiableCredential } from "@/interfaces";
import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
import { GiveRecordWithContactInfo } from "@/interfaces/give";
import { PromiseTracker } from "@/libs/util";
@Component({
components: {
@@ -348,8 +366,9 @@ export default class ActivityListItem extends Vue {
// Emoji-related data
showEmojiPicker = false;
loadingEmojis = false; // Track if emojis are currently loading
userEmojis: string[] | null = null; // load this only when needed
emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed
created() {
this.notify = createNotifyHelpers(this.$notify);
@@ -420,52 +439,87 @@ export default class ActivityListItem extends Vue {
return Object.keys(this.record.emojiCount).length > 0;
}
async loadUserEmojis(): Promise<void> {
triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
if (!this.emojisOnActivity) {
const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
(async () => {
this.axios
.get(
`${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
{ headers: await getHeaders(this.activeDid) },
)
.then((response) => {
const userEmojiRecords = response.data.data.filter(
(e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
);
resolve(userEmojiRecords);
})
.catch((error) => {
logger.error("Error loading user emojis:", error);
resolve([]);
});
})();
});
this.emojisOnActivity = new PromiseTracker(promise);
}
return this.emojisOnActivity;
}
/**
*
* @param emoji - The emoji to check.
* @returns True if the emoji is in the user's emojis, false otherwise.
*
* @note This method is quick and synchronous, and can check resolved emojis
* without triggering a server request. Returns false if emojis haven't been loaded yet.
*/
isUserEmojiWithoutLoading(emoji: string): boolean {
if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
return this.emojisOnActivity.value.some(
(record) => record.text === emoji,
);
}
return false;
}
async toggleEmojiPicker() {
this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
this.showEmojiPicker = !this.showEmojiPicker;
}
async toggleThisEmoji(emoji: string) {
// Start loading indicator
this.loadingEmojis = true;
this.showEmojiPicker = false; // always close the picker when an emoji is clicked
try {
const response = await this.axios.get(
`${this.apiServer}/api/v2/emoji/userEmojis?parentHandleId=${this.record.jwtId}`,
{ headers: await getHeaders(this.activeDid) },
this.triggerUserEmojiLoad(); // trigger just in case
const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen
const userHasEmoji: boolean = userEmojiList.some(
(record) => record.text === emoji,
);
this.userEmojis = response.data;
} catch (error) {
logger.error(
"Error loading all emojis for parent handle id:",
this.record.jwtId,
error,
);
}
}
async getUserEmojis(): Promise<string[]> {
if (!this.userEmojis) {
await this.loadUserEmojis();
}
return this.userEmojis || [];
}
selectEmoji(emoji: string) {
this.showEmojiPicker = false;
this.submitEmoji(emoji);
}
isUserEmoji(emoji: string): boolean {
return this.userEmojis?.includes(emoji) || false;
}
toggleEmoji(emoji: string) {
if (this.isUserEmoji(emoji)) {
this.removeEmoji(emoji);
} else {
this.submitEmoji(emoji);
if (userHasEmoji) {
// User already has this emoji, ask for confirmation to remove
const confirmed = confirm(`Do you want to remove your ${emoji} emoji?`);
if (confirmed) {
await this.removeEmoji(emoji);
}
} else {
// User doesn't have this emoji, add it
await this.submitEmoji(emoji);
}
} finally {
// Remove loading indicator
this.loadingEmojis = false;
}
}
async submitEmoji(emoji: string) {
try {
// Temporarily add to user emojis for UI feedback
if (!this.isUserEmoji(emoji)) {
this.record.emojiCount[emoji] = 0;
}
// Create an Emoji claim and send to the server
const emojiClaim: GenericVerifiableCredential = {
"@type": "Emoji",
@@ -474,17 +528,30 @@ export default class ActivityListItem extends Vue {
};
const claim = await createAndSubmitClaim(
emojiClaim,
this.record.issuerDid,
this.activeDid,
this.apiServer,
this.axios,
);
if (
claim.success &&
!(claim.success as { embeddedRecordError?: string }).embeddedRecordError
) {
if (claim.success && !claim.embeddedRecordError) {
// Update emoji count
this.record.emojiCount[emoji] =
(this.record.emojiCount[emoji] || 0) + 1;
this.userEmojis = [...(this.userEmojis || []), emoji];
// Create a new emoji record (we'll get the actual jwtId from the server response later)
const newEmojiRecord: EmojiSummaryRecord = {
issuerDid: this.activeDid,
jwtId: claim.claimId || "",
text: emoji,
parentHandleId: this.record.jwtId,
};
// Update user emojis list by creating a new promise with the updated data
// (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
this.triggerUserEmojiLoad();
const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
this.emojisOnActivity = new PromiseTracker(
Promise.resolve([...currentEmojis, newEmojiRecord]),
);
} else {
this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
}
@@ -504,22 +571,31 @@ export default class ActivityListItem extends Vue {
};
const claim = await createAndSubmitClaim(
emojiClaim,
this.record.issuerDid,
this.activeDid,
this.apiServer,
this.axios,
);
if (claim.success) {
this.record.emojiCount[emoji] =
(this.record.emojiCount[emoji] || 0) - 1;
// Update local emoji count for immediate UI feedback
const newCount = Math.max(0, this.record.emojiCount[emoji]);
if (claim.success && !claim.embeddedRecordError) {
// Update emoji count
const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
if (newCount === 0) {
delete this.record.emojiCount[emoji];
} else {
this.record.emojiCount[emoji] = newCount;
}
this.userEmojis = this.userEmojis?.filter(e => e !== emoji) || [];
// Update user emojis list by creating a new promise with the updated data
// (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
this.triggerUserEmojiLoad();
const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
this.emojisOnActivity = new PromiseTracker(
Promise.resolve(
currentEmojis.filter(
(record) =>
record.issuerDid === this.activeDid && record.text !== emoji,
),
),
);
} else {
this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
}