Differentiate examples

packages/app1/app.tsx

@@ -11,29 +11,33 @@ const Numbers = observer(() => {
   // this module is lazy loaded
   const [APIStore, setAPIStore] = React.useState<APIStore | null>(null);
   React.useEffect(() => {
-    APIStoreRuntime.then(module => setAPIStore(module.APIStoreInstance));
+    APIStoreRuntime.then((module) => setAPIStore(module.APIStoreInstance));
   }, []);
 
   return APIStore ? (
     <>
       <div className="mfe-container">
         <div className="users__container">
-          <h1>Users App 1 (simple lazy fetch): </h1>
+          <h1>App1 (just display): </h1>
           <pre>This component is rendered in the main application</pre>
           <table>
-            {APIStore.users.map(({ name, id, username }) => {
+            <tr>
+              <td>Username</td>
+              <td>Full Name</td>
+              <td>ID</td>
+              <td>Flag Count</td>
+            </tr>
+            {APIStore.users.map(({ name, id, username, flags }) => {
               return (
                 <tr>
-                  <td>{name}</td>
-                  <td>{id}</td>
                   <td>{username}</td>
+                  <td>{name}</td>
+                  <td style={{ textAlign: "right" }}>{id}</td>
+                  <td style={{ textAlign: "right" }}>{flags}</td>
                 </tr>
               );
             })}
           </table>
-          <button className="users__delete" onClick={APIStore.deleteLastUser}>
-            Delete Last User from App 1
-          </button>
         </div>
         <Suspense fallback={() => "loading remote module..."}>
           <App2Users />

packages/app1/styles.less

@@ -1,15 +1,12 @@
 .users {
     &__container {
-        border-width: 3px;
-        border-style: solid;
         margin: 5px;
         padding: 12px;
 
-        &:first-child {
-            border-color: blue;
-        }
         &:last-child {
             border-color: red;
+            border-width: 3px;
+            border-style: solid;
         }
     }
 }

packages/app2/app.tsx

@@ -8,28 +8,39 @@ const APIStoreRuntime = import("store/Store");
 export default observer(function App() {
   const [APIStore, setAPIStore] = React.useState<APIStore | null>(null);
   React.useEffect(() => {
-    APIStoreRuntime.then(module => setAPIStore(module.APIStoreInstance));
+    APIStoreRuntime.then((module) => setAPIStore(module.APIStoreInstance));
   }, []);
 
   return APIStore ? (
     <>
       <div className="users__container">
-        <h1>Users App 2 (simple lazy fetch): </h1>
+        <h1>App2 (Modify Something): </h1>
         <pre>This component is a Federated Module</pre>
         <table>
-          {APIStore.users.map(({ name, id, username }) => {
+          <tr>
+            <td>Username</td>
+            <td>ID</td>
+            <td>Flags</td>
+            <td>Action</td>
+          </tr>
+          {APIStore.users.map(({ username, flags, id }) => {
             return (
               <tr>
-                <td>{name}</td>
-                <td>{id}</td>
                 <td>{username}</td>
+                <td style={{ textAlign: "right" }}>{id}</td>
+                <td style={{ textAlign: "right" }}>{flags}</td>
+                <td>
+                  <button onClick={() => APIStore.addFlagToUser(id)}>
+                    Add User Flag
+                  </button>{" "}
+                  <button onClick={() => APIStore.deleteUser(id)}>
+                    Delete User
+                  </button>
+                </td>
               </tr>
             );
           })}
         </table>
-        <button className="users__delete" onClick={APIStore.deleteLastUser}>
-          Delete Last User from App 2
-        </button>
       </div>
     </>
   ) : (

packages/store/app.ts

@@ -1,5 +1,11 @@
 import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
-import { action, configure, makeObservable, onBecomeObserved } from "mobx";
+import {
+  action,
+  computed,
+  configure,
+  makeObservable,
+  onBecomeObserved,
+} from "mobx";
 
 // without configuring enforceActions it would be possible to modify any observable from anywhere
 configure({ enforceActions: "observed" });
@@ -10,28 +16,42 @@ export class APIStore {
   constructor(
     axiosConf: AxiosRequestConfig = {
       baseURL: "https://jsonplaceholder.typicode.com",
-      auth: undefined
+      auth: undefined,
     }
   ) {
     makeObservable(this, {
-      users: true
+      users: true,
     });
     // setup api that should be in it's own class
     this.api = axios.create(axiosConf);
 
     // setup lazy observables
-    onBecomeObserved(this, "users", this.getUsers);
+    onBecomeObserved(this, "users", this.handleBecomeObserved);
   }
 
-  users: User[] = [];
+  handleBecomeObserved = () => {
+    if (!this.users.length) {
+      this.getUsers();
+    }
+  };
+
+  users: DemoUser[] = [];
   // async / await
   getUsers = action(async () => {
     const { data } = await this.api.get<User[]>("/users");
-    this.users = data;
-    // return data;
+    this.users = (data as DemoUser[]).map((user) => {
+      user.flags = 0;
+      return user;
+    });
   });
-  deleteLastUser = action(() => {
-    this.users.pop();
+  deleteUser = action((userId: User["id"]) => {
+    this.users = this.users.filter((user) => user.id !== userId);
+  });
+  addFlagToUser = action((userId: User["id"]) => {
+    const user = this.users.find((user) => user.id === userId);
+    if (user) {
+      user.flags++;
+    }
   });
 
   // not using async/await is a little weirder
@@ -44,4 +64,4 @@ export class APIStore {
 }
 
 // all references should point to this singleton (unless you want multiple stores).
-export const APIStoreInstance = new APIStore();
+export const APIStoreInstance = new APIStore();

packages/store/types/jsonPlaceholder.ts → packages/store/types/Users.ts

@@ -1,5 +1,5 @@
 interface User {
-  id: 1;
+  id: number;
   name: string;
   username: string;
   email: string;
@@ -14,3 +14,8 @@ interface User {
     };
   };
 }
+
+
+interface DemoUser extends User {
+  flags: number
+};