Skip to content

Commit 8c1ec88

Browse files
jdillickjdillick
committed
New / Edit user
1 parent 1c47ab7 commit 8c1ec88

File tree

10 files changed

+272
-69
lines changed

10 files changed

+272
-69
lines changed

‎GraphQLServer/User/User.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { db } from '../Data/Db.ts';
22
import { ObjectId } from 'mongo.ts';
33

4-
type UserRecord = {
4+
export type UserRecord = {
55
_id?: ObjectId;
66
name: string;
77
email: string;
@@ -26,15 +26,16 @@ export class User {
2626
async save() {
2727
let rec;
2828
if (this.id) {
29-
rec = await User.collection.updateOne(
30-
{ _id: this.id },
29+
await User.collection.updateOne(
30+
{ _id: new ObjectId(this.id) },
3131
{ $set: this },
3232
);
33+
rec = {};
3334
} else {
3435
rec = await User.collection.insertOne(this);
3536
}
3637

37-
const saved = new User({ ...this, ...rec });
38+
const saved = new User({ ...this, ...rec, _id: this.id });
3839
Object.assign(this, saved);
3940
return saved;
4041
}

‎GraphQLServer/app.ts

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Application, Router } from 'oak.ts';
22
import { applyGraphQL, gql, GQLError } from 'oak_graphql.ts';
3-
import { User } from './User/User.ts';
3+
import { ObjectId } from 'mongo.ts';
4+
import { User, type UserRecord } from './User/User.ts';
45
import { Post } from './Post/Post.ts';
56
import _ from 'underscore.ts';
67

@@ -20,7 +21,8 @@ app.use(async (ctx, next) => {
2021
});
2122

2223
const typeDefs = gql`
23-
input CreateUserInput {
24+
input SaveUserInput {
25+
id: ID
2426
name: String!
2527
email: String!
2628
age: Int
@@ -47,7 +49,7 @@ const typeDefs = gql`
4749
}
4850
4951
type Query {
50-
testInput(input: CreateUserInput!): User
52+
testInput(input: SaveUserInput!): User
5153
me: User!
5254
user(id: ID!): User
5355
users: [User]!
@@ -58,7 +60,7 @@ const typeDefs = gql`
5860
}
5961
6062
type Mutation {
61-
createUser(name: String!, email: String!, age: Int): User!
63+
saveUser(input: SaveUserInput): User!
6264
deleteUser(id: ID!): SuccessOrError!
6365
createPost(title: String!, body: String!, published: Boolean!): Post!
6466
}
@@ -129,14 +131,29 @@ const resolvers = {
129131
},
130132
},
131133
Mutation: {
132-
createUser: async (
134+
saveUser: async (
133135
parent: any,
134-
{ name, email, age }: { name: string; email: string; age?: number },
136+
{
137+
input,
138+
}: {
139+
input: {
140+
id?: ObjectId;
141+
name: string;
142+
email: string;
143+
age?: number;
144+
};
145+
},
135146
context: any,
136147
info: any,
137148
) => {
138-
const user = new User({ name, email, age });
149+
const draft: UserRecord = { ...(input as UserRecord) };
150+
if (input.id) {
151+
draft._id = input.id;
152+
}
153+
154+
const user = new User(draft);
139155
await user.save();
156+
console.log({ user });
140157
return user;
141158
},
142159
deleteUser: async (

‎src/app/components/Dashboard/Dashboard.jsx

+66-32
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import Row from 'react-bootstrap/Row';
44
import Col from 'react-bootstrap/Col';
55
import { useHookComponent, useHandle } from 'reactium-core/sdk';
66
import { useSyncQuery } from '@reactium/graphql';
7-
import * as DeleteUser from './User/DeleteUser/DeleteUser';
7+
import { DeleteUser } from './User/DeleteUser/DeleteUser';
8+
import { EditUser } from './User/EditUser/EditUser';
89

910
export const Dashboard = () => {
1011
const PostList = useHookComponent('PostList');
@@ -16,6 +17,7 @@ export const Dashboard = () => {
1617
id
1718
name
1819
email
20+
age
1921
}
2022
2123
posts {
@@ -33,37 +35,67 @@ export const Dashboard = () => {
3335
);
3436

3537
const Modal = useHandle('Modal');
36-
const confirmDelete = (user) => {
37-
Modal.set(
38-
{
39-
header: <DeleteUser.Header user={user} />,
40-
body: <DeleteUser.Body user={user} />,
41-
footer: (
42-
<DeleteUser.Footer
43-
user={user}
44-
onCancel={() => Modal.close()}
45-
onSuccess={async () => {
46-
const client = handle.get('client');
47-
await client.mutate({
48-
mutation: gql`
49-
mutation DeleteUser($id: ID!) {
50-
deleteUser(id: $id) {
51-
success
52-
message
53-
}
54-
}
55-
`,
56-
variables: { id: user.id },
57-
});
38+
const editUser = async (user = {}) => {
39+
const saveUser = async (userObj) => {
40+
console.log('saveUser', userObj);
41+
const client = handle.get('client');
42+
await client.mutate({
43+
mutation: gql`
44+
mutation SaveUser($userObj: SaveUserInput) {
45+
saveUser(input: $userObj) {
46+
id
47+
name
48+
email
49+
}
50+
}
51+
`,
52+
variables: { userObj },
53+
});
5854

59-
Modal.close();
60-
await handle.refresh();
61-
}}
62-
/>
63-
),
64-
},
65-
false,
66-
);
55+
Modal.close();
56+
await handle.refresh();
57+
};
58+
59+
Modal.set({
60+
content: (
61+
<EditUser
62+
user={{ ...user }}
63+
onCancel={() => Modal.close()}
64+
onSuccess={saveUser}
65+
/>
66+
),
67+
});
68+
Modal.open();
69+
};
70+
71+
const confirmDeleteUser = (user) => {
72+
const deleteUser = async () => {
73+
const client = handle.get('client');
74+
await client.mutate({
75+
mutation: gql`
76+
mutation DeleteUser($id: ID!) {
77+
deleteUser(id: $id) {
78+
success
79+
message
80+
}
81+
}
82+
`,
83+
variables: { id: user.id },
84+
});
85+
86+
Modal.close();
87+
await handle.refresh();
88+
};
89+
90+
Modal.set({
91+
content: (
92+
<DeleteUser
93+
user={user}
94+
onCancel={() => Modal.close()}
95+
onSuccess={deleteUser}
96+
/>
97+
),
98+
});
6799
Modal.open();
68100
};
69101

@@ -76,7 +108,9 @@ export const Dashboard = () => {
76108
loading={handle.get('loading', false)}
77109
error={handle.get('error')}
78110
users={handle.get('data.users', [])}
79-
onDelete={confirmDelete}
111+
onNew={editUser}
112+
onEdit={editUser}
113+
onDelete={confirmDeleteUser}
80114
/>
81115
</Col>
82116
</Row>

‎src/app/components/Dashboard/User/DeleteUser/DeleteUser.jsx

+29-6
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,52 @@
11
import React from 'react';
22
import Button from 'react-bootstrap/Button';
3+
import Modal from 'react-bootstrap/Modal';
34

4-
export const Header = ({ user }) => {
5+
const Header = ({ user }) => {
56
const { id, name } = user;
6-
return <h1>Delete {name}</h1>;
7+
return (
8+
<Modal.Header closeButton>
9+
<h1>Delete {name}</h1>
10+
</Modal.Header>
11+
);
712
};
813

9-
export const Body = ({ user }) => {
10-
return <p>Are you sure you want to delete {user.name}?</p>;
14+
const Body = ({ user }) => {
15+
return (
16+
<Modal.Body>
17+
<p>Are you sure you want to delete {user.name}?</p>
18+
</Modal.Body>
19+
);
1120
};
1221

13-
export const Footer = ({
22+
const Footer = ({
1423
user,
1524
onCancel = () => console.log('Cancel delete'),
1625
onSuccess = (user) => console.log(`Delete user ${user.id}`),
1726
}) => {
1827
const { id } = user;
1928
return (
20-
<>
29+
<Modal.Footer>
2130
<Button variant='secondary' onClick={onCancel}>
2231
Cancel
2332
</Button>
2433
<Button variant='danger' onClick={() => onSuccess(user)}>
2534
Delete
2635
</Button>
36+
</Modal.Footer>
37+
);
38+
};
39+
40+
export const DeleteUser = ({
41+
user,
42+
onCancel = () => console.log('Cancel delete'),
43+
onSuccess = (user) => console.log(`Delete user ${user.id}`),
44+
}) => {
45+
return (
46+
<>
47+
<Header user={user} />
48+
<Body user={user} />
49+
<Footer user={user} onCancel={onCancel} onSuccess={onSuccess} />
2750
</>
2851
);
2952
};

0 commit comments

Comments
 (0)