forked from jsnbuchanan/crowd-funder-for-time-pwa
feat: add first cut at emojis in feed (incomplete because it doesn't detect user's emojis correctly)
This commit is contained in:
@@ -77,12 +77,66 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="font-medium overflow-hidden">
|
||||
<a
|
||||
class="block cursor-pointer overflow-hidden text-ellipsis"
|
||||
@click="emitLoadClaim(record.jwtId)"
|
||||
<!-- 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]"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-1">
|
||||
<!-- Existing Emojis Display -->
|
||||
<div v-if="hasEmojis" class="flex flex-wrap gap-1 mr-2">
|
||||
<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) }"
|
||||
:title="
|
||||
isUserEmoji(emoji)
|
||||
? 'Click to remove your emoji'
|
||||
: 'Click to add this emoji'
|
||||
"
|
||||
@click="toggleEmoji(emoji)"
|
||||
>
|
||||
<span class="text-sm leading-none">{{ emoji }}</span>
|
||||
<span class="text-xs text-slate-600 font-medium leading-none">{{
|
||||
count
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 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"
|
||||
:title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
|
||||
@click="showEmojiPicker = !showEmojiPicker"
|
||||
>
|
||||
<span class="text-sm leading-none">{{
|
||||
showEmojiPicker ? "x" : "😊"
|
||||
}}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Emoji Picker (placeholder for now) -->
|
||||
<div
|
||||
v-if="showEmojiPicker"
|
||||
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">
|
||||
<button
|
||||
v-for="emoji in QUICK_EMOJIS"
|
||||
:key="emoji"
|
||||
class="p-0.5 hover:bg-slate-200 rounded text-base"
|
||||
@click="selectEmoji(emoji)"
|
||||
>
|
||||
{{ emoji }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="font-medium">
|
||||
<a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
|
||||
<vue-markdown
|
||||
:source="truncatedDescription"
|
||||
class="markdown-content"
|
||||
@@ -91,7 +145,7 @@
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
|
||||
class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
|
||||
>
|
||||
<!-- Source -->
|
||||
<div
|
||||
@@ -254,17 +308,23 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
||||
import { GiveRecordWithContactInfo } from "@/interfaces/give";
|
||||
import VueMarkdown from "vue-markdown-render";
|
||||
|
||||
import { logger } from "../utils/logger";
|
||||
import {
|
||||
createAndSubmitClaim,
|
||||
getHeaders,
|
||||
isHiddenDid,
|
||||
} from "../libs/endorserServer";
|
||||
import EntityIcon from "./EntityIcon.vue";
|
||||
import { isHiddenDid } from "../libs/endorserServer";
|
||||
import ProjectIcon from "./ProjectIcon.vue";
|
||||
import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
|
||||
import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
|
||||
import {
|
||||
NOTIFY_PERSON_HIDDEN,
|
||||
NOTIFY_UNKNOWN_PERSON,
|
||||
} from "@/constants/notifications";
|
||||
import { TIMEOUTS } from "@/utils/notify";
|
||||
import VueMarkdown from "vue-markdown-render";
|
||||
import { GenericVerifiableCredential } from "@/interfaces";
|
||||
import { GiveRecordWithContactInfo } from "@/interfaces/give";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
@@ -274,15 +334,23 @@ import VueMarkdown from "vue-markdown-render";
|
||||
},
|
||||
})
|
||||
export default class ActivityListItem extends Vue {
|
||||
readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
|
||||
|
||||
@Prop() record!: GiveRecordWithContactInfo;
|
||||
@Prop() lastViewedClaimId?: string;
|
||||
@Prop() isRegistered!: boolean;
|
||||
@Prop() activeDid!: string;
|
||||
@Prop() apiServer!: string;
|
||||
|
||||
isHiddenDid = isHiddenDid;
|
||||
notify!: ReturnType<typeof createNotifyHelpers>;
|
||||
$notify!: NotifyFunction;
|
||||
|
||||
// Emoji-related data
|
||||
showEmojiPicker = false;
|
||||
|
||||
userEmojis: string[] | null = null; // load this only when needed
|
||||
|
||||
created() {
|
||||
this.notify = createNotifyHelpers(this.$notify);
|
||||
}
|
||||
@@ -346,5 +414,119 @@ export default class ActivityListItem extends Vue {
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
// Emoji-related computed properties and methods
|
||||
get hasEmojis(): boolean {
|
||||
return Object.keys(this.record.emojiCount).length > 0;
|
||||
}
|
||||
|
||||
async loadUserEmojis(): Promise<void> {
|
||||
try {
|
||||
const response = await this.axios.get(
|
||||
`${this.apiServer}/api/v2/emoji/userEmojis?parentHandleId=${this.record.jwtId}`,
|
||||
{ headers: await getHeaders(this.activeDid) },
|
||||
);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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",
|
||||
text: emoji,
|
||||
parentItem: { lastClaimId: this.record.jwtId },
|
||||
};
|
||||
const claim = await createAndSubmitClaim(
|
||||
emojiClaim,
|
||||
this.record.issuerDid,
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
if (
|
||||
claim.success &&
|
||||
!(claim.success as { embeddedRecordError?: string }).embeddedRecordError
|
||||
) {
|
||||
this.record.emojiCount[emoji] =
|
||||
(this.record.emojiCount[emoji] || 0) + 1;
|
||||
this.userEmojis = [...(this.userEmojis || []), emoji];
|
||||
} else {
|
||||
this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Error submitting emoji:", error);
|
||||
this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
|
||||
}
|
||||
}
|
||||
|
||||
async removeEmoji(emoji: string) {
|
||||
try {
|
||||
// Create an Emoji claim and send to the server
|
||||
const emojiClaim: GenericVerifiableCredential = {
|
||||
"@type": "Emoji",
|
||||
text: emoji,
|
||||
parentItem: { lastClaimId: this.record.jwtId },
|
||||
};
|
||||
const claim = await createAndSubmitClaim(
|
||||
emojiClaim,
|
||||
this.record.issuerDid,
|
||||
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 (newCount === 0) {
|
||||
delete this.record.emojiCount[emoji];
|
||||
} else {
|
||||
this.record.emojiCount[emoji] = newCount;
|
||||
}
|
||||
this.userEmojis = this.userEmojis?.filter(e => e !== emoji) || [];
|
||||
} else {
|
||||
this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Error removing emoji:", error);
|
||||
this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user