Restricted to enter only one emoji in new routine

codeAbinash · Jun 28, 2023 · 14677c3 · 14677c3
1 parent fa0e0d0
commit 14677c3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/components/TextEmoji.tsx b/src/components/TextEmoji.tsx
@@ -1,4 +1,5 @@
 import Emoji from "emoji-store"
+import { parseEmoji } from "../lib/lib"
 let e_apple = new Emoji({
     author: 'apple',
     size: 160,
@@ -19,6 +20,7 @@ type EmojiType = {
 
 export default function TextEmoji({ emoji, type }: EmojiType) {
     let em = e_apple
+    emoji = parseEmoji(emoji)[0]
     if (type == 'facebook')
         em = e_facebook
     return <img src={em.get(emoji)} alt={emoji} loading="lazy" className="inline-block h-[1.3em] align-middle" />

diff --git a/src/lib/lib.ts b/src/lib/lib.ts
@@ -73,4 +73,10 @@ export function throttle<T extends (...args: any[]) => void>(
 
 
 export const blank_callback = [() => { }, () => { }]
-// export blank_callback
+// export blank_callback
+
+export function parseEmoji(emoji: string) {
+    if (!emoji) return ['']
+    let emojis = [...new Intl.Segmenter().segment(emoji)].map(x => x.segment)
+    return emojis
+}
diff --git a/src/pages/NewRoutine.tsx b/src/pages/NewRoutine.tsx
@@ -11,7 +11,7 @@ import Once from './makeRoutine/Once';
 import Weekly from './makeRoutine/Weekly';
 import TextEmoji from '../components/TextEmoji';
 import BottomModal, { BasicModal } from '../components/BottomModal';
-import { MODAL_BUTTON_TEXT, capitalize } from '../lib/lib';
+import { MODAL_BUTTON_TEXT, capitalize, parseEmoji } from '../lib/lib';
 import OptionSelector from '../components/OptionSelector';
 import { df } from '../lib/delay';
 let emojiList = ['📕', '🧑🏻‍💻', '🏃🏻‍♂️', '🍽️', '🏫', '🧪', '🎂', '📖', '👩🏻‍🔬', '🎶']
@@ -24,6 +24,7 @@ const routineOptions = [
 	{ name: 'Custom', value: 'custom' },
 ]
 
+
 function NewRoutine() {
 	const e = new Emoji();
 	const params = useParams()
@@ -78,7 +79,7 @@ function NewRoutine() {
 						<div className="">
 							<p className='text-xs text-secondary pl-1 pb-1'>Routine name</p>
 							<div className="inputText flex flex-row gap-3">
-								<img src={Emoji.get(parseEmoji(routineEmoji)[0])} className='tap h-[3.5rem] p-[0.8rem] bg-inputBg dark:bg-darkInputBg rounded-2xl' />
+								<img src={Emoji.get(parseEmoji(routineEmoji)[0] || '🧑🏻')} className='tap h-[3.5rem] p-[0.8rem] bg-inputBg dark:bg-darkInputBg rounded-2xl' />
 								<input
 									value={routineName}
 									onInput={(e: any) => { setRoutineName(e.target.value) }}
@@ -107,7 +108,9 @@ function NewRoutine() {
 									value={routineEmoji}
 									placeholder='Emoji'
 									className='name input-text bg-inputBg dark:bg-darkInputBg flex-1'
-									onInput={(e: any) => { setRoutineEmoji(e.target.value) }}
+									onInput={(e: any) => {
+										setRoutineEmoji(parseEmoji(e.target.value)[0])
+									}}
 									ref={emojiInput}
 								/>
 								<div>
@@ -306,14 +309,4 @@ function isStartTimeGreater(start: string, end: string) {
 
 
 
-
-
-function parseEmoji(emoji: string) {
-	if (!emoji) return ['🧑🏻']
-	let emojis = [...new Intl.Segmenter().segment(emoji)].map(x => x.segment)
-	return emojis
-}
-
-
-
 export default NewRoutine