From b9fb37ac8d912de5d7657d160388096db1d59927 Mon Sep 17 00:00:00 2001 From: Sebastian Mandal Date: Sat, 31 Jul 2021 06:34:09 +0200 Subject: [PATCH] Remade Page/Route system, from interface to classes --- public/example/style.css | 8 ++++-- src/core/all_routes.ts | 12 +++++++++ src/core/pages.ts | 12 --------- src/core/route.ts | 29 ++++++++++++++++++++++ src/core/types.ts | 5 ---- src/example/api/employees.ts | 48 +++++++++++++++++++++++++----------- src/example/pages/about.ts | 27 ++++++++++++-------- src/example/pages/contact.ts | 27 ++++++++++++-------- src/example/pages/home.ts | 25 ++++++++++++------- src/index.ts | 8 +++--- views/example/about.ejs | 4 ++- views/example/contact.ejs | 4 ++- views/example/home.ejs | 41 ++++++++++++++++++++++++++++++ views/example/index.ejs | 39 ----------------------------- 14 files changed, 181 insertions(+), 108 deletions(-) create mode 100644 src/core/all_routes.ts delete mode 100644 src/core/pages.ts create mode 100644 src/core/route.ts delete mode 100644 src/core/types.ts create mode 100644 views/example/home.ejs delete mode 100644 views/example/index.ejs diff --git a/public/example/style.css b/public/example/style.css index ceafd11..ba4cc2b 100644 --- a/public/example/style.css +++ b/public/example/style.css @@ -8,9 +8,14 @@ body { font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; } +.wrapper { + display: flex; + align-items: center; + justify-content: center; +} + .container { position: relative; - left: 30%; width: 40%; } @@ -27,6 +32,5 @@ body { } .title { - width: 100%; text-align: center; } diff --git a/src/core/all_routes.ts b/src/core/all_routes.ts new file mode 100644 index 0000000..4fcfe42 --- /dev/null +++ b/src/core/all_routes.ts @@ -0,0 +1,12 @@ +// importing all the pages and APIs +import Home from "../example/pages/home"; +import About from "../example/pages/about"; +import Contact from "../example/pages/contact"; +import API from "../example/api/employees"; + +export default { + Home, + About, + Contact, + API, +}; diff --git a/src/core/pages.ts b/src/core/pages.ts deleted file mode 100644 index f03e913..0000000 --- a/src/core/pages.ts +++ /dev/null @@ -1,12 +0,0 @@ -// importing all the pages and APIs -import exampleIndex from "../example/pages/home"; -import exampleAbout from "../example/pages/about"; -import exampleContact from "../example/pages/contact"; -import exampleEmployeeAPI from "../example/api/employees"; - -export default { - exampleIndex, - exampleAbout, - exampleContact, - exampleEmployeeAPI, -}; diff --git a/src/core/route.ts b/src/core/route.ts new file mode 100644 index 0000000..efed4d6 --- /dev/null +++ b/src/core/route.ts @@ -0,0 +1,29 @@ +import Express from "express"; + +export default class Route { + path: string; + method: string; + script: (req: Express.Request | any, res: Express.Response) => void; + + constructor( + path: string, + method: + | "all" + | "get" + | "post" + | "put" + | "delete" + | "patch" + | "options" + | "head", + handler: (req: any, res: any) => void + ) { + this.path = path; + this.method = method; + this.script = handler; + } + + run(app: any) { + app[this.method](this.path, this.script); + } +} diff --git a/src/core/types.ts b/src/core/types.ts deleted file mode 100644 index 7ce504c..0000000 --- a/src/core/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface PageType { - path: string; - method: "get" | "post" | "put" | "delete"; - handler: (req: any, res: any) => void; -} diff --git a/src/example/api/employees.ts b/src/example/api/employees.ts index 1c295c7..77f7d9e 100644 --- a/src/example/api/employees.ts +++ b/src/example/api/employees.ts @@ -1,6 +1,10 @@ -import { PageType } from "../../core/types"; +import Route from "../../core/route"; +import Express from "express"; -const employeeObject = { +/** + * sample database + **/ +const employeeDatabase = { employees: [ { name: "John Smith", @@ -15,20 +19,34 @@ const employeeObject = { ], }; -const employeeAPI: PageType = { - path: "/api/employees", - method: "get", - handler: (req, res) => { - const query: boolean = req.query.id; - const employees = employeeObject.employees; - const employee = employees[parseInt(req.query.id)] || { - message: "This user does not exist.", - }; +const script = (req: Express.Request, res: Express.Response) => { + /** + * checking if a query was provided, + * and creating a query variable of type to avoid the annoying Typescript "id does not exist on type of req.query" + **/ + const queryExists: boolean = req.query.id !== undefined; + const query: any = req.query; - res.header("Content-Type", "application/json"); + /** + * checking if a user exists at the index (query.id) provided in the employee array + **/ + const employees = employeeDatabase.employees; + const employee = employees[parseInt(query["id"])] || { + message: "This user does not exist.", + }; - return res.send(JSON.stringify(query ? employee : employees, null, 2)); - }, + res.header("Content-Type", "application/json"); + return res.send(JSON.stringify(queryExists ? employee : employees, null, 2)); }; -export default employeeAPI; +export default class API extends Route { + /** + * super() + * parameter 1: the URL path (/api/employees) + * parameter 2: the Express routing method (GET) + * parameter 3: the Express middleware/handler function (script) + **/ + constructor() { + super("/api/employees", "get", script); + } +} diff --git a/src/example/pages/about.ts b/src/example/pages/about.ts index a10cd9a..4877a7d 100644 --- a/src/example/pages/about.ts +++ b/src/example/pages/about.ts @@ -1,15 +1,22 @@ -import { PageType } from "../../core/types"; +import Route from "../../core/route"; +import Express from "express"; -const aboutObject = { - title: "About us", +const renderObject = { + title: "About us.", }; -const aboutPage: PageType = { - path: "/about", - method: "get", - handler: (req, res) => { - res.render("examples/about", aboutObject); - }, +const script = (req: Express.Request, res: Express.Response) => { + return res.render("example/about", renderObject); }; -export default aboutPage; +export default class AboutUs extends Route { + /** + * super() + * parameter 1: the URL path (/api/employees) + * parameter 2: the Express routing method (GET) + * parameter 3: the Express middleware/handler function (script) + **/ + constructor() { + super("/about", "get", script); + } +} diff --git a/src/example/pages/contact.ts b/src/example/pages/contact.ts index 9f6a5ce..587a359 100644 --- a/src/example/pages/contact.ts +++ b/src/example/pages/contact.ts @@ -1,15 +1,22 @@ -import { PageType } from "../../core/types"; +import Route from "../../core/route"; +import Express from "express"; -const contactObject = { - title: "Get in touch", +const renderObject = { + title: "Get in touch!", }; -const contactPage: PageType = { - path: "/contact", - method: "get", - handler: (req, res) => { - res.render("examples/contact", contactObject); - }, +const script = (req: Express.Request, res: Express.Response) => { + return res.render("example/contact", renderObject); }; -export default contactPage; +export default class Contact extends Route { + /** + * super() + * parameter 1: the URL path (/api/employees) + * parameter 2: the Express routing method (GET) + * parameter 3: the Express middleware/handler function (script) + **/ + constructor() { + super("/contact", "get", script); + } +} diff --git a/src/example/pages/home.ts b/src/example/pages/home.ts index 6d36c89..157f0e3 100644 --- a/src/example/pages/home.ts +++ b/src/example/pages/home.ts @@ -1,16 +1,23 @@ -import { PageType } from "../../core/types"; +import Route from "../../core/route"; +import Express from "express"; -const indexObject = { +const renderObject = { title: "Home", message: "All the examples included in this Repo", }; -const indexPage: PageType = { - path: "/", - method: "get", - handler: (req, res) => { - res.render("examples/index", indexObject); - }, +const script = (req: Express.Request, res: Express.Response) => { + return res.render("example/home", renderObject); }; -export default indexPage; +export default class Home extends Route { + /** + * super() + * parameter 1: the URL path (/api/employees) + * parameter 2: the Express routing method (GET) + * parameter 3: the Express middleware/handler function (script) + **/ + constructor() { + super("/", "get", script); + } +} diff --git a/src/index.ts b/src/index.ts index aaf74b1..b8ff6e0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,10 +12,10 @@ app.set("views", path.join(__dirname, "../views")); app.set("view engine", "ejs"); app.use(express.static("./public")); -// Automatically configure page routes -import pages from "./core/pages"; -Object.entries(pages).forEach(([, { method, path, handler }]) => { - return app[method](path, handler); +// Automatically configure Express routes +import routes from "./core/all_routes"; +Object.entries(routes).forEach(([_, Route]) => { + new Route().run(app); }); // Start the Express server diff --git a/views/example/about.ejs b/views/example/about.ejs index 99098f2..702e8cf 100644 --- a/views/example/about.ejs +++ b/views/example/about.ejs @@ -1,3 +1,5 @@ -

<%= title %>

\ No newline at end of file +
+

<%= title %>

+
diff --git a/views/example/contact.ejs b/views/example/contact.ejs index abfb473..702e8cf 100644 --- a/views/example/contact.ejs +++ b/views/example/contact.ejs @@ -1,3 +1,5 @@ -

<%= title %>

+
+

<%= title %>

+
diff --git a/views/example/home.ejs b/views/example/home.ejs new file mode 100644 index 0000000..6a6b8e8 --- /dev/null +++ b/views/example/home.ejs @@ -0,0 +1,41 @@ + + +
+
+

<%= title %>

+

<%= message %>

+ /aboutThe example about page
/contactThe example contact page
/api/employeesThe full mock employee API
/api/employees?id=0First employee in the object
/api/employees?id=1Second employee in the object
/api/employees?id=2User doesn't exist, returns error. +
+
diff --git a/views/example/index.ejs b/views/example/index.ejs deleted file mode 100644 index e34c36a..0000000 --- a/views/example/index.ejs +++ /dev/null @@ -1,39 +0,0 @@ - - -

<%= title %>

-

<%= message %>

- -
- /aboutThe example about page
/contactThe example contact page
/api/employeesThe full mock employee API
/api/employees?id=0First employee in the object
/api/employees?id=1Second employee in the object
/api/employees?id=2User doesn't exist, returns error. -