From 20674c4b1296c44d2e8279e61981273ed6e89e60 Mon Sep 17 00:00:00 2001
From: Taranto <rafael.taranto@protonmail.com>
Date: Mon, 6 Apr 2020 18:11:50 +0100
Subject: [PATCH] feat: updating locales page

---
 .../src/pages/Locales/Locales.js              | 107 ++++++++------
 .../src/pages/Locales/MainForm.js             |  74 ----------
 .../src/pages/Locales/Overrides.js            | 116 ---------------
 new-lamassu-admin/src/pages/Locales/helper.js | 135 ++++++++++++++++++
 4 files changed, 198 insertions(+), 234 deletions(-)
 delete mode 100644 new-lamassu-admin/src/pages/Locales/MainForm.js
 delete mode 100644 new-lamassu-admin/src/pages/Locales/Overrides.js
 create mode 100644 new-lamassu-admin/src/pages/Locales/helper.js

diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js
index 4539dcbe..e2e999b9 100644
--- a/new-lamassu-admin/src/pages/Locales/Locales.js
+++ b/new-lamassu-admin/src/pages/Locales/Locales.js
@@ -1,30 +1,25 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { gql } from 'apollo-boost'
-import React, { memo } from 'react'
-import * as Yup from 'yup'
+import * as R from 'ramda'
+import React from 'react'
 
-import Subtitle from 'src/components/Subtitle'
-import Title from 'src/components/Title'
+import { Table as EditableTable } from 'src/components/editableTable'
+import Section from 'src/components/layout/Section'
+import TitleSection from 'src/components/layout/TitleSection'
+import { fromServer, toServer } from 'src/utils/config'
 
-import MainForm from './MainForm'
+import {
+  mainFields,
+  overrides,
+  LocaleSchema,
+  OverridesSchema,
+  localeDefaults,
+  overridesDefaults
+} from './helper'
 
-const LocaleSchema = Yup.object().shape({
-  country: Yup.object().required('Required'),
-  fiatCurrency: Yup.object().required('Required'),
-  languages: Yup.array().required('Required'),
-  cryptoCurrencies: Yup.array().required('Required')
-})
-
-const initialValues = {
-  country: null,
-  fiatCurrency: null,
-  languages: [],
-  cryptoCurrencies: [],
-  showRates: false
-}
-
-const GET_AUX_DATA = gql`
-  {
+const GET_DATA = gql`
+  query getData {
+    config
     currencies {
       code
       display
@@ -41,12 +36,10 @@ const GET_AUX_DATA = gql`
       code
       display
     }
-  }
-`
-
-const GET_CONFIG = gql`
-  {
-    config
+    machines {
+      name
+      deviceId
+    }
   }
 `
 
@@ -56,29 +49,55 @@ const SAVE_CONFIG = gql`
   }
 `
 
-const Locales = memo(() => {
-  const { data } = useQuery(GET_AUX_DATA)
+const Locales = ({ name: SCREEN_KEY }) => {
+  const { data } = useQuery(GET_DATA)
+  const [saveConfig] = useMutation(SAVE_CONFIG, {
+    refetchQueries: () => ['getData']
+  })
 
-  const [saveConfig] = useMutation(SAVE_CONFIG)
-  const { data: configResponse } = useQuery(GET_CONFIG)
+  const config = data?.config && fromServer(SCREEN_KEY)(data.config)
 
-  const locale = configResponse?.config ?? initialValues
+  const locale = config && !R.isEmpty(config) ? config : localeDefaults
 
-  const save = it => saveConfig({ variables: { config: it } })
+  const save = it => {
+    const config = toServer(SCREEN_KEY)(it.locale[0])
+    return saveConfig({ variables: { config } })
+  }
+
+  const saveOverrides = it => {
+    const config = toServer(SCREEN_KEY)(it)
+    return saveConfig({ variables: { config } })
+  }
 
   return (
     <>
-      <Title>Locales</Title>
-      <Subtitle>Default settings</Subtitle>
-      <MainForm
-        validationSchema={LocaleSchema}
-        value={locale}
-        save={save}
-        auxData={data}
-      />
-      <Subtitle extraMarginTop>Overrides</Subtitle>
+      <TitleSection title="Locales" />
+      <Section title="Default settings">
+        <EditableTable
+          name="locale"
+          enableEdit
+          initialValues={locale}
+          save={save}
+          validationSchema={LocaleSchema}
+          data={R.of(locale)}
+          elements={mainFields(data)}
+        />
+      </Section>
+      <Section title="Overrides">
+        <EditableTable
+          name="overrides"
+          enableDelete
+          enableEdit
+          enableCreate
+          initialValues={overridesDefaults}
+          save={saveOverrides}
+          validationSchema={OverridesSchema}
+          data={locale.overrides ?? []}
+          elements={overrides(data)}
+        />
+      </Section>
     </>
   )
-})
+}
 
 export default Locales
diff --git a/new-lamassu-admin/src/pages/Locales/MainForm.js b/new-lamassu-admin/src/pages/Locales/MainForm.js
deleted file mode 100644
index b69b8736..00000000
--- a/new-lamassu-admin/src/pages/Locales/MainForm.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as R from 'ramda'
-import React, { memo } from 'react'
-
-import { Table as EditableTable } from 'src/components/editableTable'
-import { Autocomplete, AutocompleteMultiple } from 'src/components/inputs'
-import { Checkbox } from 'src/components/inputs/formik'
-
-const sizes = {
-  country: 200,
-  fiatCurrency: 150,
-  languages: 240,
-  cryptoCurrencies: 270,
-  showRates: 125,
-  action: 175
-}
-
-const MainForm = memo(({ value, save, auxData, validationSchema }) => {
-  const getData = R.path(R.__, auxData)
-  const displayCodeArray = R.compose(R.join(', '), R.map(R.path(['code'])))
-
-  return (
-    <EditableTable
-      name="locale"
-      title="Default Settings"
-      altTitleColor
-      initialValues={{ country: null }}
-      enableEdit
-      onDelete={() => {}}
-      setEditing={() => {}}
-      save={save}
-      validationSchema={validationSchema}
-      data={R.of(value)}
-      elements={[
-        {
-          name: 'country',
-          width: sizes.country,
-          view: R.path(['display']),
-          input: Autocomplete,
-          inputProps: { suggestions: getData(['countries']) }
-        },
-        {
-          name: 'fiatCurrency',
-          width: sizes.fiatCurrency,
-          view: R.path(['code']),
-          input: Autocomplete,
-          inputProps: { suggestions: getData(['currencies']) }
-        },
-        {
-          name: 'languages',
-          width: sizes.languages,
-          view: displayCodeArray,
-          input: AutocompleteMultiple,
-          inputProps: { suggestions: getData(['languages']) }
-        },
-        {
-          name: 'cryptoCurrencies',
-          width: sizes.cryptoCurrencies,
-          view: displayCodeArray,
-          input: AutocompleteMultiple,
-          inputProps: { suggestions: getData(['cryptoCurrencies']) }
-        },
-        {
-          name: 'showRates',
-          width: sizes.showRates,
-          textAlign: 'center',
-          view: it => (it ? 'true' : 'false'),
-          input: Checkbox
-        }
-      ]}
-    />
-  )
-})
-
-export default MainForm
diff --git a/new-lamassu-admin/src/pages/Locales/Overrides.js b/new-lamassu-admin/src/pages/Locales/Overrides.js
deleted file mode 100644
index 92d4792a..00000000
--- a/new-lamassu-admin/src/pages/Locales/Overrides.js
+++ /dev/null
@@ -1,116 +0,0 @@
-// import React, { useState, memo } from 'react'
-// import { Form, FastField } from 'formik'
-
-// import { Link } from '../../components/buttons'
-// import {
-//   Autocomplete,
-//   AutocompleteMultiple,
-//   Checkbox
-// } from '../../components/inputs'
-// import {
-//   EditCell,
-//   Table,
-//   TableHead,
-//   TableRow,
-//   TableHeader,
-//   TableBody,
-//   TableCell as TD
-// } from '../../components/table'
-
-// import styles from './MainForm.module.scss'
-
-// const Override = memo(
-//   ({ values, resetForm, submitForm, errors, editing, setEditing, data }) => {
-//     const [submitted, setSubmitted] = useState(false)
-
-//     const save = () => {
-//       setSubmitted(true)
-//       submitForm()
-//     }
-
-//     const cancel = () => {
-//       resetForm()
-//       setSubmitted(false)
-//       setEditing(false)
-//     }
-
-//     const ViewFields = (
-//       <>
-//         <TD>{values.machine && values.machine.display}</TD>
-//         <TD>
-//           {values.languages && values.languages.map(it => it.code).join(', ')}
-//         </TD>
-//         <TD>
-//           {values.cryptoCurrencies &&
-//             values.cryptoCurrencies.map(it => it.code).join(', ')}
-//         </TD>
-//         <TD>{values.showRates ? 'true' : 'false'}</TD>
-//         <TD rightAlign>
-//           <Link color='primary' onClick={() => setEditing(true)}>
-//             Edit
-//           </Link>
-//         </TD>
-//       </>
-//     )
-
-//     const EditFields = (
-//       <>
-//         <TD>
-//           <FastField
-//             name='machine'
-//             component={Autocomplete}
-//             suggestions={data && data.machines}
-//           />
-//         </TD>
-//         <TD>
-//           <FastField
-//             name='languages'
-//             component={AutocompleteMultiple}
-//             suggestions={data && data.languages}
-//           />
-//         </TD>
-//         <TD>
-//           <FastField
-//             name='cryptoCurrencies'
-//             component={AutocompleteMultiple}
-//             suggestions={data && data.cryptoCurrencies}
-//           />
-//         </TD>
-//         <TD>
-//           <FastField name='showRates' component={Checkbox} />
-//         </TD>
-//         <EditCell save={save} cancel={cancel} />
-//       </>
-//     )
-
-//     return (
-//       <Form>
-//         <Table>
-//           <colgroup>
-//             <col className={styles.bigColumn} />
-//             <col className={styles.mediumColumn} />
-//             <col className={styles.bigColumn} />
-//             <col className={styles.showRates} />
-//             <col className={styles.actionColumn} />
-//           </colgroup>
-//           <TableHead>
-//             <TableRow header>
-//               <TableHeader>Machine</TableHeader>
-//               <TableHeader>Languages</TableHeader>
-//               <TableHeader>Crypto Currencies</TableHeader>
-//               <TableHeader>Show Rates</TableHeader>
-//               <TableHeader />
-//             </TableRow>
-//           </TableHead>
-//           <TableBody>
-//             <TableRow error={submitted && errors && errors.length}>
-//               {editing ? EditFields : ViewFields}
-//             </TableRow>
-//           </TableBody>
-//         </Table>
-//       </Form>
-//     )
-//   }
-// )
-
-// export default Override
diff --git a/new-lamassu-admin/src/pages/Locales/helper.js b/new-lamassu-admin/src/pages/Locales/helper.js
new file mode 100644
index 00000000..6f20e79e
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Locales/helper.js
@@ -0,0 +1,135 @@
+import * as R from 'ramda'
+import * as Yup from 'yup'
+
+import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
+
+const displayCodeArray = it => {
+  return it ? R.compose(R.join(', '), R.map(R.path(['code'])))(it) : it
+}
+
+const getFields = (getData, names) => {
+  return R.filter(it => R.includes(it.name, names), allFields(getData))
+}
+
+const allFields = getData => [
+  {
+    name: 'machine',
+    width: 200,
+    size: 'sm',
+    view: R.path(['name']),
+    input: Autocomplete,
+    inputProps: {
+      options: getData(['machines']),
+      limit: null,
+      forceShowValue: true,
+      getOptionSelected: R.eqProps('machineId')
+    }
+  },
+  {
+    name: 'country',
+    width: 200,
+    size: 'sm',
+    view: R.path(['display']),
+    input: Autocomplete,
+    inputProps: {
+      options: getData(['countries']),
+      getOptionSelected: R.eqProps('display')
+    }
+  },
+  {
+    name: 'fiatCurrency',
+    width: 150,
+    size: 'sm',
+    view: R.path(['code']),
+    input: Autocomplete,
+    inputProps: {
+      options: getData(['currencies']),
+      getOptionSelected: R.eqProps('display')
+    }
+  },
+  {
+    name: 'languages',
+    width: 240,
+    size: 'sm',
+    view: displayCodeArray,
+    input: Autocomplete,
+    inputProps: {
+      options: getData(['languages']),
+      getLabel: R.path(['code']),
+      getOptionSelected: R.eqProps('code'),
+      multiple: true
+    }
+  },
+  {
+    name: 'cryptoCurrencies',
+    width: 270,
+    size: 'sm',
+    view: displayCodeArray,
+    input: Autocomplete,
+    inputProps: {
+      options: getData(['cryptoCurrencies']),
+      getLabel: it => R.path(['code'])(it) ?? it,
+      getOptionSelected: R.eqProps('code'),
+      multiple: true
+    }
+  }
+]
+
+const mainFields = auxData => {
+  const getData = R.path(R.__, auxData)
+
+  return getFields(getData, [
+    'country',
+    'fiatCurrency',
+    'languages',
+    'cryptoCurrencies'
+  ])
+}
+
+const overrides = auxData => {
+  const getData = R.path(R.__, auxData)
+
+  return getFields(getData, [
+    'machine',
+    'country',
+    'languages',
+    'cryptoCurrencies'
+  ])
+}
+
+const LocaleSchema = Yup.object().shape({
+  country: Yup.object().required('Required'),
+  fiatCurrency: Yup.object().required('Required'),
+  languages: Yup.array().required('Required'),
+  cryptoCurrencies: Yup.array().required('Required')
+})
+
+const OverridesSchema = Yup.object().shape({
+  machine: Yup.object().required('Required'),
+  country: Yup.object().required('Required'),
+  languages: Yup.array().required('Required'),
+  cryptoCurrencies: Yup.array().required('Required')
+})
+
+const localeDefaults = {
+  country: null,
+  fiatCurrency: null,
+  languages: [],
+  cryptoCurrencies: []
+}
+
+const overridesDefaults = {
+  machine: null,
+  country: null,
+  languages: [],
+  cryptoCurrencies: []
+}
+
+export {
+  mainFields,
+  overrides,
+  LocaleSchema,
+  OverridesSchema,
+  localeDefaults,
+  overridesDefaults
+}