Merge remote-tracking branch 'refs/remotes/origin/koni/dev/issue-160'…

… into mythical-dev
Koniverse · Nov 23, 2024 · c28747d · c28747d
2 parents 8d5a5bd + 941fe45
commit c28747d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/ToolArea.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/ToolArea.tsx
@@ -5,7 +5,7 @@ import { NFLRivalCard } from '@subwallet/extension-koni-ui/connector/booka/types
 import { ConditionProcessState } from '@subwallet/extension-koni-ui/Popup/Home/Cards';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import CN from 'classnames';
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import styled from 'styled-components';
 
 import { ToolFilters } from './ToolFiters';
@@ -14,12 +14,12 @@ import { ToolSort } from './ToolSort';
 
 type Props = ThemeProps & {
   setConditionProcess: Dispatch<SetStateAction<ConditionProcessState>>,
+  isSearchAction: boolean,
+  setIsSearchAction: Dispatch<SetStateAction<boolean>>
   listCard: NFLRivalCard[]
 };
 
-const Component = ({ className, setConditionProcess }: Props): React.ReactElement => {
-  const [isSearchAction, setIsSearchAction] = useState(false);
-
+const Component = ({ className, isSearchAction, setConditionProcess, setIsSearchAction }: Props): React.ReactElement => {
   return (
     <div className={className}>
       <ToolSearch

diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/ToolFiters/ToolFiltersModal.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/ToolFiters/ToolFiltersModal.tsx
@@ -8,6 +8,7 @@ import { FilterItems, FilterOption } from '@subwallet/extension-koni-ui/Popup/Ho
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { Checkbox, ModalContext, SwModal } from '@subwallet/react-ui';
 import CN from 'classnames';
+import _ from 'lodash';
 import React, { Dispatch, SetStateAction, useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -53,7 +54,7 @@ const Component = ({ className, filterItems, handleCancel, handleReset, onConfir
   }, [handleCancel, inactiveModal]);
 
   const onReset = useCallback(() => {
-    setTmpItemsSelected(DEFAULT_FILTER_OPTIONS_SELECTED);
+    setTmpItemsSelected(_.cloneDeep(DEFAULT_FILTER_OPTIONS_SELECTED));
     setNumberOptionsSelected(0);
     setConditionProcess((prev) => ({
       ...prev,

diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/ToolFiters/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/ToolFiters/index.tsx
@@ -7,6 +7,7 @@ import { ConditionProcessState } from '@subwallet/extension-koni-ui/Popup/Home/C
 import { FilterOptionsSelected, ToolFiltersModal } from '@subwallet/extension-koni-ui/Popup/Home/Cards/ToolFiters/ToolFiltersModal';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ModalContext } from '@subwallet/react-ui';
+import _ from 'lodash';
 import React, { Dispatch, SetStateAction, useCallback, useContext, useState } from 'react';
 import styled from 'styled-components';
 
@@ -53,7 +54,7 @@ const Component = ({ className, setConditionProcess }: Props): React.ReactElemen
   const { t } = useTranslation();
   const { activeModal } = useContext(ModalContext);
   const [numberOptionsSelected, setNumberOptionsSelected] = useState<number>(0);
-  const [tmpItemsSelected, setTmpItemsSelected] = useState<FilterOptionsSelected>(DEFAULT_FILTER_OPTIONS_SELECTED);
+  const [tmpItemsSelected, setTmpItemsSelected] = useState<FilterOptionsSelected>(_.cloneDeep(DEFAULT_FILTER_OPTIONS_SELECTED));
 
   const [itemsSelected, setItemsSelected] = useState<FilterOptionsSelected>(DEFAULT_FILTER_OPTIONS_SELECTED);
 

diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/ToolSort/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/ToolSort/index.tsx
@@ -15,6 +15,13 @@ type Props = ThemeProps & {
 
 const modalId = 'sort-modal';
 
+const rarityOrder: Record<string, number> = {
+  common: 1,
+  rare: 2,
+  epic: 3,
+  legendary: 4
+};
+
 const Component = ({ className, setConditionProcess }: Props): React.ReactElement => {
   const { activeModal } = useContext(ModalContext);
   const [sortedType, setSortedType] = useState<number>(0);
@@ -83,7 +90,7 @@ const Component = ({ className, setConditionProcess }: Props): React.ReactElemen
         setConditionProcess((pre) => {
           return {
             ...pre,
-            sort: (prev) => prev.sort((a, b) => a.firstName.localeCompare(b.firstName)).reverse()
+            sort: (prev) => prev.sort((a, b) => rarityOrder[b.rarity] - rarityOrder[a.rarity])
           };
         });
         setSortedType(3);
@@ -96,7 +103,7 @@ const Component = ({ className, setConditionProcess }: Props): React.ReactElemen
         setConditionProcess((pre) => {
           return {
             ...pre,
-            sort: (prev) => prev.sort((a, b) => a.firstName.localeCompare(b.firstName))
+            sort: (prev) => prev.sort((a, b) => rarityOrder[a.rarity] - rarityOrder[b.rarity])
           };
         });
         setSortedType(4);

diff --git a/packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx b/packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx
@@ -39,6 +39,7 @@ const Component = ({ className }: Props): React.ReactElement => {
   const [selectedCard, setSelectedCard] = useState<NFLRivalCard | undefined>(undefined);
   const [cardItems, setCardItems] = useState<NFLRivalCard[]>([]);
   const [conditionProcess, setConditionProcess] = useState<ConditionProcessState>(ConditionProcessDefault);
+  const [isSearchAction, setIsSearchAction] = useState(false);
   const initCardItems = useRef<NFLRivalCard[]>([]);
 
   useEffect(() => {
@@ -111,8 +112,10 @@ const Component = ({ className }: Props): React.ReactElement => {
         />
 
         <ToolArea
+          isSearchAction={isSearchAction}
           listCard={cardItems}
           setConditionProcess={setConditionProcess}
+          setIsSearchAction={setIsSearchAction}
         />
 
         {cardItems.length
@@ -135,7 +138,7 @@ const Component = ({ className }: Props): React.ReactElement => {
           : (
             <EmptyListContent
               className={'empty-list-content'}
-              content={t('Change your filter and try again')}
+              content={isSearchAction ? t('Change your search and try again') : t('Change your filter and try again')}
               title={t('oops! no cards found')}
             />
           )