feat: add in clear all filter button

blockchain · May 6, 2022 · 4aadb8a · 4aadb8a
1 parent 265a67d
commit 4aadb8a
Showing 1 changed file with 19 additions and 0 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx
@@ -46,6 +46,12 @@ const ActiveTraitFilter = styled.div`
   padding: 12px 16px;
 `
 
+const ClearAll = styled(ActiveTraitFilter)`
+  cursor: pointer;
+  background: ${colors.blue000};
+  border: 1px transparent;
+`
+
 const TraitGrid = styled.div<{ hasSomeFilters: boolean }>`
   display: ${(props) => (props.hasSomeFilters ? 'flex' : 'none')};
   margin-top: ${(props) => (props.hasSomeFilters ? '8px' : '0')};
@@ -92,6 +98,14 @@ const TraitGridFilters: React.FC<Props> = ({
       Object.keys(formValues).some((key) => Object.keys(formValues[key]).some(Boolean))) ||
     false
 
+  const clearAllFilters = () => {
+    if (formValues && hasSomeFilters) {
+      Object.keys(formValues).forEach((key) => {
+        formActions.change('nftFilter', key, undefined)
+      })
+    }
+  }
+
   useEffect(() => {
     if (isRefreshRotating) {
       setTimeout(() => {
@@ -314,6 +328,11 @@ const TraitGridFilters: React.FC<Props> = ({
                 })
             })
           : null}
+        <ClearAll onClick={clearAllFilters} data-e2e='clear-all'>
+          <Text size='18px' color={colors.blue600}>
+            Clear All
+          </Text>
+        </ClearAll>
         {/* analyticsActions.trackEvent({
                   key: Analytics.NFT_FILTER_CLEAR_ALL_CLICKED,
                   properties: {}