railbird/railbird-gql
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup comments

Browse Source
This commit is contained in:
Dean 2024-02-20 20:53:29 -08:00
parent 3a621b8323
commit bee765714e
6 changed files with 63 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/component/session-card/session-card-footer.tsx
View File

@ -14,15 +14,12 @@ const styles = StyleSheet.create({
sessionName: { sessionName: {
fontSize: 18, fontSize: 18,
paddingTop: 5, paddingTop: 5,
marginLeft: 16, marginHorizontal: 16,
marginRight: 16,
}, },
sessionDatetime: { sessionDatetime: {
fontSize: 10, fontSize: 10,
color: "#A3A3A3", color: "#A3A3A3",
marginLeft: 16, marginHorizontal: 16,
marginRight: 16,
marginBottom: 16,
}, },
}); });

18
src/component/session-card/session-card-header.tsx
View File

@ -4,25 +4,24 @@ import { Image, StyleSheet, Text, View } from "react-native";
const SessionCardHeader = ({ const SessionCardHeader = ({
playerName, playerName,
location, location,
type, gameType,
locationIconURL, locationIconURL,
profileImageURL, profileImageURL,
}) => { }) => {
return ( return (
<View style={styles.headerContainer}> <View style={styles.headerContainer}>
<View style={styles.headerProfileImage}> <Image
<Image style={styles.headerProfileImage}
source={{ uri: profileImageURL }} source={{ uri: profileImageURL }}
style={styles.headerProfileImage} accessibilityLabel="Profile image"
/> />
</View>
<View style={styles.headerText}> <View style={styles.headerText}>
<Text style={styles.playerName}>{playerName}</Text> <Text style={styles.playerName}>{playerName}</Text>
<View style={styles.locationContainer}> <View style={styles.locationContainer}>
<Image source={{ uri: locationIconURL }} style={styles.icon} /> <Image source={{ uri: locationIconURL }} style={styles.icon} />
<Text style={styles.locationText}>{location}</Text> <Text style={styles.locationText}>{location}</Text>
</View> </View>
<Text style={styles.gameType}>{type}</Text> <Text style={styles.gameType}>{gameType}</Text>
</View> </View>
</View> </View>
); );
@ -32,8 +31,7 @@ const styles = StyleSheet.create({
headerContainer: { headerContainer: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
marginLeft: 16, marginHorizontal: 16,
marginRight: 16,
}, },
headerProfileImage: { headerProfileImage: {

7
src/component/session-card/session-card-stat.tsx
View File

@ -1,14 +1,11 @@
import React from "react"; import React from "react";
import { StyleSheet, Text, View } from "react-native"; import { StyleSheet, Text, View } from "react-native";
const SessionCardStat = ({ aggregateStat, displayName, numberFormat }) => { const SessionCardStat = ({ sessionStat, displayName }) => {
return ( return (
<View> <View>
<Text style={styles.statItem}>{displayName}</Text> <Text style={styles.statItem}>{displayName}</Text>
<Text style={styles.statValue}> <Text style={styles.statValue}>{sessionStat}</Text>
{aggregateStat}
{numberFormat}
</Text>
</View> </View>
); );
}; };

55
src/component/session-card/session-card-stats-row-container.tsx
View File

@ -8,39 +8,24 @@ const SessionCardStatsRowContainer = ({
duration, duration,
shotPacing, shotPacing,
}) => { }) => {
const stats = [
{ displayName: "Make Percent", sessionStat: makePercent },
{ displayName: "Median Run", sessionStat: medianRun },
{ displayName: "Time Played", sessionStat: duration },
{ displayName: "Shot Pacing", sessionStat: shotPacing },
];
return ( return (
<View style={styles.statsContainer}> <View style={styles.statsContainer}>
<View> {stats.map((stat, index) => (
<SessionCardStat <React.Fragment key={index}>
displayName="Make Percent" <SessionCardStat
aggregateStat={makePercent} displayName={stat.displayName}
numberFormat="%" sessionStat={stat.sessionStat}
/> />
</View> {index < stats.length - 1 && <View style={styles.verticalSpacer} />}
<View style={styles.verticalSpacer} /> </React.Fragment>
<View> ))}
<SessionCardStat
displayName="Median Run"
aggregateStat={medianRun}
numberFormat=""
/>
</View>
<View style={styles.verticalSpacer} />
<View>
<SessionCardStat
displayName="Time Played"
aggregateStat={duration}
numberFormat=""
/>
</View>
<View style={styles.verticalSpacer} />
<View>
<SessionCardStat
displayName="Shot Pacing"
aggregateStat={shotPacing}
numberFormat=""
/>
</View>
</View> </View>
); );
}; };
@ -48,14 +33,14 @@ const SessionCardStatsRowContainer = ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
statsContainer: { statsContainer: {
flexDirection: "row", flexDirection: "row",
justifyContent: "space-around", justifyContent: "space-between",
alignItems: "center",
margin: 16, margin: 16,
textAlign: "center",
}, },
verticalSpacer: { verticalSpacer: {
width: 0.5, width: 1,
backgroundColor: "#A3A3A3", backgroundColor: "#A3A3A3",
height: "75%", height: "100%",
marginHorizontal: 12, marginHorizontal: 12,
}, },
}); });

50
src/component/session-card/session-card.tsx
View File

@ -7,7 +7,7 @@ import SessionCardStatsRowContainer from "./session-card-stats-row-container";
const SessionCard = ({ const SessionCard = ({
playerName, playerName,
location, location,
type, gameType,
makePercent, makePercent,
medianRun, medianRun,
duration, duration,
@ -18,26 +18,23 @@ const SessionCard = ({
profileImageURL, profileImageURL,
locationIconURL, locationIconURL,
}) => { }) => {
console.log(imageURL);
return ( return (
<View> <View style={styles.card}>
<View style={styles.card}> <SessionCardHeader
<SessionCardHeader playerName={playerName}
playerName={playerName} location={location}
location={location} gameType={gameType}
type={type} locationIconURL={locationIconURL}
locationIconURL={locationIconURL} profileImageURL={profileImageURL}
profileImageURL={profileImageURL} />
/> <SessionCardStatsRowContainer
<SessionCardStatsRowContainer makePercent={makePercent}
makePercent={makePercent} medianRun={medianRun}
medianRun={medianRun} duration={duration}
duration={duration} shotPacing={shotPacing}
shotPacing={shotPacing} />
/> <Image source={imageURL} style={styles.image} />
<Image source={imageURL} style={styles.image} /> <SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
</View>
</View> </View>
); );
}; };
@ -45,6 +42,19 @@ const SessionCard = ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
backgroundColor: "white", backgroundColor: "white",
borderRadius: 8,
borderWidth: 1,
borderColor: "#ddd",
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
margin: 10,
overflow: "hidden",
}, },
image: { image: {
width: "100%", width: "100%",

2
src/screens/session-stack/session-feed.tsx
View File

@ -25,7 +25,7 @@ const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
<SessionCard <SessionCard
playerName="Dean Machine" playerName="Dean Machine"
location="Family Billiards, San Francisco" location="Family Billiards, San Francisco"
type="Straight Pool" gameType="Straight Pool"
makePercent="34" makePercent="34"
medianRun="7.3" medianRun="7.3"
duration="5:03:10" duration="5:03:10"