fix(templates): improve search and fix key issues (#8549)

codesandbox · Aug 15, 2024 · 7e89fdf · 7e89fdf
1 parent 706166d
commit 7e89fdf
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/app/src/app/components/Create/CreateBox.tsx b/packages/app/src/app/components/Create/CreateBox.tsx
@@ -82,8 +82,10 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
   if (searchQuery) {
     filteredTemplates = filteredTemplates.filter(template => {
       return (
-        template.title?.toLowerCase().includes(searchQuery) ||
-        template.tags.some(tag => tag.includes(searchQuery))
+        template.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        template.tags.some(tag =>
+          tag.toLowerCase().includes(searchQuery.toLowerCase())
+        )
       );
     });
   }
@@ -272,13 +274,15 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
                       <TemplateList
                         searchQuery={searchQuery}
                         title="Recently used"
+                        key="Recently used"
                         templates={recentlyUsedTemplates}
                         onSelectTemplate={selectTemplate}
                         onOpenTemplate={openTemplate}
                       />
                     )}
                     <TemplateList
                       title="Popular"
+                      key="Popular"
                       searchQuery={searchQuery}
                       templates={featuredTemplates}
                       onSelectTemplate={selectTemplate}
@@ -287,6 +291,7 @@ export const CreateBox: React.FC<CreateBoxProps> = ({
                   </>
                 ) : (
                   <TemplateList
+                    key={filters.join()}
                     searchQuery={searchQuery}
                     templates={filteredTemplates}
                     onSelectTemplate={selectTemplate}

diff --git a/packages/app/src/app/components/Create/TemplateList.tsx b/packages/app/src/app/components/Create/TemplateList.tsx
@@ -41,7 +41,7 @@ export const TemplateList = ({
         <TemplateGrid>
           {templates.map(template => (
             <TemplateCard
-              key={template.id + template.browserSandboxId}
+              key={template.id + template.browserSandboxId + template.title}
               template={template}
               onSelectTemplate={onSelectTemplate}
               onOpenTemplate={onOpenTemplate}