mikesurowiec

// This is inside of our React.Component

componentDidMount() {
  //   ... the clicking code was up here
  const zoom = d3.zoom()
      .scaleExtent([1, 5])
      .translateExtent([[-100, -100], [svgViewportWidth-500, svgViewportHeight-500]])
      .on('zoom', zoomed);
  
  function zoomed() {

mikesurowiec

// The React.Component from before.
// This is just highlighting the differences.

import * as d3 from 'd3';

class DCMetroMap extends React.Component {
  
  componentDidMount() {
    // For every group inside of #Stations...
    d3.selectAll('#Stations g')

mikesurowiec

import React from 'react';
import DCMetroMapHTML from './DCMetroMapHTML.js';
import Dimensions from 'react-dimensions';

const svgViewportWidth = 3266;
const svgViewportHeight = 3012;

class DCMetroMap extends React.Component {
  render() {
    const { containerHeight, containerWidth } = this.props;

mikesurowiec

const DCMetroMapHTML = `
    <!-- Generator: Sketch 3.4.2 (15855)-->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="main" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
      <!-- 2,100 lines of SVG, excluded for the sake of brevity -->
    </g>
`;

export default DCMetroMapHTML;

mikesurowiec

// Allows the client to get the data without having to wait for a new REQUEST_INTERVAL.
socket.on('getRealtimeDataForStations', (stations) => {
  if (datastore.realtime && Array.isArray(stations)) {
    stations.forEach((locationCode) => {
      socket.emit(`realtime/${locationCode}`, datastore.realtime[locationCode]);
    });
  }
});

mikesurowiec

import _ from 'lodash';
import datastore from '../datastore';
import MetroApi from '../metroApi';
import MetroResponseTimes from '../metroResponseTimes';

module.exports = () => {
  const startTime = process.hrtime();
  return MetroApi.getRealtime().then((realtimeData) => {
    const endTime = process.hrtime(startTime)[1] / 1000000; // [0]=seconds, [1]/1000000=ms
    MetroResponseTimes.push(endTime);

mikesurowiec

import { EventEmitter } from 'events';
import realtimeAction from './realtime';
import incidentsAction from './incidents';
import advisoriesAction from './advisories';

const eventEmitter = new EventEmitter();

const syncers = [
  { name: 'realtime', action: realtimeAction, interval: 2.5 * 1000 },
  { name: 'incidcents', action: incidentsAction, interval: 60 * 1000 },

mikesurowiec

// AudioComponent.js

import {
  NativeModules,
} from 'react-native';

const { AudioManager } = NativeModules;

async function setPlaying (shouldPlay: boolean) => {
  const isPlayingNativeResult = await AudioManager.setPlaying(shouldPlay);

mikesurowiec

// AudioManager.swift

import Foundation

@objc(AudioManager)
class AudioManager: RCTEventEmitter {
  // ...
  @objc func setPlaying(_ shouldPlay: Bool,
                      resolver resolve: RCTPromiseResolveBlock,
                      rejecter reject: RCTPromiseRejectBlock) -> Void {

mikesurowiec

// AudioManager.m

#import "RCTBridgeModule.h"

// This registers your module with React Native, so it can be exposed to JS
@interface RCT_EXTERN_MODULE(AudioManager, NSObject)

RCT_EXTERN_METHOD(setPlaying:(BOOL) value
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject