Skip to content

Commit d3079f9

Browse files
stacykutyepovstacykutyepov
committed
connect backend and create UI for <CreateUser> mutation
1 parent f625e8a commit d3079f9

File tree

3 files changed

+111
-21
lines changed

3 files changed

+111
-21
lines changed

‎react-books-client/src/components/Auth/Register.js‎

Lines changed: 104 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,111 @@
1-
import React from "react";
1+
import React, {useState} from "react";
2+
import {Mutation} from "react-apollo";
3+
import {gql} from "apollo-boost";
24
import withStyles from "@material-ui/core/styles/withStyles";
3-
// import Typography from "@material-ui/core/Typography";
4-
// import Avatar from "@material-ui/core/Avatar";
5-
// import FormControl from "@material-ui/core/FormControl";
6-
// import Paper from "@material-ui/core/Paper";
7-
// import Input from "@material-ui/core/Input";
8-
// import InputLabel from "@material-ui/core/InputLabel";
9-
// import Button from "@material-ui/core/Button";
10-
// import Dialog from "@material-ui/core/Dialog";
11-
// import DialogActions from "@material-ui/core/DialogActions";
12-
// import DialogContent from "@material-ui/core/DialogContent";
13-
// import DialogContentText from "@material-ui/core/DialogContentText";
14-
// import DialogTitle from "@material-ui/core/DialogTitle";
15-
// import Slide from "@material-ui/core/Slide";
16-
// import Gavel from "@material-ui/icons/Gavel";
17-
// import VerifiedUserTwoTone from "@material-ui/icons/VerifiedUserTwoTone";
5+
import Typography from "@material-ui/core/Typography";
6+
import Avatar from "@material-ui/core/Avatar";
7+
import FormControl from "@material-ui/core/FormControl";
8+
import Paper from "@material-ui/core/Paper";
9+
import Input from "@material-ui/core/Input";
10+
import InputLabel from "@material-ui/core/InputLabel";
11+
import Button from "@material-ui/core/Button";
12+
import Dialog from "@material-ui/core/Dialog";
13+
import DialogActions from "@material-ui/core/DialogActions";
14+
import DialogContent from "@material-ui/core/DialogContent";
15+
import DialogContentText from "@material-ui/core/DialogContentText";
16+
import DialogTitle from "@material-ui/core/DialogTitle";
17+
import Slide from "@material-ui/core/Slide";
18+
import VerifiedUserTwoTone from "@material-ui/icons/VerifiedUserTwoTone";
19+
import ImportContacts from "@material-ui/icons/ImportContacts";
1820

19-
const Register = ({ classes }) => {
20-
return <div>Register</div>;
21+
function Transition(props) {
22+
return <Slide direction="up" {...props}/>
23+
}
24+
25+
const Register = ({ classes , setNewUser }) => {
26+
const [username, setUsername] = useState("")
27+
const [email, setEmail] = useState("")
28+
const [password, setPassword] = useState("")
29+
const [open, setOpen] = useState(false)
30+
31+
32+
const handleSubmit = (e, createUser) => {
33+
e.preventDefault()
34+
createUser()
35+
36+
}
37+
38+
return <div className={classes.root}>
39+
<Paper className={classes.paper}>
40+
<Avatar className={classes.avatar}>
41+
<ImportContacts/>
42+
</Avatar>
43+
<Typography variant="headline">
44+
Register
45+
</Typography>
46+
47+
<Mutation mutation={REGISTER_MUTATION}
48+
variables={{username, email, password}}
49+
onCompleted={data => {
50+
console.log({data})
51+
setOpen(true)
52+
}}
53+
>
54+
{(createUser, { loading, error}) => {
55+
return (
56+
<form onSubmit={e => handleSubmit(e, createUser)} className={classes.form}>
57+
<FormControl margin="normal" required fullWidth>
58+
<InputLabel htmlFor="username">Username</InputLabel>
59+
<Input id="username" onChange={e => setUsername(e.target.value)}/>
60+
</FormControl>
61+
<FormControl margin="normal" required fullWidth>
62+
<InputLabel htmlFor="email">Email</InputLabel>
63+
<Input id="email" type="email" onChange={e => setEmail(e.target.value)}/>
64+
</FormControl>
65+
<FormControl margin="normal" required fullWidth>
66+
<InputLabel htmlFor="password">Password</InputLabel>
67+
<Input id="password" onChange={e => setPassword(e.target.value)}/>
68+
</FormControl>
69+
<Button type="submit" fullWidth variant="contained" color="secondary" className={classes.submit} disabled={loading || !username.trim() || !email.trim() || !password.trim()}>
70+
{loading ? "Registering" : "Register"}
71+
</Button>
72+
<Button onClick={() => setNewUser(false)} color="primary" fullWidth variant="outlined">Already Registered</Button>
73+
{error && <div>Error</div>}
74+
</form>
75+
)
76+
}}
77+
</Mutation>
78+
</Paper>
79+
{/* Success Dialog */}
80+
<Dialog
81+
open={open}
82+
disableBackdropClick={true}
83+
TransitionComponent={Transition}
84+
>
85+
<DialogTitle>
86+
<VerifiedUserTwoTone className={classes.icon}/>
87+
Create Account</DialogTitle>
88+
<DialogContent>
89+
<DialogContentText>User Successfully Created</DialogContentText>
90+
</DialogContent>
91+
<DialogActions>
92+
<Button color="primary" variant="contained" onClick={() => setNewUser(false)}>Log In</Button>
93+
</DialogActions>
94+
</Dialog>
95+
</div>;
2196
};
2297

98+
const REGISTER_MUTATION = gql `
99+
mutation ($username: String!, $email: String!, $password: String!) {
100+
createUser(email: $email, username: $username, password: $password) {
101+
user {
102+
username
103+
email
104+
}
105+
}
106+
}
107+
`
108+
23109
const styles = theme => ({
24110
root: {
25111
width: "auto",

‎react-books-client/src/components/Auth/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import React from "react";
1+
import React, {useState} from "react";
22

33
import withRoot from "../../withRoot";
4+
import Login from "./Login"
5+
import Regiter from "./Register"
46

57
export default withRoot(() => {
6-
return <div>Auth</div>;
8+
const [newUser, setNewUser] = useState(true)
9+
return newUser ? (<Regiter setNewUser={setNewUser}/>) : (<Login/>);
710
});

‎react-books-client/src/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
33
import Root from "./Root";
4+
import Auth from "./components/Auth"
45
import * as serviceWorker from "./serviceWorker";
56

67
import { ApolloProvider } from 'react-apollo'
@@ -13,7 +14,7 @@ const client = new ApolloClient({
1314

1415
ReactDOM.render(
1516
<ApolloProvider client={client}>
16-
<Root />,
17+
<Auth />,
1718
</ApolloProvider>,
1819
document.getElementById("root")
1920
);

0 commit comments

Comments
 (0)