From 4370bd1012ee67f693ae62222b319b81b4a4a85b Mon Sep 17 00:00:00 2001
From: eana <coder@apps.1a23.com>
Date: Sat, 30 Mar 2024 15:30:03 +0000
Subject: [PATCH] fix(client): emoji data format change
---
.../client/src/components/MkEmojiPicker.vue | 18 ++--
packages/client/src/scripts/emojilist.ts | 85 +++++--------------
2 files changed, 30 insertions(+), 73 deletions(-)
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 4ee83a2871..88824316ca 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -113,19 +113,19 @@
<header>{{ i18n.ts.emoji }}</header>
<XSection
v-for="category in unicodeEmojiCategories"
- :key="category"
- :skin-tone-selector="category === 'people'"
+ :key="category.slug"
+ :skin-tone-selector="category.slug === 'people_body'"
:skin-tones="unicodeEmojiSkinTones"
:skin-tone-labels="unicodeEmojiSkinToneLabels"
:emojis="
emojilist
- .filter((e) => e.category === category)
+ .filter(
+ (e) => e.category_slug === category.slug,
+ )
.map((e) => e.emoji)
"
@chosen="chosen"
- >{{
- getNicelyLabeledCategory(category) || category
- }}</XSection
+ >{{ category.name }}</XSection
>
</div>
</div>
@@ -169,11 +169,7 @@ import type { entities } from "firefish-js";
import { FocusTrap } from "focus-trap-vue";
import XSection from "@/components/MkEmojiPicker.section.vue";
import type { UnicodeEmojiDef } from "@/scripts/emojilist";
-import {
- emojilist,
- getNicelyLabeledCategory,
- unicodeEmojiCategories,
-} from "@/scripts/emojilist";
+import { emojilist, unicodeEmojiCategories } from "@/scripts/emojilist";
import { getStaticImageUrl } from "@/scripts/get-static-image-url";
import Ripple from "@/components/MkRipple.vue";
import * as os from "@/os";
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index 1e9482b6bb..6384b15982 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -6,35 +6,17 @@ import { defaultStore } from "@/store";
export interface UnicodeEmojiDef {
emoji: string;
- category: (typeof unicodeEmojiCategories)[number];
+ category: (typeof unicodeEmojiCategories)[number]["name"];
+ category_slug: (typeof unicodeEmojiCategories)[number]["slug"];
skin_tone_support: boolean;
slug: string;
keywords?: string[];
}
-export const unicodeEmojiCategories = [
- "emotion",
- "people",
- "animals_and_nature",
- "food_and_drink",
- "activity",
- "travel_and_places",
- "objects",
- "symbols",
- "flags",
-] as const;
-
-export const categoryMapping = {
- "Smileys & Emotion": "emotion",
- "People & Body": "people",
- "Animals & Nature": "animals_and_nature",
- "Food & Drink": "food_and_drink",
- Activities: "activity",
- "Travel & Places": "travel_and_places",
- Objects: "objects",
- Symbols: "symbols",
- Flags: "flags",
-} as const;
+export const unicodeEmojiCategories = data.map((categories) => ({
+ slug: categories.slug,
+ name: categories.name,
+}));
export function addSkinTone(emoji: string, skinTone?: number) {
const chosenSkinTone = skinTone || defaultStore.state.reactionPickerSkinTone;
@@ -57,41 +39,20 @@ export function addSkinTone(emoji: string, skinTone?: number) {
}
}
-const newData = {};
-
-for (const originalCategory of Object.keys(data)) {
- const newCategory = categoryMapping[originalCategory];
- if (newCategory) {
- newData[newCategory] = newData[newCategory] || [];
- for (const emojiIndex of Object.keys(data[originalCategory])) {
- const emojiObj = { ...data[originalCategory][emojiIndex] };
- emojiObj.category = newCategory;
- emojiObj.keywords = keywordSet[emojiObj.emoji];
- newData[newCategory].push(emojiObj);
- }
- }
-}
-
-export const emojilist: UnicodeEmojiDef[] = Object.keys(newData).reduce(
- (acc, category) => {
- const categoryItems = newData[category].map((item) => {
- return {
- emoji: item.emoji,
- slug: item.slug,
- category: item.category,
- skin_tone_support: item.skin_tone_support || false,
- keywords: item.keywords || [],
- };
- });
- return acc.concat(categoryItems);
- },
- [],
-);
-
-export function getNicelyLabeledCategory(internalName) {
- return (
- Object.keys(categoryMapping).find(
- (key) => categoryMapping[key] === internalName,
- ) || internalName
- );
-}
+export const emojilist: UnicodeEmojiDef[] = data
+ .flatMap((category) =>
+ category.emojis.map((emoji) => ({
+ ...emoji,
+ category: category.name,
+ category_slug: category.slug,
+ keywords: keywordSet[emoji.emoji],
+ })),
+ )
+ .map((item) => ({
+ emoji: item.emoji,
+ slug: item.slug,
+ category: item.category,
+ category_slug: item.category_slug,
+ skin_tone_support: item.skin_tone_support || false,
+ keywords: item.keywords || [],
+ }));