ro-savage

/*

Because the user see a few months forward, and usually interacts with future events. We load the data for all future events.
If the user goes backward, we refetch all the data from their current date they are viewing and into the future.
If they move forward from there (and back again but not futher) we don't need to load any extra data.
We debouce this so if a user goes back multiple months, it doesn't fetch data multiple times.

This is not ideal. Ideally we would have a "From" and "To" dates, we would initially load 6 month of data.
Then if the user goes backward, it would only get the data they are missing from the server by changing the "From" and "To"
dates and then merging the newely retrieved data.

ro-savage

// This code is untested. It may new some minor modifications to work

import RelayQueryResponseCache from "relay-runtime/lib/RelayQueryResponseCache";

import {
  Environment,
  Network,
  RecordSource,
  Store,
  Observable

ro-savage

addnode=103.247.155.206
addnode=104.251.215.107
addnode=107.184.137.78
addnode=109.81.208.33
addnode=110.169.33.99
addnode=115.189.83.40
addnode=116.197.235.221
addnode=116.50.169.42
addnode=121.148.171.122
addnode=121.44.107.8

ro-savage

// Get data from https://jsonplaceholder.typicode.com/posts

const examplePostsData = [
  {
    "userId": 1,
    "id": 1,
    "title": "Some crazy title",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {

ro-savage

function someFunctionThatIsAsync(callback) {
  /// Do something that happens asyncronously. That is, not in the order that is it called.
  var data = fs.readFile('data.json')
  
  // In this example it will execute doSomethingWithData(data)
  callback(data)
}

function doSomethingWithData(data) {
 document.querySelector('#data').innerText = data

ro-savage

There is an on going issue with using non-css module css in projects.

This causes issues with people needing to change webpack config, or mainters need to create a css-module specific version. We should not be forcing people to go through a bunch of configuration to get css modules and standard css to play nicely together.

I suggest a few ways to solve this problem long term, and I think the change should come from CSS Modules as it is non-standard.

1. Change extension All CSS Modules have the file extension .cssm (or module.css). Then any loaders would know these are CSS modules, and other imports are standard css.

ro-savage

import React from 'react'
import cloudinaryCore from 'cloudinary-core'
const cloudinary = cloudinaryCore.Cloudinary.new()

cloudinary.config({ cloud_name: 'macvad' })

// ** OPTIONS **
// height (int), width (int), crop (string - fit/scale/pad/++ - requried for resize)
// Lots more
// http://cloudinary.com/documentation/image_transformations#sample_image

ro-savage

• react-boilerplate discussion - pt1
• react-boilerplate discussion - pt2
• react-boiler plate gist
• Fractal Project Structure
• React folder by feature
• Rules for organisin folder strucutre
• React Structure blog post

ro-savage

/* eslint-disable */
import React from 'react';
import ScrollBehavior from './scroll-behavior';

class ScrollBehaviorContainer extends React.Component {
  static propTypes = {
    shouldUpdateScroll: React.PropTypes.func,
    routerProps: React.PropTypes.object.isRequired,
    children: React.PropTypes.node.isRequired,
    elTarget: React.PropTypes.string

ro-savage

import React from 'react'
import style from './UserDropDown.scss'

class UserDropDown extends React.Component {
  render() {
    const { logout, user } = this.props

    return (
      <div>
        <span onClick={logout}>{user.username}</span>