fix: default to allcategories when search params is not from recommended (#2653)

web/app/components/explore/category.tsx

@@ -12,7 +12,11 @@ export type ICategoryProps = {
   className?: string
   list: AppCategory[]
   value: string
-  onChange: (value: AppCategory | '') => void
+  onChange: (value: AppCategory | string) => void
+  /**
+   * default value for searchparam 'category' in en
+   */
+  allCategoriesEn: string
 }
 
 const Category: FC<ICategoryProps> = ({
@@ -20,17 +24,24 @@ const Category: FC<ICategoryProps> = ({
   list,
   value,
   onChange,
+  allCategoriesEn,
 }) => {
   const { t } = useTranslation()
+  const isAllCategories = !list.includes(value)
+
+  const itemClassName = (isSelected: boolean) =>
+    cn(
+      isSelected
+        ? 'bg-white text-primary-600 border-gray-200 font-semibold shadow-[0px_1px_2px_rgba(16,24,40,0.05)]'
+        : 'border-transparent font-medium',
+      'flex items-center h-7 px-3 border cursor-pointer rounded-lg',
+    )
 
-  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium', 'flex items-center h-7 px-3 border cursor-pointer rounded-lg')
-  const itemStyle = (isSelected: boolean) => isSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}
   return (
     <div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
       <div
-        className={itemClassName(value === '')}
-        style={itemStyle(value === '')}
-        onClick={() => onChange('')}
+        className={itemClassName(isAllCategories)}
+        onClick={() => onChange(allCategoriesEn)}
       >
         {t('explore.apps.allCategories')}
       </div>
@@ -38,7 +49,6 @@ const Category: FC<ICategoryProps> = ({
         <div
           key={name}
           className={itemClassName(name === value)}
-          style={itemStyle(name === value)}
           onClick={() => onChange(name)}
         >
           {categoryI18n[name] ? t(`explore.category.${name}`) : name}
@@ -47,4 +57,5 @@ const Category: FC<ICategoryProps> = ({
     </div>
   )
 }
+
 export default React.memo(Category)