feat(nfts): query params

packages/blockchain-wallet-v4-frontend/src/data/components/nfts/sagas.ts

@@ -631,6 +631,9 @@ export default ({ api }: { api: APIType }) => {
       if (action.meta.field === 'forSale') {
         params.forSale = action.payload
       }
+      if (action.meta.field === 'event') {
+        params.event = action.payload
+      }
       // TRAITS
       if (!nonTraitFilters.includes(action.meta.field)) {
         const traits = params.traits ? JSON.parse(params.traits) : []
@@ -705,6 +708,9 @@ export default ({ api }: { api: APIType }) => {
       if (params.forSale !== undefined) {
         yield put(actions.form.change('nftFilter', 'forSale', Boolean(params.forSale)))
       }
+      if (params.event !== undefined) {
+        yield put(actions.form.change('nftFilter', 'event', params.event))
+      }
       if (params.traits !== undefined) {
         const traits = JSON.parse(params.traits)
         yield all(

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/Address.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { Dispatch } from '@reduxjs/toolkit'
 import { bindActionCreators, compose } from 'redux'
@@ -18,16 +18,20 @@ 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 params = new URLSearchParams(window.location.hash.split('?')[1])
+  const tab = params.get('tab') === 'EVENTS' ? 'EVENTS' : 'ITEMS'
 
-  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>('ITEMS')
+  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
   const [collections, setCollections] = useState([] as OwnerQuery['assets'][0]['collection'][])
 
   const minMaxFilters = getMinMaxFilters(formValues)
   const collectionFilter = getCollectionFilter(formValues, collections)
   const eventFilter = getEventFilter(formValues)
 
+  useEffect(() => {
+    setActiveTab(tab)
+  }, [tab])
+
   if (!address) return null
 
   const hasSomeFilters =

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect, ConnectedProps } from 'react-redux'
 import { Icon } from '@blockchain-com/constellation'
 import { IconCamera, IconComputer, IconGlobe } from '@blockchain-com/icons'
@@ -14,7 +14,6 @@ import {
   EventFilterFields,
   useCollectionsQuery
 } from 'generated/graphql.types'
-import { media } from 'services/styles'
 
 import { CollectionHeader, event_types, GridWrapper, NftBannerWrapper } from '../components'
 import NftError from '../components/NftError'
@@ -59,8 +58,10 @@ const LinksContainer = styled.div`
 
 const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) => {
   const { slug } = rest.computedMatch.params
+  const params = new URLSearchParams(window.location.hash.split('?')[1])
+  const tab = params.get('tab') === 'EVENTS' ? 'EVENTS' : 'ITEMS'
 
-  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>('ITEMS')
+  const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
 
   const [collectionsQuery] = useCollectionsQuery({
     variables: { filter: [{ field: CollectionFilterFields.Slug, value: slug }] }
@@ -79,6 +80,10 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
     ? collectionsQuery.data.collections[0]
     : undefined
 
+  useEffect(() => {
+    setActiveTab(tab)
+  }, [tab])
+
   if (collectionsQuery.error)
     return (
       <div style={{ marginTop: '40px' }}>

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/NftFilter/index.tsx

@@ -28,6 +28,7 @@ const Wrapper = styled.div<{ isOpen: boolean }>`
   position: sticky;
   transition: width 0.3s ease;
   width: ${(props) => (props.isOpen ? '300px' : '20px')};
+  min-width: ${(props) => (props.isOpen ? '300px' : '20px')};
   margin-right: 20px;
   height: calc(100vh - ${FIXED_HEADER_HEIGHT}px);
   overflow: scroll;

packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx

@@ -4,7 +4,6 @@ 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'
 
@@ -51,10 +50,10 @@ const TraitGridFilters: React.FC<Props> = ({
   formValues,
   hasSomeFilters,
   minMaxFilters,
+  routerActions,
   traitFilters
 }) => {
   const route = window.location.hash.split('?')[0].substr(1)
-  console.log(route)
 
   return (
     <>
@@ -249,7 +248,8 @@ const TraitGridFilters: React.FC<Props> = ({
   )
 }
 const mapDispatchToProps = (dispatch) => ({
-  analyticsActions: bindActionCreators(actions.analytics, dispatch)
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
+  routerActions: bindActionCreators(actions.router, dispatch)
 })
 const connector = connect(null, mapDispatchToProps)