120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
import React from "react";
|
|
import { ScrollView, StyleSheet, Text, View } from "react-native";
|
|
import {
|
|
graph_data_two_measures,
|
|
mock_session_details,
|
|
} from "../../../test/mock/charts/mock-data";
|
|
import BarGraph from "../../component/charts/bar-graph/bar-graph";
|
|
import ChartContainer from "../../component/charts/container/chart-container";
|
|
import ImageWithFallback from "../../component/image/image-with-fallback";
|
|
import StatList from "../../component/video-details/video-stat-list";
|
|
|
|
// TODO: #134 remove Session when data piped through
|
|
// Splash should be an asset we use if an Image failed to load
|
|
import Session from "../../assets/sample_session.png";
|
|
import Splash from "../../assets/splash.png";
|
|
import BackHeader from "../../component/headers/back-header";
|
|
import SessionHeader from "../../component/video-details/video-details-header";
|
|
import { borders, colors } from "../../styles";
|
|
|
|
export default function VideoDetails({ navigation }) {
|
|
// TODO: #134 Remove mock destructure block when data is piped through from BE
|
|
const {
|
|
sessionTitle,
|
|
date,
|
|
timePlayed,
|
|
medianRun,
|
|
makeRate,
|
|
shotPacing,
|
|
gameType,
|
|
notes,
|
|
} = mock_session_details;
|
|
|
|
const leftColumnStats = [
|
|
{ title: "TIME PLAYED", value: timePlayed },
|
|
{ title: "MAKE RATE", value: makeRate },
|
|
];
|
|
|
|
const rightColumnStats = [
|
|
{ title: "MEDIAN RUN", value: medianRun },
|
|
{ title: "SHOT PACING", value: shotPacing },
|
|
];
|
|
// End mock destructure
|
|
|
|
return (
|
|
<>
|
|
<BackHeader navigation={navigation} title="Go Back" />
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.scrollContainer}
|
|
>
|
|
<SessionHeader sessionTitle={sessionTitle} date={date} />
|
|
<ImageWithFallback
|
|
// TODO: #134 when data comes from be needs to be passed as source={{ uri: image }}
|
|
source={Session}
|
|
fallbackSource={Splash}
|
|
style={styles.image}
|
|
/>
|
|
<View style={styles.statsContainer}>
|
|
<StatList items={leftColumnStats} style={styles.statColumn} />
|
|
<StatList items={rightColumnStats} style={styles.statColumn} />
|
|
</View>
|
|
<View style={styles.horizontalDivider} />
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.title}>Game Type</Text>
|
|
<Text style={styles.text}>{gameType}</Text>
|
|
<Text style={styles.title}>Notes</Text>
|
|
<Text style={styles.text}>{notes}</Text>
|
|
</View>
|
|
<View style={[styles.horizontalDivider, { marginVertical: 21 }]} />
|
|
<ChartContainer
|
|
data={graph_data_two_measures}
|
|
ChartComponent={BarGraph}
|
|
/>
|
|
</ScrollView>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// TODO: #130 scaled styles + maintain consistency with video-feed styles
|
|
const styles = StyleSheet.create({
|
|
scrollContainer: {
|
|
backgroundColor: "white", // TODO #125 -- this color should not be set but implicitly inherit from theme
|
|
paddingBottom: 20, // guarantees some space at bottom of scrollable views
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
height: 248,
|
|
},
|
|
statsContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingLeft: 45,
|
|
paddingTop: 42,
|
|
paddingBottom: 38,
|
|
},
|
|
statColumn: {
|
|
flex: 1,
|
|
padding: 5,
|
|
},
|
|
horizontalDivider: {
|
|
width: "92%",
|
|
alignSelf: "center",
|
|
...borders.dottedBottomBorder,
|
|
},
|
|
textContainer: {
|
|
paddingHorizontal: 38,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: colors.text.greyText,
|
|
paddingTop: 16,
|
|
},
|
|
text: {
|
|
fontSize: 18,
|
|
textAlign: "left",
|
|
paddingTop: 6,
|
|
fontWeight: "400",
|
|
},
|
|
});
|