max8hine

const { render } = window.ReactDOM;
const { Component } = window.React;

class App extends Component {
  constructor() {
    super();
    this.state = { data: null, }
  }
  componentWillMount() {
    this.getData();

max8hine

/*
    Leverage New Features of React 16
    Lesson 1: Error Handling using Error Boundaries in React 16
 */

import React, { Component } from 'react';
import sendToErrorReporting from './sendToErrorReporting';


// Reusable ErrorBoundary component

max8hine

/*
	`app.use(bodyParser.json())`
	`Content-Type=application/json`
	BodyParser will parses json data correctly
	And cleanup() from raw-body, a dependency of body-parser will clean-up the raw data
*/

function cleanup() {
	received = bufer = null
	stream.removeListener('data', onData)

max8hine

// CSS Module

// https://medium.com/dailyjs/high-performance-dynamic-styles-db28c873940

// Create a <style> element. You can use an existing one as well.
const style = document.createElement(‘style’)
document.head.appendChild(style)

// Insert a CSS Rule to the sheet at position 0.
style.sheet.insertRule(‘.my-button {color: red}’, 0)

max8hine

// fron join.js
{ navLinks: [ { label: 'Home', key: 'home', href: '/' } ],
  user: undefined,
  basedir: '/Users/maxshine/Documents/workspace/keystone-boilerplate',
  page: { title: 'Batch Dev', path: '/join' },
  section: 'session',
  form: {} }

max8hine

#How to Construct Yourself UI in KeystoneJS

KeystoneJS provide Admin UI with one set of route controllers and view templates(list&item) for all of the models.But usually,you will need some custome views other than Admin UI to display models. Although the KeystoneJS documention don't tell us much about how to contruct custome view,we can learn this from the source code in skeleton project generated by yo keystone,or you can just check out the keystone demo project's source code.We will walk through the blog feature's implementation in this demo application to demonstrate how to construct custome UI in KeystoneJS application.

As KeystoneJS documention described in Routes & Views section,there is a routes/index.js file, where we bind application's URL patterns to the controllers that load and process data, and render the appropriate template.You can find following code in it:

app.get('/blog/:catego

max8hine

// https://philipwalton.com/articles/the-dark-side-of-polyfilling-css/

max8hine

// kick off both thing, one after another
/**
* Promise
*/
const coffeePromise = makeCoffee()
const breakfastPromise = makeBreakfast()

// then once each are done, deal with them
coffeePromise.then(coffee => {
  drinkCoffee()

max8hine

// Reconfigure font size based on window size
$(window).on('resize init', function (event) {
	if ($(this).width() < 600) {
		recurly.configure({
			style: {
				all: {
					fontSize: '0.9rem',
				},
			},
		})

max8hine

// Method 1
planList()
  .then((planRes) => {
    return planRes.data.plan
    // locals.addOnUrlList = planRes.data.plan.map(obj => _.pick(obj, 'add_ons').add_ons.href)
    // done()
  })
  .then((planListRes) => {
    locals.planList = planListRes
    const promises = planListRes.map(item => planAddonList(item.add_ons.href.split('/v2/')[1]))