summaryrefslogtreecommitdiff
path: root/web/source/settings/admin/emoji/local/overview.js
diff options
context:
space:
mode:
Diffstat (limited to 'web/source/settings/admin/emoji/local/overview.js')
-rw-r--r--web/source/settings/admin/emoji/local/overview.js153
1 files changed, 0 insertions, 153 deletions
diff --git a/web/source/settings/admin/emoji/local/overview.js b/web/source/settings/admin/emoji/local/overview.js
deleted file mode 100644
index 45bfd614d..000000000
--- a/web/source/settings/admin/emoji/local/overview.js
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- GoToSocial
- Copyright (C) GoToSocial Authors admin@gotosocial.org
- SPDX-License-Identifier: AGPL-3.0-or-later
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const React = require("react");
-const { Link } = require("wouter");
-const syncpipe = require("syncpipe");
-const { matchSorter } = require("match-sorter");
-
-const NewEmojiForm = require("./new-emoji").default;
-const { useTextInput } = require("../../../lib/form");
-
-const { useEmojiByCategory } = require("../category-select");
-const { useBaseUrl } = require("../../../lib/navigation/util");
-
-const Loading = require("../../../components/loading");
-const { Error } = require("../../../components/error");
-const { TextInput } = require("../../../components/form/inputs");
-const { useListEmojiQuery } = require("../../../lib/query/admin/custom-emoji");
-
-module.exports = function EmojiOverview({ }) {
- const {
- data: emoji = [],
- isLoading,
- isError,
- error
- } = useListEmojiQuery({ filter: "domain:local" });
-
- let content = null;
-
- if (isLoading) {
- content = <Loading />;
- } else if (isError) {
- content = <Error error={error} />;
- } else {
- content = (
- <>
- <EmojiList emoji={emoji} />
- <NewEmojiForm emoji={emoji} />
- </>
- );
- }
-
- return (
- <>
- <h1>Local Custom Emoji</h1>
- <p>
- To use custom emoji in your toots they have to be 'local' to the instance.
- You can either upload them here directly, or copy from those already
- present on other (known) instances through the <Link to={`./remote`}>Remote Emoji</Link> page.
- </p>
- <p>
- <strong>Be warned!</strong> If you upload more than about 300-400 custom emojis in
- total on your instance, this may lead to rate-limiting issues for users and clients
- if they try to load all the emoji images at once (which is what many clients do).
- </p>
- {content}
- </>
- );
-};
-
-function EmojiList({ emoji }) {
- const filterField = useTextInput("filter");
- const filter = filterField.value;
-
- const emojiByCategory = useEmojiByCategory(emoji);
-
- /* Filter emoji based on shortcode match with user input, hiding empty categories */
- const { filteredEmoji, hidden } = React.useMemo(() => {
- let hidden = emoji.length;
- const filteredEmoji = syncpipe(emojiByCategory, [
- (_) => Object.entries(emojiByCategory),
- (_) => _.map(([category, entries]) => {
- let filteredEntries = matchSorter(entries, filter, { keys: ["shortcode"] });
- if (filteredEntries.length == 0) {
- return null;
- } else {
- hidden -= filteredEntries.length;
- return [category, filteredEntries];
- }
- }),
- (_) => _.filter((value) => value !== null)
- ]);
-
- return { filteredEmoji, hidden };
- }, [filter, emojiByCategory, emoji.length]);
-
- return (
- <div>
- <h2>Overview</h2>
- {emoji.length > 0
- ? <span>{emoji.length} custom emoji {hidden > 0 && `(${hidden} filtered)`}</span>
- : <span>No custom emoji yet, you can add one below.</span>
- }
- <div className="list emoji-list">
- <div className="header">
- <TextInput
- field={filterField}
- name="emoji-shortcode"
- placeholder="Search"
- />
- </div>
- <div className="entries scrolling">
- {filteredEmoji.length > 0
- ? (
- <div className="entries scrolling">
- {filteredEmoji.map(([category, entries]) => {
- return <EmojiCategory key={category} category={category} entries={entries} />;
- })}
- </div>
- )
- : <div className="entry">No local emoji matched your filter.</div>
- }
- </div>
- </div>
- </div>
- );
-}
-
-function EmojiCategory({ category, entries }) {
- const baseUrl = useBaseUrl();
- return (
- <div className="entry">
- <b>{category}</b>
- <div className="emoji-group">
- {entries.map((e) => {
- return (
- <Link key={e.id} to={`${baseUrl}/${e.id}`}>
- <a>
- <img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`} />
- </a>
- </Link>
- );
- })}
- </div>
- </div>
- );
-} \ No newline at end of file