feat: filters (decentraland#161)

* feat: rarity and gender filters + results count

* chore: added missing translations

* style: reduce padding

* chore: address feedback

* chore: warning

webapp/src/components/AccountPage/AccountPage.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { replace } from 'connected-react-router'
+import { replace, push } from 'connected-react-router'
 import { RouteComponentProps } from 'react-router'
 
 import { RootState } from '../../modules/reducer'
@@ -26,7 +26,8 @@ const mapState = (
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(replace(path))
+  onNavigate: path => dispatch(push(path)),
+  onRedirect: path => dispatch(replace(path))
 })
 
 export default connect(mapState, mapDispatch)(AccountPage)

webapp/src/components/AccountPage/AccountPage.tsx

@@ -17,7 +17,7 @@ import { Props } from './AccountPage.types'
 import './AccountPage.css'
 
 const AccountPage = (props: Props) => {
-  const { address, wallet, isConnecting, onNavigate } = props
+  const { address, wallet, isConnecting, onNavigate, onRedirect } = props
 
   const isCurrentAccount =
     address === undefined || (wallet && wallet.address === address)
@@ -35,9 +35,9 @@ const AccountPage = (props: Props) => {
   // Redirect to signIn if trying to access current account without a wallet
   useEffect(() => {
     if (isCurrentAccount && !isConnecting && !wallet) {
-      onNavigate(locations.signIn())
+      onRedirect(locations.signIn())
     }
-  }, [isCurrentAccount, isConnecting, wallet, onNavigate])
+  }, [isCurrentAccount, isConnecting, wallet, onRedirect])
 
   return (
     <div className="AccountPage">

webapp/src/components/AccountPage/AccountPage.types.ts

@@ -11,8 +11,9 @@ export type Props = {
   wallet: Wallet | null
   isConnecting: boolean
   onNavigate: (path: string) => void
+  onRedirect: (path: string) => void
 }
 
 export type MapStateProps = Pick<Props, 'address' | 'wallet' | 'isConnecting'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
+export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onRedirect'>
 export type MapDispatch = Dispatch<CallHistoryMethodAction>

webapp/src/components/ActivityPage/Transaction/TransactionDetail/TransactionDetail.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import { Loader, Mana, Icon } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import {
@@ -11,6 +10,7 @@ import {
   TransactionStatus,
   Transaction
 } from 'decentraland-dapps/dist/modules/transaction/types'
+import { formatDistanceToNow } from '../../../../lib/date'
 import { locations } from '../../../../modules/routing/locations'
 import { NFTImage } from '../../../NFTImage'
 import { Props } from './Transaction.types'

webapp/src/components/Bid/Bid.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react'
 import { Link } from 'react-router-dom'
 import { Loader, Stats, Mana, Button } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import { locations } from '../../modules/routing/locations'
 import { addressEquals } from '../../modules/wallet/utils'
 import { NFTProvider } from '../NFTProvider'
@@ -11,6 +10,7 @@ import { Address } from '../Address'
 import { AcceptButton } from './AcceptButton'
 import { WarningMessage } from './WarningMessage'
 import { formatMANA } from '../../lib/mana'
+import { formatDistanceToNow } from '../../lib/date'
 import { Props } from './Bid.types'
 import './Bid.css'
 
@@ -59,14 +59,14 @@ const Bid = (props: Props) => {
         <div className="wrapper">
           <div className="info">
             {!isBidder ? (
-              <Stats className="from" title="from">
+              <Stats className="from" title={t('bid.from')}>
                 <Address address={bid.bidder} />
               </Stats>
             ) : null}
-            <Stats title="price">
+            <Stats title={t('bid.price')}>
               <Mana>{formatMANA(bid.price)}</Mana>
             </Stats>
-            <Stats title="time left">
+            <Stats title={t('bid.time_left')}>
               {formatDistanceToNow(+bid.expiresAt)}
             </Stats>
           </div>

webapp/src/components/CategoriesMenu/CategoriesMenu.tsx

@@ -51,6 +51,7 @@ const CategoriesMenu = (props: Props) => {
           Section.WEARABLES_FEET,
           Section.WEARABLES_ACCESORIES,
           Section.WEARABLES_EARRING,
+          Section.WEARABLES_EYEWEAR,
           Section.WEARABLES_HAT,
           Section.WEARABLES_HELMET,
           Section.WEARABLES_MASK,
@@ -86,6 +87,7 @@ const CategoriesMenu = (props: Props) => {
               sections={[
                 Section.WEARABLES_ACCESORIES,
                 Section.WEARABLES_EARRING,
+                Section.WEARABLES_EYEWEAR,
                 Section.WEARABLES_HAT,
                 Section.WEARABLES_HELMET,
                 Section.WEARABLES_MASK,

webapp/src/components/NFTListPage/ArrayFilter/ArrayFilter.css

@@ -0,0 +1,46 @@
+.ArrayFilter {
+  display: flex;
+  flex-direction: column;
+}
+
+.ArrayFilter + .ArrayFilter {
+  margin-top: 14px;
+}
+
+.ArrayFilter .ui.sub.header.name {
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+
+.ArrayFilter .options {
+  display: flex;
+  flex-flow: wrap;
+}
+
+.ArrayFilter .options .option {
+  padding: 5px 12px;
+  background-color: #37333d;
+  border-radius: 16px;
+  text-transform: uppercase;
+  font-weight: 600;
+  cursor: pointer;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.ArrayFilter .options .option.selected {
+  background-color: var(--primary);
+}
+
+@media (max-width: 768px) {
+  .ArrayFilter {
+    margin-bottom: 12px;
+  }
+
+  .ArrayFilter .options .option {
+    font-size: 13px;
+    line-height: 18px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+  }
+}

webapp/src/components/NFTListPage/ArrayFilter/ArrayFilter.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Header } from 'decentraland-ui'
+
+import { Props } from './ArrayFilter.types'
+import './ArrayFilter.css'
+
+const getClasses = (value: string, values: string[]) => {
+  const classes = ['option']
+  if (values.includes(value)) {
+    classes.push('selected')
+  }
+  return classes.join(' ')
+}
+
+const getNewValues = (value: string, values: string[]) => {
+  return values.some(x => x === value)
+    ? values.filter(x => x !== value)
+    : [...values, value]
+}
+
+const ArrayFilter = (props: Props) => {
+  const { name, values, options, onChange } = props
+  return (
+    <div className="ArrayFilter">
+      <Header sub className="name">
+        {name}
+      </Header>
+      <div className="options">
+        {options.map(option => (
+          <div
+            className={getClasses(option.value, values)}
+            onClick={() => onChange(getNewValues(option.value, values))}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ArrayFilter

webapp/src/components/NFTListPage/ArrayFilter/ArrayFilter.types.ts

@@ -0,0 +1,6 @@
+export type Props = {
+  name: string
+  values: string[]
+  options: { value: string; label: string }[]
+  onChange: (newValues: string[]) => void
+}

webapp/src/components/NFTListPage/ArrayFilter/index.ts

@@ -0,0 +1,3 @@
+import ArrayFilter from './ArrayFilter'
+
+export { ArrayFilter }

webapp/src/components/NFTListPage/ClearFilter/ClearFilter.css

@@ -0,0 +1,23 @@
+.ClearFilter {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.ClearFilter .name {
+  display: inline-block;
+  color: var(--primary);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.ClearFilter .close {
+  width: 16px;
+  height: 16px;
+  background-image: url(../../../images/close.svg);
+  background-position: center;
+  background-size: cover;
+  display: inline-block;
+  margin-left: 8px;
+  margin-right: 16px;
+}

webapp/src/components/NFTListPage/ClearFilter/ClearFilter.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { Props } from './ClearFilter.types'
+import './ClearFilter.css'
+
+const ClearFilter = (props: Props) => {
+  const { name, onClear } = props
+  return (
+    <div className="ClearFilter" onClick={onClear}>
+      <div className="name">{name}</div>
+      <div className="close" />
+    </div>
+  )
+}
+
+export default ClearFilter

webapp/src/components/NFTListPage/ClearFilter/ClearFilter.types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  name: string
+  onClear: () => void
+}

webapp/src/components/NFTListPage/ClearFilter/index.ts

@@ -0,0 +1,3 @@
+import ClearFilter from './ClearFilter'
+
+export { ClearFilter }

webapp/src/components/NFTListPage/NFTListPage.container.ts

@@ -13,7 +13,10 @@ import {
   getUIPage,
   getUISection,
   getUISortBy,
-  getUIOnlyOnSale
+  getUIOnlyOnSale,
+  getAssetsCount,
+  getUIWearableRarities,
+  getUIWearableGenders
 } from '../../modules/ui/selectors'
 import { getLoading } from '../../modules/nft/selectors'
 import NFTListPage from './NFTListPage'
@@ -23,6 +26,9 @@ const mapState = (state: RootState): MapStateProps => ({
   page: getUIPage(state),
   section: getUISection(state),
   sortBy: getUISortBy(state),
+  count: getAssetsCount(state),
+  wearableRarities: getUIWearableRarities(state),
+  wearableGenders: getUIWearableGenders(state),
   onlyOnSale: getUIOnlyOnSale(state),
   isLoading: isLoadingType(getLoading(state), FETCH_NFTS_REQUEST)
 })

webapp/src/components/NFTListPage/NFTListPage.css

@@ -63,6 +63,55 @@
   );
 }
 
+.NFTListPage .results {
+  margin: 0px;
+}
+
+.NFTListPage .filters {
+  padding: 16px;
+  background-color: var(--card);
+  border-radius: 16px;
+  margin-bottom: 32px;
+  user-select: none;
+  outline: none;
+  padding-bottom: 8px;
+  margin-top: -8px;
+}
+
+.NFTListPage .open-filters-wrapper {
+  display: inline-block;
+  height: 15px;
+  margin-left: 24px;
+  position: relative;
+  cursor: pointer;
+}
+
+.NFTListPage .open-filters-wrapper .label {
+  color: var(--primary);
+  text-transform: uppercase;
+  margin-right: 30px;
+  font-weight: 500;
+}
+
+.NFTListPage .open-filters {
+  width: 20px;
+  height: 20px;
+  background-image: url(../../images/filters.svg);
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  display: inline-block;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+
+.NFTListPage .open-filters.active {
+  background-image: url(../../images/filters-active.svg);
+  background-size: 20px;
+}
+
 .FiltersModal .CategoriesMenu ul.menu li:hover,
 .FiltersModal .CategoriesMenu ul.menu li.active {
   background-color: var(--secondary-on-modal);
@@ -101,4 +150,7 @@
   .CategoriesMenu ul.menu li {
     width: calc(100% - 32px);
   }
+  .NFTListPage .filters {
+    margin-top: 0px;
+  }
 }