make some components, almost done, need to do ui for notes/free play
This commit is contained in:
parent
5cb1069c1c
commit
2505fc1bf7
26
src/component/image/image-with-fallback.tsx
Normal file
26
src/component/image/image-with-fallback.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React, { useState } from "react";
|
||||
import { Image } from "react-native";
|
||||
|
||||
type ImageWithFallbackProps = {
|
||||
source: { uri: string };
|
||||
fallbackSource?: { uri: string };
|
||||
style?: object;
|
||||
};
|
||||
|
||||
const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({
|
||||
source,
|
||||
fallbackSource,
|
||||
style,
|
||||
}) => {
|
||||
const [imageSource, setImageSource] = useState(source);
|
||||
|
||||
const handleError = () => {
|
||||
if (fallbackSource) {
|
||||
setImageSource(fallbackSource);
|
||||
}
|
||||
};
|
||||
|
||||
return <Image source={imageSource} style={style} onError={handleError} />;
|
||||
};
|
||||
|
||||
export default ImageWithFallback;
|
@ -1,114 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Image, StyleSheet, Text, View } from "react-native";
|
||||
|
||||
export default function SessionDetails() {
|
||||
// Modal State
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
|
||||
// Stats State
|
||||
// TODO: needs to come from session context
|
||||
const [sessionTitle, setSessionTitle] = useState<string>("Afternoon Session");
|
||||
const [date, setDate] = useState<string>("Today at 2:37pm");
|
||||
const [timePlayed, setTimePlayed] = useState("5:03:10");
|
||||
const [medianRun, setMedianRun] = useState("7.3");
|
||||
const [makeRate, setMakeRate] = useState("34%");
|
||||
const [shotPacing, setShotPacing] = useState("0:00:26");
|
||||
const [gameType, setGameType] = useState("Free Play");
|
||||
const [notes, setNotes] = useState(
|
||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
|
||||
);
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.headerSection}>
|
||||
<Text style={styles.header}>{sessionTitle}</Text>
|
||||
<Text>{date}</Text>
|
||||
</View>
|
||||
<Image
|
||||
source={{ uri: "https://picsum.photos/200" }}
|
||||
style={styles.image}
|
||||
/>
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statColumn}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statLabel}>TIME PLAYED</Text>
|
||||
<Text style={styles.statValue}>{timePlayed}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statLabel}>MEDIAN RUN</Text>
|
||||
<Text style={styles.statValue}>{medianRun}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.statColumn}>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statLabel}>MAKE RATE</Text>
|
||||
<Text style={styles.statValue}>{makeRate}</Text>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<Text style={styles.statLabel}>SHOT PACING</Text>
|
||||
<Text style={styles.statValue}>{shotPacing}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* USE A BETTER SYSTEM FOR THE DIVIDER, COULD ATTACH TO OTHER COMPONENT */}
|
||||
<View style={styles.horizontalDivider} />
|
||||
<Text style={styles.gameType}>{gameType}</Text>
|
||||
<Text style={styles.notes}>{notes}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
headerSection: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 15,
|
||||
},
|
||||
header: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
image: {
|
||||
width: "100%",
|
||||
height: 248,
|
||||
},
|
||||
statsContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 20,
|
||||
},
|
||||
statColumn: {
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
},
|
||||
statItem: {
|
||||
borderLeftWidth: 0.5,
|
||||
borderRightColor: "lightgrey",
|
||||
marginBottom: 10,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 16,
|
||||
color: "grey",
|
||||
textAlign: "center",
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
horizontalDivider: {
|
||||
borderBottomWidth: 0.5,
|
||||
color: "lightgrey",
|
||||
width: "90%",
|
||||
alignSelf: "center",
|
||||
},
|
||||
gameType: {
|
||||
fontSize: 18,
|
||||
textAlign: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
notes: {
|
||||
fontSize: 16,
|
||||
color: "grey",
|
||||
padding: 20,
|
||||
},
|
||||
});
|
93
src/component/stat-details/session-details.tsx
Normal file
93
src/component/stat-details/session-details.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
import { mock_session_details } from "../../../test/mock/charts/mock-data";
|
||||
import ImageWithFallback from "../image/image-with-fallback";
|
||||
import StatList from "./stat-item";
|
||||
|
||||
import Splash from "../../assets/splash.png";
|
||||
|
||||
export default function SessionDetails() {
|
||||
// Remove mock destructure 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: "MEDIAN RUN", value: medianRun },
|
||||
];
|
||||
|
||||
const rightColumnStats = [
|
||||
{ title: "MAKE RATE", value: makeRate },
|
||||
{ title: "SHOT PACING", value: shotPacing },
|
||||
];
|
||||
|
||||
return (
|
||||
<View>
|
||||
<View style={styles.headerSection}>
|
||||
<Text style={styles.header}>{sessionTitle}</Text>
|
||||
<Text>{date}</Text>
|
||||
</View>
|
||||
<ImageWithFallback
|
||||
source={{ uri: "https://picsum.photos/200" }}
|
||||
fallbackSource={{ uri: Splash }}
|
||||
style={styles.image}
|
||||
/>
|
||||
<View style={styles.statsContainer}>
|
||||
<StatList items={leftColumnStats} style={styles.statColumn} />
|
||||
<StatList items={rightColumnStats} style={styles.statColumn} />
|
||||
</View>
|
||||
{/* USE A BETTER SYSTEM FOR THE DIVIDER, COULD ATTACH TO OTHER COMPONENT */}
|
||||
<View style={styles.horizontalDivider} />
|
||||
<Text style={styles.gameType}>{gameType}</Text>
|
||||
<Text style={styles.notes}>{notes}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
headerSection: {
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 15,
|
||||
},
|
||||
header: {
|
||||
fontSize: 24,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
image: {
|
||||
width: "100%",
|
||||
height: 248,
|
||||
},
|
||||
statsContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
padding: 20,
|
||||
},
|
||||
statColumn: {
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
},
|
||||
horizontalDivider: {
|
||||
borderBottomWidth: 0.5,
|
||||
color: "lightgrey",
|
||||
width: "90%",
|
||||
alignSelf: "center",
|
||||
},
|
||||
gameType: {
|
||||
fontSize: 18,
|
||||
textAlign: "center",
|
||||
marginTop: 10,
|
||||
},
|
||||
notes: {
|
||||
fontSize: 16,
|
||||
color: "grey",
|
||||
padding: 20,
|
||||
},
|
||||
});
|
50
src/component/stat-details/stat-item.tsx
Normal file
50
src/component/stat-details/stat-item.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Text, View } from "react-native";
|
||||
|
||||
type StatItem = {
|
||||
title: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type StatListProps = {
|
||||
items: StatItem[];
|
||||
style?: object;
|
||||
};
|
||||
|
||||
const StatList: React.FC<StatListProps> = ({ items, style }) => {
|
||||
return (
|
||||
<View style={[styles.container, style]}>
|
||||
{items.map((item, index) => (
|
||||
<View key={index} style={styles.item}>
|
||||
<Text style={styles.title}>{item.title}</Text>
|
||||
<Text style={styles.value}>{item.value}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: "column",
|
||||
flex: 1,
|
||||
padding: 5,
|
||||
},
|
||||
item: {
|
||||
borderLeftWidth: 0.5,
|
||||
borderRightColor: "lightgrey",
|
||||
marginBottom: 10,
|
||||
},
|
||||
title: {
|
||||
fontSize: 16,
|
||||
color: "grey",
|
||||
textAlign: "center",
|
||||
},
|
||||
value: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
},
|
||||
});
|
||||
|
||||
export default StatList;
|
@ -1,7 +1,14 @@
|
||||
import Constants from "expo-constants";
|
||||
import { Platform, StyleSheet } from "react-native";
|
||||
// GLOBAL STYLES
|
||||
|
||||
// STYLE CONSTS
|
||||
let STATUS_BAR_HEIGHT: number;
|
||||
|
||||
Platform.OS === "android"
|
||||
? (STATUS_BAR_HEIGHT = 24)
|
||||
: (STATUS_BAR_HEIGHT = Constants.statusBarHeight | 24);
|
||||
|
||||
// GLOBALLY STYLED
|
||||
export const globalInputStyles = StyleSheet.create({
|
||||
input: {
|
||||
width: "100%",
|
||||
@ -30,12 +37,6 @@ export const globalInputStyles = StyleSheet.create({
|
||||
},
|
||||
});
|
||||
|
||||
let STATUS_BAR_HEIGHT: number;
|
||||
|
||||
Platform.OS === "android"
|
||||
? (STATUS_BAR_HEIGHT = 24)
|
||||
: (STATUS_BAR_HEIGHT = Constants.statusBarHeight | 24);
|
||||
|
||||
// COLORS:
|
||||
// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
|
||||
export const colors = {
|
||||
@ -55,6 +56,7 @@ export const tabIconColors = {
|
||||
selected: "#598EBB",
|
||||
};
|
||||
|
||||
// SHADOWS
|
||||
export const shadows = {
|
||||
standard: {
|
||||
shadowColor: "#000000",
|
||||
|
@ -97,3 +97,14 @@ export const mockYData = [
|
||||
];
|
||||
|
||||
export const mockXValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
export const mock_session_details = {
|
||||
sessionTitle: "Afternoon Session",
|
||||
date: "Today at 2:37pm",
|
||||
timePlayed: "5:03:10",
|
||||
medianRun: "7.3",
|
||||
makeRate: "34%",
|
||||
shotPacing: "0:00:26",
|
||||
gameType: "Free Play",
|
||||
notes: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user