From 21b3e7f9f7c96881fb6020af99ff866e35b56655 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Mon, 6 Mar 2017 16:53:54 +1100 Subject: [PATCH] Prettier all the things. --- __mocks__/react-native-maps.js | 6 +- .../Info/components/CodeOfConduct.test.js | 12 +- .../scenes/Info/components/Organiser.test.js | 12 +- __tests__/scenes/Info/index.test.js | 12 +- .../scenes/Schedule/components/Break.test.js | 12 +- .../Schedule/components/NowButton.test.js | 12 +- .../Schedule/components/SplashScreen.test.js | 14 +- .../scenes/Schedule/components/Talk.test.js | 12 +- __tests__/scenes/Schedule/index.test.js | 28 +- __tests__/scenes/Talk/components/Hint.test.js | 12 +- __tests__/scenes/Talk/components/Pane.test.js | 14 +- .../scenes/Talk/components/Preview.test.js | 14 +- .../scenes/Talk/components/Speaker.test.js | 14 +- __tests__/scenes/Talk/index.test.js | 34 +- app/ReactConf2017.js | 44 +- app/components/Avatar/index.js | 16 +- app/components/DraggableView/index.js | 22 +- app/components/ListTitle/index.js | 18 +- app/components/Modal/index.js | 60 +- app/components/Navbar/index.js | 46 +- app/components/Scene/index.js | 6 +- app/constants.js | 2 +- app/data/organisers.js | 8 +- app/data/talks.js | 590 +++++++++--------- .../Info/components/CodeOfConduct/index.js | 42 +- app/scenes/Info/components/Organiser/index.js | 34 +- app/scenes/Info/index.js | 68 +- app/scenes/Schedule/components/Break/index.js | 54 +- .../Schedule/components/NowButton/index.js | 50 +- .../Schedule/components/SplashScreen/index.js | 62 +- app/scenes/Schedule/components/Talk/index.js | 108 ++-- app/scenes/Schedule/index.js | 120 ++-- app/scenes/Talk/components/Hint/index.js | 40 +- app/scenes/Talk/components/Pane/index.js | 50 +- app/scenes/Talk/components/Preview/index.js | 56 +- app/scenes/Talk/components/Speaker/index.js | 80 +-- app/scenes/Talk/index.js | 108 ++-- app/theme.js | 48 +- app/types.js | 10 +- app/utils/attemptToOpenUrl.js | 8 +- app/utils/color.js | 10 +- 41 files changed, 983 insertions(+), 985 deletions(-) diff --git a/__mocks__/react-native-maps.js b/__mocks__/react-native-maps.js index ddc72e5..bc932b5 100644 --- a/__mocks__/react-native-maps.js +++ b/__mocks__/react-native-maps.js @@ -1,14 +1,14 @@ -import React from "react"; +import React from 'react'; export default class MapView extends React.Component { render() { - return React.createElement("MapView", this.props, this.props.children); + return React.createElement('MapView', this.props, this.props.children); } } class Marker extends React.Component { render() { - return React.createElement("Marker", this.props, this.props.children); + return React.createElement('Marker', this.props, this.props.children); } showCallout() {} diff --git a/__tests__/scenes/Info/components/CodeOfConduct.test.js b/__tests__/scenes/Info/components/CodeOfConduct.test.js index 8542297..a1f366b 100644 --- a/__tests__/scenes/Info/components/CodeOfConduct.test.js +++ b/__tests__/scenes/Info/components/CodeOfConduct.test.js @@ -1,13 +1,13 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; import CodeOfConduct - from "../../../../app/scenes/Info/components/CodeOfConduct"; + from '../../../../app/scenes/Info/components/CodeOfConduct'; -describe("Info - Code of Conduct", () => { - it("renders correctly", () => { +describe('Info - Code of Conduct', () => { + it('renders correctly', () => { const tree = renderer.create( {}} />).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Info/components/Organiser.test.js b/__tests__/scenes/Info/components/Organiser.test.js index 87e521f..1171e04 100644 --- a/__tests__/scenes/Info/components/Organiser.test.js +++ b/__tests__/scenes/Info/components/Organiser.test.js @@ -1,12 +1,12 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import Organiser from "../../../../app/scenes/Info/components/Organiser"; +import Organiser from '../../../../app/scenes/Info/components/Organiser'; -describe("Info - Organiser", () => { - it("renders correctly", () => { +describe('Info - Organiser', () => { + it('renders correctly', () => { const tree = renderer .create( { - it("renders correctly", () => { +describe('Info', () => { + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Schedule/components/Break.test.js b/__tests__/scenes/Schedule/components/Break.test.js index 719b780..56f101a 100644 --- a/__tests__/scenes/Schedule/components/Break.test.js +++ b/__tests__/scenes/Schedule/components/Break.test.js @@ -1,12 +1,12 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import Break from "../../../../app/scenes/Schedule/components/Break"; +import Break from '../../../../app/scenes/Schedule/components/Break'; -describe("Schedule - Break", () => { - it("renders correctly", () => { +describe('Schedule - Break', () => { + it('renders correctly', () => { const tree = renderer .create() .toJSON(); diff --git a/__tests__/scenes/Schedule/components/NowButton.test.js b/__tests__/scenes/Schedule/components/NowButton.test.js index e7b0ea8..7ab7672 100644 --- a/__tests__/scenes/Schedule/components/NowButton.test.js +++ b/__tests__/scenes/Schedule/components/NowButton.test.js @@ -1,12 +1,12 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import NowButton from "../../../../app/scenes/Schedule/components/NowButton"; +import NowButton from '../../../../app/scenes/Schedule/components/NowButton'; -describe("Schedule - Now Button", () => { - it("renders correctly", () => { +describe('Schedule - Now Button', () => { + it('renders correctly', () => { const tree = renderer.create( {}} />).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Schedule/components/SplashScreen.test.js b/__tests__/scenes/Schedule/components/SplashScreen.test.js index 75562fd..9ee5ce0 100644 --- a/__tests__/scenes/Schedule/components/SplashScreen.test.js +++ b/__tests__/scenes/Schedule/components/SplashScreen.test.js @@ -1,19 +1,19 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; import SplashScreen - from "../../../../app/scenes/Schedule/components/SplashScreen"; + from '../../../../app/scenes/Schedule/components/SplashScreen'; -describe("Schedule - Splash Screen", () => { - it("renders correctly", () => { +describe('Schedule - Splash Screen', () => { + it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); - it("renders correctly in animated state", () => { + it('renders correctly in animated state', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Schedule/components/Talk.test.js b/__tests__/scenes/Schedule/components/Talk.test.js index 4839391..68b53af 100644 --- a/__tests__/scenes/Schedule/components/Talk.test.js +++ b/__tests__/scenes/Schedule/components/Talk.test.js @@ -1,12 +1,12 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import Talk from "../../../../app/scenes/Schedule/components/Talk"; +import Talk from '../../../../app/scenes/Schedule/components/Talk'; -describe("Schedule - Talk", () => { - it("renders correctly", () => { +describe('Schedule - Talk', () => { + it('renders correctly', () => { const tree = renderer .create( { - it("renders correctly", () => { +const mockNavigator = { + navigationContext: { + addListener: () => {}, + }, +}; + +describe('Schedule', () => { + it('renders correctly', () => { const tree = renderer - .create( - {} - } - }} - /> - ) + .create() .toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Talk/components/Hint.test.js b/__tests__/scenes/Talk/components/Hint.test.js index 8da0e1f..76c0b2c 100644 --- a/__tests__/scenes/Talk/components/Hint.test.js +++ b/__tests__/scenes/Talk/components/Hint.test.js @@ -1,12 +1,12 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import Hint from "../../../../app/scenes/Talk/components/Hint"; +import Hint from '../../../../app/scenes/Talk/components/Hint'; -describe("Talk - Hint", () => { - it("renders correctly", () => { +describe('Talk - Hint', () => { + it('renders correctly', () => { const tree = renderer.create( {}} />).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/__tests__/scenes/Talk/components/Pane.test.js b/__tests__/scenes/Talk/components/Pane.test.js index 35440f9..71b69b3 100644 --- a/__tests__/scenes/Talk/components/Pane.test.js +++ b/__tests__/scenes/Talk/components/Pane.test.js @@ -1,13 +1,13 @@ // @flow -import "react-native"; -import React from "react"; -import renderer from "react-test-renderer"; +import 'react-native'; +import React from 'react'; +import renderer from 'react-test-renderer'; -import Pane from "../../../../app/scenes/Talk/components/Pane"; -import talks from "../../../../app/data/talks"; +import Pane from '../../../../app/scenes/Talk/components/Pane'; +import talks from '../../../../app/data/talks'; -describe("Talk - Pane", () => { - it("renders correctly", () => { +describe('Talk - Pane', () => { + it('renders correctly', () => { const tree = renderer .create( { - it("renders correctly in top position", () => { +describe('Talk - Preview', () => { + it('renders correctly in top position', () => { const tree = renderer .create( { expect(tree).toMatchSnapshot(); }); - it("renders correctly in bottom position", () => { + it('renders correctly in bottom position', () => { const tree = renderer .create( { - it("renders correctly with missing github and twitter", () => { +describe('Talk - Speaker', () => { + it('renders correctly with missing github and twitter', () => { const tree = renderer .create( { expect(tree).toMatchSnapshot(); }); - it("renders correctly with all props", () => { + it('renders correctly with all props', () => { const tree = renderer .create( { - it("renders correctly", () => { +describe('Talk', () => { + it('renders correctly', () => { const tree = renderer .create( { - if (currentAppState === "active") { + if (currentAppState === 'active') { this.syncAppVersion(); } }; @@ -43,11 +43,11 @@ class ReactConf2017 extends Component { route.transitionKey && !TRANSITION_KEYS.includes(route.transitionKey) ) { console.warn( - "Warning: Invalid transition key `" + + 'Warning: Invalid transition key `' + route.transitionKey + - "` supplied to `Navigator`. Valid keys: [\n" + - TRANSITION_KEYS.join("\n") + - "\n]" + '` supplied to `Navigator`. Valid keys: [\n' + + TRANSITION_KEYS.join('\n') + + '\n]' ); return Navigator.SceneConfigs.PushFromRight; } @@ -58,9 +58,9 @@ class ReactConf2017 extends Component { ...Navigator.SceneConfigs.PushFromRight, gestures: route.enableSwipeToPop ? { - pop: Navigator.SceneConfigs.PushFromRight.gestures.pop + pop: Navigator.SceneConfigs.PushFromRight.gestures.pop, } - : null + : null, }; }; @@ -78,17 +78,17 @@ class ReactConf2017 extends Component { const styles = StyleSheet.create({ navigator: { - backgroundColor: "black", - flex: 1 + backgroundColor: 'black', + flex: 1, }, scenes: { backgroundColor: theme.color.sceneBg, - overflow: "visible", - shadowColor: "black", + overflow: 'visible', + shadowColor: 'black', shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0.33, - shadowRadius: 5 - } + shadowRadius: 5, + }, }); module.exports = ReactConf2017; diff --git a/app/components/Avatar/index.js b/app/components/Avatar/index.js index 73a256c..a79682c 100644 --- a/app/components/Avatar/index.js +++ b/app/components/Avatar/index.js @@ -1,12 +1,12 @@ // @flow -import React from "react"; -import { Image, View } from "react-native"; +import React from 'react'; +import { Image, View } from 'react-native'; -import theme from "../../theme"; +import theme from '../../theme'; type Props = { size?: number, - source: string + source: string, }; export default function Avatar({ size = 44, source }: Props) { @@ -14,14 +14,14 @@ export default function Avatar({ size = 44, source }: Props) { wrapper: { backgroundColor: theme.color.sceneBg, borderRadius: size, - overflow: "hidden", + overflow: 'hidden', height: size, - width: size + width: size, }, image: { height: size, - width: size - } + width: size, + }, }; return ( diff --git a/app/components/DraggableView/index.js b/app/components/DraggableView/index.js index 8af50dc..614ab06 100644 --- a/app/components/DraggableView/index.js +++ b/app/components/DraggableView/index.js @@ -1,6 +1,6 @@ // @flow -import React, { Component } from "react"; -import { Animated, PanResponder } from "react-native"; +import React, { Component } from 'react'; +import { Animated, PanResponder } from 'react-native'; const SWIPE_THRESHOLD = 80; @@ -10,17 +10,17 @@ export default class DraggableView extends Component { allowY: boolean, onMove?: () => mixed, onRelease: () => mixed, - children?: Array> + children?: Array>, }; state = { - pan: new Animated.ValueXY() // inits to zero + pan: new Animated.ValueXY(), // inits to zero }; static defaultProps = { allowX: true, allowY: true, - style: {} + style: {}, }; _panResponder = PanResponder.create({ @@ -32,8 +32,8 @@ export default class DraggableView extends Component { null, { dx: this.props.allowX ? this.state.pan.x : 0, // x,y are Animated.Value - dy: this.props.allowY ? this.state.pan.y : 0 - } + dy: this.props.allowY ? this.state.pan.y : 0, + }, ])(e, gestureState); }, onPanResponderRelease: (e, { vx, vy }) => { @@ -44,18 +44,18 @@ export default class DraggableView extends Component { Animated.decay(this.state.pan, { velocity: { x: this.props.allowX ? vx : 0, - y: this.props.allowY ? vy : 0 + y: this.props.allowY ? vy : 0, }, - deceleration: 0.98 + deceleration: 0.98, }).start(); } else { Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 }, friction: 8, - tension: 80 + tension: 80, }).start(); } - } + }, }); render() { diff --git a/app/components/ListTitle/index.js b/app/components/ListTitle/index.js index ba4e79f..a2c030b 100644 --- a/app/components/ListTitle/index.js +++ b/app/components/ListTitle/index.js @@ -1,12 +1,12 @@ // @flow -import React from "react"; -import { PixelRatio, Text, View } from "react-native"; +import React from 'react'; +import { PixelRatio, Text, View } from 'react-native'; -import theme from "../../theme"; +import theme from '../../theme'; type Props = { bordered?: boolean, - text: string + text: string, }; export default function ListTitle({ bordered, text }: Props) { @@ -14,8 +14,8 @@ export default function ListTitle({ bordered, text }: Props) { text: { color: theme.color.text, fontSize: theme.fontSize.xsmall, - fontWeight: "500", - lineHeight: theme.fontSize.large + fontWeight: '500', + lineHeight: theme.fontSize.large, }, view: { backgroundColor: theme.color.sceneBg, @@ -23,14 +23,14 @@ export default function ListTitle({ bordered, text }: Props) { borderBottomWidth: 1 / PixelRatio.get(), paddingHorizontal: theme.fontSize.default + 6, height: theme.listheader.height, - justifyContent: "flex-end" + justifyContent: 'flex-end', }, view__bordered: { shadowColor: theme.color.gray20, shadowOffset: { height: (-1) / PixelRatio.get(), width: 0 }, shadowOpacity: 1, - shadowRadius: 0 - } + shadowRadius: 0, + }, }; return ( diff --git a/app/components/Modal/index.js b/app/components/Modal/index.js index 8f502f7..aa77611 100644 --- a/app/components/Modal/index.js +++ b/app/components/Modal/index.js @@ -1,46 +1,46 @@ // @flow -import React, { cloneElement, Component } from "react"; +import React, { cloneElement, Component } from 'react'; import { Animated, Dimensions, Modal as RNModal, StyleSheet, - TouchableOpacity -} from "react-native"; -import { BlurView } from "react-native-blur"; + TouchableOpacity, +} from 'react-native'; +import { BlurView } from 'react-native-blur'; function animateToValueWithOptions(val) { return { toValue: val, friction: 10, - tension: 100 + tension: 100, }; } const MODAL_ALIGNMENT = { - bottom: "flex-end", - top: "flex-start", - center: "center" + bottom: 'flex-end', + top: 'flex-start', + center: 'center', }; export default class Modal extends Component { props: { - align: "bottom" | "center" | "top", + align: 'bottom' | 'center' | 'top', blurAmount: number, - blurType: "dark" | "light" | "xlight", + blurType: 'dark' | 'light' | 'xlight', onClose: () => mixed, style?: {}, - children?: React.Element<{ onClose?: () => mixed }> + children?: React.Element<{ onClose?: () => mixed }>, }; state = { - animValue: new Animated.Value(0) + animValue: new Animated.Value(0), }; static defaultProps = { - align: "center", + align: 'center', blurAmount: 12, - blurType: "dark" + blurType: 'dark', }; __isClosed: boolean | void; @@ -62,7 +62,7 @@ export default class Modal extends Component { renderChildren() { // $FlowFixMe: https://github.com/facebook/flow/issues/1964 return cloneElement(this.props.children, { - onClose: this.onClose + onClose: this.onClose, }); } render() { @@ -70,28 +70,28 @@ export default class Modal extends Component { align, blurAmount, blurType, - style + style, } = this.props; const blockoutDynamicStyles = { justifyContent: MODAL_ALIGNMENT[align], - opacity: this.state.animValue + opacity: this.state.animValue, }; const dialogDynamicStyles = { transform: [ { scale: this.state.animValue.interpolate({ inputRange: [0, 1], - outputRange: [0.93, 1] - }) + outputRange: [0.93, 1], + }), }, { translateY: this.state.animValue.interpolate({ inputRange: [0, 1], - outputRange: [100, 1] - }) - } - ] + outputRange: [100, 1], + }), + }, + ], }; return ( @@ -114,19 +114,19 @@ export default class Modal extends Component { } const fillSpace = { - height: Dimensions.get("window").height, + height: Dimensions.get('window').height, left: 0, - position: "absolute", + position: 'absolute', top: 0, - width: Dimensions.get("window").width + width: Dimensions.get('window').width, }; const styles = StyleSheet.create({ blockout: { - alignItems: "center", - ...fillSpace + alignItems: 'center', + ...fillSpace, }, blur: fillSpace, touchable: { - flex: 1 - } + flex: 1, + }, }); diff --git a/app/components/Navbar/index.js b/app/components/Navbar/index.js index ae1f6d8..a6ac3d7 100644 --- a/app/components/Navbar/index.js +++ b/app/components/Navbar/index.js @@ -1,16 +1,16 @@ // @flow -import React from "react"; +import React from 'react'; import { Dimensions, PixelRatio, StyleSheet, View, Text, - TouchableOpacity -} from "react-native"; -import Icon from "react-native-vector-icons/Ionicons"; + TouchableOpacity, +} from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; -import theme from "../../theme"; +import theme from '../../theme'; type Props = { backgroundColor?: string, @@ -25,7 +25,7 @@ type Props = { rightButtonText?: string, textColor?: string, title: string, - titleRenderer?: () => mixed + titleRenderer?: () => mixed, }; export default function Navbar( @@ -67,7 +67,7 @@ export default function Navbar( {leftButtonText} @@ -101,7 +101,7 @@ export default function Navbar( {rightButtonText} @@ -115,42 +115,42 @@ export default function Navbar( const styles = StyleSheet.create({ container: { - alignItems: "stretch", + alignItems: 'stretch', borderBottomColor: theme.color.gray20, borderBottomWidth: 1 / PixelRatio.get(), - flexDirection: "row", + flexDirection: 'row', height: theme.navbar.height, - overflow: "hidden", - justifyContent: "space-between", + overflow: 'hidden', + justifyContent: 'space-between', paddingTop: 20, // account for the statusbar - position: "absolute", - width: Dimensions.get("window").width + position: 'absolute', + width: Dimensions.get('window').width, }, // buttons button: { - alignItems: "center", + alignItems: 'center', flex: 2, - flexDirection: "row", - paddingHorizontal: theme.fontSize.default + flexDirection: 'row', + paddingHorizontal: theme.fontSize.default, }, button__right: { - justifyContent: "flex-end" + justifyContent: 'flex-end', }, buttonText: { color: theme.color.blue, - fontSize: theme.fontSize.default + fontSize: theme.fontSize.default, }, // title title: { - alignItems: "center", + alignItems: 'center', flex: 4, - justifyContent: "center" + justifyContent: 'center', }, titleText: { color: theme.color.lightText, fontSize: theme.fontSize.default, - fontWeight: "500" - } + fontWeight: '500', + }, }); diff --git a/app/components/Scene/index.js b/app/components/Scene/index.js index 399a9ee..5a2a2c7 100644 --- a/app/components/Scene/index.js +++ b/app/components/Scene/index.js @@ -1,10 +1,10 @@ // @flow -import React from "react"; -import { ScrollView, View } from "react-native"; +import React from 'react'; +import { ScrollView, View } from 'react-native'; type Props = { scroll?: boolean, - style?: Object + style?: Object, }; export default function Scene({ scroll, style, ...props }: Props) { diff --git a/app/constants.js b/app/constants.js index 6f0c42f..0b75b83 100644 --- a/app/constants.js +++ b/app/constants.js @@ -1,4 +1,4 @@ // @flow -const TIME_FORMAT = "h:mma"; +const TIME_FORMAT = 'h:mma'; export { TIME_FORMAT }; diff --git a/app/data/organisers.js b/app/data/organisers.js index 99c8f8a..51a2245 100644 --- a/app/data/organisers.js +++ b/app/data/organisers.js @@ -1,8 +1,8 @@ // @flow export const list = [ { - avatar: "https://www.gravatar.com/avatar/30840890815ed0044146eb2da203276e?s=128", - name: "Tom Occhino", - summary: "Lead Conference Wrangler" - } + avatar: 'https://www.gravatar.com/avatar/30840890815ed0044146eb2da203276e?s=128', + name: 'Tom Occhino', + summary: 'Lead Conference Wrangler', + }, ]; diff --git a/app/data/talks.js b/app/data/talks.js index b374b5d..a1bb01b 100644 --- a/app/data/talks.js +++ b/app/data/talks.js @@ -1,7 +1,7 @@ // @flow -import moment from "moment"; +import moment from 'moment'; -import type { ScheduleTalk } from "../types"; +import type { ScheduleTalk } from '../types'; /* NOTE: switch DAY_ONE and DAY_TWO below to use the current day, useful for @@ -10,13 +10,13 @@ import type { ScheduleTalk } from "../types"; // const DAY_ONE = moment().startOf('day').add(8, 'hours').add(30, 'minutes'); // const DAY_TWO = moment().startOf('day').add(1, 'days').add(9, 'hours'); -const DAY_ONE = moment("2017-03-13 08:30:00"); -const DAY_TWO = moment("2017-03-14 09:00:00"); +const DAY_ONE = moment('2017-03-13 08:30:00'); +const DAY_TWO = moment('2017-03-14 09:00:00'); function getTime(day, duration) { return { start: day.toDate(), - end: day.add(duration, "minutes").toDate() + end: day.add(duration, 'minutes').toDate(), }; } @@ -32,271 +32,271 @@ const data = { break: true, important: true, time: getTime(DAY_ONE, 60), - title: "Registration / Breakfast" + title: 'Registration / Breakfast', }, [br()]: { break: true, important: true, time: getTime(DAY_ONE, 30), - title: "Hall Doors Open" + title: 'Hall Doors Open', }, - "tom-occhino": { - summary: "Keynote Part 1", - title: "Keynote", + 'tom-occhino': { + summary: 'Keynote Part 1', + title: 'Keynote', speaker: { - avatar: "https://www.gravatar.com/avatar/30840890815ed0044146eb2da203276e?s=128", - github: "tomocchino", - name: "Tom Occhino", - twitter: "tomocchino", - summary: "Tom manages the React team at Facebook. Since joining in 2009 he's helped build various frameworks, features, and systems across the company." + avatar: 'https://www.gravatar.com/avatar/30840890815ed0044146eb2da203276e?s=128', + github: 'tomocchino', + name: 'Tom Occhino', + twitter: 'tomocchino', + summary: "Tom manages the React team at Facebook. Since joining in 2009 he's helped build various frameworks, features, and systems across the company.", }, - time: getTime(DAY_ONE, 20) + time: getTime(DAY_ONE, 20), }, - "sebastian-markbage": { - summary: "Keynote Part 2: React", - title: "Keynote", + 'sebastian-markbage': { + summary: 'Keynote Part 2: React', + title: 'Keynote', speaker: { - avatar: "https://www.gravatar.com/avatar/ceb6764d18462b099b98cc6447363ef6?s=128", - github: "sebmarkbage", - name: "Sebastian Markbage", - twitter: "sebmarkbage", - summary: "Sebastian is an engineer on the React core team, and dabbles in all things JavaScript, at Facebook." + avatar: 'https://www.gravatar.com/avatar/ceb6764d18462b099b98cc6447363ef6?s=128', + github: 'sebmarkbage', + name: 'Sebastian Markbage', + twitter: 'sebmarkbage', + summary: 'Sebastian is an engineer on the React core team, and dabbles in all things JavaScript, at Facebook.', }, - time: getTime(DAY_ONE, 20) + time: getTime(DAY_ONE, 20), }, - "jing-chen": { - summary: "Keynote Part 3: React Native", - title: "Keynote", + 'jing-chen': { + summary: 'Keynote Part 3: React Native', + title: 'Keynote', speaker: { - avatar: "https://www.gravatar.com/avatar/f3928721841baa5ee26fbbe906348039?s=128", - github: "jingc", - name: "Jing Chen", - twitter: "jingc", - summary: "Jing is an engineer on the React Native team, and previously worked on Flux and Relay." + avatar: 'https://www.gravatar.com/avatar/f3928721841baa5ee26fbbe906348039?s=128', + github: 'jingc', + name: 'Jing Chen', + twitter: 'jingc', + summary: 'Jing is an engineer on the React Native team, and previously worked on Flux and Relay.', }, - time: getTime(DAY_ONE, 20) + time: getTime(DAY_ONE, 20), }, [br()]: { break: true, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "lin-clark": { + 'lin-clark': { summary: "React will have a new core algorithm soon with Fiber. This new algorithm improves responsiveness and perceived performance for complex pages. But to make that happen, the architecture had to be reconsidered from the ground up. In this talk, I'll break down the new concepts and explain what makes it seem faster.", - title: "A Cartoon Intro to Fiber", + title: 'A Cartoon Intro to Fiber', speaker: { - avatar: "https://www.gravatar.com/avatar/a1c30f951cdefc554d6e2d078a02468d?s=128", - github: "linclark", - name: "Lin Clark", - twitter: "linclark", - summary: "Lin works with emerging technologies at Mozilla and draws code cartoons." + avatar: 'https://www.gravatar.com/avatar/a1c30f951cdefc554d6e2d078a02468d?s=128', + github: 'linclark', + name: 'Lin Clark', + twitter: 'linclark', + summary: 'Lin works with emerging technologies at Mozilla and draws code cartoons.', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "guillermo-rauch": { + 'guillermo-rauch': { summary: "I'd like to describe our journey building Next.js and what comes after :)", - title: "Next.js: Universal React Made Easy and Simple", + title: 'Next.js: Universal React Made Easy and Simple', speaker: { - avatar: "https://www.gravatar.com/avatar/486e20e16ef676a02ac0299d2f92b813?s=128", - github: "rauchg", - name: "Guillermo Rauch", - twitter: "rauchg", - summary: "CEO and Co-Founder of ZEIT (check out zeit.co/now). Creator of socket.io, mongoose, micro, next.js, Hyper and a few other things. Edward Sharpe and the Magnetic Zeroes fan." + avatar: 'https://www.gravatar.com/avatar/486e20e16ef676a02ac0299d2f92b813?s=128', + github: 'rauchg', + name: 'Guillermo Rauch', + twitter: 'rauchg', + summary: 'CEO and Co-Founder of ZEIT (check out zeit.co/now). Creator of socket.io, mongoose, micro, next.js, Hyper and a few other things. Edward Sharpe and the Magnetic Zeroes fan.', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "ben-ilegbodu": { - summary: "JavaScript is evolving quickly. The ES6 specification was released back in 2015 and has been implemented by modern browsers. New versions of ECMAScript will now be released on a yearly basis. We can leverage ES6 and functionality slated for future versions right now to write even clearer and more concise React code. Experience with React will help you get the most out of this session, but you don’t have to have a JavaScript black belt to leave feeling confident in using ES.next with React. Learn how to write cleaner code using the spread operator, destructuring, new async functions, and other features being introduced into ECMAScript. Oh, and don’t worry if you don’t understand all of those terms — you soon will after this session!", - title: "React + ES.next = ♥", + 'ben-ilegbodu': { + summary: 'JavaScript is evolving quickly. The ES6 specification was released back in 2015 and has been implemented by modern browsers. New versions of ECMAScript will now be released on a yearly basis. We can leverage ES6 and functionality slated for future versions right now to write even clearer and more concise React code. Experience with React will help you get the most out of this session, but you don’t have to have a JavaScript black belt to leave feeling confident in using ES.next with React. Learn how to write cleaner code using the spread operator, destructuring, new async functions, and other features being introduced into ECMAScript. Oh, and don’t worry if you don’t understand all of those terms — you soon will after this session!', + title: 'React + ES.next = ♥', speaker: { - avatar: "https://www.gravatar.com/avatar/0feb204b70c4be3d22fe27cc3f424d33?s=128", - github: "benmvp", - name: "Ben Ilegbodu", - twitter: "benmvp", - summary: "" + avatar: 'https://www.gravatar.com/avatar/0feb204b70c4be3d22fe27cc3f424d33?s=128', + github: 'benmvp', + name: 'Ben Ilegbodu', + twitter: 'benmvp', + summary: '', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, [br()]: { break: true, time: getTime(DAY_ONE, 90), - title: "Lunch" + title: 'Lunch', }, - "preethi-kasireddy": { + 'preethi-kasireddy': { summary: "Redux has become the defacto way to manage state in React— yet, there's a new kid on the block that is seeing promising growth and adoption: Mobx. The goal of the talk is to explore a thorough and balanced view on Mobx vs. Redux for state management. They both have distinct mental models for handling state (i.e. Functional vs. Object-oriented and Reactive, Mutable vs. Immutable, Plain objects vs. Observables, Single-store vs. Multi-store, Normalized state view vs. Nested state view, etc.). And naturally, the opposing mental models each have their benefits and tradeoffs — so how do you pick? While the choice is somewhat subjective, we'll discuss a few objective factors to consider. We'll also look at a few concrete examples for which scenarios it makes sense to choose Redux vs. Mobx vs. Something else vs. Nothing at all (i.e. React setState).", - title: "MobX vs Redux: Comparing the Opposing Paradigms", + title: 'MobX vs Redux: Comparing the Opposing Paradigms', speaker: { - avatar: "https://www.gravatar.com/avatar/6286256e2fd3a464806d6a41a23c02c5?s=128", - github: "peekay", - name: "Preethi Kasireddy", - twitter: "iam_preethi", - summary: "Lead Software & UI Engineer at Sapien.ai, designing and building conversational bots. Avid technical blogger." + avatar: 'https://www.gravatar.com/avatar/6286256e2fd3a464806d6a41a23c02c5?s=128', + github: 'peekay', + name: 'Preethi Kasireddy', + twitter: 'iam_preethi', + summary: 'Lead Software & UI Engineer at Sapien.ai, designing and building conversational bots. Avid technical blogger.', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "jared-forsyth": { + 'jared-forsyth': { summary: 'Tools like Flow and TypeScript promise "types for your JavaScript" - but what does that get you, exactly? What\'s the experience like of adding types to a large JavaScript project? Is the overhead worth it for you and your team? In the end, embracing type systems will give you more confidence in your code, fewer production bugs, and a much friendlier codebase.', - title: "Type Systems Will Make You a Better JavaScript Developer", + title: 'Type Systems Will Make You a Better JavaScript Developer', speaker: { - avatar: "https://www.gravatar.com/avatar/36c528f0d1f8811f27268119b2c63eaa?s=128", - github: "jaredly", - name: "Jared Forsyth", - twitter: "jaredforsyth", - summary: "" + avatar: 'https://www.gravatar.com/avatar/36c528f0d1f8811f27268119b2c63eaa?s=128', + github: 'jaredly', + name: 'Jared Forsyth', + twitter: 'jaredforsyth', + summary: '', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "andres-suarez": { + 'andres-suarez': { summary: 'In my talk last year, "Nuclide hacks for React Native development" I briefly touched on how Flow can lead to writing better React Native apps. This year, the focus is entirely on using Nuclide\'s rich UI for Flow features to move fast with React.', - title: "Moving Fast with Nuclide and Flow", + title: 'Moving Fast with Nuclide and Flow', speaker: { - avatar: "https://www.gravatar.com/avatar/a533b2e0c40619f551bf54506e53ca2c?s=128", - github: "zertosh", - name: "Andres Suarez", - twitter: "zertosh", - summary: "I can convert Red Bull into JavaScript at Facebook" + avatar: 'https://www.gravatar.com/avatar/a533b2e0c40619f551bf54506e53ca2c?s=128', + github: 'zertosh', + name: 'Andres Suarez', + twitter: 'zertosh', + summary: 'I can convert Red Bull into JavaScript at Facebook', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "nicole-chung": { + 'nicole-chung': { summary: "Delivering your React app offline, with a look and feel of a native app, is becoming increasingly feasible. Technical benefits include fast installs (since it's just a web page), push notifications, caching page content, delivering a faster feeling experience, and keeping the user logged even when the network drops a connection. By using JS plugins and libraries such such as offline.js and offline-plugin, and browser technologies such as Service Workers, IndexedDB, and AppCache, you can be sure your users will be able to use your web app even as their internet connection drops off.", - title: "How to React in the Slow Lane", + title: 'How to React in the Slow Lane', speaker: { - avatar: "https://www.gravatar.com/avatar/c70631175fb94a653c5b8e08180e1126?s=128", - github: "nicolechung", - name: "Nicole Chung", - twitter: "redconservatory", - summary: "As a Software Engineer at Toronto-based product studio TWG, Nicole Chung works with Node.js, React, and Redux to build fast and efficient user interfaces. When she’s not at work, she’s a full-stack JS mentor at HackerYou." + avatar: 'https://www.gravatar.com/avatar/c70631175fb94a653c5b8e08180e1126?s=128', + github: 'nicolechung', + name: 'Nicole Chung', + twitter: 'redconservatory', + summary: 'As a Software Engineer at Toronto-based product studio TWG, Nicole Chung works with Node.js, React, and Redux to build fast and efficient user interfaces. When she’s not at work, she’s a full-stack JS mentor at HackerYou.', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "merrick-christensen": { - summary: "In this talk we will explore React’s composable & flexible programming model in the domain of, well… programming. Here we will see how React can be used to codify your teams best practices, teach beginners JavaScript & help proficient programmers refactor more efficiently. You know what they say? “When all you have is hammer… React is good for everything.”", - title: "React to Code", + 'merrick-christensen': { + summary: 'In this talk we will explore React’s composable & flexible programming model in the domain of, well… programming. Here we will see how React can be used to codify your teams best practices, teach beginners JavaScript & help proficient programmers refactor more efficiently. You know what they say? “When all you have is hammer… React is good for everything.”', + title: 'React to Code', speaker: { - avatar: "https://www.gravatar.com/avatar/4b03e52a178cd81f8743173976975c20?s=128", - github: "iammerrick", - name: "Merrick Christensen", - twitter: "iammerrick", - summary: "" + avatar: 'https://www.gravatar.com/avatar/4b03e52a178cd81f8743173976975c20?s=128', + github: 'iammerrick', + name: 'Merrick Christensen', + twitter: 'iammerrick', + summary: '', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "max-stoiber": { + 'max-stoiber': { summary: "What if we took the best of JavaScript and the best of CSS, and combined them together to create the ultimate styling solution for React? Glen Maddern (CSS Modules co-creator) and I sat down and starting thinking about this. Let's talk about what we thought about and why we arrived where we did – 💅 styled-components.", - title: "The Road to Styled Components", + title: 'The Road to Styled Components', speaker: { - avatar: "https://www.gravatar.com/avatar/48619fc17b3ab68472aebd56c0106278?s=128", - github: "mxstbr", - name: "Max Stoiber", - twitter: "mxstbr", - summary: "Max works as an open source developer at Thinkmill. He makes styled-components, react-boilerplate, KeystoneJS and micro-analytics." + avatar: 'https://www.gravatar.com/avatar/48619fc17b3ab68472aebd56c0106278?s=128', + github: 'mxstbr', + name: 'Max Stoiber', + twitter: 'mxstbr', + summary: 'Max works as an open source developer at Thinkmill. He makes styled-components, react-boilerplate, KeystoneJS and micro-analytics.', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "feather-knee": { - summary: "How does Netflix select which new content to offer from a myriad of choices? The service is famously data-driven, but sometimes there is very little data to inform decisions. Data science meets art. Learn about a prediction tool that was recently redesigned, expanded and re-written in React.", - title: "Building Applications for a Studio in the Cloud at Netflix", + 'feather-knee': { + summary: 'How does Netflix select which new content to offer from a myriad of choices? The service is famously data-driven, but sometimes there is very little data to inform decisions. Data science meets art. Learn about a prediction tool that was recently redesigned, expanded and re-written in React.', + title: 'Building Applications for a Studio in the Cloud at Netflix', speaker: { - avatar: "https://www.gravatar.com/avatar/9d78b84e1e017c2881a07f44c72267eb?s=128", - name: "Feather Knee", - twitter: "featherart", - summary: "" + avatar: 'https://www.gravatar.com/avatar/9d78b84e1e017c2881a07f44c72267eb?s=128', + name: 'Feather Knee', + twitter: 'featherart', + summary: '', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, [br()]: { break: true, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "leland-richardson": { + 'leland-richardson': { summary: 'Integrating React Native with a large existing native codebase can prove to be very difficult. Use of React Native generally falls into two categories: "Green Field" and "Brown Field". "Green Field" apps are built from the ground up with 100% React Native, and "Brown Field" apps integrate React Native into an already existing codebase. Integrating React Native into Airbnb\'s main app has been a great learning experience, and I will share the various hurdles we\'ve had to overcome in the process of building over 100 screens in React Native across dozens of engineers, shipping to millions of users.', title: 'React Native in the "Brown Field"', speaker: { - avatar: "https://www.gravatar.com/avatar/a1dc04961aa47c7ce072ffa224fabdbb?s=128", - github: "lelandrichardson", - name: "Leland Richardson", - twitter: "intelligibabble", - summary: "Leland is a Software Engineer at Airbnb working on React and React Native. He is interested in finding elegant solutions to difficult problems. Passionate educator and simplifier." + avatar: 'https://www.gravatar.com/avatar/a1dc04961aa47c7ce072ffa224fabdbb?s=128', + github: 'lelandrichardson', + name: 'Leland Richardson', + twitter: 'intelligibabble', + summary: 'Leland is a Software Engineer at Airbnb working on React and React Native. He is interested in finding elegant solutions to difficult problems. Passionate educator and simplifier.', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "tal-kol": { + 'tal-kol': { summary: "The async nature of the React Native bridge incurs an inherent performance penalty, preventing JavaScript code from running at high framerates. Modern animation libraries, like Animated, address this by minimizing passes over the bridge. User interactions, where UI continuously reacts to the user's gestures, are a step further. How can we run those at 60 FPS?", - title: "Moving Beyond Animations to User Interactions at 60 FPS in React Native", + title: 'Moving Beyond Animations to User Interactions at 60 FPS in React Native', speaker: { - avatar: "https://www.gravatar.com/avatar/f3885bee0da8e2573c2394d30621e9d1?s=128", - github: "talkol", - name: "Tal Kol", - twitter: "koltal", - summary: "Head of Mobile Engineering Wix.com. Tal is a full-stack developer, specializing in native development for iOS and Android. His latest passion is React Native." + avatar: 'https://www.gravatar.com/avatar/f3885bee0da8e2573c2394d30621e9d1?s=128', + github: 'talkol', + name: 'Tal Kol', + twitter: 'koltal', + summary: 'Head of Mobile Engineering Wix.com. Tal is a full-stack developer, specializing in native development for iOS and Android. His latest passion is React Native.', }, - time: getTime(DAY_ONE, 30) + time: getTime(DAY_ONE, 30), }, - "adam-perry": { - summary: "A presentation of the create-react-native-app (CRNA) tool. CRNA follows in the well-trodden path of create-react-app, providing a cross-platform, boilerplate-free developer experience for new React Native projects. CRNA is the product of a collaboration between Exponent, Facebook, and open-source contributors.", + 'adam-perry': { + summary: 'A presentation of the create-react-native-app (CRNA) tool. CRNA follows in the well-trodden path of create-react-app, providing a cross-platform, boilerplate-free developer experience for new React Native projects. CRNA is the product of a collaboration between Exponent, Facebook, and open-source contributors.', title: 'Create React Native App: 5 Minutes to "Hello, World!"', speaker: { - avatar: "https://www.gravatar.com/avatar/8e9af27762850ca9fc9984eb8ff21259?s=128", - github: "dikaiosune", - name: "Adam Perry", - twitter: "dika10sune", - summary: "" + avatar: 'https://www.gravatar.com/avatar/8e9af27762850ca9fc9984eb8ff21259?s=128', + github: 'dikaiosune', + name: 'Adam Perry', + twitter: 'dika10sune', + summary: '', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "samer-buna": { - summary: "GraphQL is the future, and you can use it today in React applications with minimal changes. No fancy frameworks are needed. Start using GraphQL right away to get the power of composition and declarative data requirements and work with more efficient APIs.", + 'samer-buna': { + summary: 'GraphQL is the future, and you can use it today in React applications with minimal changes. No fancy frameworks are needed. Start using GraphQL right away to get the power of composition and declarative data requirements and work with more efficient APIs.', title: "You Don't Need a Fancy Framework to Use GraphQL with React", speaker: { - avatar: "https://www.gravatar.com/avatar/4b6b338a1609ea0a4dfec74208425620?s=128", - github: "samerbuna", - name: "Samer Buna", - twitter: "samerbuna", - summary: "Author of online courses on Pluralsight and Lynda. Coder at jsComplete. Teacher for O'Reilly and Forwardjs. Editor of EdgeCoders." + avatar: 'https://www.gravatar.com/avatar/4b6b338a1609ea0a4dfec74208425620?s=128', + github: 'samerbuna', + name: 'Samer Buna', + twitter: 'samerbuna', + summary: "Author of online courses on Pluralsight and Lynda. Coder at jsComplete. Teacher for O'Reilly and Forwardjs. Editor of EdgeCoders.", }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "peggy-rayzis": { + 'peggy-rayzis': { summary: "Data is all around us! From health tracking to sports statistics, users expect to see the data they're consuming presented consistently on every platform. In this talk, you'll learn how to use Victory, a library available for React and React Native, to build interactive, composable charts with ease. You'll also see some cool real-world examples on both platforms showcasing the power of Victory to inspire you for your next data viz project.", - title: "Cross-Platform Data Visualization with React and React Native", + title: 'Cross-Platform Data Visualization with React and React Native', speaker: { - avatar: "https://www.gravatar.com/avatar/b6e83f06e71655a28bef6582c4b804e8?s=128", - github: "peggyrayzis", - name: "Peggy Rayzis", - twitter: "peggyrayzis", - summary: "Peggy is a Software Engineer at Major League Soccer who builds awesome fan experiences in React & React Native. She also loves hacking on nteract and skiing." + avatar: 'https://www.gravatar.com/avatar/b6e83f06e71655a28bef6582c4b804e8?s=128', + github: 'peggyrayzis', + name: 'Peggy Rayzis', + twitter: 'peggyrayzis', + summary: 'Peggy is a Software Engineer at Major League Soccer who builds awesome fan experiences in React & React Native. She also loves hacking on nteract and skiing.', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "ken-wheeler": { - summary: "An exploration in past and current alternative uses for React, non-standard rendering targets, and the future of such shenanigans.", - title: "Using React for Anything but Websites", + 'ken-wheeler': { + summary: 'An exploration in past and current alternative uses for React, non-standard rendering targets, and the future of such shenanigans.', + title: 'Using React for Anything but Websites', speaker: { - avatar: "https://www.gravatar.com/avatar/4751e2e9fe7b876958d38f86a718ca91?s=128", - github: "kenwheeler", - name: "Ken Wheeler", - twitter: "ken_wheeler", - summary: "Ken is the Director of Open Source at Formidable, and the creator of libraries such as Slick, Spectacle, react-music and webpack dashboard." + avatar: 'https://www.gravatar.com/avatar/4751e2e9fe7b876958d38f86a718ca91?s=128', + github: 'kenwheeler', + name: 'Ken Wheeler', + twitter: 'ken_wheeler', + summary: 'Ken is the Director of Open Source at Formidable, and the creator of libraries such as Slick, Spectacle, react-music and webpack dashboard.', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, - "dustan-kasten": { - summary: "The React components we know and love are a powerful and constrained abstraction for building user interface. The React team has managed to not only rewrite the entire reconciler with Fiber, but also create a simple and constrained API for implementing a React renderer! Let’s take a short exploration into what happens when we expand the definition of user interface so that React can render everywhere.", - title: "React Everything, Render Everywhere", + 'dustan-kasten': { + summary: 'The React components we know and love are a powerful and constrained abstraction for building user interface. The React team has managed to not only rewrite the entire reconciler with Fiber, but also create a simple and constrained API for implementing a React renderer! Let’s take a short exploration into what happens when we expand the definition of user interface so that React can render everywhere.', + title: 'React Everything, Render Everywhere', speaker: { - avatar: "https://www.gravatar.com/avatar/d22307e787361923d233607122640e32?s=128", - github: "iamdustan", - name: "Dustan Kasten", - twitter: "iamdustan", - summary: "" + avatar: 'https://www.gravatar.com/avatar/d22307e787361923d233607122640e32?s=128', + github: 'iamdustan', + name: 'Dustan Kasten', + twitter: 'iamdustan', + summary: '', }, - time: getTime(DAY_ONE, 6) + time: getTime(DAY_ONE, 6), }, [br()]: { break: true, important: true, time: getTime(DAY_ONE, 120), - title: "Happy Hour" + title: 'Happy Hour', }, /* DAY TWO */ @@ -305,196 +305,196 @@ const data = { break: true, important: true, time: getTime(DAY_TWO, 30), - title: "Registration / Breakfast" + title: 'Registration / Breakfast', }, [br()]: { break: true, important: true, time: getTime(DAY_TWO, 30), - title: "Hall Doors Open" + title: 'Hall Doors Open', }, - "michaela-lehr": { + 'michaela-lehr': { summary: "My talk will give you an overview of the WebVR ecosystem, beginning with a short introduction of the basic VR concepts, like head tracking sensors, the field of view and stereoscopic images. You will also see the current status of the ReactVR in action with code samples. Which leads to another important point of this talk: the struggles of creating VR applications today. There are a lot of unanswered questions, e.g. UX design challenges, input devices, motion sickness or browser support. This is why the talk ends with my advice on how to create responsible applications, that won't harm your users – neither physically nor psychologically.", - title: "Goodbye Flatland! An introduction to ReactVR and what it means for web developers", + title: 'Goodbye Flatland! An introduction to ReactVR and what it means for web developers', speaker: { - avatar: "https://www.gravatar.com/avatar/b1898d507a4d4102606c496fdab74c86?s=128", - github: "Fischaela", - name: "Michaela Lehr", - twitter: "FischaelaMeer", - summary: "Michaela Lehr is a creative front-end developer and designer. She specializes in UX and WebVR, and co-founded the studio GeilDanke. In her free time she travels round the world, practices yoga, and watches way too much Buffy." + avatar: 'https://www.gravatar.com/avatar/b1898d507a4d4102606c496fdab74c86?s=128', + github: 'Fischaela', + name: 'Michaela Lehr', + twitter: 'FischaelaMeer', + summary: 'Michaela Lehr is a creative front-end developer and designer. She specializes in UX and WebVR, and co-founded the studio GeilDanke. In her free time she travels round the world, practices yoga, and watches way too much Buffy.', }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "robert-zhu": { + 'robert-zhu': { summary: "React's declarative model has made it fun and easy to build engaging realtime interactions. But great realtime apps need great realtime APIs. Come learn how GraphQL can push data to your React apps in realtime with GraphQL Subscriptions. We'll take a look at the GraphQL Subscriptions Specification and how it enables an ecosystem of clients and servers.", - title: "Realtime React Apps with GraphQL", + title: 'Realtime React Apps with GraphQL', speaker: { - avatar: "https://www.gravatar.com/avatar/12ee4dac83689004c4a5d0d73eebbccb?s=128", - github: "robzhu", - name: "Robert Zhu", - twitter: "rbzhu", - summary: "I'm a software engineer at Facebook working on GraphQL. I enjoy psychology, economics, history, technology, gaming, and building stuff." + avatar: 'https://www.gravatar.com/avatar/12ee4dac83689004c4a5d0d73eebbccb?s=128', + github: 'robzhu', + name: 'Robert Zhu', + twitter: 'rbzhu', + summary: "I'm a software engineer at Facebook working on GraphQL. I enjoy psychology, economics, history, technology, gaming, and building stuff.", }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, [br()]: { break: true, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "rogelio-guzman": { + 'rogelio-guzman': { summary: "With Jest, you can capture snapshots of React trees or other serializable values to simplify UI testing and to analyze how state changes over time. In this talk we will do a deep dive into snapshot testing and talk about other uses for them. We are also going to chat about how some of its internal packages can be used to create your own tools that leverage Jest's infrastructure.", - title: "Jest Snapshots and Beyond", + title: 'Jest Snapshots and Beyond', speaker: { - avatar: "https://www.gravatar.com/avatar/affbc2bbe98b6c586275cfeb12fd80fd?s=128", - github: "rogeliog", - name: "Rogelio Guzman", - twitter: "rogeliog", - summary: "Hola, I love to code, I help out with @fbjest and I'm currently working as a front end developer at Docker" + avatar: 'https://www.gravatar.com/avatar/affbc2bbe98b6c586275cfeb12fd80fd?s=128', + github: 'rogeliog', + name: 'Rogelio Guzman', + twitter: 'rogeliog', + summary: "Hola, I love to code, I help out with @fbjest and I'm currently working as a front end developer at Docker", }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "neehar-venugopal": { + 'neehar-venugopal': { summary: "The most performant code is code that never runs. Modern web apps are bigger in size that ever before, and the idea of Shipping Less JavaScript™ feels like a pipe dream. Until now. Thanks to modern bundlers, ES6 module magic and the brand new import() proposal, JavaScript finally has an idiomatic way of delivering parts of your web app when it's needed. This talk is meant to show how you can start using import() today to load smaller, faster code with minimal effort.", title: "A Beginner's Guide to Code Splitting Your React App", speaker: { - avatar: "https://www.gravatar.com/avatar/86d9c5bbb33f358f1169bf102d50d25b?s=128", - github: "neeharv", - name: "Neehar Venugopal", - twitter: "neeharv", - summary: "" + avatar: 'https://www.gravatar.com/avatar/86d9c5bbb33f358f1169bf102d50d25b?s=128', + github: 'neeharv', + name: 'Neehar Venugopal', + twitter: 'neeharv', + summary: '', }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "parashuram-n": { + 'parashuram-n': { summary: "React Native brought the web’s enviable development patterns like hot module replacement and Redux action replay to mobile, without needing to sacrifice native UI. In this talk, we will take the idea further to explore some more interesting developer workflows. Starting by looking at the internals of React Native debugging, we will take advantage of Node's built in Time Travel Debugging feature to jump back and forth between React Native call stacks. We will then leverage React Native's unique event model to mirror user gestures across multiple devices and use it to simultaneously test our app across various form factors. Once the app is written, we will set up an automated continuous deployment pipeline to quickly build, test and distribute our app, powered by Code Push and Visual Studio Mobile Center. In each of these cases, we will see why React Native is uniquely positioned to supercharge your mobile application development experience.", - title: "Web-Like Development and Release Agility for React Native", + title: 'Web-Like Development and Release Agility for React Native', speaker: { - avatar: "https://www.gravatar.com/avatar/d1901db1add07659076eca4ec2147f4a?s=128", - github: "axemclion", - name: "Parashuram N", - twitter: "nparashuram", - summary: "Parashuram is a front end developer, web performance enthusiast and an Apache Cordova Committer. At his day job, he is a Program Manager at Microsoft where he builds developer tools like CodePush and the VSCode extension for React and React Native." + avatar: 'https://www.gravatar.com/avatar/d1901db1add07659076eca4ec2147f4a?s=128', + github: 'axemclion', + name: 'Parashuram N', + twitter: 'nparashuram', + summary: 'Parashuram is a front end developer, web performance enthusiast and an Apache Cordova Committer. At his day job, he is a Program Manager at Microsoft where he builds developer tools like CodePush and the VSCode extension for React and React Native.', }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, [br()]: { break: true, time: getTime(DAY_TWO, 90), - title: "Lunch" + title: 'Lunch', }, - "marie-laure-thuret": { + 'marie-laure-thuret': { summary: "React-Storybook provides a complete isolated environment with hot reloading that let you design and develop iteratively your UI React components. On top of that, by building your components this way you will ensure almost for free the creation of a nice living documentation and you will have a perfect entry point when we'll became the time to experiment things or solve issues.", - title: "React-Storybook: Design, Develop, Document and Debug your React UI components", + title: 'React-Storybook: Design, Develop, Document and Debug your React UI components', speaker: { - avatar: "https://www.gravatar.com/avatar/431dfba5a89e9841daea12dc32a04924?s=128", - github: "mthuret", - name: "Marie-Laure Thuret", - twitter: "mlthuret", - summary: "I'm a front-end developer working on Algolia's Open Source libraries." + avatar: 'https://www.gravatar.com/avatar/431dfba5a89e9841daea12dc32a04924?s=128', + github: 'mthuret', + name: 'Marie-Laure Thuret', + twitter: 'mlthuret', + summary: "I'm a front-end developer working on Algolia's Open Source libraries.", }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "cameron-westland": { - summary: "For fabricating digital products, the designer/developer workflow is broken. In this talk I’ll go into some of the problems with the current workflow and why I think the existing solutions are bad. I’ll also demonstrate a component based visualization tool, a new markup language, and compiler which can generate React components, as possible solutions. My ultimate goal is to allow designers to build and deploy complex UI components from concept to production like they do with many other assets like video, images and icons.", - title: "Design Specific Language", + 'cameron-westland': { + summary: 'For fabricating digital products, the designer/developer workflow is broken. In this talk I’ll go into some of the problems with the current workflow and why I think the existing solutions are bad. I’ll also demonstrate a component based visualization tool, a new markup language, and compiler which can generate React components, as possible solutions. My ultimate goal is to allow designers to build and deploy complex UI components from concept to production like they do with many other assets like video, images and icons.', + title: 'Design Specific Language', speaker: { - avatar: "https://www.gravatar.com/avatar/0c42130e61dd791ae86aa8b0931e5853?s=128", - github: "camwest", - name: "Cameron Westland", - twitter: "camwest", - summary: "Cameron has been working at Autodesk on Web UI projects for three years. Prior to that he co-founded Kera Software which was acquired in 2013. He’ll talk your ear off about many topics including UI components, extensibility, and design systems." + avatar: 'https://www.gravatar.com/avatar/0c42130e61dd791ae86aa8b0931e5853?s=128', + github: 'camwest', + name: 'Cameron Westland', + twitter: 'camwest', + summary: 'Cameron has been working at Autodesk on Web UI projects for three years. Prior to that he co-founded Kera Software which was acquired in 2013. He’ll talk your ear off about many topics including UI components, extensibility, and design systems.', }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "troy-connor": { - summary: "Last year I won the diversity scholarship and this year I’m going to talk about how we can grow this community outside of our peers. I’m going to talk about the importance of diversity within the tech culture and how doing that has brought React to be as awesome as it is. Also steps we can do to improve contributing, ideas of how we can collaborate, and how we can continue to develop a environment where React can be easier for people who are intimidated to learn it.", - title: "Building React Communities Outside of Your Circle", + 'troy-connor': { + summary: 'Last year I won the diversity scholarship and this year I’m going to talk about how we can grow this community outside of our peers. I’m going to talk about the importance of diversity within the tech culture and how doing that has brought React to be as awesome as it is. Also steps we can do to improve contributing, ideas of how we can collaborate, and how we can continue to develop a environment where React can be easier for people who are intimidated to learn it.', + title: 'Building React Communities Outside of Your Circle', speaker: { - avatar: "https://www.gravatar.com/avatar/33398b7cfbfa5877a16ab9a0fb0ee303?s=128", - github: "troy0820", - name: "Troy Connor", - twitter: "troy0820", - summary: "Troy is a software engineer at ETA. In his spare time, he likes to play with robots, read, code, and chase conferences and meetups." + avatar: 'https://www.gravatar.com/avatar/33398b7cfbfa5877a16ab9a0fb0ee303?s=128', + github: 'troy0820', + name: 'Troy Connor', + twitter: 'troy0820', + summary: 'Troy is a software engineer at ETA. In his spare time, he likes to play with robots, read, code, and chase conferences and meetups.', }, - time: getTime(DAY_TWO, 6) + time: getTime(DAY_TWO, 6), }, - "james-long": { + 'james-long': { summary: "All editors format code slightly differently and don't even help with more complex situations like deeply indented syntax, which forces you to manually break it up across lines. This becomes a point of strife within teams, and we waste so much time trying to enforce a consistent coding style. I will show how a new JavaScript formatter, Prettier, takes a different approach and solves this problem completely, freeing you from the burden of thinking about code structure.", - title: "A Prettier Printer", + title: 'A Prettier Printer', speaker: { - avatar: "https://www.gravatar.com/avatar/7ed988fcb335ac36e3c9f7fc8fdb7c10?s=128", - github: "jlongster", - name: "James Long", - twitter: "jlongster", - summary: "" + avatar: 'https://www.gravatar.com/avatar/7ed988fcb335ac36e3c9f7fc8fdb7c10?s=128', + github: 'jlongster', + name: 'James Long', + twitter: 'jlongster', + summary: '', }, - time: getTime(DAY_TWO, 6) + time: getTime(DAY_TWO, 6), }, - "sophia-shoemaker": { + 'sophia-shoemaker': { summary: 'AWS Lambda is an event-driven, "serverless" service that makes it easier and cheaper than ever to get an application up and running. In this talk I\'ll dive into some of the details of what AWS Lambda is, how it works, how to integrate it with another AWS service, API Gateway and how you can "go serverless" with React applications.', - title: "AWS Lambda + AWS Gateway + React = AWEsome", + title: 'AWS Lambda + AWS Gateway + React = AWEsome', speaker: { - avatar: "https://www.gravatar.com/avatar/862e513be39c4338bf939dede21ce271?s=128", - github: "mrscobbler", - name: "Sophia Shoemaker", - twitter: "wisecobbler", - summary: "Sophia Shoemaker is a web developer and a member of the Fullstack React team" + avatar: 'https://www.gravatar.com/avatar/862e513be39c4338bf939dede21ce271?s=128', + github: 'mrscobbler', + name: 'Sophia Shoemaker', + twitter: 'wisecobbler', + summary: 'Sophia Shoemaker is a web developer and a member of the Fullstack React team', }, - time: getTime(DAY_TWO, 6) + time: getTime(DAY_TWO, 6), }, - "aditya-punjani": { + 'aditya-punjani': { summary: "Web Apps and Native Apps are going through a convergence on mobile. Technologies such as Progressive Web Apps and React Native are blurring the lines between the web and native. At Flipkart, we are building platforms and products at scale, designed around this convergence by utilizing the best of both worlds. In this talk I'll go over the architectural design, decisions, and implementation details with React that power the platforms at Flipkart during this era of convergence.", - title: "The Great Convergence with React", + title: 'The Great Convergence with React', speaker: { - avatar: "https://www.gravatar.com/avatar/35b89a4817380740e0992beeda327f54?s=128", - github: "adityapunjani", - name: "Aditya Punjani", - twitter: "adityapunjani", - summary: "Aditya Punjani is a Senior Frontend Engineer at Flipkart, focusing on building stellar mobile experiences for customer delight. Aditya likes to push the Web forward and is passionate about JavaScript, network and rendering performance, developer tooling, browser internals, and user experience." + avatar: 'https://www.gravatar.com/avatar/35b89a4817380740e0992beeda327f54?s=128', + github: 'adityapunjani', + name: 'Aditya Punjani', + twitter: 'adityapunjani', + summary: 'Aditya Punjani is a Senior Frontend Engineer at Flipkart, focusing on building stellar mobile experiences for customer delight. Aditya likes to push the Web forward and is passionate about JavaScript, network and rendering performance, developer tooling, browser internals, and user experience.', }, - time: getTime(DAY_TWO, 6) + time: getTime(DAY_TWO, 6), }, - "michael-jackson": { - summary: "React Router is a full-featured routing layer for React applications that run in the browser, on the server, on React Native, and anywhere else React runs. This talk will highlight the capabilities of the first truly universal JavaScript router, enabling developers to learn a single URL-based API for routing and then apply those same principles for adding new screens, flows, and transitions to any React application, regardless of the platform. Learn once, route anywhere.", - title: "Learn Once, Route Anywhere", + 'michael-jackson': { + summary: 'React Router is a full-featured routing layer for React applications that run in the browser, on the server, on React Native, and anywhere else React runs. This talk will highlight the capabilities of the first truly universal JavaScript router, enabling developers to learn a single URL-based API for routing and then apply those same principles for adding new screens, flows, and transitions to any React application, regardless of the platform. Learn once, route anywhere.', + title: 'Learn Once, Route Anywhere', speaker: { - avatar: "https://www.gravatar.com/avatar/9210a60b1492363560375d9cd6c842de?s=128", - github: "mjackson", - name: "Michael Jackson", - twitter: "mjackson", - summary: "" + avatar: 'https://www.gravatar.com/avatar/9210a60b1492363560375d9cd6c842de?s=128', + github: 'mjackson', + name: 'Michael Jackson', + twitter: 'mjackson', + summary: '', }, - time: getTime(DAY_TWO, 6) + time: getTime(DAY_TWO, 6), }, [br()]: { break: true, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, - "cheng-lou": { - summary: "What is a piece of code? What is a library, a tool, a platform and a language? Based on my last talk on the spectrum of abstraction, this talk explores the daily concerns and the meta-concerns of writing code, and how our new effort, Reason, relates to them.", - title: "Building React Components with Reason", + 'cheng-lou': { + summary: 'What is a piece of code? What is a library, a tool, a platform and a language? Based on my last talk on the spectrum of abstraction, this talk explores the daily concerns and the meta-concerns of writing code, and how our new effort, Reason, relates to them.', + title: 'Building React Components with Reason', speaker: { - avatar: "https://www.gravatar.com/avatar/13bede8f6aa8c5eb590995b32ca04bf2?s=128", - github: "chenglou", - name: "Cheng Lou", - twitter: "_chenglou", - summary: "Cheng Lou works on Messenger by day, and Reason by night" + avatar: 'https://www.gravatar.com/avatar/13bede8f6aa8c5eb590995b32ca04bf2?s=128', + github: 'chenglou', + name: 'Cheng Lou', + twitter: '_chenglou', + summary: 'Cheng Lou works on Messenger by day, and Reason by night', }, - time: getTime(DAY_TWO, 30) + time: getTime(DAY_TWO, 30), }, [br()]: { break: true, important: true, time: getTime(DAY_TWO, 60), - title: "Panel / Q&A" + title: 'Panel / Q&A', }, [br()]: { break: true, important: true, time: getTime(DAY_TWO, 240), - title: "Closing Party at 104" - } + title: 'Closing Party at 104', + }, }; // Internal @@ -514,7 +514,7 @@ export function getIndexFromId(ID: string): number | null { const idx = list.map(t => t.id).indexOf(ID); if (idx === -1) { - console.error("No talk found for ID", ID); + console.error('No talk found for ID', ID); return null; } @@ -533,7 +533,7 @@ export function getNextTalkFromId(ID: string): ScheduleTalk | null { if (talk && talk.break) talk = list[++search]; if (!talk) { - console.info("This is the last talk."); + console.info('This is the last talk.'); return null; } @@ -551,7 +551,7 @@ export function getPrevTalkFromId(ID: string): ScheduleTalk | null { talk = list[--search]; if (!talk) { - console.info("This is the first talk."); + console.info('This is the first talk.'); return null; } diff --git a/app/scenes/Info/components/CodeOfConduct/index.js b/app/scenes/Info/components/CodeOfConduct/index.js index 0a16fd8..d0c22ee 100644 --- a/app/scenes/Info/components/CodeOfConduct/index.js +++ b/app/scenes/Info/components/CodeOfConduct/index.js @@ -1,20 +1,20 @@ // @flow -import React, { Component } from "react"; -import Icon from "react-native-vector-icons/Ionicons"; +import React, { Component } from 'react'; +import Icon from 'react-native-vector-icons/Ionicons'; import { ScrollView, StyleSheet, Text, TouchableOpacity, - View -} from "react-native"; + View, +} from 'react-native'; -import theme from "../../../../theme"; -import Modal from "../../../../components/Modal"; +import theme from '../../../../theme'; +import Modal from '../../../../components/Modal'; export default class CodeOfConduct extends Component { props: { - onClose: () => mixed + onClose: () => mixed, }; render() { @@ -96,16 +96,16 @@ const BORDER_RADIUS = 6; const styles = StyleSheet.create({ wrapper: { - backgroundColor: "white", + backgroundColor: 'white', borderRadius: BORDER_RADIUS, maxHeight: 400, - shadowColor: "black", + shadowColor: 'black', shadowOffset: { height: 1, width: 0 }, shadowOpacity: 0.25, - shadowRadius: 5 + shadowRadius: 5, }, content: { - padding: theme.fontSize.default + padding: theme.fontSize.default, }, // text @@ -113,36 +113,36 @@ const styles = StyleSheet.create({ color: theme.color.gray60, fontSize: 13, lineHeight: theme.fontSize.default, - marginTop: theme.fontSize.small + marginTop: theme.fontSize.small, }, heading: { color: theme.color.gray70, fontSize: theme.fontSize.small, - fontWeight: "bold" + fontWeight: 'bold', }, heading1: { - fontSize: theme.fontSize.default + fontSize: theme.fontSize.default, }, heading2: { fontSize: theme.fontSize.small, - marginTop: theme.fontSize.large + marginTop: theme.fontSize.large, }, // close close: { - alignItems: "center", + alignItems: 'center', backgroundColor: theme.color.gray05, borderBottomLeftRadius: BORDER_RADIUS, borderBottomRightRadius: BORDER_RADIUS, height: 40, - justifyContent: "center", - shadowColor: "black", + justifyContent: 'center', + shadowColor: 'black', shadowOffset: { height: -1, width: 0 }, shadowOpacity: 0.1, - shadowRadius: 0 + shadowRadius: 0, }, closeText: { color: theme.color.gray40, - fontWeight: "500" - } + fontWeight: '500', + }, }); diff --git a/app/scenes/Info/components/Organiser/index.js b/app/scenes/Info/components/Organiser/index.js index bf34b02..4167fcf 100644 --- a/app/scenes/Info/components/Organiser/index.js +++ b/app/scenes/Info/components/Organiser/index.js @@ -1,21 +1,21 @@ // @flow -import React from "react"; +import React from 'react'; import { PixelRatio, StyleSheet, Text, TouchableHighlight, - View -} from "react-native"; + View, +} from 'react-native'; -import Avatar from "../../../../components/Avatar"; -import theme from "../../../../theme"; +import Avatar from '../../../../components/Avatar'; +import theme from '../../../../theme'; type Props = { avatar: string, name: string, onPress: () => mixed, - summary: string + summary: string, }; export default function Organiser( @@ -23,14 +23,14 @@ export default function Organiser( avatar, name, onPress, - summary + summary, }: Props ) { const touchableProps = { activeOpacity: 1, onPress: onPress, style: styles.touchable, - underlayColor: theme.color.gray05 + underlayColor: theme.color.gray05, }; return ( @@ -48,32 +48,32 @@ export default function Organiser( const styles = StyleSheet.create({ touchable: { - backgroundColor: "white" + backgroundColor: 'white', }, base: { - alignItems: "center", + alignItems: 'center', borderBottomColor: theme.color.gray20, borderBottomWidth: 1 / PixelRatio.get(), - flexDirection: "row", + flexDirection: 'row', flexGrow: 1, flexShrink: 1, - padding: theme.fontSize.default + padding: theme.fontSize.default, }, // content text: { flexGrow: 1, flexShrink: 1, - paddingLeft: theme.fontSize.default + paddingLeft: theme.fontSize.default, }, subtitle: { color: theme.color.gray60, fontSize: theme.fontSize.small, - fontWeight: "300", - marginBottom: theme.fontSize.small + fontWeight: '300', + marginBottom: theme.fontSize.small, }, title: { color: theme.color.text, - fontSize: theme.fontSize.default - } + fontSize: theme.fontSize.default, + }, }); diff --git a/app/scenes/Info/index.js b/app/scenes/Info/index.js index 31b9711..80eae4c 100644 --- a/app/scenes/Info/index.js +++ b/app/scenes/Info/index.js @@ -1,5 +1,5 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Image, LayoutAnimation, @@ -8,41 +8,41 @@ import { StyleSheet, Text, TouchableOpacity, - View -} from "react-native"; -import MapView from "react-native-maps"; + View, +} from 'react-native'; +import MapView from 'react-native-maps'; -import ListTitle from "../../components/ListTitle"; -import Navbar from "../../components/Navbar"; -import Scene from "../../components/Scene"; +import ListTitle from '../../components/ListTitle'; +import Navbar from '../../components/Navbar'; +import Scene from '../../components/Scene'; -import { list as organiserList } from "../../data/organisers"; -import theme from "../../theme"; -import { attemptToOpenUrl } from "../../utils"; +import { list as organiserList } from '../../data/organisers'; +import theme from '../../theme'; +import { attemptToOpenUrl } from '../../utils'; -import CodeOfConduct from "./components/CodeOfConduct"; -import Organiser from "./components/Organiser"; +import CodeOfConduct from './components/CodeOfConduct'; +import Organiser from './components/Organiser'; // Santa Clara, California const mapRegion = { latitude: 37.354108, longitude: -121.955246, latitudeDelta: 0.01, - longitudeDelta: 0.01 + longitudeDelta: 0.01, }; export default class Info extends Component { props: { navigator: Object, - organisers: typeof organiserList + organisers: typeof organiserList, }; state = { - modalIsOpen: false + modalIsOpen: false, }; static defaultProps = { - organisers: organiserList + organisers: organiserList, }; componentDidMount() { @@ -60,13 +60,13 @@ export default class Info extends Component { attemptToOpenUrl(url); } openThinkmill() { - const url = "https://www.thinkmill.com.au"; + const url = 'https://www.thinkmill.com.au'; attemptToOpenUrl(url); } openRepository() { - const url = "https://github.com/Thinkmill/react-conf-2017"; + const url = 'https://github.com/Thinkmill/react-conf-2017'; attemptToOpenUrl(url); } @@ -128,7 +128,7 @@ export default class Info extends Component { style={styles.madebyLink} > {/* Made by Thinkmill */} @@ -158,49 +158,49 @@ const styles = StyleSheet.create({ map: { flex: 1, height: 200, - maxHeight: 200 + maxHeight: 200, }, // hero hero: { - alignItems: "center", - backgroundColor: "white", + alignItems: 'center', + backgroundColor: 'white', borderBottomColor: theme.color.gray20, borderBottomWidth: 1 / PixelRatio.get(), borderTopColor: theme.color.gray30, borderTopWidth: 1 / PixelRatio.get(), - paddingHorizontal: theme.fontSize.default + paddingHorizontal: theme.fontSize.default, }, heroText: { paddingTop: theme.fontSize.xlarge, fontSize: theme.fontSize.default, - fontWeight: "300", + fontWeight: '300', lineHeight: theme.fontSize.large, - textAlign: "center" + textAlign: 'center', }, heroLink: { color: theme.color.blue, fontSize: theme.fontSize.default, - fontWeight: "500", - padding: theme.fontSize.large + fontWeight: '500', + padding: theme.fontSize.large, }, // made by thinkmill madeby: { - alignItems: "center", + alignItems: 'center', paddingHorizontal: theme.fontSize.default, - paddingVertical: theme.fontSize.xlarge + paddingVertical: theme.fontSize.xlarge, }, madebyLink: { - alignItems: "center" + alignItems: 'center', }, madebyText: { fontSize: theme.fontSize.default, - fontWeight: "300", + fontWeight: '300', lineHeight: theme.fontSize.large, marginTop: theme.fontSize.default, - textAlign: "center" + textAlign: 'center', }, madebyTitle: { - fontWeight: "500" - } + fontWeight: '500', + }, }); diff --git a/app/scenes/Schedule/components/Break/index.js b/app/scenes/Schedule/components/Break/index.js index a4f6c86..5ba366c 100644 --- a/app/scenes/Schedule/components/Break/index.js +++ b/app/scenes/Schedule/components/Break/index.js @@ -1,10 +1,10 @@ // @flow -import React, { Component } from "react"; -import { StyleSheet, Text, View } from "react-native"; -import LinearGradient from "react-native-linear-gradient"; +import React, { Component } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; -import theme from "../../../../theme"; -import { TalkStatusBar } from "../Talk"; +import theme from '../../../../theme'; +import { TalkStatusBar } from '../Talk'; const gradientSteps = 14; const gradientJump = 1.05; @@ -14,23 +14,23 @@ export default class Break extends Component { endTime?: string, important: boolean, startTime?: string, - status: "future" | "past" | "present", - title: string + status: 'future' | 'past' | 'present', + title: string, }; render() { const { important, startTime, status, ...props } = this.props; - const title = this.props.title || "Break"; + const title = this.props.title || 'Break'; return ( - + {important ? - + {startTime} — - - {" "}{title} + + {' '}{title} @@ -41,7 +41,7 @@ export default class Break extends Component { colors={generateGradientColors(gradientSteps)} style={styles.gradient} > - + {startTime} — {title} } @@ -72,8 +72,8 @@ function generateGradientColors(steps) { let colors = []; for (let i = 0; i < steps; i++) { - colors.push("white"); - colors.push("white"); + colors.push('white'); + colors.push('white'); colors.push(gray10); colors.push(gray10); } @@ -83,29 +83,29 @@ function generateGradientColors(steps) { const styles = StyleSheet.create({ base: { - alignItems: "stretch", - backgroundColor: "white", - flexDirection: "row" + alignItems: 'stretch', + backgroundColor: 'white', + flexDirection: 'row', }, gradient: { - alignItems: "center", - backgroundColor: "white", + alignItems: 'center', + backgroundColor: 'white', flexGrow: 1, height: 44, left: theme.fontSize.default, - justifyContent: "center" + justifyContent: 'center', }, text: { - backgroundColor: "transparent", + backgroundColor: 'transparent', color: theme.color.text, fontSize: theme.fontSize.small, - fontWeight: "300", - left: -theme.fontSize.default + fontWeight: '300', + left: -theme.fontSize.default, }, text__past: { - color: theme.color.gray40 + color: theme.color.gray40, }, importantText: { - color: theme.color.blue - } + color: theme.color.blue, + }, }); diff --git a/app/scenes/Schedule/components/NowButton/index.js b/app/scenes/Schedule/components/NowButton/index.js index 4faf9c1..7c94685 100644 --- a/app/scenes/Schedule/components/NowButton/index.js +++ b/app/scenes/Schedule/components/NowButton/index.js @@ -1,30 +1,30 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Animated, StyleSheet, Text, - TouchableWithoutFeedback -} from "react-native"; -import LinearGradient from "react-native-linear-gradient"; + TouchableWithoutFeedback, +} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; -import theme from "../../../../theme"; -import { lighten, darken } from "../../../../utils/color"; +import theme from '../../../../theme'; +import { lighten, darken } from '../../../../utils/color'; export default class NowButton extends Component { props: { - onPress: () => mixed + onPress: () => mixed, }; state = { - animValue: new Animated.Value(0) + animValue: new Animated.Value(0), }; springToValue(val: number) { Animated.spring(this.state.animValue, { toValue: val, friction: 3, - tension: 50 + tension: 50, }).start(); } render() { @@ -38,21 +38,21 @@ export default class NowButton extends Component { bottom: 20, left: 10, right: 10, - top: 10 + top: 10, }, onPress, onPressIn: () => this.springToValue(1), - onPressOut: () => this.springToValue(0) + onPressOut: () => this.springToValue(0), }; const dynamicStyles = { transform: [ { scale: animValue.interpolate({ inputRange: [0, 1], - outputRange: [1, 0.9] - }) - } - ] + outputRange: [1, 0.9], + }), + }, + ], }; return ( @@ -72,27 +72,27 @@ export default class NowButton extends Component { const styles = StyleSheet.create({ layout: { - alignItems: "center", + alignItems: 'center', bottom: 0, left: 0, paddingBottom: 20, - position: "absolute", - right: 0 + position: 'absolute', + right: 0, }, button: { backgroundColor: theme.color.blue, borderRadius: 40, height: 40, - justifyContent: "center", + justifyContent: 'center', paddingHorizontal: 32, - shadowColor: "black", + shadowColor: 'black', shadowOffset: { height: 1, width: 0 }, shadowOpacity: 0.24, - shadowRadius: 2 + shadowRadius: 2, }, text: { - backgroundColor: "transparent", - color: "white", - fontWeight: "bold" - } + backgroundColor: 'transparent', + color: 'white', + fontWeight: 'bold', + }, }); diff --git a/app/scenes/Schedule/components/SplashScreen/index.js b/app/scenes/Schedule/components/SplashScreen/index.js index df0ccda..28df686 100644 --- a/app/scenes/Schedule/components/SplashScreen/index.js +++ b/app/scenes/Schedule/components/SplashScreen/index.js @@ -1,17 +1,17 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Animated, Dimensions, Image, StyleSheet, TouchableHighlight, - View -} from "react-native"; + View, +} from 'react-native'; -import theme from "../../../../theme"; +import theme from '../../../../theme'; -const windowHeight = Dimensions.get("window").height; +const windowHeight = Dimensions.get('window').height; const SLIDE_DURATION = 800; const SLIDE_FINAL_HEIGHT = 400; @@ -27,7 +27,7 @@ Animated.TouchableHighlight = Animated.createAnimatedComponent( export default class SplashScreen extends Component { props: { onAnimationComplete?: () => mixed, - onLogoPress?: () => mixed + onLogoPress?: () => mixed, }; state = { @@ -36,7 +36,7 @@ export default class SplashScreen extends Component { logoOffset: new Animated.Value(0), logoScale: new Animated.Value(1), leftTriangleSkew: new Animated.Value(SKEW_DOWN), - rightTriangleSkew: new Animated.Value(SKEW_UP) + rightTriangleSkew: new Animated.Value(SKEW_UP), }; skewed = false; @@ -46,7 +46,7 @@ export default class SplashScreen extends Component { return { delay: 1000, duration: SLIDE_DURATION, - toValue + toValue, }; }; @@ -56,7 +56,7 @@ export default class SplashScreen extends Component { Animated.timing( this.state.height, animateTo(SLIDE_FINAL_HEIGHT + theme.navbar.height) - ) + ), ]).start(() => { if (this.props.onAnimationComplete) { this.props.onAnimationComplete(); @@ -81,7 +81,7 @@ export default class SplashScreen extends Component { const animateTo = toValue => { return { duration: SKEW_DURATION, - toValue + toValue, }; }; @@ -94,7 +94,7 @@ export default class SplashScreen extends Component { Animated.parallel([ // -------- Left Triangle -------- Animated.timing(leftTriangleSkew, animateTo(leftSkew)), - Animated.timing(rightTriangleSkew, animateTo(rightSkew)) + Animated.timing(rightTriangleSkew, animateTo(rightSkew)), ]).start(() => { setTimeout(() => this.queueIdleAnimation(), SKEW_DELAY); }); @@ -107,14 +107,14 @@ export default class SplashScreen extends Component { logoOffset, logoScale, leftTriangleSkew, - rightTriangleSkew + rightTriangleSkew, } = this.state; // Map to string values for transform. const interpolateToString = value => { return value.interpolate({ inputRange: [-360, 360], - outputRange: ["-360deg", "360deg"] + outputRange: ['-360deg', '360deg'], }); }; @@ -129,17 +129,17 @@ export default class SplashScreen extends Component { }} style={{ transform: [{ translateY: logoOffset }, { scale: logoScale }], - zIndex: 2 + zIndex: 2, }} > - + @@ -161,31 +161,31 @@ export default class SplashScreen extends Component { const styles = StyleSheet.create({ wrapper: { - zIndex: 2 + zIndex: 2, }, splash: { - position: "absolute", - alignItems: "center", - justifyContent: "center", + position: 'absolute', + alignItems: 'center', + justifyContent: 'center', top: -200, left: 0, - right: 0 + right: 0, }, bottomTriangle: { - position: "absolute", - backgroundColor: "rgba(36, 31, 32, 0.6)", + position: 'absolute', + backgroundColor: 'rgba(36, 31, 32, 0.6)', bottom: 40, height: 1200, left: -100, right: -100, - shadowColor: "black", + shadowColor: 'black', shadowOffset: { width: 10, - height: 15 + height: 15, }, shadowOpacity: 0.6, - shadowRadius: 10 - } + shadowRadius: 10, + }, }); diff --git a/app/scenes/Schedule/components/Talk/index.js b/app/scenes/Schedule/components/Talk/index.js index 76f92fb..7da82c9 100644 --- a/app/scenes/Schedule/components/Talk/index.js +++ b/app/scenes/Schedule/components/Talk/index.js @@ -1,5 +1,5 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Animated, Easing, @@ -7,15 +7,15 @@ import { StyleSheet, Text, TouchableHighlight, - View -} from "react-native"; -import Icon from "react-native-vector-icons/Ionicons"; + View, +} from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; -import Avatar from "../../../../components/Avatar"; -import theme from "../../../../theme"; -import { lighten } from "../../../../utils/color"; +import Avatar from '../../../../components/Avatar'; +import theme from '../../../../theme'; +import { lighten } from '../../../../utils/color'; -type Status = "past" | "present" | "future"; +type Status = 'past' | 'present' | 'future'; // ============================== // TALK SEPARATOR @@ -23,21 +23,21 @@ type Status = "past" | "present" | "future"; export function TalkSeparator({ status }: { status: Status }) { let barColor = theme.color.gray20; - if (status === "past") barColor = lighten(theme.color.blue, 40); - else if (status === "present") barColor = theme.color.blue; + if (status === 'past') barColor = lighten(theme.color.blue, 40); + else if (status === 'present') barColor = theme.color.blue; return ( @@ -50,14 +50,14 @@ export function TalkSeparator({ status }: { status: Status }) { export function TalkStatusBar({ status, ...props }: { status: Status }) { let barColor = theme.color.gray20; - if (status === "past") barColor = lighten(theme.color.blue, 40); - if (status === "present") barColor = theme.color.blue; + if (status === 'past') barColor = lighten(theme.color.blue, 40); + if (status === 'present') barColor = theme.color.blue; return ( @@ -74,13 +74,13 @@ type Props = { speakerName: string, startTime: string, status: Status, - title: string + title: string, }; const animationDefault = val => ({ toValue: val, duration: 666, - easing: Easing.inOut(Easing.quad) + easing: Easing.inOut(Easing.quad), }); export default class Talk extends Component { @@ -88,7 +88,7 @@ export default class Talk extends Component { animValue: Animated.Value; static defaultProps = { - status: "future" + status: 'future', }; constructor(props: Props) { @@ -102,7 +102,7 @@ export default class Talk extends Component { cycleAnimation() { Animated.sequence([ Animated.timing(this.animValue, animationDefault(1)), - Animated.timing(this.animValue, animationDefault(0)) + Animated.timing(this.animValue, animationDefault(0)), ]).start(() => this.cycleAnimation()); } render() { @@ -116,28 +116,28 @@ export default class Talk extends Component { ...props } = this.props; - const isPresent = status === "present"; + const isPresent = status === 'present'; const touchableProps = { activeOpacity: 1, onPress: onPress, style: styles.touchable, - underlayColor: theme.color.gray05 + underlayColor: theme.color.gray05, }; const animatedStyle = { transform: [ { translateX: this.animValue.interpolate({ inputRange: [0, 1], - outputRange: [0, 4] - }) - } - ] + outputRange: [0, 4], + }), + }, + ], }; return ( - + {isPresent && @@ -150,12 +150,12 @@ export default class Talk extends Component { } - - - + + + {startTime} — {speakerName} - + {title} @@ -178,69 +178,69 @@ export default class Talk extends Component { const styles = StyleSheet.create({ touchable: { - backgroundColor: "white" + backgroundColor: 'white', }, base: { - alignItems: "stretch", - backgroundColor: "transparent", - flexDirection: "row" + alignItems: 'stretch', + backgroundColor: 'transparent', + flexDirection: 'row', }, // base__present: { // backgroundColor: fade(theme.color.blue, 3), // }, statusbarIcon: { - backgroundColor: "transparent", + backgroundColor: 'transparent', height: 34, left: 0, - position: "absolute", + position: 'absolute', top: 10, - width: 34 + width: 34, }, // content content: { - alignItems: "center", - backgroundColor: "transparent", - flexDirection: "row", + alignItems: 'center', + backgroundColor: 'transparent', + flexDirection: 'row', flexGrow: 1, flexShrink: 1, - padding: theme.fontSize.default + padding: theme.fontSize.default, }, content__past: { - opacity: 0.5 + opacity: 0.5, }, text: { flexGrow: 1, flexShrink: 1, - paddingRight: theme.fontSize.default + paddingRight: theme.fontSize.default, }, subtitle: { color: theme.color.gray60, fontSize: theme.fontSize.small, - fontWeight: "300", - marginBottom: theme.fontSize.small + fontWeight: '300', + marginBottom: theme.fontSize.small, }, subtitle__present: { - color: theme.color.text + color: theme.color.text, }, title: { color: theme.color.text, - fontSize: theme.fontSize.default + fontSize: theme.fontSize.default, }, title__present: { - fontWeight: "500" + fontWeight: '500', }, // right (avatar and chevron) right: { - alignItems: "center", - flexDirection: "row", - flexShrink: 0 + alignItems: 'center', + flexDirection: 'row', + flexShrink: 0, }, // chevron chevron: { - marginLeft: theme.fontSize.default - } + marginLeft: theme.fontSize.default, + }, }); diff --git a/app/scenes/Schedule/index.js b/app/scenes/Schedule/index.js index 422359f..a0b4b07 100644 --- a/app/scenes/Schedule/index.js +++ b/app/scenes/Schedule/index.js @@ -1,5 +1,5 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Animated, Dimensions, @@ -9,34 +9,34 @@ import { StyleSheet, Text, TouchableOpacity, - View -} from "react-native"; -import moment from "moment"; + View, +} from 'react-native'; +import moment from 'moment'; -import type { ScheduleTalk } from "../../types"; +import type { ScheduleTalk } from '../../types'; -import Splash from "react-native-smart-splash-screen"; +import Splash from 'react-native-smart-splash-screen'; -import { TIME_FORMAT } from "../../constants"; +import { TIME_FORMAT } from '../../constants'; import talks, { getIndexFromId, getNextTalkFromId, - getPrevTalkFromId -} from "../../data/talks"; -import Navbar from "../../components/Navbar"; -import ListTitle from "../../components/ListTitle"; -import Scene from "../../components/Scene"; + getPrevTalkFromId, +} from '../../data/talks'; +import Navbar from '../../components/Navbar'; +import ListTitle from '../../components/ListTitle'; +import Scene from '../../components/Scene'; -import theme from "../../theme"; +import theme from '../../theme'; -import Break from "./components/Break"; -import NowButton from "./components/NowButton"; -import Talk, { TalkSeparator } from "./components/Talk"; -import SplashScreen from "./components/SplashScreen"; +import Break from './components/Break'; +import NowButton from './components/NowButton'; +import Talk, { TalkSeparator } from './components/Talk'; +import SplashScreen from './components/SplashScreen'; type Props = { navigator: Object, - talks: Array + talks: Array, }; type State = { @@ -45,20 +45,20 @@ type State = { showNowButton?: boolean, activeTalkLayout?: { height: number, - position: number - } + position: number, + }, }; type VisibleRows = { [sectionID: string]: { - [rowID: string]: true - } + [rowID: string]: true, + }, }; type ChangedRows = { [sectionID: string]: { - [rowID: string]: true | false - } + [rowID: string]: true | false, + }, }; export default class Schedule extends Component { @@ -68,7 +68,7 @@ export default class Schedule extends Component { _navigatorWillFocusSubscription: Object; static defaultProps = { - talks: talks + talks: talks, }; constructor(props: Props) { @@ -80,7 +80,7 @@ export default class Schedule extends Component { let sectionIndex = 0; props.talks.forEach(talk => { - const sID = moment(talk.time.start).format("dddd"); + const sID = moment(talk.time.start).format('dddd'); // create new section and initialize empty array for section index if (!dataBlob[sID]) { @@ -91,28 +91,28 @@ export default class Schedule extends Component { } rowIDs[rowIDs.length - 1].push(talk.id); - dataBlob[sID + ":" + talk.id] = talk; + dataBlob[sID + ':' + talk.id] = talk; }); const ds = new ListView.DataSource({ getSectionData: (dataBlob, sectionID) => dataBlob[sectionID], getRowData: (dataBlob, sectionID, rowID) => - dataBlob[sectionID + ":" + rowID], + dataBlob[sectionID + ':' + rowID], rowHasChanged: (r1, r2) => r1 !== r2, - sectionHeaderHasChanged: (s1, s2) => s1 !== s2 + sectionHeaderHasChanged: (s1, s2) => s1 !== s2, }); this.state = { dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs), - scrollY: new Animated.Value(0) + scrollY: new Animated.Value(0), }; this.scrollYListener = this.state.scrollY.addListener(({ value }) => { if (value > 120) { - StatusBar.setBarStyle("default", true); + StatusBar.setBarStyle('default', true); StatusBar.setHidden(false, true); } else if (value < 80) { - StatusBar.setBarStyle("light-content", true); + StatusBar.setBarStyle('light-content', true); StatusBar.setHidden(false, true); } else { StatusBar.setHidden(true, true); @@ -124,7 +124,7 @@ export default class Schedule extends Component { } componentDidMount() { this._navigatorWillFocusSubscription = this.props.navigator.navigationContext.addListener( - "willfocus", + 'willfocus', this.handleNavigatorWillFocus ); @@ -133,7 +133,7 @@ export default class Schedule extends Component { Splash.close({ animationType: Splash.animationType.fade, duration: 300, - delay: 200 + delay: 200, }); } } @@ -144,14 +144,14 @@ export default class Schedule extends Component { handleNavigatorWillFocus = event => { const { scene } = event.data.route; - if (scene === "Schedule" && this.state.scrollY._value < 120) { - StatusBar.setBarStyle("light-content", true); + if (scene === 'Schedule' && this.state.scrollY._value < 120) { + StatusBar.setBarStyle('light-content', true); } }; gotoEventInfo = () => { this.props.navigator.push({ enableSwipeToPop: true, - scene: "Info" + scene: 'Info', }); }; onChangeVisibleRows = ( @@ -169,7 +169,7 @@ export default class Schedule extends Component { // TODO all talks are over. Discuss how to handle if (!currentTalk) return; - const day = moment(currentTalk.time.start).format("dddd"); + const day = moment(currentTalk.time.start).format('dddd'); const talksForToday = visibleRows[day]; // Set the now button to visible based on whether the talk is visible or not. @@ -179,7 +179,7 @@ export default class Schedule extends Component { const { activeTalkLayout } = this.state; if (!activeTalkLayout) return; const { contentLength } = this.refs.listview.scrollProperties; - const sceneHeight = Dimensions.get("window").height; + const sceneHeight = Dimensions.get('window').height; const maxScroll = contentLength - (sceneHeight + theme.navbar.height); const scrollToY = maxScroll < activeTalkLayout.position ? maxScroll @@ -198,13 +198,13 @@ export default class Schedule extends Component { const navbarTop = scrollY.interpolate({ inputRange: [80, 120], outputRange: [-64, 0], - extrapolate: "clamp" + extrapolate: 'clamp', }); const splashTop = scrollY.interpolate({ inputRange: [-200, 400], outputRange: [200, -400], - extrapolate: "clamp" + extrapolate: 'clamp', }); const renderFooter = () => ( @@ -246,7 +246,7 @@ export default class Schedule extends Component { ref="listview" initialListSize={initialListSize} onScroll={Animated.event([ - { nativeEvent: { contentOffset: { y: this.state.scrollY } } } + { nativeEvent: { contentOffset: { y: this.state.scrollY } } }, ])} scrollEventThrottle={16} onChangeVisibleRows={this.onChangeVisibleRows} @@ -254,7 +254,7 @@ export default class Schedule extends Component { removeClippedSubviews={false} renderHeader={() => } renderSeparator={(sectionID, rowID) => { - const key = sectionID + ":" + rowID; + const key = sectionID + ':' + rowID; const talk = dataSource._dataBlob[key]; const status = getTalkStatus(talk.time.start, talk.time.end); @@ -262,13 +262,13 @@ export default class Schedule extends Component { }} renderRow={talk => { const status = getTalkStatus(talk.time.start, talk.time.end); - const onLayout = status === "present" + const onLayout = status === 'present' ? ({ nativeEvent: { layout } }) => { this.setState({ activeTalkLayout: { height: layout.height, - position: layout.y - theme.navbar.height / 2 - } + position: layout.y - theme.navbar.height / 2, + }, }); } : null; @@ -289,16 +289,16 @@ export default class Schedule extends Component { // methods on Talk const onPress = () => { let talkIdx = getIndexFromId(talk.id); - StatusBar.setBarStyle("default", true); + StatusBar.setBarStyle('default', true); navigator.push({ enableSwipeToPop: true, - scene: "Talk", + scene: 'Talk', props: { introduceUI: talkIdx && talkIdx < talks.length - 1, nextTalk: getNextTalkFromId(talk.id), prevTalk: getPrevTalkFromId(talk.id), - talk - } + talk, + }, }); }; @@ -331,35 +331,35 @@ export default class Schedule extends Component { const styles = StyleSheet.create({ navbar: { - position: "absolute", + position: 'absolute', top: 0, right: 0, left: 0, - zIndex: 2 + zIndex: 2, }, spacer: { - backgroundColor: "transparent", + backgroundColor: 'transparent', height: theme.navbar.height, - zIndex: 1 + zIndex: 1, }, link: { color: theme.color.blue, fontSize: theme.fontSize.default, - fontWeight: "500", + fontWeight: '500', paddingVertical: theme.fontSize.large, marginBottom: 34 * 2, - textAlign: "center" - } + textAlign: 'center', + }, }); function getTalkStatus(startTime, endTime) { const now = moment(); if (now.isBetween(startTime, endTime)) { - return "present"; + return 'present'; } else if (now.isBefore(startTime)) { - return "future"; + return 'future'; } - return "past"; + return 'past'; } diff --git a/app/scenes/Talk/components/Hint/index.js b/app/scenes/Talk/components/Hint/index.js index 4b153cb..178f8bc 100644 --- a/app/scenes/Talk/components/Hint/index.js +++ b/app/scenes/Talk/components/Hint/index.js @@ -1,28 +1,28 @@ // @flow -import React, { Component } from "react"; -import { Animated, Dimensions, Easing } from "react-native"; -import Icon from "react-native-vector-icons/Ionicons"; -import LinearGradient from "react-native-linear-gradient"; +import React, { Component } from 'react'; +import { Animated, Dimensions, Easing } from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; +import LinearGradient from 'react-native-linear-gradient'; const Gradient = Animated.createAnimatedComponent(LinearGradient); -import theme from "../../../../theme"; -import { fade } from "../../../../utils/color"; +import theme from '../../../../theme'; +import { fade } from '../../../../utils/color'; const animationDefault = val => ({ toValue: val, duration: 550, - easing: Easing.inOut(Easing.quad) + easing: Easing.inOut(Easing.quad), }); export default class Hint extends Component { props: { - onClose: () => mixed + onClose: () => mixed, }; state = { arrowVal: new Animated.Value(0), - containerVal: new Animated.Value(1) + containerVal: new Animated.Value(1), }; _isMounted = false; @@ -46,7 +46,7 @@ export default class Hint extends Component { Animated.sequence(sequence).start(() => Animated.timing(containerVal, { toValue: 0, duration: 220, - easing: Easing.in(Easing.quad) + easing: Easing.in(Easing.quad), }).start(() => { if (this._isMounted) this.props.onClose(); })); @@ -59,28 +59,28 @@ export default class Hint extends Component { const arrowStyle = { opacity: arrowVal.interpolate({ inputRange: [0, 1, 2], - outputRange: [0.2, 1, 0] + outputRange: [0.2, 1, 0], }), transform: [ { translateY: arrowVal.interpolate({ inputRange: [0, 1, 2], - outputRange: [0, -12, 24] - }) - } - ] + outputRange: [0, -12, 24], + }), + }, + ], }; const containerStyle = { - alignItems: "center", - backgroundColor: "transparent", + alignItems: 'center', + backgroundColor: 'transparent', bottom: 0, left: 0, height: 80, - justifyContent: "flex-end", + justifyContent: 'flex-end', opacity: containerVal, paddingBottom: 10, - position: "absolute", - width: Dimensions.get("window").width + position: 'absolute', + width: Dimensions.get('window').width, }; const gradientColors = [fade(theme.color.sceneBg, 10), theme.color.sceneBg]; diff --git a/app/scenes/Talk/components/Pane/index.js b/app/scenes/Talk/components/Pane/index.js index 5063cf0..8e730c8 100644 --- a/app/scenes/Talk/components/Pane/index.js +++ b/app/scenes/Talk/components/Pane/index.js @@ -1,5 +1,5 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { Animated, PixelRatio, @@ -7,17 +7,17 @@ import { StyleSheet, Text, TouchableOpacity, - View -} from "react-native"; -import moment from "moment"; + View, +} from 'react-native'; +import moment from 'moment'; -import type { ScheduleTalk } from "../../../../types"; +import type { ScheduleTalk } from '../../../../types'; -import { TIME_FORMAT } from "../../../../constants"; -import theme from "../../../../theme"; -import Avatar from "../../../../components/Avatar"; +import { TIME_FORMAT } from '../../../../constants'; +import theme from '../../../../theme'; +import Avatar from '../../../../components/Avatar'; -import Preview from "../Preview"; +import Preview from '../Preview'; export default class TalkPane extends Component { props: { @@ -29,7 +29,7 @@ export default class TalkPane extends Component { prevTalk?: ScheduleTalk | null, prevTalkPreviewIsEngaged?: boolean, showSpeakerModal?: () => mixed, - visibleTalk: ScheduleTalk + visibleTalk: ScheduleTalk, }; render() { @@ -46,7 +46,7 @@ export default class TalkPane extends Component { const touchableProps = { activeOpacity: 0.66, - onPress: showSpeakerModal + onPress: showSpeakerModal, }; return ( @@ -108,46 +108,46 @@ export default class TalkPane extends Component { const styles = StyleSheet.create({ hero: { - alignItems: "center", - backgroundColor: "white", + alignItems: 'center', + backgroundColor: 'white', borderBottomColor: theme.color.gray20, borderBottomWidth: 1 / PixelRatio.get(), borderTopColor: theme.color.gray20, borderTopWidth: 1 / PixelRatio.get(), marginTop: -(1 / PixelRatio.get()), paddingHorizontal: theme.fontSize.large, - paddingBottom: theme.fontSize.xlarge + paddingBottom: theme.fontSize.xlarge, }, heroSpeaker: { - alignItems: "center", + alignItems: 'center', paddingHorizontal: theme.fontSize.xlarge, - paddingTop: theme.fontSize.xlarge + paddingTop: theme.fontSize.xlarge, }, heroSpeakerHint: { color: theme.color.gray40, fontSize: theme.fontSize.xsmall, - paddingBottom: theme.fontSize.large + paddingBottom: theme.fontSize.large, }, heroSpeakerName: { color: theme.color.blue, fontSize: theme.fontSize.default, - fontWeight: "500", - marginTop: theme.fontSize.small + fontWeight: '500', + marginTop: theme.fontSize.small, }, heroTitle: { fontSize: theme.fontSize.large, - fontWeight: "300", - textAlign: "center" + fontWeight: '300', + textAlign: 'center', }, // summary summary: { - paddingBottom: 40 + paddingBottom: 40, }, summaryText: { fontSize: theme.fontSize.default, - fontWeight: "300", + fontWeight: '300', lineHeight: theme.fontSize.large, - padding: theme.fontSize.large - } + padding: theme.fontSize.large, + }, }); diff --git a/app/scenes/Talk/components/Preview/index.js b/app/scenes/Talk/components/Preview/index.js index d140c1e..5f9e7d8 100644 --- a/app/scenes/Talk/components/Preview/index.js +++ b/app/scenes/Talk/components/Preview/index.js @@ -1,32 +1,32 @@ // @flow -import React, { Component } from "react"; -import { Animated, Dimensions, StyleSheet, Text, View } from "react-native"; -import Icon from "react-native-vector-icons/Ionicons"; +import React, { Component } from 'react'; +import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; -import theme from "../../../../theme"; +import theme from '../../../../theme'; type Props = { isActive?: boolean, - position: "top" | "bottom", + position: 'top' | 'bottom', subtitle: string, - title: string + title: string, }; const ICON_VARIANT = { - bottom: "ios-arrow-up", - top: "ios-arrow-down" + bottom: 'ios-arrow-up', + top: 'ios-arrow-down', }; const animateToValue = val => ({ toValue: val, - duration: 150 + duration: 150, }); export default class Preview extends Component { props: Props; state = { - animValue: new Animated.Value(0) + animValue: new Animated.Value(0), }; componentWillReceiveProps(nextProps: Props) { @@ -46,34 +46,34 @@ export default class Preview extends Component { const { position, subtitle, - title + title, } = this.props; const { animValue } = this.state; let baseStyles; - if (position === "bottom") { + if (position === 'bottom') { baseStyles = { - bottom: -theme.nextup.height + bottom: -theme.nextup.height, }; } else { baseStyles = { - top: -theme.nextup.height + top: -theme.nextup.height, }; } const icon = ( - {position === "bottom" && icon} + {position === 'bottom' && icon} {title} {subtitle} - {position === "top" && icon} + {position === 'top' && icon} ); } @@ -101,19 +101,19 @@ export default class Preview extends Component { const styles = StyleSheet.create({ base: { - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', height: theme.nextup.height, paddingHorizontal: 60, - position: "absolute", + position: 'absolute', left: 0, - width: Dimensions.get("window").width + width: Dimensions.get('window').width, }, title: { - textAlign: "center" + textAlign: 'center', }, subtitle: { color: theme.color.gray60, - textAlign: "center" - } + textAlign: 'center', + }, }); diff --git a/app/scenes/Talk/components/Speaker/index.js b/app/scenes/Talk/components/Speaker/index.js index 800564f..32eaa07 100644 --- a/app/scenes/Talk/components/Speaker/index.js +++ b/app/scenes/Talk/components/Speaker/index.js @@ -1,26 +1,26 @@ // @flow -import React, { Component } from "react"; +import React, { Component } from 'react'; import { PixelRatio, StyleSheet, Text, TouchableHighlight, TouchableOpacity, - View -} from "react-native"; -import Icon from "react-native-vector-icons/Ionicons"; + View, +} from 'react-native'; +import Icon from 'react-native-vector-icons/Ionicons'; -import Avatar from "../../../../components/Avatar"; -import DraggableView from "../../../../components/DraggableView"; -import Modal from "../../../../components/Modal"; -import theme from "../../../../theme"; -import { attemptToOpenUrl } from "../../../../utils"; +import Avatar from '../../../../components/Avatar'; +import DraggableView from '../../../../components/DraggableView'; +import Modal from '../../../../components/Modal'; +import theme from '../../../../theme'; +import { attemptToOpenUrl } from '../../../../utils'; type ButtonProps = { bordered?: boolean, icon: string, onPress: () => mixed, - text: string + text: string, }; function Button({ bordered, icon, onPress, text }: ButtonProps) { @@ -28,12 +28,12 @@ function Button({ bordered, icon, onPress, text }: ButtonProps) { activeOpacity: 1, onPress: onPress, style: styles.buttonTouchable, - underlayColor: theme.color.gray05 + underlayColor: theme.color.gray05, }; const dynamicStyles = { borderLeftColor: bordered ? theme.color.gray20 : null, - borderLeftWidth: bordered ? 1 / PixelRatio.get() : null + borderLeftWidth: bordered ? 1 / PixelRatio.get() : null, }; return ( @@ -53,11 +53,11 @@ export default class Speaker extends Component { name: string, onClose: () => mixed, summary: string, - twitter?: string + twitter?: string, }; static defaultProps = { - onPress() {} + onPress() {}, }; handleClose = () => { @@ -70,7 +70,7 @@ export default class Speaker extends Component { name, onClose, summary, - twitter + twitter, } = this.props; const showButtons = !!(github || twitter); @@ -92,13 +92,13 @@ export default class Speaker extends Component { onPress={this.handleClose} activeOpacity={0.5} style={{ - position: "absolute", + position: 'absolute', top: 0, right: 0, height: 44, width: 44, - alignItems: "center", - justifyContent: "center" + alignItems: 'center', + justifyContent: 'center', }} > @@ -110,15 +110,15 @@ export default class Speaker extends Component {