Validate courses request

Author: davidmatas

package-lock.json

@@ -46,6 +46,7 @@
     "copy": "^0.3.2",
     "errorhandler": "^1.5.1",
     "express": "^4.17.1",
+    "express-validator": "^6.6.1",
     "glob": "^7.1.6",
     "helmet": "^3.22.0",
     "http-status": "^1.4.2",

package.json

@@ -3,19 +3,21 @@ import { Uuid } from '../../../../Contexts/Shared/domain/value-object/Uuid';
 import { QueryBus } from '../../../../Contexts/Shared/domain/QueryBus';
 import { FindCoursesCounterResponse } from '../../../../Contexts/Mooc/CoursesCounter/application/Find/FindCoursesCounterResponse';
 import { FindCoursesCounterQuery } from '../../../../Contexts/Mooc/CoursesCounter/application/Find/FindCoursesCounterQuery';
+import { WebController } from './WebController';
 
-export class CoursesGetController {
-  constructor(private queryBus: QueryBus) {}
+export class CoursesGetController extends WebController {
+  constructor(private queryBus: QueryBus) {
+    super();
+  }
 
   async run(req: Request, res: Response) {
     const courses = await this.queryBus.ask<FindCoursesCounterResponse>(new FindCoursesCounterQuery());
 
-    res.render('pages/courses/courses', {
+    this.render(req, res, 'pages/courses/courses', {
       title: 'Welcome',
       description: 'CodelyTV - Backoffice',
       courses_counter: courses.total,
-      new_course_id: Uuid.random(),
-      flash: req.flash()
+      id: Uuid.random().value
     });
   }
 }

src/apps/backoffice/frontend/controllers/CoursesGetController.ts

@@ -1,15 +1,29 @@
 import { Request, Response } from 'express';
 import { CommandBus } from '../../../../Contexts/Shared/domain/CommandBus';
 import { CreateCourseCommand } from '../../../../Contexts/Mooc/Courses/application/CreateCourseCommand';
+import { body, ValidationChain } from 'express-validator';
+import { WebController } from './WebController';
 
-export class CoursesPostController {
-  constructor(private commandBus: CommandBus) {}
+export class CoursesPostController extends WebController {
+  constructor(private commandBus: CommandBus) {
+    super();
+  }
 
-  async run(req: Request, res: Response) {
-    // TODO: validation
-    // req.flash('errors.id', 'Flash Message Added');
+  static validator(): ValidationChain[] {
+    return [
+      body('id').isUUID(),
+      body('name').isLength({ min: 1, max: 255 }),
+      body('duration').isLength({ min: 4, max: 100 })
+    ];
+  }
 
-    await this.createCourse(req, res);
+  async run(req: Request, res: Response) {
+    const errors = this.validateRequest(req);
+    if (errors.length === 0) {
+      await this.createCourse(req, res);
+    } else {
+      this.redirectWithErrors(req, res, errors);
+    }
   }
 
   private async createCourse(req: Request, res: Response) {
@@ -18,9 +32,9 @@ export class CoursesPostController {
       name: req.body.name,
       duration: req.body.duration
     });
+
     await this.commandBus.dispatch(createCourseCommand);
 
-    req.flash('message', `Felicidades, el curso ${req.body.name} ha sido creado!`);
-    res.redirect('/courses');
+    this.redirectWithMessage(req, res, '/courses', `Felicidades, el curso ${req.body.name} ha sido creado!`);
   }
 }

src/apps/backoffice/frontend/controllers/CoursesPostController.ts

@@ -0,0 +1,61 @@
+import { Request, Response } from 'express';
+import { validationResult, ValidationError, matchedData } from 'express-validator';
+
+export abstract class WebController {
+  protected validateRequest(req: Request): Array<ValidationError> {
+    const errors = validationResult(req);
+    return errors.array();
+  }
+
+  private setFlashMessage(req: Request, message: { key: string; value: string }) {
+    req.flash(message.key, message.value);
+  }
+
+  protected redirectWithErrors(req: Request, res: Response, errors: ValidationError[]) {
+    const validFields = this.getValidFields(req);
+
+    errors.forEach(e => {
+      this.setFlashMessage(req, { key: `errors.${e.param}`, value: e.msg });
+    });
+
+    validFields.forEach(field => {
+      this.setFlashMessage(req, { key: `inputs.${field.param}`, value: field.value });
+    });
+
+    res.redirect(req.originalUrl);
+  }
+
+  protected redirectWithMessage(req: Request, res: Response, route: string, message: string) {
+    this.setFlashMessage(req, { key: 'message', value: message });
+    res.redirect(route);
+  }
+
+  private getValidFields(req: Request): Array<{ value: any; param: string }> {
+    const validData = matchedData(req, { onlyValidData: false });
+    return Object.keys(validData).map(key => ({
+      param: key,
+      value: validData[key]
+    }));
+  }
+
+  protected render(req: Request, res: Response, template: string, data: { [key: string]: any }) {
+    const flash = this.feedFlash(req, data);
+    res.render('pages/courses/courses', {
+      ...data,
+      ...flash
+    });
+  }
+
+  private feedFlash(req: Request, data: { [key: string]: any }) {
+    const rawFlash = req.flash();
+    const flashResponse = Object.keys(data).reduce((flash, key) => {
+      flash[`inputs.${key}`] = flash[`inputs.${key}`] || data[key];
+      return flash;
+    }, rawFlash);
+    return {
+      flash: flashResponse
+    };
+  }
+
+  abstract run(req: Request, res: Response): Promise<void>;
+}

src/apps/backoffice/frontend/controllers/WebController.ts

@@ -12,5 +12,5 @@ export const register = (app: Express) => {
   );
 
   app.get('/courses', coursesGetController.run.bind(coursesGetController));
-  app.post('/courses', coursesPostController.run.bind(coursesPostController));
+  app.post('/courses', CoursesPostController.validator(), coursesPostController.run.bind(coursesPostController));
 };

src/apps/backoffice/frontend/routes/courses.route.ts

@@ -7,7 +7,7 @@ <h2 class="block uppercase tracking-wide text-gray-700 text-3xl font-bold mb-2">
           </label>
           <input class="{% if flash['errors.id'] %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  id="grid-first-name" type="text" name="id" placeholder="En formado UUID"
-                 value="{{new_course_id}}">
+                 value="{{flash['inputs.id']}}">
 
           {% if flash['errors.id'] %}
               <p class="text-red-500 text-xs italic">{{ flash['errors.id'] }}</p>
@@ -21,7 +21,7 @@ <h2 class="block uppercase tracking-wide text-gray-700 text-3xl font-bold mb-2">
           </label>
           <input class="{% if flash['errors.name'] %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  id="grid-first-name" type="text" name="name" placeholder="DDD en PHP"
-                 value="">
+                 value="{{flash['inputs.name']}}">
 
           {% if flash['errors.name'] %}
               <p class="text-red-500 text-xs italic">{{ flash['errors.name'] }}</p>
@@ -33,7 +33,7 @@ <h2 class="block uppercase tracking-wide text-gray-700 text-3xl font-bold mb-2">
           </label>
           <input class="{% if flash['errors.duration'] %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                  id="grid-last-name" type="text" name="duration" placeholder="8 days"
-                 value="xxx">
+                 value="{{flash['inputs.duration']}}">
           {% if flash['errors.duration'] %}
               <p class="text-red-500 text-xs italic">{{ flash['errors.duration'] }}</p>
           {% endif %}