141 lines
3.8 KiB
JavaScript
141 lines
3.8 KiB
JavaScript
import { useQuery, useMutation } from '@apollo/react-hooks'
|
|
import gql from 'graphql-tag'
|
|
import * as R from 'ramda'
|
|
import React, { useState } from 'react'
|
|
|
|
import TitleSection from 'src/components/layout/TitleSection'
|
|
import { fromNamespace, toNamespace, namespaces } from 'src/utils/config'
|
|
|
|
import Section from '../../components/layout/Section'
|
|
|
|
import NotificationsCtx from './NotificationsContext'
|
|
import CryptoBalanceAlerts from './sections/CryptoBalanceAlerts'
|
|
import CryptoBalanceOverrides from './sections/CryptoBalanceOverrides'
|
|
import FiatBalanceAlerts from './sections/FiatBalanceAlerts'
|
|
import FiatBalanceOverrides from './sections/FiatBalanceOverrides'
|
|
import Setup from './sections/Setup'
|
|
import TransactionAlerts from './sections/TransactionAlerts'
|
|
|
|
const GET_INFO = gql`
|
|
query getData {
|
|
config
|
|
machines {
|
|
name
|
|
deviceId
|
|
numberOfCassettes
|
|
}
|
|
cryptoCurrencies {
|
|
code
|
|
display
|
|
}
|
|
}
|
|
`
|
|
|
|
const SAVE_CONFIG = gql`
|
|
mutation Save($config: JSONObject) {
|
|
saveConfig(config: $config)
|
|
}
|
|
`
|
|
|
|
const FIELDS_WIDTH = 130
|
|
|
|
const Notifications = ({
|
|
name: SCREEN_KEY,
|
|
displaySetup = true,
|
|
displayTransactionAlerts = true,
|
|
displayFiatAlerts = true,
|
|
displayCryptoAlerts = true,
|
|
displayOverrides = true,
|
|
displayTitle = true,
|
|
wizard = false
|
|
}) => {
|
|
const [section, setSection] = useState(null)
|
|
const [error, setError] = useState(null)
|
|
const [editingKey, setEditingKey] = useState(null)
|
|
|
|
const { data } = useQuery(GET_INFO)
|
|
|
|
const [saveConfig] = useMutation(SAVE_CONFIG, {
|
|
refetchQueries: ['getData'],
|
|
onCompleted: () => setEditingKey(null),
|
|
onError: error => setError(error)
|
|
})
|
|
|
|
const config = fromNamespace(SCREEN_KEY)(data?.config)
|
|
const machines = data?.machines
|
|
const cryptoCurrencies = data?.cryptoCurrencies
|
|
|
|
const currency = R.path(['fiatCurrency'])(
|
|
fromNamespace(namespaces.LOCALE)(data?.config)
|
|
)
|
|
|
|
const save = R.curry((section, rawConfig) => {
|
|
const config = toNamespace(SCREEN_KEY)(rawConfig)
|
|
setSection(section)
|
|
setError(null)
|
|
return saveConfig({ variables: { config } })
|
|
})
|
|
|
|
const setEditing = (key, state) => {
|
|
if (!state) {
|
|
setError(null)
|
|
}
|
|
setEditingKey(state ? key : null)
|
|
}
|
|
|
|
const isEditing = key => editingKey === key
|
|
const isDisabled = key => editingKey && editingKey !== key
|
|
|
|
const contextValue = {
|
|
save,
|
|
error,
|
|
editingKey,
|
|
data: config,
|
|
currency,
|
|
isEditing,
|
|
isDisabled,
|
|
setEditing,
|
|
setSection,
|
|
machines,
|
|
cryptoCurrencies
|
|
}
|
|
|
|
return (
|
|
<NotificationsCtx.Provider value={contextValue}>
|
|
{displayTitle && <TitleSection title="Notifications" />}
|
|
{displaySetup && (
|
|
<Section title="Setup" error={error && !section}>
|
|
<Setup forceDisable={!!editingKey} wizard={wizard} />
|
|
</Section>
|
|
)}
|
|
{displayTransactionAlerts && (
|
|
<Section title="Transaction alerts" error={error && section === 'tx'}>
|
|
<TransactionAlerts section="tx" fieldWidth={FIELDS_WIDTH} />
|
|
</Section>
|
|
)}
|
|
{displayFiatAlerts && (
|
|
<Section
|
|
title="Fiat balance alerts"
|
|
error={error && section === 'fiat'}>
|
|
<FiatBalanceAlerts section="fiat" max={100} fieldWidth={50} />
|
|
{displayOverrides && <FiatBalanceOverrides section="fiat" />}
|
|
</Section>
|
|
)}
|
|
{displayCryptoAlerts && (
|
|
<Section
|
|
title="Crypto balance alerts"
|
|
error={error && section === 'crypto'}>
|
|
<CryptoBalanceAlerts section="crypto" fieldWidth={FIELDS_WIDTH} />
|
|
{displayOverrides && (
|
|
<CryptoBalanceOverrides
|
|
section="crypto"
|
|
fieldWidth={FIELDS_WIDTH}
|
|
/>
|
|
)}
|
|
</Section>
|
|
)}
|
|
</NotificationsCtx.Provider>
|
|
)
|
|
}
|
|
|
|
export default Notifications
|