chore: integrate new admin with l-s

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

@@ -1,5 +1,9 @@
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core'
+import { gql } from 'apollo-boost'
+import * as R from 'ramda'
 import React, { useState } from 'react'
-import { makeStyles, Modal, Paper } from '@material-ui/core'
+import { v4 } from 'uuid'
 
 import Title from 'src/components/Title'
 import { FeatureButton, Link } from 'src/components/buttons'
@@ -7,35 +11,50 @@ import { Table as EditableTable } from 'src/components/editableTable'
 import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg'
 import { ReactComponent as Configure } from 'src/styling/icons/button/configure/zodiac.svg'
 
-import { NewTriggerWizard } from './NewTriggerWizard'
 import { mainStyles } from './Triggers.styles'
+import Wizard from './Wizard'
+import { Schema, elements } from './helper'
 
 const useStyles = makeStyles(mainStyles)
 
-const sizes = {
-  triggerType: 236,
-  requirement: 293,
-  threshold: 231,
-  cashDirection: 296
-}
+const SAVE_CONFIG = gql`
+  mutation Save($config: JSONObject) {
+    saveConfig(config: $config)
+  }
+`
+
+const GET_INFO = gql`
+  query getData {
+    config
+  }
+`
 
 const Triggers = () => {
-  const [wizardModalOpen, setWizardModalOpen] = useState(false)
+  const [wizard, setWizard] = useState(false)
+  const [error, setError] = useState(false)
+
+  const { data } = useQuery(GET_INFO)
+  const triggers = data?.config?.triggers ?? []
+
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    onCompleted: () => setWizard(false),
+    onError: () => setError(true),
+    refetchQueries: () => ['getData']
+  })
+
+  const add = rawConfig => {
+    const toSave = R.concat([{ id: v4(), ...rawConfig }])(triggers)
+    setError(false)
+    return saveConfig({ variables: { config: { triggers: toSave } } })
+  }
+
+  const save = config => {
+    setError(false)
+    return saveConfig({ variables: { config } })
+  }
 
   const classes = useStyles()
 
-  const handleOpenWizard = () => {
-    setWizardModalOpen(true)
-  }
-
-  const handleCloseWizard = () => {
-    handleFinishWizard()
-  }
-
-  const handleFinishWizard = () => {
-    setWizardModalOpen(false)
-  }
-
   return (
     <>
       <div className={classes.titleWrapper}>
@@ -50,46 +69,22 @@ const Triggers = () => {
           </div>
         </div>
         <div className={classes.headerLabels}>
-          <Link color="primary" onClick={handleOpenWizard}>
+          <Link color="primary" onClick={() => setWizard(true)}>
             + Add new trigger
           </Link>
         </div>
       </div>
       <EditableTable
-        data={[]}
-        elements={[
-          {
-            name: 'triggerType',
-            size: sizes.triggerType
-          },
-          {
-            name: 'requirement',
-            size: sizes.requirement
-          },
-          {
-            name: 'threshold',
-            size: sizes.threshold
-          },
-          {
-            name: 'cashDirection',
-            size: sizes.cashDirection
-          }
-        ]}
+        data={triggers}
+        name="triggers"
+        enableEdit
+        enableDelete
+        save={save}
+        validationSchema={Schema}
+        elements={elements}
       />
-      {wizardModalOpen && (
-        <Modal
-          aria-labelledby="simple-modal-title"
-          aria-describedby="simple-modal-description"
-          open={wizardModalOpen}
-          onClose={handleCloseWizard}
-          className={classes.modal}>
-          <Paper className={classes.paper}>
-            <NewTriggerWizard
-              close={handleCloseWizard}
-              finish={handleFinishWizard}
-            />
-          </Paper>
-        </Modal>
+      {wizard && (
+        <Wizard error={error} save={add} onClose={() => setWizard(null)} />
       )}
     </>
   )