refactor: reuse tx to csv gql query and overall function simplification

This commit is contained in:
José Oliveira 2021-08-26 13:23:52 +01:00 committed by Josh Harvey
parent c5d9beea04
commit ce161d45d6
2 changed files with 30 additions and 39 deletions

View file

@ -134,26 +134,22 @@ const SIMPLIFIED = 'simplified'
const LogsDownloaderPopover = ({ const LogsDownloaderPopover = ({
name, name,
queries, query,
args, args,
title, title,
getLogs, getLogs,
timezone, timezone,
getSimplifiedLogs simplified
}) => { }) => {
const [selectedRadio, setSelectedRadio] = useState(ALL) const [selectedRadio, setSelectedRadio] = useState(ALL)
const [selectedAdvancedRadio, setSelectedAdvancedRadio] = useState(ADVANCED) const [selectedAdvancedRadio, setSelectedAdvancedRadio] = useState(ADVANCED)
const [range, setRange] = useState({ from: null, until: null }) const [range, setRange] = useState({ from: null, until: null })
const [anchorEl, setAnchorEl] = useState(null) const [anchorEl, setAnchorEl] = useState(null)
const [fetchLogs] = useLazyQuery(queries[0], { const [fetchLogs] = useLazyQuery(query, {
onCompleted: data => createLogsFile(getLogs(data), range) onCompleted: data => createLogsFile(getLogs(data), range)
}) })
const [fetchSimplifiedLogs] = useLazyQuery(queries[1], {
onCompleted: data => createLogsFile(getSimplifiedLogs(data), range)
})
const classes = useStyles() const classes = useStyles()
const dateRangePickerClasses = { const dateRangePickerClasses = {
@ -170,7 +166,6 @@ const LogsDownloaderPopover = ({
const handleAdvancedRadioButtons = evt => { const handleAdvancedRadioButtons = evt => {
const selectedAdvancedRadio = R.path(['target', 'value'])(evt) const selectedAdvancedRadio = R.path(['target', 'value'])(evt)
setSelectedAdvancedRadio(selectedAdvancedRadio) setSelectedAdvancedRadio(selectedAdvancedRadio)
if (selectedAdvancedRadio === ALL) setRange({ from: null, until: null })
} }
const handleRangeChange = useCallback( const handleRangeChange = useCallback(
@ -181,12 +176,11 @@ const LogsDownloaderPopover = ({
) )
const downloadLogs = (range, args) => { const downloadLogs = (range, args) => {
const fetch =
selectedAdvancedRadio === SIMPLIFIED ? fetchSimplifiedLogs : fetchLogs
if (selectedRadio === ALL) { if (selectedRadio === ALL) {
fetch({ fetchLogs({
variables: { variables: {
...args ...args,
simplified: selectedAdvancedRadio === SIMPLIFIED
} }
}) })
} }
@ -196,11 +190,12 @@ const LogsDownloaderPopover = ({
if (moment(range.from).isSame(range.until, 'day')) range.until = moment() if (moment(range.from).isSame(range.until, 'day')) range.until = moment()
if (selectedRadio === RANGE) { if (selectedRadio === RANGE) {
fetch({ fetchLogs({
variables: { variables: {
...args, ...args,
from: range.from, from: range.from,
until: range.until until: range.until,
simplified: selectedAdvancedRadio === SIMPLIFIED
} }
}) })
} }
@ -235,7 +230,10 @@ const LogsDownloaderPopover = ({
const radioButtonOptions = [ const radioButtonOptions = [
{ display: 'All logs', code: ALL }, { display: 'All logs', code: ALL },
{ display: 'Date range', code: RANGE }, { display: 'Date range', code: RANGE }
]
const advancedRadioButtonOptions = [
{ display: 'Advanced logs', code: ADVANCED }, { display: 'Advanced logs', code: ADVANCED },
{ display: 'Simplified logs', code: SIMPLIFIED } { display: 'Simplified logs', code: SIMPLIFIED }
] ]
@ -259,7 +257,7 @@ const LogsDownloaderPopover = ({
<RadioGroup <RadioGroup
name="logs-select" name="logs-select"
value={selectedRadio} value={selectedRadio}
options={radioButtonOptions.slice(0, 2)} options={radioButtonOptions}
ariaLabel="logs-select" ariaLabel="logs-select"
onChange={handleRadioButtons} onChange={handleRadioButtons}
className={classes.radioButtons} className={classes.radioButtons}
@ -284,16 +282,18 @@ const LogsDownloaderPopover = ({
/> />
</div> </div>
)} )}
<div className={classes.radioButtonsContainer}> {simplified && (
<RadioGroup <div className={classes.radioButtonsContainer}>
name="simplified-tx-logs" <RadioGroup
value={selectedAdvancedRadio} name="simplified-tx-logs"
options={radioButtonOptions.slice(2, 4)} value={selectedAdvancedRadio}
ariaLabel="simplified-tx-logs" options={advancedRadioButtonOptions}
onChange={handleAdvancedRadioButtons} ariaLabel="simplified-tx-logs"
className={classes.radioButtons} onChange={handleAdvancedRadioButtons}
/> className={classes.radioButtons}
</div> />
</div>
)}
<div className={classes.download}> <div className={classes.download}>
<Link color="primary" onClick={() => downloadLogs(range, args)}> <Link color="primary" onClick={() => downloadLogs(range, args)}>
Download Download

View file

@ -33,12 +33,14 @@ const GET_DATA = gql`
const GET_TRANSACTIONS_CSV = gql` const GET_TRANSACTIONS_CSV = gql`
query transactions( query transactions(
$simplified: Boolean
$limit: Int $limit: Int
$from: Date $from: Date
$until: Date $until: Date
$timezone: String $timezone: String
) { ) {
transactionsCsv( transactionsCsv(
simplified: $simplified
limit: $limit limit: $limit
from: $from from: $from
until: $until until: $until
@ -56,12 +58,6 @@ const GET_TRANSACTION_FILTERS = gql`
} }
` `
const GET_SIMPLIFIED_TRANSACTIONS_CSV = gql`
query transactions($limit: Int, $from: Date, $until: Date) {
simplifiedTransactionsCsv(limit: $limit, from: $from, until: $until)
}
`
const GET_TRANSACTIONS = gql` const GET_TRANSACTIONS = gql`
query transactions( query transactions(
$limit: Int $limit: Int
@ -282,14 +278,9 @@ const Transactions = () => {
<LogsDowloaderPopover <LogsDowloaderPopover
title="Download logs" title="Download logs"
name="transactions" name="transactions"
queries={[ query={GET_TRANSACTIONS_CSV}
GET_TRANSACTIONS_CSV,
GET_SIMPLIFIED_TRANSACTIONS_CSV
]}
getLogs={logs => R.path(['transactionsCsv'])(logs)} getLogs={logs => R.path(['transactionsCsv'])(logs)}
getSimplifiedLogs={logs => simplified
R.path(['simplifiedTransactionsCsv'])(logs)
}
/> />
</div> </div>
)} )}