From aa5c4e065c61bf30d7bd97579f6bfeecc71238bd Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Wed, 16 Nov 2022 17:05:49 +0100
Subject: [frogend] Emoji categories (#1051)

* emoji category combobox

* emoji categorizing

* dropdown entry separation

* emoji filtering/sorting

* add some explaining comments

* remove unneeded default-value code

* remove wrongly created package.json

* configurable ComboBox label+placeHolder
---
 web/source/settings/admin/emoji/overview.js | 33 ++++++++++++-----------------
 1 file changed, 14 insertions(+), 19 deletions(-)

(limited to 'web/source/settings/admin/emoji/overview.js')

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>
-- 
cgit v1.2.3