diff options
Diffstat (limited to 'web/source/settings/admin/emoji/overview.js')
| -rw-r--r-- | web/source/settings/admin/emoji/overview.js | 33 |
1 files changed, 14 insertions, 19 deletions
diff --git a/web/source/settings/admin/emoji/overview.js b/web/source/settings/admin/emoji/overview.js index 028276da2..15891a5ec 100644 --- a/web/source/settings/admin/emoji/overview.js +++ b/web/source/settings/admin/emoji/overview.js @@ -20,7 +20,7 @@ const React = require("react"); const {Link} = require("wouter"); -const defaultValue = require('default-value'); +const splitFilterN = require("split-filter-n"); const NewEmojiForm = require("./new-emoji"); @@ -30,11 +30,18 @@ const base = "/settings/admin/custom-emoji"; module.exports = function EmojiOverview() { const { - data: emoji, + data: emoji = [], isLoading, error } = query.useGetAllEmojiQuery({filter: "domain:local"}); + // split all emoji over an object keyed by the category names (or Unsorted) + const emojiByCategory = React.useMemo(() => splitFilterN( + emoji, + [], + (entry) => entry.category ?? "Unsorted" + ), [emoji]); + return ( <> <h1>Custom Emoji</h1> @@ -44,33 +51,21 @@ module.exports = function EmojiOverview() { {isLoading ? "Loading..." : <> - <EmojiList emoji={emoji}/> - <NewEmojiForm emoji={emoji}/> + <EmojiList emoji={emoji} emojiByCategory={emojiByCategory}/> + <NewEmojiForm emoji={emoji} emojiByCategory={emojiByCategory}/> </> } </> ); }; -function EmojiList({emoji}) { - const byCategory = React.useMemo(() => { - const categories = {}; - - emoji.forEach((emoji) => { - let cat = defaultValue(emoji.category, "Unsorted"); - categories[cat] = defaultValue(categories[cat], []); - categories[cat].push(emoji); - }); - - return categories; - }, [emoji]); - +function EmojiList({emoji, emojiByCategory}) { return ( <div> <h2>Overview</h2> <div className="list emoji-list"> - {emoji.length == 0 && "No local emoji yet"} - {Object.entries(byCategory).map(([category, entries]) => { + {emoji.length == 0 && "No local emoji yet, add one below"} + {Object.entries(emojiByCategory).map(([category, entries]) => { return <EmojiCategory key={category} category={category} entries={entries}/>; })} </div> |