Ember training gist

comments-box-initial-template.hbs

<div class="ui comments">
  <h3 class="ui dividing header">Comments</h3>
  <div class="comment">
    <a class="avatar">
      <img src="https://api.adorable.io/avatars/100/oldmonk@adorable.png">
    </a>
    <div class="content">
      <a class="author">Matt</a>
      <div class="metadata">
        <span class="date">Today at 5:42PM</span>
      </div>
      <div class="text">
        How artistic!
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
      </div>
    </div>
  </div>
  <div class="comment">
    <a class="avatar">
      <img src="https://api.adorable.io/avatars/100/mita@adorable.png">
    </a>
    <div class="content">
      <a class="author">Elliot Fu</a>
      <div class="metadata">
        <span class="date">Yesterday at 12:30AM</span>
      </div>
      <div class="text">
        <p>This has been very useful for my research. Thanks as well!</p>
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
      </div>
    </div>
    <div class="comments">
      <div class="comment">
        <a class="avatar">
          <img src="https://api.adorable.io/avatars/100/jenny@adorable.png">
        </a>
        <div class="content">
          <a class="author">Jenny Hess</a>
          <div class="metadata">
            <span class="date">Just now</span>
          </div>
          <div class="text">
            Elliot you are always so right :)
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="comment">
    <a class="avatar">
      <img src="https://api.adorable.io/avatars/100/joe@adorable.png">
    </a>
    <div class="content">
      <a class="author">Joe Henderson</a>
      <div class="metadata">
        <span class="date">5 days ago</span>
      </div>
      <div class="text">
        Dude, this is awesome. Thanks so much
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
      </div>
    </div>
  </div>
  <form class="ui reply form">
    <div class="field">
      <textarea></textarea>
    </div>
    <div class="ui blue labeled submit icon button">
      <i class="icon edit"></i> Add Reply
    </div>
  </form>
</div>

server-db.js

const faker = require('faker');

const db = {
  comments: [],
  users: []
}

db.users = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(id => {
  return {
    id,
    first_name: faker.name.firstName(),
    last_name: faker.name.lastName(),
    email: faker.internet.email(),
  }
});

db.comments.push(createComment())
db.comments.push(createComment())
db.comments.push(createReply(1))
db.comments.push(createReply(3))
db.comments.push(createReply(1))

db.insertComment = function(comment) {
  const newComment = Object.assign(
    comment,
    {id: _getNextId(db.comments)}
  )

  db.comments.push(newComment)

  return newComment
}

db.createUser = function(userPayload) {
  return {
    id: _getNextId(db.users),
    first_name: userPayload.first_name,
    last_name: userPayload.last_name,
    email: userPayload.email,
  }
}

db.updateUser = function(userPayload) {
  const id = userPayload.id
  const idx = db.users.findIndex(user => user.id === id)

  if (idx < 0) {
    throw new Error('user not found!')
  }

  db.users[idx] = userPayload
}

function createComment() {
  return {
    id: _getNextId(db.comments),
    content: faker.lorem.paragraph(),
    author: db.users[faker.random.number(db.users.length - 1)],
  }
}

function createReply(parentId) {
  return {
    id: _getNextId(db.comments),
    content: faker.lorem.sentence(),
    author: db.users[faker.random.number(db.users.length - 1)],
    parentComment: parentId,
  }
}

// get the next ID for a collection
function _getNextId(collection) {
  const count = collection.length
  if (!count) {
    return 1
  }

  const allIds = collection.map(item => item.id)
  const maxId = Math.max(...allIds)
  return maxId + 1
}

module.exports = db

server-mock-users.js

'use strict';

module.exports = function(app) {
  const express = require('express');
  const bodyParser = require('body-parser');
  const db = require('../db');

  const jsonParser = bodyParser.json()

  let usersRouter = express.Router();

  usersRouter.get('/', function(req, res) {
    res.send({
      'users': db.users
    });
  });

  usersRouter.post('/', jsonParser, function(req, res) {
    const user = db.createUser(req.body.user)
    res.status(201).json({
      users: user
    });
  });

  usersRouter.get('/:id', function(req, res) {
    const user = db.users.find(user => user.id === +req.params.id)
    res.json({
      users: user
    });
  });

  usersRouter.put('/:id', function(req, res) {
    const user = db.updateUser(req.body.user)
    res.status(201).json({
      users: user
    });
  });

  usersRouter.delete('/:id', function(req, res) {
    res.status(204).end();
  });

  // The POST and PUT call will not contain a request body
  // because the body-parser is not included by default.
  // To use req.body, run:

  //    npm install --save-dev body-parser

  // After installing, you need to `use` the body-parser for
  // this mock uncommenting the following line:
  //
  //app.use('/api/users', require('body-parser').json());
  app.use('/api/users', usersRouter);
};

server-mocks-comment.js

'use strict';

module.exports = function(app) {
  const express = require('express');
  const bodyParser = require('body-parser');
  const db = require('../db');

  const jsonParser = bodyParser.json()

  let commentsRouter = express.Router();

  commentsRouter.get('/', function(req, res) {
    res.send({
      'comments': db.comments
    });
  });

  commentsRouter.post('/', jsonParser, function(req, res) {
    const newComment = db.insertComment(req.body.comment)
    res.status(201).json({
      comments: newComment
    });
  });

  commentsRouter.get('/:id', function(req, res) {
    res.send({
      'comments': {
        id: req.params.id
      }
    });
  });

  commentsRouter.put('/:id', function(req, res) {
    res.send({
      'comments': {
        id: req.params.id
      }
    });
  });

  commentsRouter.delete('/:id', function(req, res) {
    res.status(204).end();
  });

  // The POST and PUT call will not contain a request body
  // because the body-parser is not included by default.
  // To use req.body, run:

  //    npm install --save-dev body-parser

  // After installing, you need to `use` the body-parser for
  // this mock uncommenting the following line:
  //
  //app.use('/api/comments', require('body-parser').json());
  app.use('/api/comments', commentsRouter);
};