changes on user module.

frontend/components/form/forms.ts

@@ -18,7 +18,8 @@ interface FormHandler {
   handleBlur: (event: SyntheticEvent) => void,
   values: Dict,
   errors: Dict,
-  isSubmitting: boolean
+  isSubmitting: boolean,
+  setValues: (values: Dict) => void
 }
 
 /**
@@ -39,7 +40,6 @@ function useFormHandler(
   validate?: (values: Dict) => {}
 ): FormHandler {
 
-  console.log('useFormHandler called.', initialValues)
   const [values, setValues] = useState(initialValues)
   const [errors, setErrors] = useState({})
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -92,7 +92,8 @@ function useFormHandler(
     handleBlur,
     values,
     errors,
-    isSubmitting
+    isSubmitting,
+    setValues
   }
 }
 

frontend/components/user/LogoutButton.tsx

@@ -5,11 +5,13 @@ interface LogoutButtonProps {
   title?: string
 }
 
-const LogoutButton = (props: LogoutButtonProps) => {
+const LogoutButton = ({ title }: LogoutButtonProps) => {
   const [logout, { loading, error }] = useMutation(USER_LOGOUT)
 
   return (
-    <button disabled={loading} onClick={() => logout({ refetchQueries: [{ query: CURRENT_USER }] })}>{props.title || 'Log out'}</button>
+    <button disabled={loading} onClick={() => {
+      logout({ refetchQueries: [{ query: CURRENT_USER }] })
+    }}>{title || 'Log out'}</button>
   )
 }
 

frontend/components/user/RequestPassword.tsx

@@ -1,33 +1,25 @@
 import { useMutation } from '@apollo/react-hooks'
+import { SyntheticEvent } from 'react'
 
 import { USER_REQUEST_PASSWORD } from './graphql'
 import { useFormHandler, TextInput } from '../form/forms'
-import { FormEvent } from 'react'
 
 
 const initialValues = {
-  email: '',
-  password: ''
+  email: ''
 }
 
 const RequestPassword = () => {
 
-  const [login, { loading, error }] = useMutation(USER_REQUEST_PASSWORD)
+  const [requestPassword, { loading, error }] = useMutation(USER_REQUEST_PASSWORD)
   const { inputProps } = useFormHandler(initialValues)
 
   return (
-    <form onSubmit={async (event: FormEvent) => {
+    <form onSubmit={async (event: SyntheticEvent) => {
       event.preventDefault()
-      try {
-        const data = await login()
-        console.log(data)
-      } catch (error) {
-        console.log(error)
-      }
     }}>
       <TextInput label='Email' {...inputProps('email')} />
-      <TextInput label='Password' {...inputProps('password')} />
-      <button type='submit' disabled={loading}>Login!</button>
+      <button type='submit' disabled={loading}>Request new password</button>
     </form>
   )
 }

frontend/components/user/ResetPassword.tsx

@@ -6,28 +6,22 @@ import { FormEvent } from 'react'
 
 
 const initialValues = {
-  email: '',
-  password: ''
+  password: '',
+  passwordAgain: ''
 }
 
 const ResetPassword = () => {
 
-  const [login, { loading, error }] = useMutation(USER_RESET_PASSWORD)
+  const [resetPassword, { loading, error }] = useMutation(USER_RESET_PASSWORD)
   const { inputProps } = useFormHandler(initialValues)
 
   return (
     <form onSubmit={async (event: FormEvent) => {
       event.preventDefault()
-      try {
-        const data = await login()
-        console.log(data)
-      } catch (error) {
-        console.log(error)
-      }
     }}>
-      <TextInput label='Email' {...inputProps('email')} />
       <TextInput label='Password' {...inputProps('password')} />
-      <button type='submit' disabled={loading}>Login!</button>
+      <TextInput label='Repeat password' {...inputProps('passwordAgain')} />
+      <button type='submit' disabled={loading}>Reset Password</button>
     </form>
   )
 }

frontend/components/user/SignupForm.tsx

@@ -1,9 +1,10 @@
-import { Mutation, useMutation } from 'react-apollo'
+import { SyntheticEvent } from 'react'
+import { useMutation } from '@apollo/react-hooks'
 import * as Yup from 'yup'
 
 import { useFormHandler, TextInput } from '../form/forms'
 import { USER_SIGNUP } from './graphql'
-import { SyntheticEvent } from 'react'
+import { userValidation } from './validation'
 
 
 const initialValues = {
@@ -13,23 +14,10 @@ const initialValues = {
   passwordAgain: '1234'
 }
 
-const validationScheme = Yup.object({
-  name: Yup.string()
-    .required('Required')
-    .max(40, 'Must be 40 characters or less'),
-  email: Yup.string()
-    .email('Invalid email address')
-    .required('Required'),
-  password: Yup.string()
-    .min(4, 'Must have at least 8 characters'),
-  passwordAgain: Yup.string()
-    .oneOf([Yup.ref('password'), null], 'Passwords must match')
-})
-
 
 const SignupForm = () => {
 
-  const { inputProps, values } = useFormHandler(initialValues, validationScheme.isValid)
+  const { inputProps, values } = useFormHandler(initialValues, userValidation.validate)
   const [userSignup, { loading, error }] = useMutation(USER_SIGNUP)
 
   return (

frontend/components/user/UserDetails.tsx

@@ -1,25 +1,18 @@
-import { useQuery } from "react-apollo"
+import { useQuery } from "@apollo/react-hooks"
 import { CURRENT_USER } from "./graphql"
+import { UserProps } from "./props"
 
-const UserDetails = () => {
 
-  const { data, error, loading } = useQuery(CURRENT_USER)
-
-  if (error) {
-    console.log(error)
-    return (
-      <p>Error</p>
-    )
-  } else if (loading) {
-    return (
-      <p>Loading...</p>
-    )
-  } else {
-    console.log(data)
-    return (
-      <p>Data</p>
-    )
-  }
+const UserDetails = ({ user }: UserProps) => {
+  console.log(user)
+  return (
+    <>
+      <p>{user.id}</p>
+      <p>{user.email}</p>
+      <p>{user.name}</p>
+    </>
+  )
 }
 
+
 export default UserDetails

frontend/components/user/UserEditForm.tsx

@@ -1,7 +1,9 @@
-import { useQuery, useMutation } from "react-apollo"
+import { useMutation } from "@apollo/react-hooks"
 import { useFormHandler, TextInput } from "../form/forms"
 import { CURRENT_USER, USER_EDIT } from "./graphql"
 import { SyntheticEvent } from "react"
+import { UserProps } from "./props"
+import { userValidation } from "./validation"
 
 const initialData = {
   name: '',
@@ -11,15 +13,15 @@ const initialData = {
 }
 
 
-const UserEditForm = () => {
+const UserEditForm = ({ user }: UserProps) => {
 
-  const currentUser = useQuery(CURRENT_USER)
   const [updateUser, userEdit] = useMutation(USER_EDIT)
-  const { inputProps } = useFormHandler(currentUser.data ? { ...initialData, ...currentUser.data.me } : initialData)
+  const { inputProps, values } = useFormHandler({ ...initialData, ...user }, userValidation.validate)
 
   return (
-    <form onSubmit={(event: SyntheticEvent) => {
+    <form onSubmit={async (event: SyntheticEvent) => {
       event.preventDefault()
+      await updateUser({ variables: values, refetchQueries: [{ query: CURRENT_USER }] })
     }}>
       <TextInput label='Name' {...inputProps('name')} />
       <TextInput label='Email' {...inputProps('email')} />

frontend/components/user/props.ts

@@ -0,0 +1,8 @@
+export interface UserProps {
+  user: {
+    id: string,
+    name: string,
+    email: string,
+    _type: string
+  }
+}

frontend/components/user/validation.ts

@@ -1,6 +1,6 @@
 import * as Yup from 'yup'
 
-const signupValidation = Yup.object({
+const userValidation = Yup.object({
   name: Yup.string()
     .required('Required')
     .max(40, 'Must be 40 characters or less'),
@@ -13,4 +13,4 @@ const signupValidation = Yup.object({
     .oneOf([Yup.ref('password'), null], 'Passwords must match')
 })
 
-export { signupValidation }
+export { userValidation }

frontend/pages/user.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from 'react-apollo'
 import SignupForm from '../components/user/SignupForm'
 import LoginForm from '../components/user/LoginForm'
 import LogoutButton from '../components/user/LogoutButton'
@@ -5,17 +6,26 @@ import RequestPassword from '../components/user/RequestPassword'
 import ResetPassword from '../components/user/ResetPassword'
 import UserEditForm from '../components/user/UserEditForm'
 import UserDetails from '../components/user/UserDetails'
+import { CURRENT_USER } from '../components/user/graphql'
 
-const UserPage = () => (
-  <>
-    <SignupForm />
-    <LoginForm />
-    <LogoutButton />
-    <RequestPassword />
-    <ResetPassword />
-    <UserEditForm />
-    <UserDetails />
-  </>
-)
+const UserPage = () => {
+  const { data, loading, error } = useQuery(CURRENT_USER)
+
+  return (
+    <>
+      <SignupForm />
+      <LoginForm />
+      <LogoutButton />
+      <RequestPassword />
+      <ResetPassword />
+      {data && (
+        <>
+          <UserEditForm user={data.me} />
+          <UserDetails user={data.me} />
+        </>
+      )}
+    </>
+  )
+}
 
 export default UserPage