From 9a5faca726559e7ebcb958974b117916aa6f5370 Mon Sep 17 00:00:00 2001
From: Nisha Sen <43262505+nishasen@users.noreply.github.com>
Date: Tue, 18 Oct 2022 13:24:32 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Issue=20698:=20Search=20Bug=20in?=
 =?UTF-8?q?=20the=20Emojipedia=20Play=20=20(#704)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Updated emojipedia.js

Issue : According to the bug, the search was happening only after removing the whole word once searched.
Reason : This was happening because the search was being made from the previous search result.
Solution : I have changed the array from which the search was happening, that is, from the whole data every time, instead of searching from the previous data.

* Updated emojipedia.js

After the review, since there was a large amount of data was being present, it was asked  to use useTransition to increase the performance of the app.

Added useTransition to filter out the data, and made the necessary changes.

* Updated emojipedia.js

Co-authored-by: Tapas Adhikary <tapas.adhikary@gmail.com>
---
 src/plays/emojipedia/Emojipedia.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/plays/emojipedia/Emojipedia.js b/src/plays/emojipedia/Emojipedia.js
index b3572952f..09d588982 100644
--- a/src/plays/emojipedia/Emojipedia.js
+++ b/src/plays/emojipedia/Emojipedia.js
@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, useTransition } from "react";
 import toast, { Toaster } from "react-hot-toast";
 import { FiSearch } from "react-icons/fi";
 
@@ -13,11 +13,12 @@ function Emojipedia(props) {
   // Your Code Start below.
   const [emojisList, setEmojisList] = useState([]);
   const [query, setQuery] = useState("");
+  const [isPending, startTransition] = useTransition();
   const inputRef = useRef(null);
-
+  
   // Fetch all the emojis
   const { data, loading, error } = useFetch(API_BASE_URL);
-
+  
   const handleEmojiSearch = (e) => setQuery(e.target.value);
 
   // Copy emoji handler
@@ -32,18 +33,18 @@ function Emojipedia(props) {
   useEffect(() => {
     const delayFn = setTimeout(() => {
       if (query) {
-        setEmojisList((prevEmojiList) =>
-          prevEmojiList?.filter((emoji) =>
-            emoji?.unicodeName?.toLowerCase().includes(query?.toLowerCase())
-          )
-        );
+        startTransition(()=> {
+            setEmojisList(data.filter((emoji) =>
+              emoji?.unicodeName?.toLowerCase().includes(query?.toLowerCase())
+            )
+          );
+        })
       } else {
         setEmojisList(data);
       }
     }, 300);
-
     return () => clearTimeout(delayFn);
-  }, [query, data, emojisList]);
+  }, [query, data]);
 
   useEffect(() => {
     if (error) {
@@ -85,7 +86,11 @@ function Emojipedia(props) {
                 ? Array.from(Array(25).keys()).map((_, index) => (
                     <SkeletonCard key={index} />
                   ))
-                : emojisList?.map((emoji, index) => (
+                : isPending ? 
+                    Array.from(Array(25).keys()).map((_, index) => (
+                      <SkeletonCard key={index} />
+                    )) :
+                    emojisList?.map((emoji, index) => (
                     <EmojiCard
                       key={index}
                       emoji={emoji}
@@ -115,4 +120,4 @@ function Emojipedia(props) {
   );
 }
 
-export default Emojipedia;
+export default Emojipedia;
\ No newline at end of file