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

added session feed page and session component with click to details

Browse Source
This commit is contained in:
Dean 2024-02-20 14:25:49 -08:00
parent fbbcd51df5
commit 24c14fb7ca
9 changed files with 81 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/session-card/session_footer.tsx → src/component/session-card/session-card-footer.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const SessionFooter = ({ sessionName, lastPlayed }) => {
const SessionCardFooter = ({ sessionName, lastPlayed }) => {
return (
<View>
<Text style={styles.sessionName}>{sessionName}</Text>
@ -28,4 +28,4 @@ const styles = StyleSheet.create({
},
});
export default SessionFooter;
export default SessionCardFooter;

4
src/component/session-card/session_header.tsx → src/component/session-card/session-card-header.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { Image, StyleSheet, Text, View } from "react-native";
const SessionHeader = ({
const SessionCardHeader = ({
playerName,
location,
type,
@ -67,4 +67,4 @@ const styles = StyleSheet.create({
},
});
export default SessionHeader;
export default SessionCardHeader;

4
src/component/session-card/aggregate_stat.tsx → src/component/session-card/session-card-stat.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const AggregateStat = ({ aggregateStat, displayName, numberFormat }) => {
const SessionCardStat = ({ aggregateStat, displayName, numberFormat }) => {
return (
<View>
<Text style={styles.statItem}>{displayName}</Text>
@ -26,4 +26,4 @@ const styles = StyleSheet.create({
},
});
export default AggregateStat;
export default SessionCardStat;

19
src/component/session-card/session_stats.tsx → src/component/session-card/session-card-stats-row-container.tsx
View File

@ -1,12 +1,17 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import AggregateStat from "./aggregate_stat";
import SessionCardStat from "./session-card-stat";
const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
const SessionCardStatsRowContainer = ({
makePercent,
medianRun,
duration,
shotPacing,
}) => {
return (
<View style={styles.statsContainer}>
<View>
<AggregateStat
<SessionCardStat
displayName="Make Percent"
aggregateStat={makePercent}
numberFormat="%"
@ -14,7 +19,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
</View>
<View style={styles.verticalSpacer} />
<View>
<AggregateStat
<SessionCardStat
displayName="Median Run"
aggregateStat={medianRun}
numberFormat=""
@ -22,7 +27,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
</View>
<View style={styles.verticalSpacer} />
<View>
<AggregateStat
<SessionCardStat
displayName="Time Played"
aggregateStat={duration}
numberFormat=""
@ -30,7 +35,7 @@ const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
</View>
<View style={styles.verticalSpacer} />
<View>
<AggregateStat
<SessionCardStat
displayName="Shot Pacing"
aggregateStat={shotPacing}
numberFormat=""
@ -55,4 +60,4 @@ const styles = StyleSheet.create({
},
});
export default SessionStats;
export default SessionCardStatsRowContainer;

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

@ -1,10 +1,10 @@
import React from "react";
import { Image, StyleSheet, View } from "react-native";
import SessionFooter from "./session_footer";
import SessionHeader from "./session_header";
import SessionStats from "./session_stats";
import SessionCardFooter from "./session-card-footer";
import SessionCardHeader from "./session-card-header";
import SessionCardStatsRowContainer from "./session-card-stats-row-container";
const StatsCard = ({
const SessionCard = ({
playerName,
location,
type,
@ -22,21 +22,21 @@ const StatsCard = ({
return (
<View style={styles.background}>
<View style={styles.card}>
<SessionHeader
<SessionCardHeader
playerName={playerName}
location={location}
type={type}
locationIconURL={locationIconURL}
profileImageURL={profileImageURL}
/>
<SessionStats
<SessionCardStatsRowContainer
makePercent={makePercent}
medianRun={medianRun}
duration={duration}
shotPacing={shotPacing}
/>
<Image source={imageURL} style={styles.image} />
<SessionFooter sessionName={sessionName} lastPlayed={lastPlayed} />
<SessionCardFooter sessionName={sessionName} lastPlayed={lastPlayed} />
</View>
</View>
);
@ -52,4 +52,4 @@ const styles = StyleSheet.create({
},
});
export default StatsCard;
export default SessionCard;

18
src/navigation/tab-navigator.tsx
View File

@ -3,7 +3,8 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Image } from "react-native";
import CameraScreen from "../component/video/camera";
import Profile from "../screens/profile";
import Session from "../screens/session";
import Session from "../screens/session-stack/session";
import SessionFeed from "../screens/session-stack/session-feed";
import VideoDetails from "../screens/video-stack/video-details";
import { tabIconColors } from "../styles";
@ -14,7 +15,7 @@ const RecordStack = createNativeStackNavigator();
// tabBarIcon configuration should live on separate file and contain all logic/icons/rendering for the Tabs
const tabIcons = {
Session: <Image source={Icon} style={{ width: 20, height: 20 }} />,
SessionStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
VideoStack: <Image source={Icon} style={{ width: 20, height: 20 }} />,
Profile: <Image source={Icon} style={{ width: 20, height: 20 }} />,
};
@ -37,6 +38,15 @@ function VideoTabStack() {
);
}
function SessionTabStack() {
return (
<RecordStack.Navigator screenOptions={{ headerShown: false }}>
<RecordStack.Screen name="SessionFeed" component={SessionFeed} />
<RecordStack.Screen name="Session" component={Session} />
</RecordStack.Navigator>
);
}
/**
* Functional component creating a tab navigator with called
* Uses React Navigation's Tab.Navigator. Customizes tab bar appearance and icons.
@ -58,8 +68,8 @@ export default function Tabs(): React.JSX.Element {
})}
>
<Tab.Screen
name="Session"
component={Session}
name="SessionStack"
component={SessionTabStack}
options={{ tabBarLabel: "Session" }}
/>
<Tab.Screen

35
src/screens/session-feed.tsx
View File

@ -1,35 +0,0 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import sampleSessionImage from "../assets/sample_session.png";
import StatsCard from "../component/session-card/session-card.tsx";
const SessionFeed: React.FC = () => {
return (
<View style={styles.container}>
<StatsCard
playerName="Dean Machine"
location="Family Billiards, San Francisco"
type="Straight Pool"
makePercent="34"
medianRun="7.3"
duration="5:03:10"
shotPacing="0:00:26"
imageURL={sampleSessionImage}
sessionName="Dusting off the chalk"
lastPlayed="Today at 2:37pm"
profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f0f0f0", // Light gray background
alignItems: "center",
},
});
export default SessionFeed;

37
src/screens/session-stack/session-feed.tsx Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import sampleSessionImage from "../../assets/sample_session.png";
import SessionCard from "../../component/session-card/session-card.tsx";
const SessionFeed: React.FC = ({ navigation }) => {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => navigation.push("Session")}>
<SessionCard
playerName="Dean Machine"
location="Family Billiards, San Francisco"
type="Straight Pool"
makePercent="34"
medianRun="7.3"
duration="5:03:10"
shotPacing="0:00:26"
imageURL={sampleSessionImage}
sessionName="Dusting off the chalk"
lastPlayed="Today at 2:37pm"
profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
/>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f0f0f0", // Light gray background
alignItems: "center",
},
});
export default SessionFeed;

8
src/screens/session.tsx → src/screens/session-stack/session.tsx
View File

@ -3,10 +3,10 @@ import { StyleSheet, View } from "react-native";
import {
graph_data_two_measures,
line_chart_two_y_data,
} from "../../test/mock/charts/mock-data";
import BarGraph from "../component/charts/bar-graph/bar-graph";
import ChartContainer from "../component/charts/container/chart-container";
import LineGraph from "../component/charts/line-graph/line-graph";
} from "../../../test/mock/charts/mock-data";
import BarGraph from "../../component/charts/bar-graph/bar-graph";
import ChartContainer from "../../component/charts/container/chart-container";
import LineGraph from "../../component/charts/line-graph/line-graph";
export default function SessionScreen() {
return (