From 6c7ab31305753d290247009ea88eb9519d3f9a46 Mon Sep 17 00:00:00 2001
From: Khaled Garbaya <khaled@contentful.com>
Date: Mon, 25 Sep 2017 17:30:47 +0200
Subject: [PATCH] feat(courses): Add course list

---
 app.js                       |  6 +++++-
 bin/www                      |  1 -
 public/stylesheets/style.css | 20 +++++++++++++++++++-
 routes/courses.js            | 13 +++++++++++--
 services/contentful.js       | 13 ++++++++-----
 views/courses.pug            |  5 ++++-
 views/mixins/_courseCard.pug | 10 ++++++++++
 7 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 views/mixins/_courseCard.pug

diff --git a/app.js b/app.js
index cd1e01e..fd77e17 100644
--- a/app.js
+++ b/app.js
@@ -1,3 +1,4 @@
+require('dotenv').config({ path: 'variables.env' })
 const express = require('express')
 const path = require('path')
 // const favicon = require('serve-favicon')
@@ -11,7 +12,7 @@ const categories = require('./routes/categories')
 const about = require('./routes/about')
 const settings = require('./routes/settings')
 const sitemap = require('./routes/sitemap')
-
+const {initClient} = require('./services/contentful')
 const app = express()
 
 // view engine setup
@@ -51,4 +52,7 @@ app.use(function (err, req, res, next) {
   res.render('error')
 })
 
+// init the contentful client
+initClient()
+
 module.exports = app
diff --git a/bin/www b/bin/www
index 1861d0c..616abe3 100755
--- a/bin/www
+++ b/bin/www
@@ -6,7 +6,6 @@
 
 const app = require('../app')
 const http = require('http')
-require('dotenv').config({ path: 'variables.env' })
 /**
  * Get port from environment and store in Express.
  */
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 96fea31..8e7280f 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -129,7 +129,25 @@ label {
   padding: 2rem;
   box-shadow: $grad;
 }
-
+/* Course */
+.course {
+  position: relative;
+  background-color: white;
+  padding: 10px;
+  width: 30%;
+  height: 500px;
+  border-radius: 7px;
+  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);
+  position:relative;
+}
+.course__description {
+  border-top: 2px solid black;
+  margin: 60px 0 20px 0;
+}
+.course__link {
+  position: absolute;
+  bottom:20px;
+}
 /* Home Page __ hero*/
 .hero {
   display: flex;
diff --git a/routes/courses.js b/routes/courses.js
index a82ce23..83ff4b0 100644
--- a/routes/courses.js
+++ b/routes/courses.js
@@ -1,9 +1,18 @@
 const express = require('express')
+const {getCourses} = require('./../services/contentful')
+
 const router = express.Router()
 
 /* GET courses listing. */
-router.get('/', function (req, res, next) {
-  res.render('courses', { title: 'Courses' })
+router.get('/', async function (req, res, next) {
+  // we get all the entries with the content type `course`
+  let courses = []
+  try {
+    courses = await getCourses()
+  } catch (e) {
+    console.log('Error ', e)
+  }
+  res.render('courses', { title: 'Courses', courses: courses.items })
 })
 
 /* GET course detail. */
diff --git a/services/contentful.js b/services/contentful.js
index 3db4c8e..6a0607d 100644
--- a/services/contentful.js
+++ b/services/contentful.js
@@ -1,22 +1,25 @@
 const { createClient } = require('contentful')
 
-const client = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN})
+let client = null
 
-export function getCourses () {
+exports.initClient = () => {
+  client = createClient({space: process.env.CF_SPACE, accessToken: process.env.CF_ACCESS_TOKEN})
+}
+exports.getCourses = () => {
   // to get all the courses we simply request from Contentful all the entries
   // with the content_type `course`
   return client.getEntries({content_type: 'course'})
 }
 
-export function getLessons (courseId) {
+exports.getLessons = (courseId) => {
   // TODO
 }
 
-export function getCategories () {
+exports.getCategories = () => {
   // TODO
 }
 
-export function getCoursesByCategory (category) {
+exports.getCoursesByCategory = (category) => {
   // TODO
 }
 
diff --git a/views/courses.pug b/views/courses.pug
index 3d63b9a..db929e9 100644
--- a/views/courses.pug
+++ b/views/courses.pug
@@ -1,5 +1,8 @@
 extends layout
 
+include mixins/_courseCard
+
 block content
   h1= title
-  p Welcome to #{title}
+  each course in courses
+    +courseCard(course)
diff --git a/views/mixins/_courseCard.pug b/views/mixins/_courseCard.pug
new file mode 100644
index 0000000..4e6c9f8
--- /dev/null
+++ b/views/mixins/_courseCard.pug
@@ -0,0 +1,10 @@
+mixin courseCard(course = {fields: {title: '', description: '', categories: [], slug: ''}})
+  .course
+    .course__categories
+      if(course.fields.categories)
+        each category in course.fields.categories
+          a.course__categories--category(href=`categories/${category.fields.slug}`) #{category.title}
+    h1.course__title #{course.fields.title}
+    .course__description #{course.fields.shortDescription}
+    a.course__link(href=`/courses/${course.fields}`) view more 
+