mirror of
				https://github.com/superseriousbusiness/gotosocial.git
				synced 2025-10-30 23:22:26 -05:00 
			
		
		
		
	[frogend] Emoji copy "Steal this look" (#1222)
* split emoji into local and remote, allow looking up remote emoji by toot url * optimize some/all filtering * fix local emoji routes * implement copy action * shortcode validation, don't wipe form on error * copy & disable PATCH * remove local toot acceptance for testing * unused import * parse emoji from account and status, get web_url from status uri * fix url parse * submit button loading info * actually send category * code cleanup, distinguish between account and status responses * use loading icons * fix loading icon on federation page * require Loading element * remove unused require * query explanation, small accessibility tweaks
This commit is contained in:
		
					parent
					
						
							
								ce615b5d59
							
						
					
				
			
			
				commit
				
					
						4b8d7bd952
					
				
			
		
					 13 changed files with 623 additions and 33 deletions
				
			
		|  | @ -1,89 +0,0 @@ | |||
| /* | ||||
| 	 GoToSocial | ||||
| 	 Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org | ||||
| 
 | ||||
| 	 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/>.
 | ||||
| */ | ||||
| 
 | ||||
| "use strict"; | ||||
| 
 | ||||
| const React = require("react"); | ||||
| const {Link} = require("wouter"); | ||||
| 
 | ||||
| const NewEmojiForm = require("./new-emoji"); | ||||
| 
 | ||||
| const query = require("../../lib/query"); | ||||
| const { useEmojiByCategory } = require("./category-select"); | ||||
| 
 | ||||
| const base = "/settings/admin/custom-emoji"; | ||||
| 
 | ||||
| module.exports = function EmojiOverview() { | ||||
| 	const { | ||||
| 		data: emoji = [], | ||||
| 		isLoading, | ||||
| 		error | ||||
| 	} = query.useGetAllEmojiQuery({filter: "domain:local"}); | ||||
| 
 | ||||
| 	return ( | ||||
| 		<> | ||||
| 			<h1>Custom Emoji</h1> | ||||
| 			{error &&  | ||||
| 				<div className="error accent">{error}</div> | ||||
| 			} | ||||
| 			{isLoading | ||||
| 				? "Loading..." | ||||
| 				: <> | ||||
| 					<EmojiList emoji={emoji}/> | ||||
| 					<NewEmojiForm emoji={emoji}/> | ||||
| 				</> | ||||
| 			} | ||||
| 		</> | ||||
| 	); | ||||
| }; | ||||
| 
 | ||||
| function EmojiList({emoji}) { | ||||
| 	const emojiByCategory = useEmojiByCategory(emoji); | ||||
| 
 | ||||
| 	return ( | ||||
| 		<div> | ||||
| 			<h2>Overview</h2> | ||||
| 			<div className="list emoji-list"> | ||||
| 				{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> | ||||
| 		</div> | ||||
| 	); | ||||
| } | ||||
| 
 | ||||
| function EmojiCategory({category, entries}) { | ||||
| 	return ( | ||||
| 		<div className="entry"> | ||||
| 			<b>{category}</b> | ||||
| 			<div className="emoji-group"> | ||||
| 				{entries.map((e) => { | ||||
| 					return ( | ||||
| 						<Link key={e.id} to={`${base}/${e.id}`}> | ||||
| 							{/* <Link key={e.static_url} to={`${base}`}> */} | ||||
| 							<a> | ||||
| 								<img src={e.url} alt={e.shortcode} title={`:${e.shortcode}:`}/> | ||||
| 							</a> | ||||
| 						</Link> | ||||
| 					); | ||||
| 				})} | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	); | ||||
| } | ||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue