save connection, list connections

web/src/modals/ConnectionModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import ModalBase from './ModalBase';
-import { FormRow, FormLabel, FormValue, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 // import FormikForm from '../utility/FormikForm';
@@ -9,7 +9,7 @@ import { Formik, Form } from 'formik';
 export default function ConnectionModal({ modalState }) {
   const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
 
-  const handleSubmit = async values => {
+  const handleTest = async values => {
     const resp = await axios.post('http://localhost:3000/connection/test', values);
     console.log('resp.data', resp.data);
     const { error, version } = resp.data;
@@ -18,6 +18,13 @@ export default function ConnectionModal({ modalState }) {
 
     // modalState.close();
   };
+
+  const handleSubmit = async values => {
+    const resp = await axios.post('http://localhost:3000/connection/save', values);
+    console.log('resp.data', resp.data);
+
+    // modalState.close();
+  };
   return (
     <ModalBase modalState={modalState}>
       <h2>Add connection</h2>
@@ -34,7 +41,10 @@ export default function ConnectionModal({ modalState }) {
           <FormTextField label="Password" name="password" />
           <FormTextField label="Display name" name="displayName" />
 
-          <FormSubmit />
+          <FormRow>
+            <FormButton text="Test" onClick={handleTest} />
+            <FormSubmit text="Save" />
+          </FormRow>
         </Form>
       </Formik>
       <div>Connect result: {sqlConnectResult}</div>

web/src/utility/forms.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { TextField, SelectField } from './inputs';
-import { Field } from 'formik';
+import { Field, useFormikContext } from 'formik';
 
 export const FormRow = styled.div`
   display: flex;
@@ -40,9 +40,10 @@ export function FormSelectField({ label, children, ...other }) {
 }
 
 export function FormSubmit({ text }) {
-  return (
-    <FormRow>
-      <input type="submit" value={text} />
-    </FormRow>
-  );
+  return <input type="submit" value={text} />;
+}
+
+export function FormButton({ text, onClick, ...other }) {
+  const { values } = useFormikContext();
+  return <input type="button" value={text} onClick={() => onClick(values)} {...other} />;
 }