ohansemmanuel

<section class="card">
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>
  <div class="card--content"></div>

ohansemmanuel

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #8e44ad;
  margin: 0;
  display: flex;

ohansemmanuel

.card {
  background-color: #fff;
  min-width: 100%;
  min-height: 200px;
}

ohansemmanuel

.card--content {
  background-color: #e74c3c;
  min-width: 200px;
  margin: 5px;
}

ohansemmanuel

.twitter {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  color: rgba(117,117,117 ,1);
  box-shadow: 5px 10px 20px -20px rgba(85,172,238 ,1);
}
.twitter li {

ohansemmanuel

.facebook {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  background: rgba(59,89,153 ,1);
  color: #fff;
  font-size: 0.9em;
  box-shadow: 5px 10px 20px -20px rgba(59,89,153 ,1)

ohansemmanuel

export function updateCardTextReducer(cardId, event) {
  event.persist();
  return function updateCard(state) {
    const {cards, cardIds} = state;
    const index = cardIds.indexOf(cardId);
    const card = getCardById(cardId, cards);
    const newCardUpdatedText = {
            ...card,
            text: event.target.value
      };

ohansemmanuel

export const DEFAULT_STATE = {
      cards: [
        {
          id: 1234,
          text: defaultTextForCards,
          isActiveCard: true
        },
        {
          id: '12d3x4',
          text: defaultTextForCards,

ohansemmanuel

export function getCardById (id, cards)  {
    const cardArr = cards.filter(card => {
      return card.id === id; 
    });
    return cardArr[0];   
}

ohansemmanuel

const shortid = require("shortid"); // shortid.generate() returns a unique "short" id
const txtgen = require("txtgen"); // txtgen.sentence() returns random "readable" sentences
const faker = require("faker"); // faker is used for generating random fake data.
const _ = require("lodash"); // lodash is a utility lib for Javascript

const users = generateUsers(10);
export const contacts = _.mapKeys(users, "user_id");
export const getMessages = messagesPerUser => {
  let messages = {};
  _.forEach(users, user => {