Add create course form

Author: davidmatas

package-lock.json

@@ -38,7 +38,10 @@
     "body-parser": "^1.19.0",
     "bson": "^4.0.4",
     "compression": "^1.7.4",
+    "connect-flash": "^0.1.1",
     "convict": "^6.0.0",
+    "cookie-parser": "^1.4.5",
+    "cookie-session": "^1.4.0",
     "copy": "^0.3.2",
     "errorhandler": "^1.5.1",
     "express": "^4.17.1",
@@ -56,11 +59,14 @@
     "winston": "^3.2.1"
   },
   "devDependencies": {
-    "@types/nunjucks": "^3.1.3",
     "@types/aws-lambda": "^8.10.51",
+    "@types/connect-flash": "0.0.35",
+    "@types/cookie-parser": "^1.4.2",
+    "@types/cookie-session": "^2.0.41",
     "@types/cucumber": "^6.0.1",
     "@types/faker": "^4.1.12",
     "@types/jest": "^25.2.3",
+    "@types/nunjucks": "^3.1.3",
     "@types/supertest": "^2.0.9",
     "cucumber": "^6.0.5",
     "faker": "^4.1.0",

package.json

@@ -4,12 +4,27 @@ import helmet from 'helmet';
 import compress from 'compression';
 import { registerRoutes } from './routes';
 import path from 'path';
+import cookieSession from 'cookie-session';
+import cookieParser from 'cookie-parser';
+import flash from 'connect-flash';
 import nunjucks from 'nunjucks';
 
 const app: express.Express = express();
 
 app.set('port', process.env.PORT || 8032);
 
+app.use(cookieParser());
+app.use(
+  cookieSession({
+    name: 'Backoffice Frontend Codely session',
+    keys: ['Codely'],
+
+    // Cookie Options
+    maxAge: 24 * 60 * 60 * 1000 // 24 hours
+  })
+);
+app.use(flash());
+
 // Templates
 app.set('view engine', 'html');
 nunjucks.configure(path.join(__dirname, '/templates'), {

src/apps/backoffice/frontend/app.ts

@@ -20,6 +20,22 @@ services:
       method: 'createClient'
     arguments: ['mooc']
 
+  Mooc.courses.CourseRepository:
+    class: ../../../../../Contexts/Mooc/Courses/infrastructure/persistence/MongoCourseRepository
+    arguments: ['@Mooc.shared.ConnectionManager']
+
+  Mooc.shared.EventBus:
+    class: ../../../../../Contexts/Shared/infrastructure/EventBus/InMemoryAsyncEventBus
+    arguments: []
+
+  Mooc.courses.CourseCreator:
+    class: ../../../../../Contexts/Mooc/Courses/application/CourseCreator
+    arguments: ['@Mooc.courses.CourseRepository', '@Mooc.shared.EventBus']
+
   Apps.Backoffice.Frontend.controllers.CoursesGetController:
     class: ../../controllers/CoursesGetController
     arguments: ['@Mooc.coursesCounter.CoursesCounterFinder']
+
+  Apps.Backoffice.Frontend.controllers.CoursesPostController:
+    class: ../../controllers/CoursesPostController
+    arguments: ['@Mooc.courses.CourseCreator']

src/apps/backoffice/frontend/config/dependency-injection/application.yaml

@@ -1,5 +1,6 @@
 import { Request, Response } from 'express';
 import { CoursesCounterFinder } from '../../../../Contexts/Mooc/CoursesCounter/application/Find/CoursesCounterFinder';
+import { Uuid } from '../../../../Contexts/Shared/domain/value-object/Uuid';
 
 export class CoursesGetController {
   constructor(private coursesCounterFinder: CoursesCounterFinder) {}
@@ -11,7 +12,8 @@ export class CoursesGetController {
       title: 'Welcome',
       description: 'CodelyTV - Backoffice',
       courses_counter: courses.total,
-      new_course_id: 'xxxx'
+      new_course_id: Uuid.random(),
+      flash: req.flash()
     });
   }
 }

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

@@ -0,0 +1,20 @@
+import { Request, Response } from 'express';
+import { CreateCourseRequest } from '../../../../Contexts/Mooc/Courses/application/CreateCourseRequest';
+import { CourseCreator } from '../../../../Contexts/Mooc/Courses/application/CourseCreator';
+
+export class CoursesPostController {
+  constructor(private courseCreator: CourseCreator) {}
+
+  async run(req: Request, res: Response) {
+    // TODO: validation
+    // req.flash('errors.id', 'Flash Message Added');
+
+    await this.createCourse(req, res);
+  }
+
+  private async createCourse(req: Request, res: Response) {
+    await this.courseCreator.run({ id: req.body.id, name: req.body.name, duration: req.body.duration });
+    req.flash('message', `Felicidades, el curso ${req.body.name} ha sido creado!`);
+    res.redirect('/courses');
+  }
+}

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

@@ -1,8 +1,16 @@
 import { Express } from 'express';
 import container from '../config/dependency-injection';
 import { CoursesGetController } from '../controllers/CoursesGetController';
+import { CoursesPostController } from '../controllers/CoursesPostController';
 
 export const register = (app: Express) => {
-  const controller: CoursesGetController = container.get('Apps.Backoffice.Frontend.controllers.CoursesGetController');
-  app.get('/courses', controller.run.bind(controller));
+  const coursesGetController: CoursesGetController = container.get(
+    'Apps.Backoffice.Frontend.controllers.CoursesGetController'
+  );
+  const coursesPostController: CoursesPostController = container.get(
+    'Apps.Backoffice.Frontend.controllers.CoursesPostController'
+  );
+
+  app.get('/courses', coursesGetController.run.bind(coursesGetController));
+  app.post('/courses', coursesPostController.run.bind(coursesPostController));
 };

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

@@ -1 +1,48 @@
-hello
+<form class="w-full max-w-lg float-right" method="post" action="/courses">
+  <h2 class="block uppercase tracking-wide text-gray-700 text-3xl font-bold mb-2">Crear curso</h2>
+  <div class="flex flex-wrap mb-6 -mx-3">
+      <div class="w-full md:w-full px-3 mb-6 md:mb-0">
+          <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
+              Identificador
+          </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}}">
+
+          {% if flash['errors.id'] %}
+              <p class="text-red-500 text-xs italic">{{ flash['errors.id'] }}</p>
+          {% endif %}
+      </div>
+  </div>
+  <div class="flex flex-wrap -mx-3 mb-6">
+      <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
+          <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
+              Nombre
+          </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="">
+
+          {% if flash['errors.name'] %}
+              <p class="text-red-500 text-xs italic">{{ flash['errors.name'] }}</p>
+          {% endif %}
+      </div>
+      <div class="w-full md:w-1/2 px-3">
+          <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
+              Duración (en inglés)
+          </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">
+          {% if flash['errors.duration'] %}
+              <p class="text-red-500 text-xs italic">{{ flash['errors.duration'] }}</p>
+          {% endif %}
+      </div>
+  </div>
+  <div class="flex flex-wrap mb-6">
+      <button class="md:w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+              type="submit">
+          Crear curso!
+      </button>
+  </div>
+</form>