New / Edit user

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} />
  </>
  );
 };