From 61fda881b653b160111d998be3a901f18d3c4342 Mon Sep 17 00:00:00 2001
From: Suuringo <72997519+Suuringo@users.noreply.github.com>
Date: Thu, 13 Oct 2022 22:30:20 +0200
Subject: [PATCH] Fix Picker not providing the correct sticker after searching

Picking a sticker after using the search bar returns the index of that
sticker inside the filtered list and not the original list which results
in unexpected behaviors.

Instead of filtering the sticker list according to the search prompt,
hide the unwanted stickers by not rendering them. By doing so, all stickers
will retain their original index from the master sticker list.
---
 src/components/Picker.jsx | 82 +++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/src/components/Picker.jsx b/src/components/Picker.jsx
index 8ce0096..4d024c8 100644
--- a/src/components/Picker.jsx
+++ b/src/components/Picker.jsx
@@ -5,26 +5,12 @@ import {
   Button,
   TextField,
 } from "@mui/material";
-import { useState, useEffect } from "react";
-import default_characters from "../characters.json";
+import { useState, useMemo } from "react";
+import characters from "../characters.json";
 
 export default function Picker({ setCharacter }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [search, setSearch] = useState("");
-  const [characters, setCharacters] = useState(default_characters);
-
-  useEffect(() => {
-    setCharacters(
-      default_characters.filter((char) => {
-        const s = search.toLowerCase();
-        return (
-          s === char.id ||
-          char.name.toLowerCase().includes(s) ||
-          char.character.toLowerCase().includes(s)
-        );
-      })
-    );
-  }, [search]);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -37,6 +23,44 @@ export default function Picker({ setCharacter }) {
   const open = Boolean(anchorEl);
   const id = open ? "picker" : undefined;
 
+  // Memoize the filtered image list items to avoid recomputing them
+  // at every render
+  const memoizedImageListItems = useMemo(() => {
+    const s = search.toLowerCase();
+    return characters.map((c, index) => {
+      if (s === c.id ||
+        c.name.toLowerCase().includes(s) ||
+        c.character.toLowerCase().includes(s)) {
+        return (
+          <ImageListItem
+            key={index}
+            onClick={() => {
+              handleClose();
+              setCharacter(index);
+            }}
+            sx={{
+              cursor: "pointer",
+              "&:hover": {
+                opacity: 0.5,
+              },
+              "&:active": {
+                opacity: 0.8,
+              },
+            }}
+          >
+            <img
+              src={`/img/${c.img}`}
+              srcSet={`/img/${c.img}`}
+              alt={c.name}
+              loading="lazy"
+            />
+          </ImageListItem>
+        )
+      }
+      return null;
+    })
+  }, [search, setCharacter])
+
   return (
     <div>
       <Button
@@ -80,31 +104,7 @@ export default function Picker({ setCharacter }) {
             rowHeight={140}
             className="image-grid"
           >
-            {characters.map((c, index) => (
-              <ImageListItem
-                key={index}
-                onClick={() => {
-                  handleClose();
-                  setCharacter(index);
-                }}
-                sx={{
-                  cursor: "pointer",
-                  "&:hover": {
-                    opacity: 0.5,
-                  },
-                  "&:active": {
-                    opacity: 0.8,
-                  },
-                }}
-              >
-                <img
-                  src={`/img/${c.img}`}
-                  srcSet={`/img/${c.img}`}
-                  alt={c.name}
-                  loading="lazy"
-                />
-              </ImageListItem>
-            ))}
+            {memoizedImageListItems}
           </ImageList>
         </div>
       </Popover>