Add plop template for API models

plop-templates/model.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const url = `${process.env.API_URL}/{{ camelCase name }}s`;
+
+export interface {{ properCase name }} {
+  id: number;
+}
+
+export async function get{{ properCase name }}s(): Promise<{{ properCase name }}[]> {
+  try {
+    const resp = await axios.get(url);
+    return resp.data;
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}

plopfile.ts

@@ -1,5 +1,4 @@
 module.exports = function(plop) {
-  // create your generators here
   plop.setGenerator("New component", {
     description: "Create a new TSX + SCSS component for React.",
     prompts: [
@@ -20,7 +19,7 @@ module.exports = function(plop) {
         message: "MobX store name:",
         when: answers => answers.observer
       },
-    ], // array of inquirer prompts
+    ],
     actions: [
       {
         type: "add",
@@ -40,7 +39,7 @@ module.exports = function(plop) {
         templateFile: "plop-templates/index.ts",
         abortOnFail: true
       }
-    ] // array of actions
+    ]
   });
   plop.setGenerator("New MobX state store", {
     description: "Create a new store for MobX.",
@@ -50,7 +49,7 @@ module.exports = function(plop) {
         name: "name",
         message: "Store name:"
       }
-    ], // array of inquirer prompts
+    ],
     actions: [
       {
         type: "add",
@@ -58,6 +57,24 @@ module.exports = function(plop) {
         templateFile: "plop-templates/store.ts",
         abortOnFail: true
       }
-    ] // array of actions
+    ]
+  });
+  plop.setGenerator("New API model", {
+    description: "Create a new API model for backend communication.",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "Model name:"
+      }
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/models/{{ properCase name }}.ts",
+        templateFile: "plop-templates/model.ts",
+        abortOnFail: true
+      }
+    ]
   });
 };

src/components/App/App.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import "./App.scss";
 import appStore from "../../stores/AppStore";
 import Button from "../Button";
-import { getPosts, Post as PostInterface } from "../../models/post";
+import { getPosts, Post as PostInterface } from "../../models/Post";
 import Post from "../Post";
 
 export interface AppProps {

src/components/Post/Post.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import "./Post.scss";
-import { Post as PostInterface } from "../../models/posts";
+import { Post as PostInterface } from "../../models/Post";
 
 export interface PostProps {
   post: PostInterface;

src/models/post.ts

@@ -16,4 +16,4 @@ export async function getPosts(): Promise<Post[]> {
     console.error(err);
     throw err;
   }
-}
+}