From c18fb20ac0d85f87c466e16899b1879688691a8f Mon Sep 17 00:00:00 2001
From: Niklas <niklas@kapelle.org>
Date: Sun, 24 Jan 2021 19:10:53 +0100
Subject: [PATCH] at this point i still don't know what i am doing

---
 src/App.tsx                   | 25 ++++++++++---------
 src/components/DeckButton.tsx |  9 ++-----
 src/screens/Deck.tsx          | 47 ++++++++++++++++++++++++++++++++---
 src/screens/Home.tsx          | 39 ++++++++++++++++++++++++++---
 4 files changed, 94 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bc78485..1a7e156 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,3 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
 import 'react-native-gesture-handler';
 import React from 'react';
 import Deck from './screens/Deck';
@@ -17,14 +7,25 @@ import Home from './screens/Home';
 
 declare const global: {HermesInternal: null | {}};
 
-const Stack = createStackNavigator();
+export type RootStackParamList = {
+  Home: undefined;
+  Deck: {remoteAddress: string};
+};
+
+const Stack = createStackNavigator<RootStackParamList>();
 
 export default function App() {
   return (
     <>
       <NavigationContainer>
         <Stack.Navigator>
-          <Stack.Screen name="OpenDeck" component={Home} />
+          <Stack.Screen
+            name="Home"
+            component={Home}
+            options={{
+              title: 'OpenDeck',
+            }}
+          />
           <Stack.Screen
             name="Deck"
             component={Deck}
diff --git a/src/components/DeckButton.tsx b/src/components/DeckButton.tsx
index a56e72e..54f551d 100644
--- a/src/components/DeckButton.tsx
+++ b/src/components/DeckButton.tsx
@@ -7,24 +7,19 @@ import {
   View,
 } from 'react-native';
 
-const ws = new WebSocket('ws://192.168.1.109:8069/ws');
-
 interface Props {
   text: string;
+  onPress: () => void;
 }
 
 export default function DeckButton(props: Props) {
-  function pressed() {
-    ws.send(props.text);
-  }
-
   return (
     <>
       <View style={style.view}>
         <TouchableHighlight
           style={style.touchable}
           underlayColor={'#0e86d4'}
-          onPress={pressed}
+          onPress={props.onPress}
           onLongPress={() => console.log('long press')}>
           <Text style={style.text}>{props.text}</Text>
         </TouchableHighlight>
diff --git a/src/screens/Deck.tsx b/src/screens/Deck.tsx
index 1804d76..8fccb33 100644
--- a/src/screens/Deck.tsx
+++ b/src/screens/Deck.tsx
@@ -1,19 +1,60 @@
-import React, {useEffect} from 'react';
+import {RouteProp} from '@react-navigation/native';
+import React, {useEffect, useRef} from 'react';
 import {StatusBar, StyleSheet} from 'react-native';
 import Orientation from 'react-native-orientation-locker';
 import {SafeAreaView} from 'react-native-safe-area-context';
+import {RootStackParamList} from '../App';
 import DeckButton from '../components/DeckButton';
 
-export default function Deck() {
+interface Props {
+  remoteAddress: string;
+  route: RouteProp<RootStackParamList, 'Deck'>;
+}
+
+export default function Deck(props: Props) {
   useEffect(() => {
+    console.log('Lock to portait');
     Orientation.lockToPortrait();
+    return () => {
+      console.log('Unlock orientation');
+      Orientation.unlockAllOrientations();
+    };
+  });
+
+  const ws = useRef<WebSocket | null>(null);
+  const remoteAddress = props.route.params.remoteAddress;
+  useEffect(() => {
+    console.log('Connect ws at: ' + remoteAddress);
+    // TODO check if remote address is valid
+    ws.current = new WebSocket(`ws://${remoteAddress}:8069/ws`);
+
+    ws.current.onopen = () => {
+      console.log('connectet ws');
+    };
+    ws.current.onerror = (e) => {
+      // TODO tell the user something is wrong
+      console.error(e.message);
+    };
+
+    return () => {
+      console.log('close websocket');
+      ws.current?.close();
+    };
   });
 
   const buttons = [];
 
   for (let i = 0; i < 21; i++) {
     let text = 'btn' + i;
-    buttons.push(<DeckButton text={text} key={i} />);
+    buttons.push(
+      <DeckButton
+        text={text}
+        key={i}
+        onPress={() => {
+          ws.current?.send(i + '');
+        }}
+      />,
+    );
   }
 
   return (
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index 8cef99d..567e4f4 100644
--- a/src/screens/Home.tsx
+++ b/src/screens/Home.tsx
@@ -1,13 +1,44 @@
-import React from 'react';
-import {Button} from 'react-native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useState} from 'react';
+import {Button, StyleSheet, Text} from 'react-native';
+import {TextInput} from 'react-native-gesture-handler';
+import {RootStackParamList} from '../App';
 
-export default function Home(props: any) {
+interface Props {
+  navigation: StackNavigationProp<RootStackParamList, 'Home'>;
+}
+
+export default function Home(props: Props) {
+  let [remoteAddress, setRemoteAddress] = useState('');
   return (
     <>
-      <Button
+      {/* <Button
         title={'Start demo'}
         onPress={() => props.navigation.navigate('Deck')}
+      /> */}
+      <Text>Remote address:</Text>
+      <TextInput
+        style={style.textInput}
+        autoCorrect={false}
+        value={remoteAddress}
+        onChangeText={(value) => setRemoteAddress(value)}
+      />
+      <Button
+        title={'Connect'}
+        onPress={() => {
+          console.log('connect');
+          props.navigation.navigate('Deck', {
+            remoteAddress: remoteAddress,
+          });
+        }}
       />
     </>
   );
 }
+
+const style = StyleSheet.create({
+  textInput: {
+    borderColor: 'gray',
+    borderWidth: 1,
+  },
+});