feat(GraphQL): Dashboard Queries

graphcool/package.json

@@ -8,4 +8,4 @@
     "graphql-request": "^1.4.1",
     "validator": "^9.2.0"
   }
-}
+}

graphcool/src/email-password/authenticate.js

@@ -58,5 +58,5 @@ async function getUserByEmail(api, email) {
         email
     };
 
-    return api.reques(query, variables);
+    return api.request(query, variables);
 }

graphcool/src/email-password/loggedInUser.graphql

@@ -1,5 +1,6 @@
 type LoggedInUserPayload {
   id: ID!
+  email: String!
 }
 
 extend type Query {

graphcool/src/email-password/loggedInUser.js

@@ -19,7 +19,7 @@ export default async event => {
             return { data: null };
         }
 
-        return { data: { id: user.id } };
+        return { data: { id: user.id, email: user.email } };
     } catch (e) {
         return { error: 'An unexpected error occured during authentication.' };
     }
@@ -29,7 +29,8 @@ async function getUser(api, id) {
     const query = `
     query getUser($id: ID!) {
       User(id: $id) {
-        id
+        id,
+        email
       }
     }
   `;

package.json

@@ -78,6 +78,7 @@
     "jest": "^22.1.4",
     "lint-staged": "^6.1.0",
     "prettier-eslint": "^8.8.1",
+    "react-perf-devtool": "^3.0.2",
     "uglifyjs-webpack-plugin": "^1.1.8",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.2",
@@ -102,7 +103,8 @@
     "react": "^16.2.0",
     "react-apollo": "^2.0.4",
     "react-dom": "^16.2.0",
-    "react-router-dom": "^4.2.2"
+    "react-router-dom": "^4.2.2",
+    "yup": "^0.24.0"
   },
   "config": {
     "commitizen": {

src/client/auth.js

@@ -31,6 +31,7 @@ export const LOGGED_IN_USER_QUERY = gql`
   query CurrentUser {
     loggedInUser {
       id
+      email
     }
   }
 `;

src/components/auth/Login/Login.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { graphql } from 'react-apollo';
 import { Formik } from 'formik';
+import Yup from 'yup';
 
 import { Alert } from '../../common';
 import { setKeys, logout } from '../../../client';
@@ -17,6 +17,13 @@ const defaultProps = {
     history: {}
 };
 
+const schema = Yup.object().shape({
+    email: Yup.string()
+        .required('Email is required')
+        .email('Invalid email address'),
+    password: Yup.string().required('Password is required')
+});
+
 export function Login({ history, loginMutation }) {
     logout();
     return (
@@ -25,16 +32,7 @@ export function Login({ history, loginMutation }) {
                 email: '',
                 password: ''
             }}
-            validate={({ email, password }) => {
-                let errors = {};
-                if (!email) {
-                    errors.email = 'Email is required';
-                }
-                if (!password) {
-                    errors.password = 'Password is required';
-                }
-                return errors;
-            }}
+            validationSchema={schema}
             onSubmit={async ({ email, password }, { setSubmitting, setErrors }) => {
                 try {
                     const { data: { authenticateUser } } = await loginMutation({
@@ -44,7 +42,6 @@ export function Login({ history, loginMutation }) {
                     setSubmitting(false);
                     history.push('/');
                 } catch ({ message }) {
-          debugger; //eslint-disable-line
                     setErrors({ message });
                     setSubmitting(false);
                 }

src/components/pages/Dashboard/Dashboard.jsx

@@ -32,16 +32,15 @@ class Dashboard extends Component {
   };
 
   async componentDidMount() {
-      const result = await this.props.createBet({
-          variables: {
-              stake: 20,
-              odds: 1.5,
-              result: results.OPEN,
-              typeId: 'cjd61oxwh1tvm01763kusqrkr'
-          }
-      });
+      //   const result = await this.props.createBet({
+      //       variables: {
+      //           stake: 20,
+      //           odds: 1.5,
+      //           result: results.OPEN,
+      //           typeId: 'cjd61oxwh1tvm01763kusqrkr'
+      //       }
+      //   });
       const test = this.props;
-    debugger; //eslint-disable-line
   }
 
   render() {