JSFiddle - React, Tailwind, and code Playground

by jchasinga

HTML

<div ng-controller="StoreCtrl as $ctrl">
  <user-panel model="$ctrl.store.model" set-firstname="$ctrl.update('Set', $ctrl.store.model, {firstName: name})" set-lastname="$ctrl.update('Set', $ctrl.store.model, {lastName: name})">
  </user-panel>
</div>

CSS

</style> <script src="//code.angularjs.org/1.5.0/angular.min.js"></script> <style> * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
  background: #eee;
  margin: 0;
  padding: 25px;
}

JavaScript

class StoreSvc {
  constructor() {
    return (mod, msgs) => {
      this.model = mod;
      this.messages = msgs;
      return this;
    }
  }
}

function StoreCtrl($element, StoreSvc) {

  // This controller is an API to the model

  let ctrl = this;
  let model = {
    userId: "1234",
    firstName: "Ava",
    lastName: "Chasinga",
    email: "[email protected]"
  }
  let messages = {
    Set: (model, delta) => {
      let newModel = Object.assign(model, delta);
      console.log('new', newModel);
      return newModel;
    }
  };
  ctrl.store = StoreSvc(model, messages);
  ctrl.update = (msg, model, ...args) => {
    if (msg in ctrl.store.messages) {
      let newModel = ctrl.store.messages[msg](model, ...args);
      ctrl.store.model = newModel;
    } else {
      console.log("Message doesn't exist");
    }
    return ctrl;
  }
}

function UserCtrl($element) {

  // This controller deals with the UserPanel component and its DOM

  this.input = (selector) => {
    return $element[0].querySelector(selector).value;
  }
}

let UserPanel = {
  controller: UserCtrl,
  bindings: {
    model: "<",
    setFirstname: "&",
    setLastname: "&"
  },
  template: `
      <h1>{{$ctrl.model.firstName}}'s profile</h1>
      <ul ng-repeat="(key, val) in $ctrl.model">
      	<li>{{key}}: {{val}}</li>
      </ul>
      <div>
      <input id="firstname-input" type="text" placeholder="first name" value="Mindy">
      <button type="button" ng-click="$ctrl.setFirstname({name: $ctrl.input('#firstname-input')})">
      	send  
      </button>
      <input id="lastname-input" type="text" placeholder="last name" value="J">
      <button type="button" ng-click="$ctrl.setLastname({name: $ctrl.input('#lastname-input')})">
      	send
      </div>
    `
};

angular.module('User', [])
  .service('StoreSvc', StoreSvc)
  .controller('StoreCtrl', StoreCtrl)
  .controller('UserCtrl', UserCtrl)
  .component('userPanel', UserPanel);

document.addEventListener('DOMContentLoaded', () => {
 ...