routing is working

components/router.js

@@ -1,20 +1,34 @@
-
 //@flow
 
-
 import React from "react";
 
-//$FlowFixMe
-import { AppRegistry, asset, Pano, Text, View, VrButton, Image } from "react-vr";
+import {
+  AppRegistry,
+  asset,
+  Pano,
+  Text,
+  View,
+  VrButton,
+  Image
+  // $FlowFixMe
+} from "react-vr";
 
 import Home from "./menu";
-import Detail from "./detail"
-
+import Detail from "./detail";
+import SpeakerList from "./speakerList";
+import { type Speaker } from "../query";
 
 type Route = "HOME" | "DETAIL";
 
 type State = {
-  route: Route
+  state:
+    | {
+        route: "HOME"
+      }
+    | {
+        route: "DETAIL",
+        speaker: Speaker
+      }
 };
 
 export default class Router extends React.Component {
@@ -24,26 +38,48 @@ export default class Router extends React.Component {
   constructor() {
     super();
     this.state = {
-      route: "HOME"
+      state: {
+        route: "HOME"
+      }
     };
   }
 
   render() {
     let content;
-    switch(this.state.route) {
+    const { state } = this.state;
+
+    switch (state.route) {
       case "HOME":
-          content = <Home setRoute={(route: Route) => {
-            this.setState({route});
-          }}/>
-          break;
+        content = (
+          <SpeakerList
+            onSpeakerSelection={speaker => {
+              this.setState({
+                state: {
+                  route: "DETAIL",
+                  speaker
+                }
+              });
+            }}
+          />
+        );
+        break;
       case "DETAIL":
-          content = <Detail description="This is a monkey in a box. Hello There!" backPressed={() => {
-            this.setState({route: "HOME"});
-          }}/>
-          break;
+        content = (
+          <Detail
+            description={state.speaker.talks[0].description}
+            backPressed={() => {
+              this.setState({
+                state: {
+                  route: "HOME"
+                }
+              });
+            }}
+          />
+        );
+        break;
       default:
-          throw new Error("No Route");
-      }
+        throw new Error("No Route");
+    }
 
     return content;
   }

components/speaker.js

@@ -0,0 +1,37 @@
+// @flow
+
+import React from "react";
+//$FlowFixMe
+import { Image, Text, View, VrButton } from "react-vr";
+
+type Props = {
+  profileUrl?: string,
+  text: string,
+  onLook: () => void,
+  onClick: () => void
+};
+
+const defaultURL = "https://facebook.github.io/react/img/logo_og.png";
+
+export default (props: Props) => {
+  const url = props.profileUrl ? props.profileUrl : defaultURL;
+  return (
+    <View onEnter={props.onLook}>
+      <VrButton
+        onClick={props.onClick}
+      >
+        <Image source={{ uri: url }} style={{ width: 1, height: 1 }}>
+          <Text
+            style={{
+              margin: "5",
+              textAlign: "center",
+              fontWeight: "600"
+            }}
+          >
+            {props.text}
+          </Text>
+        </Image>
+      </VrButton>
+    </View>
+  );
+};

speakerList.js → components/speakerList.js

@@ -1,24 +1,24 @@
 // @flow
 
 import React from "react";
+//$FlowFixMe
 import { AppRegistry, asset, Pano, Text, View } from "react-vr";
 import Speaker from "./speaker";
 
-import API, { type APIResult } from "./query";
+import API, { type Speaker as SpeakerType } from "../query";
 
 export default class VRTextReader extends React.Component {
-
   state: {
     offset: number,
-    data: ?APIResult
-  }
+    data: ?Array<SpeakerType>
+  };
 
   async componentDidMount(): any {
     const data = await API();
 
     this.setState({
       data
-    })
+    });
   }
 
   constructor() {
@@ -27,31 +27,27 @@ export default class VRTextReader extends React.Component {
     this.state = {
       offset: 0,
       data: null
-    }
+    };
   }
 
   render() {
-
-    let contentAmount = thursdaySections.length;
-
-    let selectedSpeakerIndex = (contentAmount/2) - this.state.offset;
-
     if (!this.state.data) {
       return null;
     }
 
+    let contentAmount = this.state.data.length;
+    let selectedSpeakerIndex = contentAmount / 2 - this.state.offset;
+
     const content = this.state.data.map((el, index) => {
       let profileUrl = el.avatarUrl;
       let text = el.talks[0].title;
 
       let delta;
-      if (index < selectedSpeakerIndex) {
+      if (index < selectedSpeakerIndex - 2) {
         delta = -1;
-      }
-      else if (index > selectedSpeakerIndex) {
+      } else if (index > selectedSpeakerIndex + 2) {
         delta = 1;
-      }
-      else {
+      } else {
         delta = 0;
       }
 
@@ -61,7 +57,10 @@ export default class VRTextReader extends React.Component {
         onLook: () => {
           this.setState({
             offset: this.state.offset - delta
-          })
+          });
+        },
+        onClick: () => {
+          this.props.onSpeakerSelection(el)
         }
       };
     });

query.js

@@ -20,7 +20,7 @@ const query = `
   }
 }`;
 
-export type APIResult = Array<{
+export type Speaker = {
   avatarUrl: string,
   bio: string,
   name: string,
@@ -29,9 +29,13 @@ export type APIResult = Array<{
     startDate: string,
     title: string
   }>
-}>
+};
 
-export default (): Promise<APIResult> => {
+
+//export type APIResult = Array<Speaker>
+
+
+export default (): Promise<Array<Speaker>> => {
   return fetch("https://www.react-europe.org/gql", {
     method: "POST",
     body: JSON.stringify({