Add global modal component. Add user edit and delete button action stubs.

Author: jdillick

.prettierignore

@@ -2,4 +2,5 @@
 package.json
 src/assets/vendor
 docs
-*.md
+*.md
+GraphQLServer

GraphQLServer/.eslintignore

@@ -0,0 +1 @@
+*.ts

GraphQLServer/.prettierignore

@@ -0,0 +1 @@
+./*

GraphQLServer/Post/Post.ts

@@ -1,49 +1,62 @@
-import { db } from "../Data/Db.ts";
-import { ObjectId } from "mongo.ts";
+import { db } from '../Data/Db.ts';
+import { ObjectId } from 'mongo.ts';
+import { User } from '../User/User.ts';
 
 type PostRecord = {
-  _id?: ObjectId;
-  title: string;
-  body: string;
-  published?: boolean;
+    _id?: ObjectId;
+    authorId?: ObjectId;
+    title: string;
+    body: string;
+    published?: boolean;
 };
 
 export class Post {
-  constructor({ _id, title, body, published = true }: PostRecord) {
-    this.id = _id;
-    this.title = title;
-    this.body = body;
-    this.published = published;
-  }
-
-  id?: ObjectId;
-  title: string;
-  body: string;
-  published?: boolean;
-
-  static collection = db.collection("Post");
-
-  async save() {
-    let rec;
-    if (this.id) {
-      rec = await Post.collection.updateOne({ _id: this.id }, { $set: this });
-    } else {
-      rec = await Post.collection.insertOne(this);
+    id?: ObjectId;
+    authorId?: ObjectId;
+    title: string;
+    body: string;
+    published?: boolean;
+
+    constructor({ _id, authorId, title, body, published = true }: PostRecord) {
+        this.id = _id;
+        this.title = title;
+        this.body = body;
+        this.published = published;
+        this.authorId = authorId;
     }
 
-    const saved = new Post({ ...this, ...rec });
-    Object.assign(this, saved);
-    return saved;
-  }
-
-  static async find(query?: any) {
-    const records = await Post.collection.find(query).toArray();
-    return records.map((record) => new Post(record as PostRecord));
-  }
-
-  static async load(_id: string) {
-    const record = await Post.collection.findOne({ _id: new ObjectId(_id) });
-    if (typeof record == "undefined") return null;
-    return new Post(record as PostRecord);
-  }
+    static collection = db.collection('Post');
+
+    async save() {
+        let rec;
+        if (this.id) {
+            rec = await Post.collection.updateOne(
+                { _id: this.id },
+                { $set: this },
+            );
+        } else {
+            rec = await Post.collection.insertOne(this);
+        }
+
+        const saved = new Post({ ...this, ...rec });
+        Object.assign(this, saved);
+        return saved;
+    }
+
+    static async find(query?: any) {
+        const records = await Post.collection.find(query).toArray();
+        return records.map((record) => new Post(record as PostRecord));
+    }
+
+    static async load(_id: string) {
+        const record = await Post.collection.findOne({
+            _id: new ObjectId(_id),
+        });
+        if (typeof record == 'undefined') return null;
+        return new Post(record as PostRecord);
+    }
+
+    static async delete(_id: string) {
+        return await Post.collection.deleteOne({ _id: new ObjectId(_id) });
+    }
 }

GraphQLServer/User/User.ts

@@ -1,53 +1,58 @@
-import { db } from "../Data/Db.ts";
-import { ObjectId } from "mongo.ts";
+import { db } from '../Data/Db.ts';
+import { ObjectId } from 'mongo.ts';
 
 type UserRecord = {
-  _id?: ObjectId;
-  name: string;
-  email: string;
-  age?: number;
+    _id?: ObjectId;
+    name: string;
+    email: string;
+    age?: number;
 };
 
 export class User {
-  constructor({ _id, name, email, age }: UserRecord) {
-    this.id = _id;
-    this.name = name;
-    this.email = email;
-    this.age = age;
-  }
-
-  id?: ObjectId;
-  name: string;
-  email: string;
-  age?: number;
-
-  static collection = db.collection("User");
-
-  async save() {
-    let rec;
-    if (this.id) {
-      rec = await User.collection.updateOne({ _id: this.id }, { $set: this });
-    } else {
-      rec = await User.collection.insertOne(this);
+    constructor({ _id, name, email, age }: UserRecord) {
+        this.id = _id;
+        this.name = name;
+        this.email = email;
+        this.age = age;
     }
 
-    const saved = new User({ ...this, ...rec });
-    Object.assign(this, saved);
-    return saved;
-  }
-
-  static async find(query?: any) {
-    const records = await User.collection.find(query).toArray();
-    return records.map((record) => new User(record as UserRecord));
-  }
-
-  static async load(_id: string) {
-    const record = await User.collection.findOne({ _id: new ObjectId(_id) });
-    if (typeof record == "undefined") return null;
-    return new User(record as UserRecord);
-  }
-
-  static async delete(_id: string) {
-    return await User.collection.deleteOne({ _id: new ObjectId(_id) });
-  }
+    id?: ObjectId;
+    name: string;
+    email: string;
+    age?: number;
+
+    static collection = db.collection('User');
+
+    async save() {
+        let rec;
+        if (this.id) {
+            rec = await User.collection.updateOne(
+                { _id: this.id },
+                { $set: this },
+            );
+        } else {
+            rec = await User.collection.insertOne(this);
+        }
+
+        const saved = new User({ ...this, ...rec });
+        Object.assign(this, saved);
+        return saved;
+    }
+
+    static async find(query?: any) {
+        const records = await User.collection.find(query).toArray();
+        return records.map((record) => new User(record as UserRecord));
+    }
+
+    static async load(_id: string) {
+        const record = await User.collection.findOne({
+            _id: new ObjectId(_id),
+        });
+        if (typeof record == 'undefined') return null;
+        return new User(record as UserRecord);
+    }
+
+    static async delete(_id: string) {
+        return await User.collection.deleteOne({ _id: new ObjectId(_id) });
+    }
 }

package-lock.json

@@ -33,6 +33,9 @@
     "parse/node": false
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.2.0"
   },
   "nodemonConfig": {

package.json

@@ -0,0 +1,17 @@
+import { useHookComponent } from '@atomic-reactor/reactium-core/sdk';
+import React from 'react';
+
+/**
+ * -----------------------------------------------------------------------------
+ * Component: AppParent, special top-level component
+ * -----------------------------------------------------------------------------
+ */
+export const AppParent = ({ children }) => {
+    const GlobalModal = useHookComponent('GlobalModal');
+    return (
+        <>
+            <main>{children}</main>
+            <GlobalModal />
+        </>
+    );
+};

src/app/components/AppParent/AppParent.jsx

@@ -0,0 +1,3 @@
+.appparent {
+    
+}

src/app/components/AppParent/_reactium-style-organisms-AppParent.scss

@@ -0,0 +1,9 @@
+/**
+ * -----------------------------------------------------------------------------
+ * DDD Domain AppParent - Change name to place domain artifacts in this directory
+ * in a different domain.
+ * -----------------------------------------------------------------------------
+ */
+module.exports = {
+    name: 'AppParent',
+};