From cdf315096c54338873775f4f72b00f99c5e9fa9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Oriol?= <oriol.clement@gmail.com>
Date: Fri, 25 Dec 2020 09:33:51 +0100
Subject: [PATCH 1/2] Update Factory to generate new data each time
 (react-typescript example)

---
 react-typescript/src/mirage/index.ts | 60 +++++++++++++---------------
 1 file changed, 27 insertions(+), 33 deletions(-)

diff --git a/react-typescript/src/mirage/index.ts b/react-typescript/src/mirage/index.ts
index e03ded1..5967e73 100644
--- a/react-typescript/src/mirage/index.ts
+++ b/react-typescript/src/mirage/index.ts
@@ -1,44 +1,38 @@
-import { createServer, Model, Factory } from "miragejs";
+import { createServer, Model, Factory, Server, ModelInstance } from "miragejs";
 import faker from "faker";
 import { Person } from "../fetchers";
 
+type FactoryParams<Data> = {
+  [key in keyof Partial<Data>]: () => Data[key];
+} & {
+  afterCreate: (person: ModelInstance<Data>, server: Server) => void;
+};
+
 export function makeServer({ environment = "test" }) {
   return createServer({
     environment,
-
     factories: {
-      person: Factory.extend<Partial<Person>>({
-        get firstName() {
-          return faker.name.firstName();
-        },
-        get lastName() {
-          return faker.name.lastName();
-        },
-        get name() {
-          return faker.name.findName(this.firstName, this.lastName);
-        },
-        get streetAddress() {
-          return faker.address.streetAddress();
-        },
-        get cityStateZip() {
-          return faker.fake(
+      person: Factory.extend<FactoryParams<Person>>({
+        firstName: () => faker.name.firstName(),
+        lastName: () => faker.name.lastName(),
+
+        streetAddress: () => faker.address.streetAddress(),
+        cityStateZip: () =>
+          faker.fake(
             "{{address.city}}, {{address.stateAbbr}} {{address.zipCode}}"
-          );
-        },
-        get phone() {
-          return faker.phone.phoneNumber();
-        },
-        get username() {
-          return faker.internet.userName(this.firstName, this.lastName);
-        },
-        get password() {
-          return faker.internet.password();
-        },
-        get email() {
-          return faker.internet.email(this.firstName, this.lastName);
-        },
-        get avatar() {
-          return faker.internet.avatar();
+          ),
+        phone: () => faker.phone.phoneNumber(),
+        password: () => faker.internet.password(),
+        avatar: () => faker.internet.avatar(),
+        afterCreate(person, server) {
+          person.update({
+            name: faker.name.findName(person.firstName, person.lastName),
+            username: faker.internet.userName(
+              person.firstName,
+              person.lastName
+            ),
+            email: faker.internet.email(person.firstName, person.lastName),
+          });
         },
       }),
     },

From a71a785574904ec6cb8737f4be897fa94d2d6650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Oriol?= <oriol.clement@gmail.com>
Date: Fri, 25 Dec 2020 09:36:11 +0100
Subject: [PATCH 2/2] Add comment about afterCreate usage

---
 react-typescript/src/mirage/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react-typescript/src/mirage/index.ts b/react-typescript/src/mirage/index.ts
index 5967e73..4a6a43a 100644
--- a/react-typescript/src/mirage/index.ts
+++ b/react-typescript/src/mirage/index.ts
@@ -24,6 +24,7 @@ export function makeServer({ environment = "test" }) {
         phone: () => faker.phone.phoneNumber(),
         password: () => faker.internet.password(),
         avatar: () => faker.internet.avatar(),
+        /* We use afterCreate for creating properties that needs to be derived from other properties */
         afterCreate(person, server) {
           person.update({
             name: faker.name.findName(person.firstName, person.lastName),