Complete migration to React

All tests passing
ahmad-PH · Jan 28, 2024 · 8ec10d4 · 8ec10d4
1 parent a6c4e1b
commit 8ec10d4
Show file tree

Hide file tree

Showing 8 changed files with 11,162 additions and 1,873 deletions.
diff --git a/assets/emojis.json b/assets/emojis.json
diff --git a/assets/emojis_old.json b/assets/emojis_old.json
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import EmojiPicker from './EmojiPicker';
 import { setTabTitle, setTabFavicon } from '../contentScript';
-import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, EMOJI_PICKER_ID, MAIN_BAR_ID, EVENT_OPEN_RENAME_DIALOG } from '../config';
+import { ROOT_ELEMENT_ID, INPUT_BOX_ID, OVERLAY_ID, MAIN_BAR_ID, EVENT_OPEN_RENAME_DIALOG } from '../config';
 import PropTypes from 'prop-types';
 import bgScriptApi from '../backgroundScriptApi';
 import log from "../log";
@@ -83,12 +83,13 @@ export function App() {
         }
     });
 
-    const handleInputBoxKeydown = (event) => {
+    const handleInputBoxKeydown = async (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
-            setTabTitle(inputBoxValue);
-            if (selectedEmoji !== null) {
-                setTabFavicon(selectedEmoji);
+            log.debug('Setting the tab title to:', inputBoxValue);
+            await setTabTitle(inputBoxValue);
+            if (selectedEmoji) {
+                await setTabFavicon(selectedEmoji);
             }
             setIsVisible(false);
         }
@@ -98,14 +99,19 @@ export function App() {
         setEmojiPickerIsVisible(!emojiPickerIsVisible);
     }
 
+    const handleEmojiClick = (emoji) => {
+        setSelectedEmoji(emoji);
+        setEmojiPickerIsVisible(false);
+    }
+
     return (
         <div id={ROOT_ELEMENT_ID} style={{ display: isVisible ? 'block' : 'none' }}>
             <div id={OVERLAY_ID} onClick={() => {setIsVisible(false)}}></div>
             <div id={MAIN_BAR_ID}>
                 <div id="tab-renamer-extension-favicon-picker-wrapper">
                     <SelectedEmoji selectedEmoji={selectedEmoji} handleFaviconPickerClick={handleFaviconPickerClick}/>
                     {emojiPickerIsVisible && 
-                        <EmojiPicker onEmojiClick={setSelectedEmoji}/>
+                        <EmojiPicker onEmojiClick={handleEmojiClick}/>
                     }
                 </div>
                 <input 

diff --git a/src/components/EmojiPicker.js b/src/components/EmojiPicker.js
@@ -32,7 +32,7 @@ class EmojiPicker extends Component {
         }
     }
 
-    filterEmojis = (searchValue) => {
+    filterEmojis(searchValue) {
         let filteredEmojis = [];
         for (const category in this.state.emojis) {
             filteredEmojis = filteredEmojis.concat(this.state.emojis[category].filter(emoji =>
@@ -42,7 +42,7 @@ class EmojiPicker extends Component {
         return filteredEmojis;
     }
 
-    formatEmojiCategoryTitle = (categoryTitle) => {
+    formatEmojiCategoryTitle(categoryTitle) {
         return categoryTitle
             .replace(/_/g, ' ')  // Replace underscores with spaces
             .replace(/\band\b/gi, '&')  // Replace 'and' with '&'
@@ -55,15 +55,19 @@ class EmojiPicker extends Component {
                 <SearchBar onSearchBarChanged={(searchValue) => this.setState({searchValue})} />
 
                 {this.state.searchValue === "" ? (
-                    <div id={ALL_EMOJIS_ID} className='emoji-grid'>
+                    <div id={ALL_EMOJIS_ID}>
                         {this.state.allEmojis && Object.entries(this.state.allEmojis).map(([category, emojis]) => (
                             <div className='emoji-category' key={category}>
-                                <div className='emoji-category-title'>{category}</div>
-                                {emojis.map(emoji => (
-                                    <Emoji emoji={emoji} key={emoji.unicode} onClick={
-                                        this.props.onEmojiClick
-                                    }/>
-                                ))}
+                                <div className='emoji-category-title'>
+                                    {this.formatEmojiCategoryTitle(category)}
+                                </div>
+                                <div className='emoji-grid'>
+                                    {emojis.map(emoji => (
+                                        <Emoji emoji={emoji} key={emoji.unicode} onClick={
+                                            () => this.props.onEmojiClick(emoji.emoji)
+                                        }/>
+                                    ))}
+                                </div>
                             </div>
                         ))}
                     </div>
@@ -114,10 +118,11 @@ const Emoji = ({ emoji, onClick }) => {
             className='emoji-item' 
             data-unicode={emoji.unicode} 
             data-shortcode={emoji.shortcode}
-            onClick={() => onClick(emoji)}
+            onClick={onClick}
         >
             <span className='emoji-wrapper'>
-                {String.fromCodePoint(parseInt(emoji.unicode.replace("U+", ""), 16))}
+                {emoji.emoji}
+                {/* {String.fromCodePoint(parseInt(emoji.unicode.replace("U+", ""), 16))} */}
             </span>
         </span>
     );

diff --git a/src/components/SelectedEmoji.js b/src/components/SelectedEmoji.js
@@ -2,11 +2,13 @@ import React from 'react';
 import { emojiToDataURL } from '../utils';
 import PropTypes from 'prop-types';
 import { EMOJI_PICKER_IMAGE_ID, FAVICON_PICKER_ID, PICKED_EMOJI_ID } from '../config';
+import log from '../log';
 
 function SelectedEmoji({ selectedEmoji, handleFaviconPickerClick }) {
-    const emojiElement = (selectedEmoji === null ? 
-        <img id={EMOJI_PICKER_IMAGE_ID} src={chrome.runtime.getURL("assets/emoji_picker_icon.png")}/> :
-        <img id={PICKED_EMOJI_ID} src={emojiToDataURL(selectedEmoji, 55)}/>
+    log.debug('Rendering SelectedEmoji with emoji:', selectedEmoji);
+    const emojiElement = (selectedEmoji ? 
+        <img id={PICKED_EMOJI_ID} src={emojiToDataURL(selectedEmoji, 55)} data-emoji={selectedEmoji}/> :
+        <img id={EMOJI_PICKER_IMAGE_ID} src={chrome.runtime.getURL("assets/emoji_picker_icon.png")}/>
     );
 
     return (
@@ -17,7 +19,7 @@ function SelectedEmoji({ selectedEmoji, handleFaviconPickerClick }) {
 }
 
 SelectedEmoji.propTypes = {
-    selectedEmoji: PropTypes.string,
+    selectedEmoji: PropTypes.string.isRequired,
     handleFaviconPickerClick: PropTypes.func.isRequired,
 }
 

diff --git a/src/contentScript.js b/src/contentScript.js
@@ -14,10 +14,12 @@ let root = null;
 
 // TODO: Separate your code into background and contentscript folders.
 // But maybe do that after React refactoring is finished.
+
 export async function setTabTitle(newTabTitle) {
+    log.debug('setTabTitle called with newTabTitle:', newTabTitle);
+    preserveTabTitle(newTabTitle);
     document.title = newTabTitle;
     await bgScriptApi.saveSignature(newTabTitle, null);
-    preserveTabTitle(newTabTitle);
 }
 
 export async function setTabFavicon(favicon) {

diff --git a/src/types.js b/src/types.js
@@ -29,4 +29,4 @@ export class TabSignature {
         this.title = title;
         this.favicon = favicon;
     }
-}
+}
diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,5 @@
+import log from "./log";
+
 /**
  * Asserts the type of a value.
  * @template T
@@ -16,6 +18,10 @@ export function assertType(value, type) {
 }
 
 export function emojiToDataURL(emoji, sideLength) {
+    log.debug('emojiToDataURL called with emoji:', emoji);
+    if (!emoji) {
+        throw new Error(`emojiToDataURL called with ${emoji}`);
+    }
     const canvas = document.createElement('canvas');
     canvas.width = sideLength;
     canvas.height = sideLength;