App does something :)

components/LiveTrainingView.js

@@ -1,94 +1,47 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { Container, Text, Header, Content, Left, Body, Right, Button, Icon, Title, Card, CardItem, Fab} from 'native-base';
+import { StyleSheet } from 'react-native';
+import { Button, Content, Text } from 'native-base';
 import { LinearGradient } from 'expo-linear-gradient';
 import IconCard from './IconCard';
 import Graph from './Graph';
-import DeviceHttpDataSource from './DeviceHttpDataSource';
-import { PeakDetectorSimple } from '../data_processing/PeakDetection';
+import { connect } from 'react-redux';
+import { stopSession } from '../state/ActionCreators';
+import backgroundColors from './Themes';
 
 
-
-export default class LiveTrainingView extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            isReady: false,
-            themeNumber: 0,
-            numPeaks: 0,
-            numLaps: 0,
-            measurements: []
-        };
-
-        this.config = {
-            deviceUrl: "http://smartswim",
-            peakThreshold: 30,
-            peaksPerLap: 30,
-            updateInterval: 3000,
-        };
-
-        this.peakDetector = new PeakDetectorSimple(this.config.peakThreshold, peaks => {
-            //console.log("peaks:", peaks.length);
-            this.setState({
-                numPeaks: peaks.length,
-                numLaps: (peaks.length / this.config.peaksPerLap).toFixed(1)
-            });
-        });
+function LiveTrainingView(props) 
+{
+    const analysis = props.session.analysis;
+    const onStopClick = () => {
+        props.dispatch(stopSession());
+        props.navigation.navigate('Home');
     };
+    const laps = (analysis.peaks.size / props.peaksPerLap).toFixed(1);
+    const totalMomentum = Math.trunc(analysis.totalMomentum / 10000);
 
-    handleStart = () => {
-        fetch(this.config.deviceUrl + "/api/session/start").catch(err => console.log(err));
-    }
-
-    handleStop = () => {
-        fetch(this.config.deviceUrl + "/api/session/stop").catch(err => console.log(err));
-    }
-
-    handleThemeChange = () => {
-        this.setState((state, props) => { return { themeNumber: ((state.themeNumber + 1) % themeArray.length) } })
-    }
-
-    handleNewData = (fullData, newDataStart) => {
-        const newData = fullData.slice(newDataStart);
-        //console.log("New data", newData.length, "Full data", fullData.length, "new data start", newDataStart);
-        //console.log("new data", newData);
-        this.peakDetector.addVector(newData);
-        this.setState({ measurements: fullData });
-    }
-
-    render() {
-        return (
-            <Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1 }}>
-                <IconCard label="BAHNEN" value="9" iconName="retweet" iconType="AntDesign" fontSize={110} />
-                <IconCard label="ZÜGE" value="800" iconName="dashboard" iconType="AntDesign" />
-                <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
+    return (
+        <LinearGradient
+            colors={backgroundColors[props.theme]}
+            start={[0, 0]}
+            end={[0.5, 1]}
+            style={{ flex: 1 }}
+        >
+            <Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1, paddingTop: 60 }}>
+                <IconCard label="BAHNEN" value={laps} iconName="retweet" iconType="AntDesign" />
+                <IconCard label="ZÜGE" value={analysis.peaks.size} iconName="dashboard" iconType="AntDesign" />
+                <IconCard label="KRAFT" value={totalMomentum} iconName="ruler" iconType="Entypo" />
                 {/*
-                        <IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
-                        <IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />
+                    <IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
+                    <IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />
 
-                        <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
+                    <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
                 */}
-
+                <Button block secondary onPress={onStopClick}><Text>Stop</Text></Button>
             </Content>
-
-        );
-    }
-
+        </LinearGradient>
+    );
 }
 
-
-const backgroundColors = {
-    'hot': ['#830e5f', '#fd5139'],
-    'darkBlue': ['#4265a3', '#cfada7'],
-    'lightBlue': ['#50a4db', '#74bbe2'],
-    'foggy': ['#bc8db8', '#5d5e90'],
-};
-
-const themeArray = [
-    'hot', 'darkBlue', 'lightBlue', 'foggy'
-];
-
 const styles = StyleSheet.create({
     card: {
         flexDirection: 'row',
@@ -109,3 +62,14 @@ const styles = StyleSheet.create({
         elevation: 1,*/
     }
 });
+
+const mapStateToProps = (state) => {
+    return {
+        session: state.session,
+        peaksPerLap: state.settings.peaksPerLap,
+        theme: state.settings.theme, 
+    };
+};
+
+export default connect(mapStateToProps)(LiveTrainingView);
+

components/ThemedStackNavigation.js

@@ -26,7 +26,7 @@ function ThemedStackNavigation(props) {
         headerTitleStyle: {
             color: 'white',
             fontWeight: 'bold',
-            fontSize: "1.5em",
+            fontSize: 20,
         },
         headerTintColor: "white",
         headerBackground: () => (