diff --git a/new-lamassu-admin/src/components/layout/Header.js b/new-lamassu-admin/src/components/layout/Header.js index ce5078c8..b5424936 100644 --- a/new-lamassu-admin/src/components/layout/Header.js +++ b/new-lamassu-admin/src/components/layout/Header.js @@ -1,7 +1,7 @@ import { makeStyles } from '@material-ui/core/styles' import classnames from 'classnames' import React, { memo, useState } from 'react' -import { NavLink } from 'react-router-dom' +import { NavLink, useHistory } from 'react-router-dom' import { Link } from 'src/components/buttons' import { H4 } from 'src/components/typography' @@ -38,9 +38,14 @@ const Subheader = ({ item, classes }) => { const Header = memo(({ tree }) => { const [open, setOpen] = useState(false) const [active, setActive] = useState() + + const history = useHistory() const classes = useStyles() - const onPaired = _name => {} + const onPaired = machine => { + setOpen(false) + history.push(`/maintenance/machine-status/${machine.deviceId}`) + } return (
diff --git a/new-lamassu-admin/src/components/tables/DataTable.js b/new-lamassu-admin/src/components/tables/DataTable.js index 3709f71b..54984226 100644 --- a/new-lamassu-admin/src/components/tables/DataTable.js +++ b/new-lamassu-admin/src/components/tables/DataTable.js @@ -92,6 +92,7 @@ const DataTable = ({ Details, className, expandable, + shouldStartExpanded, onClick, ...props }) => { @@ -128,7 +129,10 @@ const DataTable = ({ elements={elements} data={data[index]} Details={Details} - expanded={index === expanded} + expanded={ + index === expanded || + (shouldStartExpanded && shouldStartExpanded(data[index])) + } expandRow={expandRow} expandable={expandable} onClick={onClick} diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js index a6d7a1e9..c53121f2 100644 --- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js +++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js @@ -5,15 +5,14 @@ import { Form, Formik, FastField } from 'formik' import gql from 'graphql-tag' import QRCode from 'qrcode.react' import * as R from 'ramda' -import React, { memo, useEffect } from 'react' -import { useSetState, useCounter, useBoolean, useLifecycles } from 'react-use' +import React, { memo, useState } from 'react' import * as Yup from 'yup' import Title from 'src/components/Title' import { Button } from 'src/components/buttons' import { TextInput } from 'src/components/inputs/formik' import Sidebar from 'src/components/layout/Sidebar' -import { Info2, P, Info3 } from 'src/components/typography' +import { Info2, P } from 'src/components/typography' import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg' import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg' import { primaryColor } from 'src/styling/variables' @@ -38,31 +37,11 @@ const useStyles = makeStyles(styles) const getSize = R.compose(R.length, R.pathOr([], ['machines'])) -function usePairDevice({ name, count }) { - const [on, toggle] = useBoolean(false) - const { data, stopPolling, startPolling } = useQuery(GET_MACHINES) - const size = getSize(data) +const QrCodeComponent = ({ classes, qrCode, name, count, onPaired }) => { + const { data } = useQuery(GET_MACHINES, { pollInterval: 10000 }) - useLifecycles(() => startPolling(10000), stopPolling) - useEffect(() => - size > count && data?.machines?.some(m => m.name === name) - ? toggle(true) - : undefined - ) - - return [on] -} - -const QrCodeComponent = ({ classes, payload, close, onPaired }) => { - const { qrcode, count, name } = payload - const [paired] = usePairDevice({ name, count }) - - useEffect(() => { - if (paired) { - onPaired(name) - setTimeout(() => close(), 3000) - } - }, [close, name, onPaired, paired]) + const addedMachine = data?.machines?.find(m => m.name === name) + if (getSize(data) > count && addedMachine) onPaired(addedMachine) return ( <> @@ -71,7 +50,7 @@ const QrCodeComponent = ({ classes, payload, close, onPaired }) => {
- +
@@ -85,7 +64,6 @@ const QrCodeComponent = ({ classes, payload, close, onPaired }) => { machine.

- {paired && ✓ Machine has been successfully paired}
@@ -102,10 +80,11 @@ const validationSchema = Yup.object().shape({ .max(50, 'Too long') }) -const MachineNameComponent = ({ nextStep, classes, setPayload }) => { +const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { const [register] = useMutation(SAVE_CONFIG, { onCompleted: ({ createPairingTotem }) => { - setPayload({ qrcode: createPairingTotem }) + console.log(createPairingTotem) + setQrCode(createPairingTotem) nextStep() }, onError: e => console.log(e) @@ -120,7 +99,7 @@ const MachineNameComponent = ({ nextStep, classes, setPayload }) => { initialValues={initialValues} validationSchema={validationSchema} onSubmit={({ name }) => { - setPayload({ name }) + setName(name) register({ variables: { name } }) }}>
@@ -183,13 +162,13 @@ const renderStepper = (step, it, idx, classes) => { const AddMachine = memo(({ close, onPaired }) => { const classes = useStyles() const { data } = useQuery(GET_MACHINES) - const [payload, setPayload] = useSetState({ qrcode: '', name: '', count: 0 }) - const [step, { inc }] = useCounter(0, steps.length, 0) + const [qrCode, setQrCode] = useState('') + const [name, setName] = useState('') + const [step, setStep] = useState(0) const count = getSize(data) - useEffect(() => setPayload({ count }), [count, setPayload]) - const Component = steps[step].component + return (
{
inc(1)} - close={close} + nextStep={() => setStep(1)} + count={count} onPaired={onPaired} - {...{ payload, setPayload }} + qrCode={qrCode} + setQrCode={setQrCode} + name={name} + setName={setName} />
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js index 497fea10..8d27f2e2 100644 --- a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js +++ b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js @@ -4,6 +4,7 @@ import gql from 'graphql-tag' import moment from 'moment' import * as R from 'ramda' import React from 'react' +import { useParams } from 'react-router-dom' import { MainStatus } from 'src/components/Status' import Title from 'src/components/Title' @@ -40,9 +41,11 @@ const useStyles = makeStyles(mainStyles) const MachineStatus = () => { const classes = useStyles() - + const { id: machineId } = useParams() const { data: machinesResponse } = useQuery(GET_MACHINES) + const shouldStartExpanded = machine => machine.deviceId === machineId + const elements = [ { header: 'Machine Name', @@ -95,6 +98,7 @@ const MachineStatus = () => { elements={elements} data={R.path(['machines'])(machinesResponse)} Details={MachineDetailsRow} + shouldStartExpanded={shouldStartExpanded} expandable /> diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js index f3509514..98d062b9 100644 --- a/new-lamassu-admin/src/routing/routes.js +++ b/new-lamassu-admin/src/routing/routes.js @@ -57,7 +57,7 @@ const tree = [ { key: 'machine-status', label: 'Machine Status', - route: '/maintenance/machine-status', + route: '/maintenance/machine-status/:id', component: MachineStatus }, {