feat(nfts): query params wip

blockchain · May 2, 2022 · ba3f5b9 · ba3f5b9
1 parent 4085bfd
commit ba3f5b9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagas.ts
@@ -1,7 +1,7 @@
 import { NftFilterFormValuesType } from 'blockchain-wallet-v4-frontend/src/scenes/Nfts/NftFilter'
 import { addDays, addMinutes, getUnixTime } from 'date-fns'
 import { ethers, Signer } from 'ethers'
-import { call, put, select } from 'redux-saga/effects'
+import { all, call, put, select, take } from 'redux-saga/effects'
 
 import { Exchange, Remote } from '@core'
 import { APIType } from '@core/network/api'
@@ -27,6 +27,7 @@ import { Await } from '@core/types'
 import { errorHandler } from '@core/utils'
 import { getPrivateKey } from '@core/utils/eth'
 import { actions, selectors } from 'data'
+import { actionTypes } from 'data/form/actionTypes'
 import { ModalName } from 'data/modals/types'
 import { Analytics } from 'data/types'
 import { promptForSecondPassword } from 'services/sagas'
@@ -626,13 +627,19 @@ export default ({ api }: { api: APIType }) => {
       const [hash, query] = url.href.split('#')[1].split('?')
       // @ts-ignore
       const params = Object.fromEntries(new URLSearchParams(query))
+      // FOR SALE
       if (action.meta.field === 'forSale') {
         params.forSale = action.payload
       }
+      // TRAITS
       if (!nonTraitFilters.includes(action.meta.field)) {
-        params.traits = params.traits
-          ? (params.traits += `&${action.meta.field}=${action.payload}`)
-          : `${action.meta.field}=${action.payload}`
+        const traits = params.traits ? JSON.parse(params.traits) : []
+        if (action.payload) {
+          if (traits.includes(action.meta.field)) return
+          params.traits = JSON.stringify([...traits, action.meta.field])
+        } else {
+          params.traits = JSON.stringify(traits.filter((t) => t !== action.meta.field))
+        }
       }
 
       const newHash = `${hash}?${Object.entries(params)
@@ -693,11 +700,18 @@ export default ({ api }: { api: APIType }) => {
       // @ts-ignore
       const params = Object.fromEntries(new URLSearchParams(query))
 
+      yield put(actions.form.reset('nftFilter'))
+
       if (params.forSale !== undefined) {
         yield put(actions.form.change('nftFilter', 'forSale', Boolean(params.forSale)))
       }
       if (params.traits !== undefined) {
-        debugger
+        const traits = JSON.parse(params.traits)
+        yield all(
+          traits.map(function* (trait) {
+            yield put(actions.form.change('nftFilter', trait, true))
+          })
+        )
       }
     }
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsTemplate.tsx b/packages/blockchain-wallet-v4-frontend/src/layouts/Nfts/NftsTemplate.tsx
@@ -34,8 +34,7 @@ const Page = styled.div`
 
 const NftsTemplate: React.FC<Props> = (props) => {
   useEffect(() => {
-    console.log('here')
-    props.nftsActions.handleRouterChange({ location: { pathname: window.location.pathname } })
+    props.nftsActions.handleRouterChange({ location: { pathname: window.location.hash } })
   }, [window.location.hash, props.nftsActions])
 
   return (

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/Address.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/Address.tsx
@@ -18,6 +18,8 @@ import AddressItems from './AddressItems'
 
 const NftAddress: React.FC<Props> = ({ formActions, formValues, pathname }) => {
   const address = pathname.split('/nfts/address/')[1]
+  const tab = window.location.hash.split('?')[1]
+  debugger
 
   const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>('ITEMS')
   const [collections, setCollections] = useState([] as OwnerQuery['assets'][0]['collection'][])

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
@@ -4,6 +4,7 @@ import { connect, ConnectedProps } from 'react-redux'
 import { colors, Icon } from '@blockchain-com/constellation'
 import { IconCloseCircle } from '@blockchain-com/icons'
 import { bindActionCreators } from '@reduxjs/toolkit'
+import { routerActions } from 'connected-react-router'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
@@ -50,17 +51,25 @@ const TraitGridFilters: React.FC<Props> = ({
   formValues,
   hasSomeFilters,
   minMaxFilters,
-  setActiveTab,
   traitFilters
 }) => {
+  const route = window.location.hash.split('?')[0].substr(1)
+  console.log(route)
+
   return (
     <>
       <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
         <TabMenu style={{ marginBottom: '12px', width: 'fit-content' }}>
-          <TabMenuItem selected={activeTab === 'ITEMS'} onClick={() => setActiveTab('ITEMS')}>
+          <TabMenuItem
+            selected={activeTab === 'ITEMS'}
+            onClick={() => routerActions.push(`${route}?tab=ITEMS`)}
+          >
             <FormattedMessage id='copy.items' defaultMessage='Items' />
           </TabMenuItem>
-          <TabMenuItem selected={activeTab === 'EVENTS'} onClick={() => setActiveTab('EVENTS')}>
+          <TabMenuItem
+            selected={activeTab === 'EVENTS'}
+            onClick={() => routerActions.push(`${route}?tab=EVENTS`)}
+          >
             <FormattedMessage id='copy.activity' defaultMessage='Activity' />
           </TabMenuItem>
         </TabMenu>