Skip to content
Permalink
Browse files

Created new CreateUser component

  • Loading branch information...
mattboldt committed Feb 18, 2019
1 parent c833221 commit eb69aa41478a221a1d0beed0151ebb18fa2df2c7
Showing with 91 additions and 9 deletions.
  1. +2 −2 frontend/src/components/Books.js
  2. +67 −0 frontend/src/components/CreateUser.js
  3. +22 −7 frontend/src/components/Users.js
@@ -12,8 +12,8 @@ const Books = ({ books }) => (
)}
</p>
</div>
<div className="w-1/4 p-4">
<img src={book.coverUrl} className="w-full" alt={book.title} />
<div className="w-1/4 p-4 text-right">
<img src={book.coverUrl} style={{height: '150px'}} alt={book.title} />
</div>
</div>
)}
@@ -0,0 +1,67 @@
import React, { Component } from 'react';
import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const CREATE_USER = gql`
mutation CreateUser($name: String!, $email: String!) {
createUser(input: { name: $name, email: $email }) {
user {
id
name
email
booksCount
}
errors
}
}
`;

class CreateUser extends Component {
state = {
name: '',
email: ''
}

onSubmit = (e, createUser) => {
e.preventDefault();
createUser({ variables: this.state });
this.setState({ name: '', email: '' });
}

render() {
return (
<Mutation
mutation={CREATE_USER}
update={this.props.onCreateUser}>
{createUserMutation => (
<form className="px-8 pt-6 pb-8 mb-4" onSubmit={e => this.onSubmit(e, createUserMutation)}>
<h4 className="mb-3">Create new user</h4>
<div className="mb-4">
<input
className="border rounded w-full py-2 px-3"
type="text"
value={this.state.name}
placeholder="Name"
onChange={e => this.setState({ name: e.target.value })} />
</div>
<div className="mb-6">
<input
className="border rounded w-full py-2 px-3"
type="email"
value={this.state.email}
placeholder="Email"
onChange={e => this.setState({ email: e.target.value })} />
</div>
<button
className="bg-blue text-white py-2 px-4 rounded"
type="submit">
Create
</button>
</form>
)}
</Mutation>
);
}
}

export default CreateUser;
@@ -1,7 +1,8 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';
import UserAvatar from './UserAvatar';
import CreateUser from './CreateUser';

const USERS_QUERY = gql`
query {
@@ -15,6 +16,15 @@ const USERS_QUERY = gql`
`;

class Users extends Component {

updateUsers = (cache, { data: { createUser } }) => {
const { users } = cache.readQuery({ query: USERS_QUERY });
cache.writeQuery({
query: USERS_QUERY,
data: { users: users.concat([createUser.user]) },
});
}

render() {
return (
<Query query={USERS_QUERY}>
@@ -24,13 +34,18 @@ class Users extends Component {

return (
<div className="flex flex-wrap mb-4">
{data.users.map((user) => {
return <div key={user.id}
className="m-4 w-1/4 rounded overflow-hidden shadow-lg"
onClick={this.props.selectUser.bind(this, user)}>
<UserAvatar user={user} />
<Fragment>
{data.users.map((user) => {
return <div key={user.id}
className="m-4 w-1/4 rounded overflow-hidden shadow-lg"
onClick={this.props.selectUser.bind(this, user)}>
<UserAvatar user={user} />
</div>
})}
<div className="m-4 w-1/4 rounded overflow-hidden shadow-lg">
<CreateUser onCreateUser={this.updateUsers} />
</div>
})}
</Fragment>
</div>
)
}}

0 comments on commit eb69aa4

Please sign in to comment.
You can’t perform that action at this time.