New / Edit user

Author: jdillick

GraphQLServer/User/User.ts

@@ -1,7 +1,7 @@
 import { db } from '../Data/Db.ts';
 import { ObjectId } from 'mongo.ts';
 
-type UserRecord = {
+export type UserRecord = {
     _id?: ObjectId;
     name: string;
     email: string;
@@ -26,15 +26,16 @@ export class User {
     async save() {
         let rec;
         if (this.id) {
-            rec = await User.collection.updateOne(
-                { _id: this.id },
+            await User.collection.updateOne(
+                { _id: new ObjectId(this.id) },
                 { $set: this },
             );
+            rec = {};
         } else {
             rec = await User.collection.insertOne(this);
         }
 
-        const saved = new User({ ...this, ...rec });
+        const saved = new User({ ...this, ...rec, _id: this.id });
         Object.assign(this, saved);
         return saved;
     }

GraphQLServer/app.ts

@@ -1,6 +1,7 @@
 import { Application, Router } from 'oak.ts';
 import { applyGraphQL, gql, GQLError } from 'oak_graphql.ts';
-import { User } from './User/User.ts';
+import { ObjectId } from 'mongo.ts';
+import { User, type UserRecord } from './User/User.ts';
 import { Post } from './Post/Post.ts';
 import _ from 'underscore.ts';
 
@@ -20,7 +21,8 @@ app.use(async (ctx, next) => {
 });
 
 const typeDefs = gql`
-    input CreateUserInput {
+    input SaveUserInput {
+        id: ID
         name: String!
         email: String!
         age: Int
@@ -47,7 +49,7 @@ const typeDefs = gql`
     }
 
     type Query {
-        testInput(input: CreateUserInput!): User
+        testInput(input: SaveUserInput!): User
         me: User!
         user(id: ID!): User
         users: [User]!
@@ -58,7 +60,7 @@ const typeDefs = gql`
     }
 
     type Mutation {
-        createUser(name: String!, email: String!, age: Int): User!
+        saveUser(input: SaveUserInput): User!
         deleteUser(id: ID!): SuccessOrError!
         createPost(title: String!, body: String!, published: Boolean!): Post!
     }
@@ -129,14 +131,29 @@ const resolvers = {
         },
     },
     Mutation: {
-        createUser: async (
+        saveUser: async (
             parent: any,
-            { name, email, age }: { name: string; email: string; age?: number },
+            {
+                input,
+            }: {
+                input: {
+                    id?: ObjectId;
+                    name: string;
+                    email: string;
+                    age?: number;
+                };
+            },
             context: any,
             info: any,
         ) => {
-            const user = new User({ name, email, age });
+            const draft: UserRecord = { ...(input as UserRecord) };
+            if (input.id) {
+                draft._id = input.id;
+            }
+
+            const user = new User(draft);
             await user.save();
+            console.log({ user });
             return user;
         },
         deleteUser: async (

src/app/components/Dashboard/Dashboard.jsx

@@ -4,7 +4,8 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useHookComponent, useHandle } from 'reactium-core/sdk';
 import { useSyncQuery } from '@reactium/graphql';
-import * as DeleteUser from './User/DeleteUser/DeleteUser';
+import { DeleteUser } from './User/DeleteUser/DeleteUser';
+import { EditUser } from './User/EditUser/EditUser';
 
 export const Dashboard = () => {
     const PostList = useHookComponent('PostList');
@@ -16,6 +17,7 @@ export const Dashboard = () => {
                     id
                     name
                     email
+                    age
                 }
 
                 posts {
@@ -33,37 +35,67 @@ export const Dashboard = () => {
     );
 
     const Modal = useHandle('Modal');
-    const confirmDelete = (user) => {
-        Modal.set(
-            {
-                header: <DeleteUser.Header user={user} />,
-                body: <DeleteUser.Body user={user} />,
-                footer: (
-                    <DeleteUser.Footer
-                        user={user}
-                        onCancel={() => Modal.close()}
-                        onSuccess={async () => {
-                            const client = handle.get('client');
-                            await client.mutate({
-                                mutation: gql`
-                                    mutation DeleteUser($id: ID!) {
-                                        deleteUser(id: $id) {
-                                            success
-                                            message
-                                        }
-                                    }
-                                `,
-                                variables: { id: user.id },
-                            });
+    const editUser = async (user = {}) => {
+        const saveUser = async (userObj) => {
+            console.log('saveUser', userObj);
+            const client = handle.get('client');
+            await client.mutate({
+                mutation: gql`
+                    mutation SaveUser($userObj: SaveUserInput) {
+                        saveUser(input: $userObj) {
+                            id
+                            name
+                            email
+                        }
+                    }
+                `,
+                variables: { userObj },
+            });
 
-                            Modal.close();
-                            await handle.refresh();
-                        }}
-                    />
-                ),
-            },
-            false,
-        );
+            Modal.close();
+            await handle.refresh();
+        };
+
+        Modal.set({
+            content: (
+                <EditUser
+                    user={{ ...user }}
+                    onCancel={() => Modal.close()}
+                    onSuccess={saveUser}
+                />
+            ),
+        });
+        Modal.open();
+    };
+
+    const confirmDeleteUser = (user) => {
+        const deleteUser = async () => {
+            const client = handle.get('client');
+            await client.mutate({
+                mutation: gql`
+                    mutation DeleteUser($id: ID!) {
+                        deleteUser(id: $id) {
+                            success
+                            message
+                        }
+                    }
+                `,
+                variables: { id: user.id },
+            });
+
+            Modal.close();
+            await handle.refresh();
+        };
+
+        Modal.set({
+            content: (
+                <DeleteUser
+                    user={user}
+                    onCancel={() => Modal.close()}
+                    onSuccess={deleteUser}
+                />
+            ),
+        });
         Modal.open();
     };
 
@@ -76,7 +108,9 @@ export const Dashboard = () => {
                         loading={handle.get('loading', false)}
                         error={handle.get('error')}
                         users={handle.get('data.users', [])}
-                        onDelete={confirmDelete}
+                        onNew={editUser}
+                        onEdit={editUser}
+                        onDelete={confirmDeleteUser}
                     />
                 </Col>
             </Row>

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

@@ -1,29 +1,52 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
 
-export const Header = ({ user }) => {
+const Header = ({ user }) => {
     const { id, name } = user;
-    return <h1>Delete {name}</h1>;
+    return (
+        <Modal.Header closeButton>
+            <h1>Delete {name}</h1>
+        </Modal.Header>
+    );
 };
 
-export const Body = ({ user }) => {
-    return <p>Are you sure you want to delete {user.name}?</p>;
+const Body = ({ user }) => {
+    return (
+        <Modal.Body>
+            <p>Are you sure you want to delete {user.name}?</p>
+        </Modal.Body>
+    );
 };
 
-export const Footer = ({
+const Footer = ({
     user,
     onCancel = () => console.log('Cancel delete'),
     onSuccess = (user) => console.log(`Delete user ${user.id}`),
 }) => {
     const { id } = user;
     return (
-        <>
+        <Modal.Footer>
             <Button variant='secondary' onClick={onCancel}>
                 Cancel
             </Button>
             <Button variant='danger' onClick={() => onSuccess(user)}>
                 Delete
             </Button>
+        </Modal.Footer>
+    );
+};
+
+export const DeleteUser = ({
+    user,
+    onCancel = () => console.log('Cancel delete'),
+    onSuccess = (user) => console.log(`Delete user ${user.id}`),
+}) => {
+    return (
+        <>
+            <Header user={user} />
+            <Body user={user} />
+            <Footer user={user} onCancel={onCancel} onSuccess={onSuccess} />
         </>
     );
 };