Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nik/210 link up full completion summary #212

Merged
merged 8 commits into from
Sep 15, 2024
Merged

Nik/210 link up full completion summary #212

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
88ac692
created completion summary page
nikvijay07 Sep 13, 2024
ca36771
ternaries to conditionally render certain stats
nikvijay07 Sep 13, 2024
5a9f124
misspelling
nikvijay07 Sep 13, 2024
bcd0f0a
uncommenting auth guard
nikvijay07 Sep 13, 2024
ed9c9dc
prettify
nikvijay07 Sep 13, 2024
dece0b4
ran yarn lint and yarn format
nikvijay07 Sep 13, 2024
315723f
delete unused style file
nikvijay07 Sep 13, 2024
21f66c0
removing header from page
nikvijay07 Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/components/ContinueButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,16 @@ import { RootStackParamList } from "../types";
import Button from "./Button";

type Props = {
title: string;
titleColor: string;
backgroundColor: string;
};

export default function ContinueButton({ titleColor, backgroundColor }: Props) {
export default function ContinueButton({
title,
titleColor,
backgroundColor,
}: Props) {
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
// const dispatch = useDispatch();
Expand All @@ -19,14 +24,16 @@ export default function ContinueButton({ titleColor, backgroundColor }: Props) {
return (
<Button
onPress={onPressButton}
title="Continue"
title={title}
titleStyle={{
color: `${titleColor}`,
fontSize: 16,
fontWeight: "600",
textAlign: "center",
}}
buttonStyle={{
marginTop: 20,
marginBottom: 20,
backgroundColor: `${backgroundColor}`,
borderRadius: 12,
justifyContent: "center",
Expand Down
233 changes: 233 additions & 0 deletions src/components/SubjectComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5";

const styles = StyleSheet.create({
whiteCircle: {
width: 39,
height: 38,
borderRadius: 19,
backgroundColor: "#F4F7FE",
justifyContent: "center",
alignItems: "center",
},
});

interface Props {
title: string;
iconName: string;
attempted: boolean;
questionsCompleted: number;
totalTimeSpent: number;
averageTimePerQuestion: number;
statColor: string;
}

export default function SubjectComponent({
title,
iconName,
attempted,
questionsCompleted,
totalTimeSpent,
averageTimePerQuestion,
statColor,
}: Props) {
function secondsToTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;

if (hours <= 0 && minutes <= 0) {
return `${secs} sec`;
}
if (hours <= 0) {
return `${minutes} min ${secs} sec`;
}
return `${hours} hr ${minutes} min ${secs} sec`;
}

return (
<View
style={{
display: "flex",
marginTop: 10,
width: "92%",
borderRadius: 12,
borderWidth: 1,
borderColor: "#E3EAFC",
backgroundColor: "#FFF",
paddingTop: "5%",
paddingBottom: "5%",
paddingLeft: "4%",
paddingRight: "4%",
}}
>
{attempted ? (
<>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
paddingBottom: "3%",
}}
>
<View style={styles.whiteCircle}>
<FontAwesome5Icon name={iconName} size={20} color={statColor} />
</View>
<Text
style={{
color: "#2B3674",
fontSize: 16,
fontStyle: "normal",
fontWeight: "600",
paddingLeft: "3%",
}}
>
{title}
</Text>
</View>

{questionsCompleted > 0 ? (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ended up making this a nested ternary so it is kind of hard to read.

<>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
paddingBottom: "3%",
}}
>
<Text
style={{
color: "#2B3674",
fontSize: 16,
fontStyle: "normal",
fontWeight: "600",
paddingTop: "3%",
}}
>
Questions Completed
</Text>
</View>
<Text
style={{
color: `${statColor}`,
fontSize: 36,
fontStyle: "normal",
fontWeight: "600",
}}
>
{questionsCompleted}
</Text>
</>
) : (
<></>
)}

{totalTimeSpent > 0 ? (
<>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
paddingBottom: "3%",
}}
>
<Text
style={{
color: "#2B3674",
fontSize: 16,
fontStyle: "normal",
fontWeight: "600",
paddingTop: "3%",
}}
>
Total Time Spent
</Text>
</View>
<Text
style={{
color: `${statColor}`,
fontSize: 36,
fontStyle: "normal",
fontWeight: "600",
}}
>
{secondsToTime(totalTimeSpent)}
</Text>
</>
) : (
<></>
)}
{averageTimePerQuestion > 0 ? (
<>
<Text
style={{
color: "#2B3674",
fontSize: 16,
fontStyle: "normal",
fontWeight: "600",
paddingTop: "3%",
}}
>
Average time per question
</Text>
{/* </View> */}
<Text
style={{
color: `${statColor}`,
fontSize: 36,
fontStyle: "normal",
fontWeight: "600",
paddingTop: "3%",
}}
>
{secondsToTime(averageTimePerQuestion)}
</Text>
</>
) : (
<></>
)}
</>
) : (
<>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
paddingBottom: "3%",
}}
>
<View style={styles.whiteCircle}>
<FontAwesome5Icon name={iconName} size={20} color={"#9CA5C2"} />
</View>
<Text
style={{
color: "#2B3674",
fontSize: 16,
fontStyle: "normal",
fontWeight: "600",
paddingLeft: "3%",
}}
>
{title}
</Text>
</View>
<Text
style={{
color: `#2B3674`,
fontSize: 16,
fontStyle: "normal",
fontWeight: "400",
}}
>
Please complete the {title} exercise to view the completion summary.
</Text>
</>
)}
</View>
);
}
Loading
Loading