add formik form

client/.env.development

@@ -1 +1,2 @@
 REACT_APP_EVENTS=http://localhost:8080/events
+REACT_APP_API=http://localhost:8080/insert

client/.env.production

@@ -1 +1,2 @@
 REACT_APP_EVENTS=https://json-sse-rust.herokuapp.com/events
+REACT_APP_API=https://json-sse-rust.herokuapp.com/insert

client/package-lock.json

@@ -4425,6 +4425,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -6011,6 +6016,32 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.0.10.tgz",
+      "integrity": "sha512-a8S8oHkXXDrXaj1494yP9WqhpTtYivaFU2l20SmoaB9Xo5bHeRvelH2tngk3CzKPHpZqVkjlCLzpSl1s/Qs7jg==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.14",
+        "lodash-es": "^4.17.14",
+        "react-fast-compare": "^2.0.1",
+        "scheduler": "^0.17.0",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.17.0",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz",
+          "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -8506,6 +8537,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -11228,6 +11264,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz",
       "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-hooks-sse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-hooks-sse/-/react-hooks-sse-1.0.0.tgz",

client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
+    "formik": "^2.0.10",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-hooks-sse": "^1.0.0",

client/src/App.js

@@ -4,6 +4,7 @@ import Card from '@material-ui/core/Card';
 import { useSSE, SSEProvider } from 'react-hooks-sse';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from '@material-ui/core/Typography';
+import { Formik, Field, Form } from 'formik';
 
 const useStyles = makeStyles({
   card: {
@@ -40,17 +41,48 @@ const Comments = () => {
 
 function App() {
   const classes = useStyles();
-  const endpoint = process.env.REACT_APP_EVENTS;
+  const sseEndpoint = process.env.REACT_APP_EVENTS;
+  const apiEndpoint = process.env.REACT_APP_API;
   return (
     <div>
       <Card className={classes.card}>
        <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           What is your name?&nbsp;
-            <SSEProvider endpoint={endpoint} options={{withCredentials: false}}>
+            <SSEProvider endpoint={sseEndpoint} options={{withCredentials: false}}>
               <Comments />
             </SSEProvider>
           </Typography>
+          <Formik
+            initialValues={{
+              name: ''
+            }}
+            onSubmit={values => {
+              const v = `{"event": "user", "data": {"user": "${values.user}"}}`;
+              fetch(apiEndpoint, {
+                method: 'post',
+                mode: 'cors',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: v
+              }).then(function(response) {
+                return response.json();
+              }, err => {
+                console.log(err);
+              }).then(function(data) {
+                console.log(data);
+              });
+            }}
+            >
+            {(props) => (
+              <Form>
+                <label htmlFor="user">Name: </label>
+                <Field name="user" placeholder="Jane" />
+                <button type="submit">Submit</button>
+              </Form>
+              )}
+          </Formik>
         </CardContent>
       </Card>
     </div>