refactor: pull up component

new-lamassu-admin/src/components/SearchFilter.js

@@ -0,0 +1,41 @@
+import { makeStyles } from '@material-ui/core'
+import React from 'react'
+
+import Chip from 'src/components/Chip'
+import { P } from 'src/components/typography'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+
+import { chipStyles, styles } from './SearchFilter.styles'
+
+const useChipStyles = makeStyles(chipStyles)
+const useStyles = makeStyles(styles)
+
+const SearchFilter = ({ filters, onFilterDelete, setFilters }) => {
+  const chipClasses = useChipStyles()
+  const classes = useStyles()
+
+  return (
+    <>
+      <P className={classes.text}>{'Filters:'}</P>
+      <div>
+        {filters.map((f, idx) => (
+          <Chip
+            key={idx}
+            classes={chipClasses}
+            label={`${f.type}: ${f.value}`}
+            onDelete={() => onFilterDelete(f)}
+            deleteIcon={<CloseIcon className={classes.button} />}
+          />
+        ))}
+        <Chip
+          classes={chipClasses}
+          label={`Delete filters`}
+          onDelete={() => setFilters([])}
+          deleteIcon={<CloseIcon className={classes.button} />}
+        />
+      </div>
+    </>
+  )
+}
+
+export default SearchFilter

new-lamassu-admin/src/components/SearchFilter.styles.js

@@ -0,0 +1,45 @@
+import {
+  primaryColor,
+  zircon,
+  smallestFontSize,
+  inputFontFamily,
+  inputFontWeight,
+  spacer
+} from 'src/styling/variables'
+
+const chipStyles = {
+  root: {
+    borderRadius: spacer / 2,
+    marginTop: spacer / 2,
+    marginRight: spacer / 4,
+    marginBottom: spacer / 2,
+    marginLeft: spacer / 4,
+    height: spacer * 3,
+    backgroundColor: zircon,
+    '&:hover, &:focus, &:active': {
+      backgroundColor: zircon
+    }
+  },
+  label: {
+    fontSize: smallestFontSize,
+    fontWeight: inputFontWeight,
+    fontFamily: inputFontFamily,
+    paddingRight: spacer / 2,
+    paddingLeft: spacer / 2,
+    color: primaryColor
+  }
+}
+
+const styles = {
+  button: {
+    width: 8,
+    height: 8,
+    marginLeft: 8
+  },
+  text: {
+    marginTop: 0,
+    marginBottom: 0
+  }
+}
+
+export { chipStyles, styles }

new-lamassu-admin/src/pages/Customers/Customers.js

@@ -5,20 +5,15 @@ import * as R from 'ramda'
 import React, { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import Chip from 'src/components/Chip'
 import SearchBox from 'src/components/SearchBox'
+import SearchFilter from 'src/components/SearchFilter'
 import TitleSection from 'src/components/layout/TitleSection'
-import { P } from 'src/components/typography'
 import baseStyles from 'src/pages/Logs.styles'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
 import { fromNamespace, namespaces } from 'src/utils/config'
 
-import { chipStyles } from '../Transactions/Transactions.styles'
-
 import CustomersList from './CustomersList'
-import styles from './CustomersList.styles'
 
 const GET_CUSTOMER_FILTERS = gql`
   query filters {
@@ -54,13 +49,9 @@ const GET_CUSTOMERS = gql`
   }
 `
 
-const useStyles = makeStyles(styles)
-const useChipStyles = makeStyles(chipStyles)
 const useBaseStyles = makeStyles(baseStyles)
 
 const Customers = () => {
-  const classes = useStyles()
-  const chipClasses = useChipStyles()
   const baseStyles = useBaseStyles()
   const history = useHistory()
 
@@ -107,13 +98,6 @@ const Customers = () => {
       id: filtersObject.id
     })
 
-    console.log({
-      phone: filtersObject.phone,
-      name: filtersObject.name,
-      address: filtersObject.address,
-      id: filtersObject.id
-    })
-
     refetch && refetch()
   }
 
@@ -146,26 +130,11 @@ const Customers = () => {
         ]}
       />
       {filters.length > 0 && (
-        <>
+        <SearchFilter
-          <P className={classes.text}>{'Filters:'}</P>
+          filters={filters}
-          <div>
+          onFilterDelete={onFilterDelete}
-            {filters.map((f, idx) => (
+          setFilters={setFilters}
-              <Chip
+        />
-                key={idx}
-                classes={chipClasses}
-                label={`${f.type}: ${f.value}`}
-                onDelete={() => onFilterDelete(f)}
-                deleteIcon={<CloseIcon className={classes.button} />}
-              />
-            ))}
-            <Chip
-              classes={chipClasses}
-              label={`Delete filters`}
-              onDelete={() => setFilters([])}
-              deleteIcon={<CloseIcon className={classes.button} />}
-            />
-          </div>
-        </>
       )}
       <CustomersList
         data={customersData}

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -7,24 +7,21 @@ import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import Chip from 'src/components/Chip'
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import SearchBox from 'src/components/SearchBox'
+import SearchFilter from 'src/components/SearchFilter'
 import Title from 'src/components/Title'
 import DataTable from 'src/components/tables/DataTable'
-import { P } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
 import { ReactComponent as CustomerLinkIcon } from 'src/styling/icons/month arrows/right.svg'
 import { formatDate } from 'src/utils/timezones'
 
 import DetailsRow from './DetailsCard'
-import { mainStyles, chipStyles } from './Transactions.styles'
+import { mainStyles } from './Transactions.styles'
 import { getStatus } from './helper'
 
 const useStyles = makeStyles(mainStyles)
-const useChipStyles = makeStyles(chipStyles)
 
 const NUM_LOG_RESULTS = 1000
 
@@ -118,7 +115,6 @@ const GET_TRANSACTIONS = gql`
 const Transactions = () => {
   const classes = useStyles()
   const history = useHistory()
-  const chipClasses = useChipStyles()
 
   const [filters, setFilters] = useState([])
   const { data: filtersResponse, loading: loadingFilters } = useQuery(
@@ -300,26 +296,11 @@ const Transactions = () => {
         </div>
       </div>
       {filters.length > 0 && (
-        <>
+        <SearchFilter
-          <P className={classes.text}>{'Filters:'}</P>
+          filters={filters}
-          <div>
+          onFilterDelete={onFilterDelete}
-            {filters.map((f, idx) => (
+          setFilters={setFilters}
-              <Chip
+        />
-                key={idx}
-                classes={chipClasses}
-                label={`${f.type}: ${f.value}`}
-                onDelete={() => onFilterDelete(f)}
-                deleteIcon={<CloseIcon className={classes.button} />}
-              />
-            ))}
-            <Chip
-              classes={chipClasses}
-              label={`Delete filters`}
-              onDelete={() => setFilters([])}
-              deleteIcon={<CloseIcon className={classes.button} />}
-            />
-          </div>
-        </>
       )}
       <DataTable
         loading={loadingTransactions && configLoading}

new-lamassu-admin/src/pages/Transactions/Transactions.styles.js

@@ -73,10 +73,6 @@ const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
   buttonsWrapper,
-  text: {
-    marginTop: 0,
-    marginBottom: 0
-  },
   headerLabels: {
     display: 'flex',
     flexDirection: 'row',
@@ -115,11 +111,6 @@ const mainStyles = {
     marginLeft: 10,
     paddingLeft: 5,
     paddingRight: 5
-  },
-  button: {
-    width: 8,
-    height: 8,
-    marginLeft: 8
   }
 }