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: {
fontSize: 18,
paddingTop: 5,
marginLeft: 16,
marginRight: 16,
marginHorizontal: 16,
},
sessionDatetime: {
fontSize: 10,
color: "#A3A3A3",
marginLeft: 16,
marginRight: 16,
marginBottom: 16,
marginHorizontal: 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 = ({
playerName,
location,
type,
gameType,
locationIconURL,
profileImageURL,
}) => {
return (
<View style={styles.headerContainer}>
<View style={styles.headerProfileImage}>
<Image
source={{ uri: profileImageURL }}
style={styles.headerProfileImage}
/>
</View>
<Image
style={styles.headerProfileImage}
source={{ uri: profileImageURL }}
accessibilityLabel="Profile image"
/>
<View style={styles.headerText}>
<Text style={styles.playerName}>{playerName}</Text>
<View style={styles.locationContainer}>
<Image source={{ uri: locationIconURL }} style={styles.icon} />
<Text style={styles.locationText}>{location}</Text>
</View>
<Text style={styles.gameType}>{type}</Text>
<Text style={styles.gameType}>{gameType}</Text>
</View>
</View>
);
@ -32,8 +31,7 @@ const styles = StyleSheet.create({
headerContainer: {
flexDirection: "row",
alignItems: "center",
marginLeft: 16,
marginRight: 16,
marginHorizontal: 16,
},
headerProfileImage: {

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

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

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

@ -8,39 +8,24 @@ const SessionCardStatsRowContainer = ({
duration,
shotPacing,
}) => {
const stats = [
{ displayName: "Make Percent", sessionStat: makePercent },
{ displayName: "Median Run", sessionStat: medianRun },
{ displayName: "Time Played", sessionStat: duration },
{ displayName: "Shot Pacing", sessionStat: shotPacing },
];
return (
<View style={styles.statsContainer}>
<View>
<SessionCardStat
displayName="Make Percent"
aggregateStat={makePercent}
numberFormat="%"
/>
</View>
<View style={styles.verticalSpacer} />
<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>
{stats.map((stat, index) => (
<React.Fragment key={index}>
<SessionCardStat
displayName={stat.displayName}
sessionStat={stat.sessionStat}
/>
{index < stats.length - 1 && <View style={styles.verticalSpacer} />}
</React.Fragment>
))}
</View>
);
};
@ -48,14 +33,14 @@ const SessionCardStatsRowContainer = ({
const styles = StyleSheet.create({
statsContainer: {
flexDirection: "row",
justifyContent: "space-around",
justifyContent: "space-between",
alignItems: "center",
margin: 16,
textAlign: "center",
},
verticalSpacer: {
width: 0.5,
width: 1,
backgroundColor: "#A3A3A3",
height: "75%",
height: "100%",
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 = ({
playerName,
location,
type,
gameType,
makePercent,
medianRun,
duration,
@ -18,26 +18,23 @@ const SessionCard = ({
profileImageURL,
locationIconURL,
}) => {
console.log(imageURL);
return (
<View>
<View style={styles.card}>
<SessionCardHeader
playerName={playerName}
location={location}
type={type}
locationIconURL={locationIconURL}
profileImageURL={profileImageURL}
/>
<SessionCardStatsRowContainer
makePercent={makePercent}
medianRun={medianRun}
duration={duration}
shotPacing={shotPacing}
/>
<Image source={imageURL} style={styles.image} />
<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
</View>
<View style={styles.card}>
<SessionCardHeader
playerName={playerName}
location={location}
gameType={gameType}
locationIconURL={locationIconURL}
profileImageURL={profileImageURL}
/>
<SessionCardStatsRowContainer
makePercent={makePercent}
medianRun={medianRun}
duration={duration}
shotPacing={shotPacing}
/>
<Image source={imageURL} style={styles.image} />
<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
</View>
);
};
@ -45,6 +42,19 @@ const SessionCard = ({
const styles = StyleSheet.create({
card: {
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: {
width: "100%",

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

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