swimtracker-app/components/LiveTrainingView.js

import React from 'react';
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 { connect } from 'react-redux';
import backgroundColors from './Themes';
import { useKeepAwake } from 'expo-keep-awake';
import { stopSession } from '../state/DeviceReduxCoupling';

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 * props.kgFactor / 10 / 60);

    useKeepAwake();

    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" />
                <Graph></Graph>
                {/*
                    <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" />
                */}
                <Button block secondary onPress={onStopClick}><Text>Stop</Text></Button>
            </Content>
        </LinearGradient>
    );
}

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        margin: 5,
        padding: 5,
        borderRadius: 3,
        justifyContent: 'space-between',
        /*
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.18,
        shadowRadius: 1.00,
 
        elevation: 1,*/
    }
});

const mapStateToProps = (state) => {
    return {
        session: state.deviceState,
        peaksPerLap: state.settings.analysis.peaksPerLap,
        theme: state.settings.theme,
        kgFactor: state.settings.analysis.kgFactor,
    };
};

export default connect(mapStateToProps)(LiveTrainingView);