first commit

package.json

@@ -3,9 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.0",
+    "@material-ui/core": "^4.4.2",
+    "apollo-boost": "^0.4.4",
+    "formik": "^1.5.8",
+    "formik-material-ui": "0.0.22",
+    "graphql": "^14.5.4",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "yup": "^0.27.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -1,33 +1,25 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 100px;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  padding-left: 40px;
 }
 
-.App-link {
-  color: #61dafb;
+#customerForm {
+  width: 300px;
+  background-color: whitesmoke;
+  margin: auto;
+  padding: 20px;
+  text-align: center;
+  margin-top: 20px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+#viewCustomers {
+  background-color: rgb(240, 240, 240);
+  margin: 30px 80px;
+  padding: 10px;
+  text-align: center;
 }

src/App.js

@@ -1,24 +1,16 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import { Customers } from "./components/customers";
+import { CustomersForm } from "./components/customerForm";
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h2>HUMANS</h2>
       </header>
+      <CustomersForm></CustomersForm>
+      <Customers />
     </div>
   );
 }

src/components/customerForm.js

@@ -0,0 +1,108 @@
+import React from "react";
+import gql from "graphql-tag";
+import Button from "@material-ui/core/Button";
+import { Formik, Field, Form } from "formik";
+import { TextField } from "formik-material-ui";
+import * as Yup from "yup";
+import { useMutation } from "@apollo/react-hooks";
+import { GET_CUSTOMERS } from "./customers";
+
+const ADD_CUSTOMER = gql`
+  mutation CreateCustomer(
+    $FullName: String
+    $FirstName: String
+    $SecondName: String
+    $LastName: String
+  ) {
+    CreateCustomer(
+      FullName: $FullName
+      FirstName: $FirstName
+      SecondName: $SecondName
+      LastName: $LastName
+    )
+  }
+`;
+
+export function CustomersForm() {
+  const [addCustomer, { data }] = useMutation(ADD_CUSTOMER, {
+    refetchQueries: [{ query: GET_CUSTOMERS }]
+  });
+  console.log(data);
+
+  return (
+    <div id="customerForm">
+      <h3>ADD HUMAN</h3>
+      <Formik
+        initialValues={{
+          FirstName: "",
+          SecondName: "",
+          LastName: "",
+          Email: ""
+        }}
+        validationSchema={Yup.object().shape({
+          FirstName: Yup.string().required("First Name is required"),
+          SecondName: Yup.string().required("Second Name is required"),
+          LastName: Yup.string().required("Last Name is required"),
+          Email: Yup.string()
+            .email("Email is invalidd")
+            .required("Email is required")
+        })}
+        onSubmit={(fields, { resetForm }) => {
+          addCustomer({
+            variables: {
+              ...fields,
+              FullName: `${fields.FirstName}  ${fields.SecondName}  ${fields.LastName}`
+            }
+          });
+          resetForm();
+        }}
+        render={({ errors, status, touched }) => (
+          <Form>
+            <Field
+              label="First Name"
+              name="FirstName"
+              type="text"
+              component={TextField}
+              margin="none"
+              variant="outlined"
+              fullWidth
+            />
+            <Field
+              label="Second Name"
+              name="SecondName"
+              type="text"
+              component={TextField}
+              margin="normal"
+              variant="outlined"
+              fullWidth
+            />
+            <Field
+              label="Last Name"
+              name="LastName"
+              type="text"
+              component={TextField}
+              margin="normal"
+              variant="outlined"
+              fullWidth
+            />
+            <Field
+              label="Email"
+              name="Email"
+              type="text"
+              component={TextField}
+              margin="normal"
+              variant="outlined"
+              fullWidth
+            />
+            <Button type="submit" variant="outlined" color="primary">
+              Register
+            </Button>{" "}
+            <Button type="reset" variant="outlined" color="secondary">
+              Reset
+            </Button>
+          </Form>
+        )}
+      ></Formik>
+    </div>
+  );
+}

src/components/customers.js

@@ -0,0 +1,36 @@
+import React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+import { Card } from "@material-ui/core";
+
+export const GET_CUSTOMERS = gql`
+  {
+    Customers {
+      ID
+      FullName
+      SecondName
+      LastName
+      FirstName
+    }
+  }
+`;
+
+export function Customers() {
+  const { loading, error, data } = useQuery(GET_CUSTOMERS, {
+    // pollInterval: 5000, //Call Function eache 5 seconds
+  });
+
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p style={{ color: "red" }}> Error! ${error.message}`</p>;
+  return (
+    <div id="viewCustomers">
+      <h5>LIST OF HUMANS</h5>
+      {data.Customers.map((p, i) => (
+        <Card
+          key={i}
+          style={{ padding: "10px", margin: "5px" }}
+        >{`${p.FirstName}  ${p.SecondName} ${p.LastName}`}</Card>
+      ))}
+    </div>
+  );
+}

src/index.js

@@ -1,10 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import { ApolloProvider } from "@apollo/react-hooks";
+import ApolloClient from "apollo-boost";
+
+const client = new ApolloClient({
+  uri: "http://localhost:4000/graphql"
+});
+
+ReactDOM.render(
+  <ApolloProvider client={client}>
+    <App />
+  </ApolloProvider>,
+  document.getElementById("root")
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.