mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-10-30 13:42:24 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

[frogend] Emoji categories (#1051)

Browse source 
* 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
This commit is contained in:
f0x52 2022-11-16 17:05:49 +01:00 • committed by GitHub
commit aa5c4e065c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 249 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/source/settings/admin/emoji/overview.js
View file

@ -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>